@elliemae/ds-chat 3.5.0-rc.2 → 3.5.0-rc.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ChatDataTestids.js +4 -1
- package/dist/cjs/ChatDataTestids.js.map +1 -1
- package/dist/cjs/exported-related/bubble/ChatBubble.js +4 -1
- package/dist/cjs/exported-related/bubble/ChatBubble.js.map +2 -2
- package/dist/cjs/exported-related/bubble/ChatBubbleArrow.js +4 -1
- package/dist/cjs/exported-related/bubble/ChatBubbleArrow.js.map +2 -2
- package/dist/cjs/exported-related/bubble/index.js +4 -1
- package/dist/cjs/exported-related/bubble/index.js.map +1 -1
- package/dist/cjs/exported-related/bubble/props.js +4 -1
- package/dist/cjs/exported-related/bubble/props.js.map +1 -1
- package/dist/cjs/exported-related/bubble/styled.js +4 -1
- package/dist/cjs/exported-related/bubble/styled.js.map +1 -1
- package/dist/cjs/exported-related/chat-card/ChatCard.js +4 -1
- package/dist/cjs/exported-related/chat-card/ChatCard.js.map +2 -2
- package/dist/cjs/exported-related/chat-card/index.js +4 -1
- package/dist/cjs/exported-related/chat-card/index.js.map +1 -1
- package/dist/cjs/exported-related/chat-card/props.js +4 -1
- package/dist/cjs/exported-related/chat-card/props.js.map +1 -1
- package/dist/cjs/exported-related/chat-card/styled.js +4 -1
- package/dist/cjs/exported-related/chat-card/styled.js.map +1 -1
- package/dist/cjs/exported-related/chat-container-header/ChatContainerHeader.js +4 -1
- package/dist/cjs/exported-related/chat-container-header/ChatContainerHeader.js.map +2 -2
- package/dist/cjs/exported-related/chat-container-header/props.js +4 -1
- package/dist/cjs/exported-related/chat-container-header/props.js.map +1 -1
- package/dist/cjs/exported-related/chat-container-header/styled.js +4 -1
- package/dist/cjs/exported-related/chat-container-header/styled.js.map +1 -1
- package/dist/cjs/exported-related/chat-empty-state/ChatEmptyState.js +23 -17
- package/dist/cjs/exported-related/chat-empty-state/ChatEmptyState.js.map +2 -2
- package/dist/cjs/exported-related/chat-empty-state/props.js +4 -1
- package/dist/cjs/exported-related/chat-empty-state/props.js.map +1 -1
- package/dist/cjs/exported-related/chat-empty-state/styled.js +4 -1
- package/dist/cjs/exported-related/chat-empty-state/styled.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/SideBarChat.js +11 -5
- package/dist/cjs/exported-related/chat-sidebar/SideBarChat.js.map +2 -2
- package/dist/cjs/exported-related/chat-sidebar/index.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/index.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/props.js +8 -3
- package/dist/cjs/exported-related/chat-sidebar/props.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/SidebarButton.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/SidebarButton.js.map +2 -2
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/index.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/index.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/props.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/props.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/styled.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/styled.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/styled.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/styled.js.map +1 -1
- package/dist/cjs/exported-related/floating-button/FloatingButton.js +4 -1
- package/dist/cjs/exported-related/floating-button/FloatingButton.js.map +2 -2
- package/dist/cjs/exported-related/floating-button/index.js +4 -1
- package/dist/cjs/exported-related/floating-button/index.js.map +1 -1
- package/dist/cjs/exported-related/floating-button/props.js +4 -1
- package/dist/cjs/exported-related/floating-button/props.js.map +1 -1
- package/dist/cjs/exported-related/floating-button/styled.js +4 -1
- package/dist/cjs/exported-related/floating-button/styled.js.map +1 -1
- package/dist/cjs/exported-related/floating-container/styled.js +4 -1
- package/dist/cjs/exported-related/floating-container/styled.js.map +1 -1
- package/dist/cjs/exported-related/grid-influencer/InfluencerContainer.js +12 -6
- package/dist/cjs/exported-related/grid-influencer/InfluencerContainer.js.map +2 -2
- package/dist/cjs/exported-related/grid-influencer/styled.js +4 -1
- package/dist/cjs/exported-related/grid-influencer/styled.js.map +1 -1
- package/dist/cjs/exported-related/index.js +4 -1
- package/dist/cjs/exported-related/index.js.map +1 -1
- package/dist/cjs/exported-related/message-delimiter/MessageDelimiter.js +4 -1
- package/dist/cjs/exported-related/message-delimiter/MessageDelimiter.js.map +2 -2
- package/dist/cjs/exported-related/message-delimiter/index.js +4 -1
- package/dist/cjs/exported-related/message-delimiter/index.js.map +1 -1
- package/dist/cjs/exported-related/message-delimiter/props.js +7 -2
- package/dist/cjs/exported-related/message-delimiter/props.js.map +1 -1
- package/dist/cjs/exported-related/message-delimiter/styled.js +4 -1
- package/dist/cjs/exported-related/message-delimiter/styled.js.map +1 -1
- package/dist/cjs/exported-related/system-message/SystemMessage.js +4 -1
- package/dist/cjs/exported-related/system-message/SystemMessage.js.map +2 -2
- package/dist/cjs/exported-related/system-message/index.js +4 -1
- package/dist/cjs/exported-related/system-message/index.js.map +1 -1
- package/dist/cjs/exported-related/system-message/props.js +4 -1
- package/dist/cjs/exported-related/system-message/props.js.map +1 -1
- package/dist/cjs/exported-related/system-message/style.js +4 -1
- package/dist/cjs/exported-related/system-message/style.js.map +1 -1
- package/dist/cjs/exported-related/tile-button/TileButton.js +68 -59
- package/dist/cjs/exported-related/tile-button/TileButton.js.map +2 -2
- package/dist/cjs/exported-related/tile-button/index.js +4 -1
- package/dist/cjs/exported-related/tile-button/index.js.map +1 -1
- package/dist/cjs/exported-related/tile-button/props.js +7 -2
- package/dist/cjs/exported-related/tile-button/props.js.map +1 -1
- package/dist/cjs/exported-related/tile-button/styled.js +4 -1
- package/dist/cjs/exported-related/tile-button/styled.js.map +1 -1
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js +10 -4
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js.map +2 -2
- package/dist/cjs/parts/chat-composer/index.js +4 -1
- package/dist/cjs/parts/chat-composer/index.js.map +1 -1
- package/dist/cjs/parts/chat-composer/styled.js +4 -1
- package/dist/cjs/parts/chat-composer/styled.js.map +1 -1
- package/dist/cjs/parts/chat-container/ChatContainer.js +34 -25
- package/dist/cjs/parts/chat-container/ChatContainer.js.map +2 -2
- package/dist/cjs/parts/chat-container/styled.js +4 -1
- package/dist/cjs/parts/chat-container/styled.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +38 -32
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/index.js +4 -1
- package/dist/cjs/parts/chat-container-messages-list/index.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/styled.js +4 -1
- package/dist/cjs/parts/chat-container-messages-list/styled.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useActionRef.js +4 -1
- package/dist/cjs/parts/chat-container-messages-list/useActionRef.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js +15 -9
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +53 -38
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/useGetNewMessages.js +4 -1
- package/dist/cjs/parts/chat-container-messages-list/useGetNewMessages.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useGlobalEventListener.js +4 -1
- package/dist/cjs/parts/chat-container-messages-list/useGlobalEventListener.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js +95 -86
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js.map +2 -2
- package/dist/cjs/parts/index.js +4 -1
- package/dist/cjs/parts/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +35 -14
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/styled.js +4 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/cjs/tests/utils.js +4 -1
- package/dist/cjs/tests/utils.js.map +1 -1
- package/dist/esm/ChatDataTestids.js.map +1 -1
- package/dist/esm/exported-related/bubble/ChatBubble.js.map +2 -2
- package/dist/esm/exported-related/bubble/ChatBubbleArrow.js.map +2 -2
- package/dist/esm/exported-related/bubble/index.js.map +1 -1
- package/dist/esm/exported-related/bubble/props.js.map +1 -1
- package/dist/esm/exported-related/bubble/styled.js.map +1 -1
- package/dist/esm/exported-related/chat-card/ChatCard.js.map +2 -2
- package/dist/esm/exported-related/chat-card/index.js.map +1 -1
- package/dist/esm/exported-related/chat-card/props.js.map +1 -1
- package/dist/esm/exported-related/chat-card/styled.js.map +1 -1
- package/dist/esm/exported-related/chat-container-header/ChatContainerHeader.js.map +2 -2
- package/dist/esm/exported-related/chat-container-header/props.js.map +1 -1
- package/dist/esm/exported-related/chat-container-header/styled.js.map +1 -1
- package/dist/esm/exported-related/chat-empty-state/ChatEmptyState.js +19 -16
- package/dist/esm/exported-related/chat-empty-state/ChatEmptyState.js.map +2 -2
- package/dist/esm/exported-related/chat-empty-state/props.js.map +1 -1
- package/dist/esm/exported-related/chat-empty-state/styled.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/SideBarChat.js +7 -4
- package/dist/esm/exported-related/chat-sidebar/SideBarChat.js.map +2 -2
- package/dist/esm/exported-related/chat-sidebar/index.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/props.js +4 -2
- package/dist/esm/exported-related/chat-sidebar/props.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/SidebarButton.js.map +2 -2
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/index.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/props.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/styled.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/styled.js.map +1 -1
- package/dist/esm/exported-related/floating-button/FloatingButton.js.map +2 -2
- package/dist/esm/exported-related/floating-button/index.js.map +1 -1
- package/dist/esm/exported-related/floating-button/props.js.map +1 -1
- package/dist/esm/exported-related/floating-button/styled.js.map +1 -1
- package/dist/esm/exported-related/floating-container/styled.js.map +1 -1
- package/dist/esm/exported-related/grid-influencer/InfluencerContainer.js +8 -5
- package/dist/esm/exported-related/grid-influencer/InfluencerContainer.js.map +2 -2
- package/dist/esm/exported-related/grid-influencer/styled.js.map +1 -1
- package/dist/esm/exported-related/index.js.map +1 -1
- package/dist/esm/exported-related/message-delimiter/MessageDelimiter.js.map +2 -2
- package/dist/esm/exported-related/message-delimiter/index.js.map +1 -1
- package/dist/esm/exported-related/message-delimiter/props.js +3 -1
- package/dist/esm/exported-related/message-delimiter/props.js.map +1 -1
- package/dist/esm/exported-related/message-delimiter/styled.js.map +1 -1
- package/dist/esm/exported-related/system-message/SystemMessage.js.map +2 -2
- package/dist/esm/exported-related/system-message/index.js.map +1 -1
- package/dist/esm/exported-related/system-message/props.js.map +1 -1
- package/dist/esm/exported-related/system-message/style.js.map +1 -1
- package/dist/esm/exported-related/tile-button/TileButton.js +64 -58
- package/dist/esm/exported-related/tile-button/TileButton.js.map +2 -2
- package/dist/esm/exported-related/tile-button/index.js.map +1 -1
- package/dist/esm/exported-related/tile-button/props.js +3 -1
- package/dist/esm/exported-related/tile-button/props.js.map +1 -1
- package/dist/esm/exported-related/tile-button/styled.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js +6 -3
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js.map +2 -2
- package/dist/esm/parts/chat-composer/index.js.map +1 -1
- package/dist/esm/parts/chat-composer/styled.js.map +1 -1
- package/dist/esm/parts/chat-container/ChatContainer.js +30 -24
- package/dist/esm/parts/chat-container/ChatContainer.js.map +2 -2
- package/dist/esm/parts/chat-container/styled.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +34 -31
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/index.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/styled.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useActionRef.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js +11 -8
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +49 -37
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/useGetNewMessages.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useGlobalEventListener.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js +91 -85
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js.map +2 -2
- package/dist/esm/parts/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +31 -13
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/esm/tests/utils.js.map +1 -1
- package/package.json +10 -10
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useActionRef.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { useVirtual } from 'react-virtual';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseActionRefArgs = {\n actionRef: DSChatT.ActionRef;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n onScrollStop: DebouncedFunc<() => string[]>;\n onlyFocus: (index: number) => void;\n scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n};\n\nexport const useActionRef = ({\n actionRef,\n useVirtualHelpers: { scrollToIndex: vScroll },\n virtualListRef,\n onScrollStop,\n onlyFocus,\n scrollAndFocus,\n}: UseActionRefArgs) => {\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n const scrollToIndex: DSChatT.ActionRef['current']['scrollToIndex'] = (index, opts = { align: 'center' }) => {\n vScroll(index, opts);\n onScrollStop();\n };\n const focusToIndex: DSChatT.ActionRef['current']['focusToIndex'] = (index, opts = { align: 'center' }) => {\n scrollAndFocus(index, opts);\n };\n const focusToList = () => {\n virtualListRef.current?.focus();\n };\n\n actionRef.current.scrollToIndex = scrollToIndex;\n actionRef.current.getMessagesInView = onScrollStop;\n // I have no idea what the next line refeers to\n // keeping this from original code to avoid any possible breaking-change\n onScrollStop(); // init useMemo due to debounce use.\n actionRef.current.focusToIndex = focusToIndex;\n actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n actionRef.current.focusToList = focusToList;\n }\n }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
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;AACF,MAAwB;AACtB,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,gBAAQ,OAAO,IAAI;AACnB,qBAAa;AAAA,MACf;AACA,YAAM,eAA6D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AACxG,uBAAe,OAAO,IAAI;AAAA,MAC5B;AACA,YAAM,cAAc,MAAM;AACxB,uBAAe,SAAS,MAAM;AAAA,MAChC;AAEA,gBAAU,QAAQ,gBAAgB;AAClC,gBAAU,QAAQ,oBAAoB;AAGtC,mBAAa;AACb,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,cAAc,WAAW,gBAAgB,SAAS,cAAc,CAAC;AAClF;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -66,14 +66,17 @@ const useChatContainerMessageList = (props) => {
|
|
|
66
66
|
onlyFocus,
|
|
67
67
|
onScrollStop
|
|
68
68
|
});
|
|
69
|
-
return React2.useMemo(
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
69
|
+
return React2.useMemo(
|
|
70
|
+
() => ({
|
|
71
|
+
propsWithDefault,
|
|
72
|
+
globalAttributes,
|
|
73
|
+
useVirtualHelpers,
|
|
74
|
+
loadMoreRef,
|
|
75
|
+
virtualListRef,
|
|
76
|
+
...keyboardMethods
|
|
77
|
+
}),
|
|
78
|
+
[globalAttributes, keyboardMethods, propsWithDefault, useVirtualHelpers, loadMoreRef, virtualListRef]
|
|
79
|
+
);
|
|
77
80
|
};
|
|
78
81
|
export {
|
|
79
82
|
useChatContainerMessageList
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useChatContainerMessageList.ts"],
|
|
4
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-utilities';\nimport { useVirtual } from 'react-virtual';\nimport { useActionRef } from './useActionRef';\nimport { useGlobalEventListener } from './useGlobalEventListener';\nimport { useKeyboard } from './useKeyboard';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers';\nimport { DSChatT, ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types';\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>(propsWithDefault, ChatContainerMessagesListPropTypes);\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;
|
|
6
|
-
"names": []
|
|
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;AACzC,SAAkB,oCAAoC,gCAAgC;AAEtF,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;AAAG,YAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ;AAAG,YAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,mBAAmB,6BAAwD,OAAO,wBAAwB;AAChH,iCAA0D,kBAAkB,kCAAkC;AAC9G,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,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;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -7,47 +7,59 @@ const useFocusAndScrollHelpers = ({
|
|
|
7
7
|
pendingOnScroll,
|
|
8
8
|
virtualListRef
|
|
9
9
|
}) => {
|
|
10
|
-
const onScrollStop = React2.useMemo(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
onScrollEnds
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
virtualListRef
|
|
33
|
-
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
10
|
+
const onScrollStop = React2.useMemo(
|
|
11
|
+
() => debounce(() => {
|
|
12
|
+
if (document.visibilityState === "hidden") {
|
|
13
|
+
pendingOnScroll.current = true;
|
|
14
|
+
return [];
|
|
15
|
+
}
|
|
16
|
+
if (!virtualListRef.current)
|
|
17
|
+
return [];
|
|
18
|
+
pendingOnScroll.current = false;
|
|
19
|
+
const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};
|
|
20
|
+
const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
|
|
21
|
+
const indexList = [];
|
|
22
|
+
list.forEach((item) => {
|
|
23
|
+
const { top: itemTop } = item.getBoundingClientRect();
|
|
24
|
+
const itemPadding = 10;
|
|
25
|
+
if (itemTop + itemPadding < bottom && itemTop + itemPadding > top)
|
|
26
|
+
indexList.push(item.dataset.index || "");
|
|
27
|
+
});
|
|
28
|
+
if (onScrollEnds)
|
|
29
|
+
onScrollEnds(indexList);
|
|
30
|
+
return indexList;
|
|
31
|
+
}, 500),
|
|
32
|
+
[onScrollEnds, pendingOnScroll, virtualListRef]
|
|
33
|
+
);
|
|
34
|
+
const onlyFocus = React2.useCallback(
|
|
35
|
+
(index) => {
|
|
36
|
+
virtualListRef.current?.querySelector(`[data-index="${index}"]`)?.focus();
|
|
37
|
+
},
|
|
38
|
+
[virtualListRef]
|
|
39
|
+
);
|
|
40
|
+
const scrollAndFocus = React2.useCallback(
|
|
41
|
+
(index, opts = { align: "center" }) => {
|
|
42
|
+
vScroll(index, opts);
|
|
43
|
+
setTimeout(() => {
|
|
44
|
+
onlyFocus(index);
|
|
45
|
+
}, 300);
|
|
46
|
+
onScrollStop();
|
|
47
|
+
},
|
|
48
|
+
[onScrollStop, onlyFocus, vScroll]
|
|
49
|
+
);
|
|
41
50
|
const checkPendingOnScroll = React2.useCallback(() => {
|
|
42
51
|
if (pendingOnScroll.current === true)
|
|
43
52
|
onScrollStop();
|
|
44
53
|
}, [onScrollStop, pendingOnScroll]);
|
|
45
|
-
return React2.useMemo(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
54
|
+
return React2.useMemo(
|
|
55
|
+
() => ({
|
|
56
|
+
onScrollStop,
|
|
57
|
+
onlyFocus,
|
|
58
|
+
scrollAndFocus,
|
|
59
|
+
checkPendingOnScroll
|
|
60
|
+
}),
|
|
61
|
+
[onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll]
|
|
62
|
+
);
|
|
51
63
|
};
|
|
52
64
|
export {
|
|
53
65
|
useFocusAndScrollHelpers
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useFocusAndScrollHelpers.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { debounce } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseFocusAndScrollHelpersArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n pendingOnScroll: React.MutableRefObject<boolean>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n};\n\nexport const useFocusAndScrollHelpers = ({\n propsWithDefault: { onScrollEnds },\n useVirtualHelpers: { scrollToIndex: vScroll },\n pendingOnScroll,\n virtualListRef,\n}: UseFocusAndScrollHelpersArgs) => {\n const onScrollStop = React.useMemo(\n () =>\n debounce((): string[] => {\n if (document.visibilityState === 'hidden') {\n pendingOnScroll.current = true;\n return [];\n }\n if (!virtualListRef.current) return [];\n pendingOnScroll.current = false;\n const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};\n\n const list = virtualListRef.current.querySelectorAll<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n const indexList: Array<string> = [];\n list.forEach((item: HTMLElement) => {\n const { top: itemTop } = item.getBoundingClientRect();\n\n const itemPadding = 10;\n if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || '');\n });\n if (onScrollEnds) onScrollEnds(indexList);\n return indexList;\n }, 500),\n [onScrollEnds, pendingOnScroll, virtualListRef],\n );\n\n const onlyFocus = React.useCallback(\n (index: number | string) => {\n (virtualListRef.current?.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement)?.focus();\n },\n [virtualListRef],\n );\n\n const scrollAndFocus = React.useCallback(\n (index: number, opts = { align: 'center' } as DSChatT.ScrollToIndexOptions) => {\n vScroll(index, opts);\n setTimeout(() => {\n onlyFocus(index);\n }, 300);\n onScrollStop();\n },\n [onScrollStop, onlyFocus, vScroll],\n );\n\n const checkPendingOnScroll = React.useCallback(() => {\n if (pendingOnScroll.current === true) onScrollStop();\n }, [onScrollStop, pendingOnScroll]);\n\n return React.useMemo(\n () => ({\n onScrollStop,\n onlyFocus,\n scrollAndFocus,\n checkPendingOnScroll,\n }),\n [onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
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;AAAS,eAAO,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;AAAK,oBAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,MAC5G,CAAC;AACD,UAAI;AAAc,qBAAa,SAAS;AACxC,aAAO;AAAA,IACT,GAAG,GAAG;AAAA,IACR,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,QAAM,YAAYA,OAAM;AAAA,IACtB,CAAC,UAA2B;AAC1B,MAAC,eAAe,SAAS,cAAc,gBAAgB,SAAS,GAAsB,MAAM;AAAA,IAC9F;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,iBAAiBA,OAAM;AAAA,IAC3B,CAAC,OAAe,OAAO,EAAE,OAAO,SAAS,MAAsC;AAC7E,cAAQ,OAAO,IAAI;AACnB,iBAAW,MAAM;AACf,kBAAU,KAAK;AAAA,MACjB,GAAG,GAAG;AACN,mBAAa;AAAA,IACf;AAAA,IACA,CAAC,cAAc,WAAW,OAAO;AAAA,EACnC;AAEA,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY;AAAM,mBAAa;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;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useGetNewMessages.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState } from 'react';\nimport { BubblePropsT } from '../../exported-related/bubble/props';\n\nexport const useGetNewMessages = (messages: BubblePropsT[]) => {\n const [seenMessages, setSeenMessages] = useState<Record<BubblePropsT['dsId'], true>>({});\n const newMessages = useMemo(() => {\n const list: BubblePropsT[] = [];\n messages.forEach((message) => {\n if (!(message.dsId in seenMessages)) {\n list.push(message);\n }\n });\n setSeenMessages(Object.fromEntries(messages.map((m) => [m.dsId, true])));\n return list;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [messages]);\n\n return newMessages;\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,gBAAgB;AAG3B,MAAM,oBAAoB,CAAC,aAA6B;AAC7D,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6C,CAAC,CAAC;AACvF,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,OAAuB,CAAC;AAC9B,aAAS,QAAQ,CAAC,YAAY;AAC5B,UAAI,EAAE,QAAQ,QAAQ,eAAe;AACnC,aAAK,KAAK,OAAO;AAAA,MACnB;AAAA,IACF,CAAC;AACD,oBAAgB,OAAO,YAAY,SAAS,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;AACvE,WAAO;AAAA,EAET,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useGlobalEventListener.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { type DSChatT } from '../../react-desc-prop-types';\n\ntype UseGlobalEventListenerArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n onScrollStop: DebouncedFunc<() => string[]>;\n checkPendingOnScroll: GenericFunc;\n};\n\nexport const useGlobalEventListener = ({\n propsWithDefault: { onScrollEnds },\n virtualListRef,\n onScrollStop,\n checkPendingOnScroll,\n}: UseGlobalEventListenerArgs) => {\n React.useEffect(() => {\n let handlerCallback: ReturnType<typeof setTimeout>;\n const localVirtualRef = virtualListRef.current;\n const onScroll = () => {\n if (handlerCallback) clearTimeout(handlerCallback);\n handlerCallback = setTimeout(onScrollStop, 300);\n };\n if (onScrollEnds) {\n virtualListRef.current?.addEventListener('scroll', onScroll);\n }\n document.addEventListener('visibilitychange', checkPendingOnScroll);\n return () => {\n if (handlerCallback) clearTimeout(handlerCallback);\n if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);\n document.removeEventListener('visibilitychange', checkPendingOnScroll);\n };\n }, [onScrollStop, onScrollEnds, checkPendingOnScroll, virtualListRef]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAWX,MAAM,yBAAyB,CAAC;AAAA,EACrC,kBAAkB,EAAE,aAAa;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI;AACJ,UAAM,kBAAkB,eAAe;AACvC,UAAM,WAAW,MAAM;AACrB,UAAI;AAAiB,qBAAa,eAAe;AACjD,wBAAkB,WAAW,cAAc,GAAG;AAAA,IAChD;AACA,QAAI,cAAc;AAChB,qBAAe,SAAS,iBAAiB,UAAU,QAAQ;AAAA,IAC7D;AACA,aAAS,iBAAiB,oBAAoB,oBAAoB;AAClE,WAAO,MAAM;AACX,UAAI;AAAiB,qBAAa,eAAe;AACjD,UAAI;AAAc,wBAAgB,oBAAoB,UAAU,QAAQ;AACxE,eAAS,oBAAoB,oBAAoB,oBAAoB;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,cAAc,cAAc,sBAAsB,cAAc,CAAC;AACvE;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -10,103 +10,109 @@ const useKeyboard = ({
|
|
|
10
10
|
onlyFocus,
|
|
11
11
|
onScrollStop
|
|
12
12
|
}) => {
|
|
13
|
-
const handleKey = React2.useCallback(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
if (index && index > 0) {
|
|
22
|
-
(virtualListRef.current?.querySelector(`[data-index="${index - 1}"]`)).focus();
|
|
23
|
-
} else if (hasMoreItems === "top") {
|
|
24
|
-
loadMoreRef.current?.focus();
|
|
25
|
-
}
|
|
26
|
-
break;
|
|
27
|
-
case "ArrowDown":
|
|
28
|
-
e.preventDefault();
|
|
29
|
-
if (messages?.length && isIndexNumber && index < messages.length - 1) {
|
|
30
|
-
(virtualListRef.current?.querySelector(`[data-index="${index + 1}"]`)).focus();
|
|
31
|
-
}
|
|
32
|
-
break;
|
|
33
|
-
case "Home":
|
|
34
|
-
e.preventDefault();
|
|
35
|
-
scrollAndFocus(0);
|
|
36
|
-
break;
|
|
37
|
-
case "End":
|
|
38
|
-
e.preventDefault();
|
|
39
|
-
if (messages?.length)
|
|
40
|
-
scrollAndFocus(messages.length - 1);
|
|
41
|
-
break;
|
|
42
|
-
case "Tab":
|
|
43
|
-
if (hasMoreItems === "bottom" && !e.shiftKey) {
|
|
13
|
+
const handleKey = React2.useCallback(
|
|
14
|
+
(e) => {
|
|
15
|
+
const { key, currentTarget } = e;
|
|
16
|
+
const index = currentTarget.dataset?.index ? Number(currentTarget.dataset.index) : void 0;
|
|
17
|
+
const isIndexNumber = getIsNumber(index);
|
|
18
|
+
e.stopPropagation();
|
|
19
|
+
switch (key) {
|
|
20
|
+
case "ArrowUp":
|
|
44
21
|
e.preventDefault();
|
|
45
|
-
|
|
46
|
-
|
|
22
|
+
if (index && index > 0) {
|
|
23
|
+
(virtualListRef.current?.querySelector(`[data-index="${index - 1}"]`)).focus();
|
|
24
|
+
} else if (hasMoreItems === "top") {
|
|
25
|
+
loadMoreRef.current?.focus();
|
|
26
|
+
}
|
|
27
|
+
break;
|
|
28
|
+
case "ArrowDown":
|
|
47
29
|
e.preventDefault();
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
if (bannerPosition) {
|
|
51
|
-
e.preventDefault();
|
|
52
|
-
bannerRef?.current?.focusOnWrapper();
|
|
30
|
+
if (messages?.length && isIndexNumber && index < messages.length - 1) {
|
|
31
|
+
(virtualListRef.current?.querySelector(`[data-index="${index + 1}"]`)).focus();
|
|
53
32
|
}
|
|
54
|
-
|
|
33
|
+
break;
|
|
34
|
+
case "Home":
|
|
35
|
+
e.preventDefault();
|
|
36
|
+
scrollAndFocus(0);
|
|
37
|
+
break;
|
|
38
|
+
case "End":
|
|
55
39
|
e.preventDefault();
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
break;
|
|
61
|
-
}
|
|
62
|
-
}, [hasMoreItems, messages.length, scrollAndFocus, virtualListRef, loadMoreRef, bannerPosition, bannerRef]);
|
|
63
|
-
const handleListKey = React2.useCallback((e) => {
|
|
64
|
-
const { key } = e;
|
|
65
|
-
switch (key) {
|
|
66
|
-
case "ArrowUp":
|
|
67
|
-
e.preventDefault();
|
|
68
|
-
if (document.activeElement !== loadMoreRef.current) {
|
|
69
|
-
onlyFocus(onScrollStop()?.shift());
|
|
70
|
-
}
|
|
71
|
-
break;
|
|
72
|
-
case "ArrowDown":
|
|
73
|
-
e.preventDefault();
|
|
74
|
-
if (document.activeElement === loadMoreRef.current) {
|
|
75
|
-
virtualListRef.current?.querySelector(`[data-index="0"]`)?.focus();
|
|
76
|
-
} else {
|
|
77
|
-
onlyFocus(onScrollStop()?.pop());
|
|
78
|
-
}
|
|
79
|
-
break;
|
|
80
|
-
case "Home":
|
|
81
|
-
e.preventDefault();
|
|
82
|
-
scrollAndFocus(0);
|
|
83
|
-
break;
|
|
84
|
-
case "End":
|
|
85
|
-
e.preventDefault();
|
|
86
|
-
if (messages?.length)
|
|
87
|
-
scrollAndFocus(messages.length - 1);
|
|
88
|
-
break;
|
|
89
|
-
case "Tab":
|
|
90
|
-
if (document.activeElement !== loadMoreRef.current) {
|
|
40
|
+
if (messages?.length)
|
|
41
|
+
scrollAndFocus(messages.length - 1);
|
|
42
|
+
break;
|
|
43
|
+
case "Tab":
|
|
91
44
|
if (hasMoreItems === "bottom" && !e.shiftKey) {
|
|
92
45
|
e.preventDefault();
|
|
93
46
|
loadMoreRef.current?.focus();
|
|
47
|
+
} else if (hasMoreItems === "top" && e.shiftKey) {
|
|
48
|
+
e.preventDefault();
|
|
49
|
+
loadMoreRef.current?.focus();
|
|
94
50
|
} else if (!e.shiftKey) {
|
|
51
|
+
if (bannerPosition) {
|
|
52
|
+
e.preventDefault();
|
|
53
|
+
bannerRef?.current?.focusOnWrapper();
|
|
54
|
+
}
|
|
55
|
+
} else {
|
|
95
56
|
e.preventDefault();
|
|
96
|
-
|
|
57
|
+
virtualListRef.current?.focus();
|
|
58
|
+
}
|
|
59
|
+
break;
|
|
60
|
+
default:
|
|
61
|
+
break;
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
[hasMoreItems, messages.length, scrollAndFocus, virtualListRef, loadMoreRef, bannerPosition, bannerRef]
|
|
65
|
+
);
|
|
66
|
+
const handleListKey = React2.useCallback(
|
|
67
|
+
(e) => {
|
|
68
|
+
const { key } = e;
|
|
69
|
+
switch (key) {
|
|
70
|
+
case "ArrowUp":
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
if (document.activeElement !== loadMoreRef.current) {
|
|
73
|
+
onlyFocus(onScrollStop()?.shift());
|
|
74
|
+
}
|
|
75
|
+
break;
|
|
76
|
+
case "ArrowDown":
|
|
77
|
+
e.preventDefault();
|
|
78
|
+
if (document.activeElement === loadMoreRef.current) {
|
|
79
|
+
virtualListRef.current?.querySelector(`[data-index="0"]`)?.focus();
|
|
80
|
+
} else {
|
|
81
|
+
onlyFocus(onScrollStop()?.pop());
|
|
97
82
|
}
|
|
98
|
-
|
|
83
|
+
break;
|
|
84
|
+
case "Home":
|
|
99
85
|
e.preventDefault();
|
|
100
|
-
|
|
101
|
-
|
|
86
|
+
scrollAndFocus(0);
|
|
87
|
+
break;
|
|
88
|
+
case "End":
|
|
102
89
|
e.preventDefault();
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
90
|
+
if (messages?.length)
|
|
91
|
+
scrollAndFocus(messages.length - 1);
|
|
92
|
+
break;
|
|
93
|
+
case "Tab":
|
|
94
|
+
if (document.activeElement !== loadMoreRef.current) {
|
|
95
|
+
if (hasMoreItems === "bottom" && !e.shiftKey) {
|
|
96
|
+
e.preventDefault();
|
|
97
|
+
loadMoreRef.current?.focus();
|
|
98
|
+
} else if (!e.shiftKey) {
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
actionRef.current?.focusToComposer?.();
|
|
101
|
+
}
|
|
102
|
+
} else if (!e.shiftKey) {
|
|
103
|
+
e.preventDefault();
|
|
104
|
+
actionRef.current?.focusToComposer?.();
|
|
105
|
+
} else {
|
|
106
|
+
e.preventDefault();
|
|
107
|
+
virtualListRef.current?.focus();
|
|
108
|
+
}
|
|
109
|
+
break;
|
|
110
|
+
default:
|
|
111
|
+
break;
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
[actionRef, hasMoreItems, loadMoreRef, messages.length, onScrollStop, onlyFocus, scrollAndFocus, virtualListRef]
|
|
115
|
+
);
|
|
110
116
|
return React2.useMemo(() => ({ handleKey, handleListKey }), [handleKey, handleListKey]);
|
|
111
117
|
};
|
|
112
118
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useKeyboard.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseKeyboardArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n actionRef: DSChatT.ActionRef;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;\n scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n onlyFocus: (index: number | string) => void;\n onScrollStop: DebouncedFunc<() => string[]>;\n // useVirtualHelpers: ReturnType<typeof useVirtual>;\n};\n\nconst getIsNumber = (val: unknown): val is number => Number.isInteger(val);\n\nexport const useKeyboard = ({\n propsWithDefault: { hasMoreItems, messages, bannerPosition, bannerRef },\n actionRef,\n virtualListRef,\n loadMoreRef,\n scrollAndFocus,\n onlyFocus,\n onScrollStop,\n}: UseKeyboardArgs) => {\n const handleKey = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n const { key, currentTarget } = e;\n const index = currentTarget.dataset?.index ? Number(currentTarget.dataset.index) : undefined;\n const isIndexNumber = getIsNumber(index);\n e.stopPropagation();\n switch (key) {\n case 'ArrowUp':\n e.preventDefault();\n if (index && index > 0) {\n (virtualListRef.current?.querySelector(`[data-index=\"${index - 1}\"]`) as HTMLDivElement).focus();\n } else if (hasMoreItems === 'top') {\n loadMoreRef.current?.focus();\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (messages?.length && isIndexNumber && index < messages.length - 1) {\n (virtualListRef.current?.querySelector(`[data-index=\"${index + 1}\"]`) as HTMLDivElement).focus();\n }\n break;\n case 'Home':\n e.preventDefault();\n scrollAndFocus(0);\n break;\n case 'End':\n e.preventDefault();\n if (messages?.length) scrollAndFocus(messages.length - 1);\n break;\n case 'Tab':\n if (hasMoreItems === 'bottom' && !e.shiftKey) {\n e.preventDefault();\n loadMoreRef.current?.focus();\n } else if (hasMoreItems === 'top' && e.shiftKey) {\n e.preventDefault();\n loadMoreRef.current?.focus();\n } else if (!e.shiftKey) {\n if (bannerPosition) {\n e.preventDefault();\n bannerRef?.current?.focusOnWrapper();\n }\n } else {\n e.preventDefault();\n virtualListRef.current?.focus();\n }\n break;\n default:\n break;\n }\n },\n [hasMoreItems, messages.length, scrollAndFocus, virtualListRef, loadMoreRef, bannerPosition, bannerRef],\n );\n const handleListKey = React.useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n switch (key) {\n case 'ArrowUp':\n e.preventDefault();\n if (document.activeElement !== loadMoreRef.current) {\n onlyFocus(onScrollStop()?.shift());\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (document.activeElement === loadMoreRef.current) {\n (virtualListRef.current?.querySelector(`[data-index=\"0\"]`) as HTMLDivElement)?.focus();\n } else {\n onlyFocus(onScrollStop()?.pop());\n }\n break;\n case 'Home':\n e.preventDefault();\n scrollAndFocus(0);\n break;\n case 'End':\n e.preventDefault();\n if (messages?.length) scrollAndFocus(messages.length - 1);\n break;\n case 'Tab':\n if (document.activeElement !== loadMoreRef.current) {\n if (hasMoreItems === 'bottom' && !e.shiftKey) {\n e.preventDefault();\n loadMoreRef.current?.focus();\n } else if (!e.shiftKey) {\n e.preventDefault();\n actionRef.current?.focusToComposer?.();\n }\n } else if (!e.shiftKey) {\n e.preventDefault();\n actionRef.current?.focusToComposer?.();\n } else {\n e.preventDefault();\n virtualListRef.current?.focus();\n }\n break;\n default:\n break;\n }\n },\n [actionRef, hasMoreItems, loadMoreRef, messages.length, onScrollStop, onlyFocus, scrollAndFocus, virtualListRef],\n );\n\n return React.useMemo(() => ({ handleKey, handleListKey }), [handleKey, handleListKey]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './chat-composer/ChatContainerComposer';\nexport * from './chat-container/ChatContainer';\nexport * from './chat-container-messages-list/ChatContainerMessagesList';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,7 +35,8 @@ const ChatComposerPropTypes = {
|
|
|
35
35
|
inputMaxLength: PropTypes.number.description("Max length of the composer. `undefined` for no limit").defaultValue(defaultPropsComposer.inputMaxLength),
|
|
36
36
|
buttonDisabled: PropTypes.bool.description("Control the disabled for the send button").defaultValue(defaultPropsComposer.buttonDisabled),
|
|
37
37
|
dataTestid: PropTypes.string.description("Data testid").defaultValue(defaultPropsComposer.placeholder),
|
|
38
|
-
actionRef: PropTypes.object.description(
|
|
38
|
+
actionRef: PropTypes.object.description(
|
|
39
|
+
`Reference:
|
|
39
40
|
{
|
|
40
41
|
scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,
|
|
41
42
|
getMessagesInView?: () => number[],
|
|
@@ -45,7 +46,8 @@ const ChatComposerPropTypes = {
|
|
|
45
46
|
focusToSend?: () => void,
|
|
46
47
|
}
|
|
47
48
|
|
|
48
|
-
`
|
|
49
|
+
`
|
|
50
|
+
).defaultValue(defaultPropsComposer.actionRef)
|
|
49
51
|
};
|
|
50
52
|
const defaultPropsMessagesList = {
|
|
51
53
|
messages: [],
|
|
@@ -59,7 +61,8 @@ const defaultPropsMessagesList = {
|
|
|
59
61
|
const ChatContainerMessagesListPropTypes = {
|
|
60
62
|
...globalAttributesPropTypes,
|
|
61
63
|
messages: PropTypes.arrayOf(PropTypes.object).description("The array of out-of-the-box items you want to render inside the ChatMessageList").defaultValue(defaultPropsMessagesList.messages),
|
|
62
|
-
actionRef: PropTypes.object.description(
|
|
64
|
+
actionRef: PropTypes.object.description(
|
|
65
|
+
`Reference:
|
|
63
66
|
{
|
|
64
67
|
scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,
|
|
65
68
|
getMessagesInView: () => number[],
|
|
@@ -70,10 +73,15 @@ const ChatContainerMessagesListPropTypes = {
|
|
|
70
73
|
focusToSend: () => void,
|
|
71
74
|
}
|
|
72
75
|
|
|
73
|
-
`
|
|
76
|
+
`
|
|
77
|
+
).defaultValue(defaultPropsMessagesList.actionRef),
|
|
74
78
|
onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),
|
|
75
|
-
isLoading: PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
76
|
-
|
|
79
|
+
isLoading: PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
80
|
+
"Keeps the load more space while the loading is in progress"
|
|
81
|
+
),
|
|
82
|
+
hasMoreItems: PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
83
|
+
"Show Load More button at the `top` or `bottom` of the container"
|
|
84
|
+
),
|
|
77
85
|
getMoreMessages: PropTypes.func.description("Called when the user clicks on load more").defaultValue(defaultPropsMessagesList.getMoreMessages),
|
|
78
86
|
sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).description("Array of ids of sending messages").defaultValue(defaultPropsMessagesList.sendingMessages),
|
|
79
87
|
sendingText: PropTypes.string.description("Label description for messages in sending status").defaultValue(defaultPropsMessagesList.sendingText)
|
|
@@ -104,20 +112,29 @@ const ChatContainerPropTypes = {
|
|
|
104
112
|
composerProps: PropTypes.object.description("Composer configuration").defaultValue(defaultProps.composerProps),
|
|
105
113
|
autoScroll: PropTypes.bool.description("Auto scroll to bottom on resize").defaultValue(defaultProps.autoScroll),
|
|
106
114
|
device: PropTypes.string.description("Option to render mobile or desktop style composer").defaultValue(defaultProps.device),
|
|
107
|
-
isLoading: PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
108
|
-
|
|
115
|
+
isLoading: PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
116
|
+
"Show Loading messages indicator at the `top` or `bottom` of the container"
|
|
117
|
+
),
|
|
118
|
+
hasMoreItems: PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
119
|
+
"Show Load More button at the `top` or `bottom` of the container"
|
|
120
|
+
),
|
|
109
121
|
getMoreMessages: PropTypes.func.description("Called when the user clicks on load more").defaultValue(defaultProps.getMoreMessages),
|
|
110
|
-
bannerPosition: PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
111
|
-
|
|
122
|
+
bannerPosition: PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
123
|
+
"Show Loading messages indicator at the `top` or `bottom` of the container"
|
|
124
|
+
),
|
|
125
|
+
bannerProps: PropTypes.object.description(
|
|
126
|
+
`Banner configuration:
|
|
112
127
|
label: string;
|
|
113
128
|
viewLabel: string;
|
|
114
129
|
type: BANNER_TYPES;
|
|
115
130
|
onView: () => void;
|
|
116
131
|
onClose: () => void;
|
|
117
|
-
`
|
|
132
|
+
`
|
|
133
|
+
).defaultValue(defaultProps.bannerProps),
|
|
118
134
|
sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).description("Array of ids of sending messages").defaultValue(defaultProps.sendingMessages),
|
|
119
135
|
sendingText: PropTypes.string.description("Label description for messages in sending status").defaultValue(defaultProps.sendingText),
|
|
120
|
-
actionRef: PropTypes.object.description(
|
|
136
|
+
actionRef: PropTypes.object.description(
|
|
137
|
+
`Reference:
|
|
121
138
|
{
|
|
122
139
|
scrollToIndex: (n: number) => void,
|
|
123
140
|
getMessagesInView: () => number[],
|
|
@@ -127,7 +144,8 @@ const ChatContainerPropTypes = {
|
|
|
127
144
|
focusToSend: () => void,
|
|
128
145
|
}
|
|
129
146
|
|
|
130
|
-
`
|
|
147
|
+
`
|
|
148
|
+
).defaultValue(defaultProps.actionRef)
|
|
131
149
|
};
|
|
132
150
|
export {
|
|
133
151
|
ChatComposerPropTypes,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { type DebouncedFunc } from 'lodash';\nimport { useVirtual } from 'react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { BubblePropsT } from './exported-related/bubble/props';\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?: string;\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?: DebouncedFunc<() => string[]>;\n focusToIndexWithoutScroll?: (index?: number) => void;\n focusToList?: () => void;\n focusToComposer?: () => void;\n focusToSend?: () => void;\n }>;\n\n export interface ContainerProps {\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 ComposerProps {\n placeholder?: string;\n inputValue?: string;\n ariaMaxLengthMessage?: string;\n maxLengthMessage?: string;\n onChange: (value: string) => void;\n onResize?: (value: number) => void;\n onSend: (value: string) => void;\n onFocus?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n onBlur?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n onKeyDown?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n maxHeight?: number;\n inputMaxLength: number | undefined;\n buttonDisabled: boolean;\n dataTestid?: string;\n actionRef?: ActionRef;\n }\n\n export interface MessagesListProps {\n messages: BubblePropsT[];\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 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
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const MIN_WIDTH_SIDEBAR = 48;\nexport const BUTTON_SIDEBAR_HEIGHT = 48;\nexport const BUTTON_FLOATING = 56;\nexport const BOX_SHADOW = '0 5px 8px 0 rgba(53,60,70,0.55)';\nexport const BOX_SHADOW_FLOATING = '0 5px 8px 0 rgba(53,60,70,0.35)';\nexport const BOX_SHADOW_INSET = `inset 100px 3px 4px 0 rgba(53,60,70,0.50)`;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAC9B,MAAM,kBAAkB;AACxB,MAAM,aAAa;AACnB,MAAM,sBAAsB;AAC5B,MAAM,mBAAmB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|