@elliemae/ds-chat-container 3.36.0-next.0 → 3.36.0-next.1
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/ChatContainer.js +2 -5
- package/dist/cjs/ChatContainer.js.map +2 -2
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js +2 -5
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js.map +2 -2
- package/dist/cjs/parts/chat-composer/styled.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +0 -1
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/styled.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js +2 -4
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +4 -8
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useGlobalEventListener.js +3 -6
- package/dist/cjs/parts/chat-container-messages-list/useGlobalEventListener.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js +4 -8
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js.map +1 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/esm/ChatContainer.js +2 -5
- package/dist/esm/ChatContainer.js.map +2 -2
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js +2 -5
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js.map +2 -2
- package/dist/esm/parts/chat-composer/styled.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +0 -1
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/styled.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js +2 -4
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +4 -8
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useGlobalEventListener.js +3 -6
- package/dist/esm/parts/chat-container-messages-list/useGlobalEventListener.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js +4 -8
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js.map +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/package.json +14 -14
|
@@ -71,8 +71,7 @@ const ChatContainer = (props) => {
|
|
|
71
71
|
const Container = device === "desktop" ? import_styled.StyledChatContainerContent : import_styled.MobileStyledChatContainerContent;
|
|
72
72
|
const handleTabs = import_react.default.useCallback(
|
|
73
73
|
(e) => {
|
|
74
|
-
if (onComposerKeyDown)
|
|
75
|
-
onComposerKeyDown(e);
|
|
74
|
+
if (onComposerKeyDown) onComposerKeyDown(e);
|
|
76
75
|
else if (e.shiftKey && e.key === "Tab" && messagesListProps.messages?.length > 0) {
|
|
77
76
|
e.preventDefault();
|
|
78
77
|
if (bannerPosition && ["top", "bottom"].includes(bannerPosition)) {
|
|
@@ -80,8 +79,7 @@ const ChatContainer = (props) => {
|
|
|
80
79
|
}
|
|
81
80
|
if (actionRef?.current && actionRef.current.getMessagesInView) {
|
|
82
81
|
const last = actionRef.current.getMessagesInView().pop();
|
|
83
|
-
if (last && actionRef.current.focusToIndexWithoutScroll)
|
|
84
|
-
actionRef.current?.focusToIndexWithoutScroll(last);
|
|
82
|
+
if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);
|
|
85
83
|
}
|
|
86
84
|
}
|
|
87
85
|
},
|
|
@@ -140,7 +138,6 @@ const ChatContainer = (props) => {
|
|
|
140
138
|
)
|
|
141
139
|
] });
|
|
142
140
|
};
|
|
143
|
-
ChatContainer.propTypes = import_react_desc_prop_types.ChatContainerPropTypes;
|
|
144
141
|
ChatContainer.displayName = "ChatContainer";
|
|
145
142
|
const ChatContainerWithSchema = (0, import_ds_props_helpers.describe)(ChatContainer);
|
|
146
143
|
ChatContainerWithSchema.propTypes = import_react_desc_prop_types.ChatContainerPropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ChatContainer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { noop } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { DSBanner, BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from './parts/chat-composer/index.js';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list/index.js';\nimport type { DSChatT } from './react-desc-prop-types.js';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types.js';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids.js';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled.js';\nimport { DSChatContainerName } from './DSChatContainerDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes, DSChatContainerName);\n const globalAttributes = useGetGlobalAttributes<DSChatT.ContainerProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefault,\n );\n\n const {\n sendingText,\n sendingMessages,\n bannerPosition,\n bannerProps,\n messagesListProps,\n composerProps,\n composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },\n actionRef,\n device,\n isLoading,\n hasMoreItems,\n getMoreMessages,\n } = propsWithDefault;\n const bannerRef = React.useRef({ focusOnWrapper: noop, focusOnLink: noop });\n const containerRef = React.useRef<HTMLDivElement | null>(null);\n const listRef = React.useRef({ scrollToIndex: noop });\n\n const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n const handleTabs = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (onComposerKeyDown) onComposerKeyDown(e);\n else if (e.shiftKey && e.key === 'Tab' && messagesListProps.messages?.length > 0) {\n e.preventDefault();\n if (bannerPosition && ['top', 'bottom'].includes(bannerPosition)) {\n bannerRef.current.focusOnWrapper();\n }\n if (actionRef?.current && actionRef.current.getMessagesInView) {\n const last = actionRef.current.getMessagesInView().pop();\n if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);\n }\n }\n },\n [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length],\n );\n\n // Map actions\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;\n actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;\n }\n }, [actionRef]);\n return (\n <Container {...globalAttributes} rows={['minmax(0, 1fr)', 'auto']} innerRef={containerRef} role=\"region\">\n <div style={{ position: 'relative', overflow: 'hidden' }}>\n <ChatContainerMessagesList\n {...messagesListProps}\n actionRef={actionRef || listRef}\n isLoading={isLoading}\n hasMoreItems={hasMoreItems}\n getMoreMessages={getMoreMessages}\n sendingMessages={sendingMessages}\n sendingText={sendingText}\n bannerPosition={bannerPosition}\n bannerRef={bannerRef}\n />\n {isLoading && ['top', 'bottom'].includes(isLoading) ? (\n <StyledIndicatorContainer isLoading={isLoading} data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n </StyledIndicatorContainer>\n ) : null}\n <StyledIndicatorContainer linear isLoading={bannerPosition}>\n <DSBanner\n showCloseButton\n label={bannerProps?.label || 'Unread messages'}\n containerProps={{ id: 'ds-chat-banner' }}\n actionLink={{\n label: bannerProps?.viewLabel || 'View',\n onClick: bannerProps?.onView,\n }}\n onClose={bannerProps?.onClose}\n isOpen\n type={bannerProps?.type || BANNER_TYPES.INFO}\n actionRef={bannerRef}\n />\n </StyledIndicatorContainer>\n {sendingMessages && sendingMessages.length > 0 ? (\n <StyledIndicatorContainer isLoading=\"bottom\" linear data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n </StyledIndicatorContainer>\n ) : null}\n </div>\n <ChatComposer\n {...composerProps}\n onKeyDown={handleTabs}\n onResize={onComposerResize}\n maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n actionRef={actionRef || listRef}\n />\n </Container>\n );\n};\n\nChatContainer.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EjB;AAvEN,mBAAkB;AAClB,oBAAqB;AACrB,8BAKO;AACP,iDAAiD;AACjD,uBAAuC;AACvC,2BAA6B;AAC7B,0CAA0C;AAE1C,mCAAqD;AACrD,sCAAyC;AACzC,oBAAuG;AACvG,wCAAoC;AAGpC,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,sDAAqD,OAAO,yCAAY;AACjG,8DAAuD,kBAAkB,qDAAwB,qDAAmB;AACpH,QAAM,uBAAmB;AAAA,IACvB;AAAA,EACF;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,EAAE,UAAU,kBAAkB,WAAW,kBAAkB;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,YAAY,aAAAA,QAAM,OAAO,EAAE,gBAAgB,oBAAM,aAAa,mBAAK,CAAC;AAC1E,QAAM,eAAe,aAAAA,QAAM,OAA8B,IAAI;AAC7D,QAAM,UAAU,aAAAA,QAAM,OAAO,EAAE,eAAe,mBAAK,CAAC;AAEpD,QAAM,YAAY,WAAW,YAAY,2CAA6B;AACtE,QAAM,aAAa,aAAAA,QAAM;AAAA,IACvB,CAAC,MAA2B;AAC1B,UAAI
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { noop } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { DSBanner, BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from './parts/chat-composer/index.js';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list/index.js';\nimport type { DSChatT } from './react-desc-prop-types.js';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types.js';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids.js';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled.js';\nimport { DSChatContainerName } from './DSChatContainerDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes, DSChatContainerName);\n const globalAttributes = useGetGlobalAttributes<DSChatT.ContainerProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefault,\n );\n\n const {\n sendingText,\n sendingMessages,\n bannerPosition,\n bannerProps,\n messagesListProps,\n composerProps,\n composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },\n actionRef,\n device,\n isLoading,\n hasMoreItems,\n getMoreMessages,\n } = propsWithDefault;\n const bannerRef = React.useRef({ focusOnWrapper: noop, focusOnLink: noop });\n const containerRef = React.useRef<HTMLDivElement | null>(null);\n const listRef = React.useRef({ scrollToIndex: noop });\n\n const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n const handleTabs = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (onComposerKeyDown) onComposerKeyDown(e);\n else if (e.shiftKey && e.key === 'Tab' && messagesListProps.messages?.length > 0) {\n e.preventDefault();\n if (bannerPosition && ['top', 'bottom'].includes(bannerPosition)) {\n bannerRef.current.focusOnWrapper();\n }\n if (actionRef?.current && actionRef.current.getMessagesInView) {\n const last = actionRef.current.getMessagesInView().pop();\n if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);\n }\n }\n },\n [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length],\n );\n\n // Map actions\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;\n actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;\n }\n }, [actionRef]);\n return (\n <Container {...globalAttributes} rows={['minmax(0, 1fr)', 'auto']} innerRef={containerRef} role=\"region\">\n <div style={{ position: 'relative', overflow: 'hidden' }}>\n <ChatContainerMessagesList\n {...messagesListProps}\n actionRef={actionRef || listRef}\n isLoading={isLoading}\n hasMoreItems={hasMoreItems}\n getMoreMessages={getMoreMessages}\n sendingMessages={sendingMessages}\n sendingText={sendingText}\n bannerPosition={bannerPosition}\n bannerRef={bannerRef}\n />\n {isLoading && ['top', 'bottom'].includes(isLoading) ? (\n <StyledIndicatorContainer isLoading={isLoading} data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n </StyledIndicatorContainer>\n ) : null}\n <StyledIndicatorContainer linear isLoading={bannerPosition}>\n <DSBanner\n showCloseButton\n label={bannerProps?.label || 'Unread messages'}\n containerProps={{ id: 'ds-chat-banner' }}\n actionLink={{\n label: bannerProps?.viewLabel || 'View',\n onClick: bannerProps?.onView,\n }}\n onClose={bannerProps?.onClose}\n isOpen\n type={bannerProps?.type || BANNER_TYPES.INFO}\n actionRef={bannerRef}\n />\n </StyledIndicatorContainer>\n {sendingMessages && sendingMessages.length > 0 ? (\n <StyledIndicatorContainer isLoading=\"bottom\" linear data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n </StyledIndicatorContainer>\n ) : null}\n </div>\n <ChatComposer\n {...composerProps}\n onKeyDown={handleTabs}\n onResize={onComposerResize}\n maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n actionRef={actionRef || listRef}\n />\n </Container>\n );\n};\n\nChatContainer.displayName = 'ChatContainer';\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainer, ChatContainerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -76,8 +76,7 @@ const ChatComposer = (props) => {
|
|
|
76
76
|
import_react.default.useEffect(() => {
|
|
77
77
|
if (inputSize?.current?.scrollHeight) {
|
|
78
78
|
const newHeight = inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;
|
|
79
|
-
if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize)
|
|
80
|
-
onResize(newHeight);
|
|
79
|
+
if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);
|
|
81
80
|
setHeight(newHeight);
|
|
82
81
|
setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);
|
|
83
82
|
}
|
|
@@ -101,8 +100,7 @@ const ChatComposer = (props) => {
|
|
|
101
100
|
const heightProps = { height, overflow: showScroll ? "auto" : "hidden" };
|
|
102
101
|
const inputLength = String(inputValue || "").length;
|
|
103
102
|
const hasError = import_react.default.useMemo(() => {
|
|
104
|
-
if (!inputMaxLength)
|
|
105
|
-
return false;
|
|
103
|
+
if (!inputMaxLength) return false;
|
|
106
104
|
return inputLength > inputMaxLength;
|
|
107
105
|
}, [inputLength, inputMaxLength]);
|
|
108
106
|
const isSendButtonDisabled = (0, import_react.useMemo)(
|
|
@@ -191,7 +189,6 @@ const ChatComposer = (props) => {
|
|
|
191
189
|
}
|
|
192
190
|
);
|
|
193
191
|
};
|
|
194
|
-
ChatComposer.propTypes = import_react_desc_prop_types.ChatComposerPropTypes;
|
|
195
192
|
ChatComposer.displayName = "ChatComposer";
|
|
196
193
|
const ChatComposerWithSchema = (0, import_ds_props_helpers.describe)(ChatComposer);
|
|
197
194
|
ChatComposerWithSchema.propTypes = import_react_desc_prop_types.ChatComposerPropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-composer/ChatContainerComposer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-props-helpers';\nimport {\n StyledChatContainerContentComposer,\n StyledComposerInput,\n StyledComposerButton,\n StyledCounterArea,\n StyledCounterErrorA11y,\n} from './styled.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\nimport { DSChatContainerComposerName } from '../../DSChatContainerDefinitions.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types.js';\n// eslint-disable-next-line complexity\nconst ChatComposer: React.ComponentType<DSChatT.ComposerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ComposerProps>(props, defaultPropsComposer);\n useValidateTypescriptPropTypes<DSChatT.ComposerProps>(\n propsWithDefault,\n ChatComposerPropTypes,\n DSChatContainerComposerName,\n );\n const {\n inputValue,\n onChange,\n onResize,\n onSend,\n onFocus,\n onBlur,\n onKeyDown,\n maxHeight = 300,\n placeholder,\n inputMaxLength,\n maxLengthMessage,\n ariaMaxLengthMessage,\n buttonDisabled,\n dataTestid,\n actionRef,\n } = propsWithDefault;\n\n const COMPOSER_MIN_HEIGHT = 32;\n const input = React.useRef<HTMLTextAreaElement | null>(null);\n const inputSize = React.useRef<HTMLTextAreaElement | null>(null);\n const inputSend = React.useRef<HTMLButtonElement>(null);\n const [height, setHeight] = React.useState(32);\n const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n const [showScroll, setShowScroll] = React.useState(true);\n\n React.useEffect(() => {\n if (inputSize?.current?.scrollHeight) {\n const newHeight =\n inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);\n setHeight(newHeight);\n setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);\n }\n }, [inputValue, internalMaxHeight, height, onResize]);\n\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusToComposer = () => {\n input?.current?.focus?.();\n };\n actionRef.current.focusToSend = () => {\n inputSend?.current?.focus?.();\n };\n }\n }, [actionRef]);\n\n const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = React.useCallback(\n (e) => {\n onChange(e.target.value);\n },\n [onChange],\n );\n const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n const inputLength = String(inputValue || '').length;\n const hasError = React.useMemo(() => {\n if (!inputMaxLength) return false;\n return inputLength > inputMaxLength;\n }, [inputLength, inputMaxLength]);\n\n const isSendButtonDisabled = useMemo(\n () => !inputValue || buttonDisabled || hasError,\n [inputValue, buttonDisabled, hasError],\n );\n return (\n <StyledChatContainerContentComposer\n rows={['auto', '15px']}\n maxHeight={`${maxHeight}px`}\n data-testid={dataTestid ?? ChatContainerDataTestIds.COMPOSER}\n >\n <Grid\n cols={['1fr', '24px']}\n style={{ height: heightProps.height }}\n justifyContent=\"center\"\n alignItems=\"flex-end\"\n gutter=\"xxs\"\n >\n <StyledComposerInput\n innerRef={input}\n onChange={handleChange}\n style={{ ...heightProps }}\n height={heightProps.height}\n value={inputValue}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n aria-label=\"Message to send\"\n data-testid={ChatContainerDataTestIds.COMPOSER_TEXTAREA}\n name=\"chat-composer-textarea\"\n id=\"chat-composer-textarea\"\n />\n\n <Grid height=\"32px\" alignItems=\"center\">\n <StyledComposerButton\n buttonType=\"icon\"\n onClick={onSend}\n size=\"s\"\n disabled={isSendButtonDisabled}\n aria-disabled={isSendButtonDisabled}\n data-testid={ChatContainerDataTestIds.COMPOSER_SEND_BUTTON}\n aria-label=\"Send\"\n innerRef={inputSend}\n >\n <PaperAirplane width={18} height={18} />\n </StyledComposerButton>\n </Grid>\n </Grid>\n <StyledComposerInput\n innerRef={inputSize}\n aria-label=\"ghost\"\n style={{\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n top: 0,\n width: input.current?.clientWidth,\n }}\n height={32}\n onChange={handleChange}\n value={inputValue}\n />\n <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n <StyledCounterArea hasError={hasError} data-testid={ChatContainerDataTestIds.COMPOSER_COUNTER_AREA}>\n {inputMaxLength && hasError ? (\n <>\n <StyledCounterErrorA11y role=\"alert\">\n {ariaMaxLengthMessage ||\n `You have entered ${inputLength} characters and have exceeded the limit by ${\n inputLength - inputMaxLength\n }. Please limit to less than ${inputMaxLength} characters. `}\n </StyledCounterErrorA11y>\n {maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `}\n </>\n ) : (\n ''\n )}\n {inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ''}\n </StyledCounterArea>\n <Grid />\n </Grid>\n </StyledChatContainerContentComposer>\n );\n};\n\nChatComposer.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgGjB;AA9FN,mBAA+B;AAC/B,qBAAqB;AACrB,sBAA8B;AAC9B,8BAAuF;AACvF,oBAMO;AACP,sCAAyC;AACzC,wCAA4C;AAE5C,mCAA4D;AAE5D,MAAM,eAA2D,CAAC,UAAU;AAC1E,QAAM,uBAAmB,sDAAoD,OAAO,iDAAoB;AACxG;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAsB;AAC5B,QAAM,QAAQ,aAAAA,QAAM,OAAmC,IAAI;AAC3D,QAAM,YAAY,aAAAA,QAAM,OAAmC,IAAI;AAC/D,QAAM,YAAY,aAAAA,QAAM,OAA0B,IAAI;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAAA,QAAM,SAAS,EAAE;AAC7C,QAAM,oBAAoB,aAAAA,QAAM,QAAQ,MAAM,YAAY,IAAI,CAAC,SAAS,CAAC;AACzE,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAS,IAAI;AAEvD,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,WAAW,SAAS,cAAc;AACpC,YAAM,YACJ,UAAU,QAAQ,eAAe,oBAAoB,oBAAoB,UAAU,SAAS;AAC9F,UAAI,cAAc,UAAU,YAAY,uBAAuB
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-props-helpers';\nimport {\n StyledChatContainerContentComposer,\n StyledComposerInput,\n StyledComposerButton,\n StyledCounterArea,\n StyledCounterErrorA11y,\n} from './styled.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\nimport { DSChatContainerComposerName } from '../../DSChatContainerDefinitions.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types.js';\n// eslint-disable-next-line complexity\nconst ChatComposer: React.ComponentType<DSChatT.ComposerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ComposerProps>(props, defaultPropsComposer);\n useValidateTypescriptPropTypes<DSChatT.ComposerProps>(\n propsWithDefault,\n ChatComposerPropTypes,\n DSChatContainerComposerName,\n );\n const {\n inputValue,\n onChange,\n onResize,\n onSend,\n onFocus,\n onBlur,\n onKeyDown,\n maxHeight = 300,\n placeholder,\n inputMaxLength,\n maxLengthMessage,\n ariaMaxLengthMessage,\n buttonDisabled,\n dataTestid,\n actionRef,\n } = propsWithDefault;\n\n const COMPOSER_MIN_HEIGHT = 32;\n const input = React.useRef<HTMLTextAreaElement | null>(null);\n const inputSize = React.useRef<HTMLTextAreaElement | null>(null);\n const inputSend = React.useRef<HTMLButtonElement>(null);\n const [height, setHeight] = React.useState(32);\n const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n const [showScroll, setShowScroll] = React.useState(true);\n\n React.useEffect(() => {\n if (inputSize?.current?.scrollHeight) {\n const newHeight =\n inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);\n setHeight(newHeight);\n setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);\n }\n }, [inputValue, internalMaxHeight, height, onResize]);\n\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusToComposer = () => {\n input?.current?.focus?.();\n };\n actionRef.current.focusToSend = () => {\n inputSend?.current?.focus?.();\n };\n }\n }, [actionRef]);\n\n const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = React.useCallback(\n (e) => {\n onChange(e.target.value);\n },\n [onChange],\n );\n const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n const inputLength = String(inputValue || '').length;\n const hasError = React.useMemo(() => {\n if (!inputMaxLength) return false;\n return inputLength > inputMaxLength;\n }, [inputLength, inputMaxLength]);\n\n const isSendButtonDisabled = useMemo(\n () => !inputValue || buttonDisabled || hasError,\n [inputValue, buttonDisabled, hasError],\n );\n return (\n <StyledChatContainerContentComposer\n rows={['auto', '15px']}\n maxHeight={`${maxHeight}px`}\n data-testid={dataTestid ?? ChatContainerDataTestIds.COMPOSER}\n >\n <Grid\n cols={['1fr', '24px']}\n style={{ height: heightProps.height }}\n justifyContent=\"center\"\n alignItems=\"flex-end\"\n gutter=\"xxs\"\n >\n <StyledComposerInput\n innerRef={input}\n onChange={handleChange}\n style={{ ...heightProps }}\n height={heightProps.height}\n value={inputValue}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n aria-label=\"Message to send\"\n data-testid={ChatContainerDataTestIds.COMPOSER_TEXTAREA}\n name=\"chat-composer-textarea\"\n id=\"chat-composer-textarea\"\n />\n\n <Grid height=\"32px\" alignItems=\"center\">\n <StyledComposerButton\n buttonType=\"icon\"\n onClick={onSend}\n size=\"s\"\n disabled={isSendButtonDisabled}\n aria-disabled={isSendButtonDisabled}\n data-testid={ChatContainerDataTestIds.COMPOSER_SEND_BUTTON}\n aria-label=\"Send\"\n innerRef={inputSend}\n >\n <PaperAirplane width={18} height={18} />\n </StyledComposerButton>\n </Grid>\n </Grid>\n <StyledComposerInput\n innerRef={inputSize}\n aria-label=\"ghost\"\n style={{\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n top: 0,\n width: input.current?.clientWidth,\n }}\n height={32}\n onChange={handleChange}\n value={inputValue}\n />\n <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n <StyledCounterArea hasError={hasError} data-testid={ChatContainerDataTestIds.COMPOSER_COUNTER_AREA}>\n {inputMaxLength && hasError ? (\n <>\n <StyledCounterErrorA11y role=\"alert\">\n {ariaMaxLengthMessage ||\n `You have entered ${inputLength} characters and have exceeded the limit by ${\n inputLength - inputMaxLength\n }. Please limit to less than ${inputMaxLength} characters. `}\n </StyledCounterErrorA11y>\n {maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `}\n </>\n ) : (\n ''\n )}\n {inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ''}\n </StyledCounterArea>\n <Grid />\n </Grid>\n </StyledChatContainerContentComposer>\n );\n};\n\nChatComposer.displayName = 'ChatComposer';\nconst ChatComposerWithSchema = describe(ChatComposer);\nChatComposerWithSchema.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatComposer, ChatComposerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-composer/styled.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { TextAreaProps } from '../../react-desc-prop-types.js';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)<{ maxHeight: string }>`\n width: 100%;\n min-height: 56px;\n background: ${(props) => props.theme.colors.neutral['050']};\n padding: ${(props) => props.theme.space.xxs};\n padding-bottom: 3px;\n padding-top: 6px;\n padding-left: ${(props) => props.theme.space.xs};\n max-height: ${(props) => props.maxHeight};\n border-top: 1px solid #cbcfd7;\n`;\n\nexport const StyledComposerInput = styled.textarea<TextAreaProps>`\n padding: ${(props) => props.theme.space.xxs};\n resize: none;\n min-height: 32px;\n border-radius: 2px;\n border: solid 1px #cbcfd7;\n color: #25292f;\n height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};\n min-width: 244px;\n overflow-y: auto;\n font-size: 13px;\n font-weight: 400;\n line-height: 1;\n transition: height 0.05s;\n\n &:focus {\n outline: none;\n border: 1px solid ${(props) => props.theme.colors.brand[600]};\n box-shadow: inset 0 0 0 1px #8cc2ed;\n border-radius: 2px;\n }\n`;\nexport const StyledComposerButton = styled(DSButtonV2)`\n &:disabled {\n background: none;\n svg {\n fill: #5d6775;\n }\n }\n svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n &:focus {\n background: ${(props) => props.theme.colors.brand[200]};\n }\n`;\n\nexport const StyledCounterArea = styled(Grid)<{ hasError: boolean }>`\n text-align: right;\n font-size: 11px;\n height: 15px;\n align-items: center;\n font-style: italic;\n ${(props) => (props.hasError ? `color:${props.theme.colors.danger[900]};` : '')}\n position:relative;\n`;\n\nexport const StyledCounterErrorA11y = styled.span`\n width: 1px;\n height: 1px;\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,0BAA2B;AAIpB,MAAM,yCAAqC,yBAAO,mBAAI;AAAA;AAAA;AAAA,gBAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,0BAA2B;AAIpB,MAAM,yCAAqC,yBAAO,mBAAI;AAAA;AAAA;AAAA,gBAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,aAC/C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,kBAG3B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,gBACjC,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA;AAInC,MAAM,sBAAsB,wBAAO;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMjC,CAAC,UAAW,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUtE,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAKzD,MAAM,2BAAuB,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQzC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,kBAGlC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAInD,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxC,CAAC,UAAW,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC,MAAM,EAAG;AAAA;AAAA;AAI1E,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -128,7 +128,6 @@ const ChatContainerMessagesList = (props) => {
|
|
|
128
128
|
] }, newMessage.dsId)) })
|
|
129
129
|
] });
|
|
130
130
|
};
|
|
131
|
-
ChatContainerMessagesList.propTypes = import_react_desc_prop_types.ChatContainerMessagesListPropTypes;
|
|
132
131
|
ChatContainerMessagesList.displayName = "ChatContainerMessagesList";
|
|
133
132
|
const ChatContainerMessagesListWithSchema = (0, import_ds_props_helpers.describe)(ChatContainerMessagesList);
|
|
134
133
|
ChatContainerMessagesListWithSchema.propTypes = import_react_desc_prop_types.ChatContainerMessagesListPropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx", "../../../../../../../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 type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n StyledWrapperListItem,\n StyledChatContainerContentList,\n StyledChatContainerContentListScroll,\n StyledWrapper,\n StyledLoadMoreContainer,\n ListItem,\n StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\n\ntype ButtonV2InnerRefT = DSButtonV2T.Props['innerRef'];\n\nconst ChatContainerMessagesList: React.ComponentType<DSChatT.MessagesListProps> = (props) => {\n const {\n propsWithDefault,\n globalAttributes,\n useVirtualHelpers,\n handleKey,\n handleListKey,\n loadMoreRef,\n virtualListRef,\n } = useChatContainerMessageList(props);\n\n const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;\n const { totalSize, virtualItems } = useVirtualHelpers;\n\n const newMessages = useGetNewMessages(messages);\n\n const render = React.useMemo(\n () =>\n virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const row = messages[index];\n const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n const style: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n transform: `translateY(${start}px)`,\n width: '100%',\n };\n\n return (\n <ListItem\n data-element=\"chat-element-list-item\"\n data-index={index}\n key={`ds-chat-bubble-${index}-${row.dsId}-${row.type}`}\n style={style}\n innerRef={measureRef}\n tabIndex={-1}\n onKeyDown={handleKey}\n role=\"listitem\"\n >\n <StyledWrapperListItem type={row.type}>\n {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n ) : null}\n {row.type === BUBBLE_TYPES.DELIMITER ? (\n <MessageDelimiter {...(row as unknown as DSChatMessageDelimeterT.Props)} />\n ) : null}\n {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as DSChatSystemMessageT.Props)} /> : null}\n </StyledWrapperListItem>\n </ListItem>\n );\n }),\n [virtualItems, messages, sendingMessages, handleKey, sendingText],\n );\n\n return (\n <StyledWrapper {...globalAttributes}>\n <StyledChatContainerContentList\n data-testid={ChatContainerDataTestIds.THREAD_CONTAINER}\n tabIndex={0}\n innerRef={virtualListRef as React.RefObject<HTMLDivElement>}\n role=\"list\"\n onKeyDown={handleListKey}\n >\n <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n {!isLoading && hasMoreItems ? (\n <StyledLoadMoreContainer hasMoreItems={hasMoreItems} role=\"listitem\">\n <DSButtonV2\n buttonType=\"outline\"\n onClick={getMoreMessages}\n data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n innerRef={loadMoreRef as ButtonV2InnerRefT}\n >\n Load More\n </DSButtonV2>\n </StyledLoadMoreContainer>\n ) : null}\n {render}\n </StyledChatContainerContentListScroll>\n </StyledChatContainerContentList>\n {/* We repeat the render with the new available messages */}\n <StyledNewMessagesHiddenContainer aria-live=\"polite\" aria-hidden=\"false\">\n {newMessages.map((newMessage) => (\n <p key={newMessage.dsId}>\n {newMessage.title} {newMessage.time} {newMessage.body} {newMessage.errorMessage} {newMessage.helpMessage}\n </p>\n ))}\n </StyledNewMessagesHiddenContainer>\n </StyledWrapper>\n );\n};\n\nChatContainerMessagesList.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEX;AAlEZ,mBAAkB;AAClB,8BAAyB;AACzB,0BAA6C;AAC7C,4BAAyC;AAEzC,uCAAiC;AAEjC,oCAA8B;AAC9B,oBAQO;AAEP,mCAAmD;AACnD,+BAAkC;AAClC,yCAA4C;AAC5C,sCAAyC;AAIzC,MAAM,4BAA4E,CAAC,UAAU;AAC3F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gEAA4B,KAAK;AAErC,QAAM,EAAE,aAAa,iBAAiB,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAC7F,QAAM,EAAE,WAAW,aAAa,IAAI;AAEpC,QAAM,kBAAc,4CAAkB,QAAQ;AAE9C,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,MAAM,SAAS,KAAK;AAC1B,YAAM,YAAY,mBAAmB,gBAAgB,KAAK,CAAC,MAAM,MAAM,IAAI,IAAI;AAC/E,YAAM,QAAuB;AAAA,QAC3B,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW,cAAc;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n StyledWrapperListItem,\n StyledChatContainerContentList,\n StyledChatContainerContentListScroll,\n StyledWrapper,\n StyledLoadMoreContainer,\n ListItem,\n StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\n\ntype ButtonV2InnerRefT = DSButtonV2T.Props['innerRef'];\n\nconst ChatContainerMessagesList: React.ComponentType<DSChatT.MessagesListProps> = (props) => {\n const {\n propsWithDefault,\n globalAttributes,\n useVirtualHelpers,\n handleKey,\n handleListKey,\n loadMoreRef,\n virtualListRef,\n } = useChatContainerMessageList(props);\n\n const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;\n const { totalSize, virtualItems } = useVirtualHelpers;\n\n const newMessages = useGetNewMessages(messages);\n\n const render = React.useMemo(\n () =>\n virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const row = messages[index];\n const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n const style: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n transform: `translateY(${start}px)`,\n width: '100%',\n };\n\n return (\n <ListItem\n data-element=\"chat-element-list-item\"\n data-index={index}\n key={`ds-chat-bubble-${index}-${row.dsId}-${row.type}`}\n style={style}\n innerRef={measureRef}\n tabIndex={-1}\n onKeyDown={handleKey}\n role=\"listitem\"\n >\n <StyledWrapperListItem type={row.type}>\n {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n ) : null}\n {row.type === BUBBLE_TYPES.DELIMITER ? (\n <MessageDelimiter {...(row as unknown as DSChatMessageDelimeterT.Props)} />\n ) : null}\n {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as DSChatSystemMessageT.Props)} /> : null}\n </StyledWrapperListItem>\n </ListItem>\n );\n }),\n [virtualItems, messages, sendingMessages, handleKey, sendingText],\n );\n\n return (\n <StyledWrapper {...globalAttributes}>\n <StyledChatContainerContentList\n data-testid={ChatContainerDataTestIds.THREAD_CONTAINER}\n tabIndex={0}\n innerRef={virtualListRef as React.RefObject<HTMLDivElement>}\n role=\"list\"\n onKeyDown={handleListKey}\n >\n <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n {!isLoading && hasMoreItems ? (\n <StyledLoadMoreContainer hasMoreItems={hasMoreItems} role=\"listitem\">\n <DSButtonV2\n buttonType=\"outline\"\n onClick={getMoreMessages}\n data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n innerRef={loadMoreRef as ButtonV2InnerRefT}\n >\n Load More\n </DSButtonV2>\n </StyledLoadMoreContainer>\n ) : null}\n {render}\n </StyledChatContainerContentListScroll>\n </StyledChatContainerContentList>\n {/* We repeat the render with the new available messages */}\n <StyledNewMessagesHiddenContainer aria-live=\"polite\" aria-hidden=\"false\">\n {newMessages.map((newMessage) => (\n <p key={newMessage.dsId}>\n {newMessage.title} {newMessage.time} {newMessage.body} {newMessage.errorMessage} {newMessage.helpMessage}\n </p>\n ))}\n </StyledNewMessagesHiddenContainer>\n </StyledWrapper>\n );\n};\n\nChatContainerMessagesList.displayName = 'ChatContainerMessagesList';\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEX;AAlEZ,mBAAkB;AAClB,8BAAyB;AACzB,0BAA6C;AAC7C,4BAAyC;AAEzC,uCAAiC;AAEjC,oCAA8B;AAC9B,oBAQO;AAEP,mCAAmD;AACnD,+BAAkC;AAClC,yCAA4C;AAC5C,sCAAyC;AAIzC,MAAM,4BAA4E,CAAC,UAAU;AAC3F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gEAA4B,KAAK;AAErC,QAAM,EAAE,aAAa,iBAAiB,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAC7F,QAAM,EAAE,WAAW,aAAa,IAAI;AAEpC,QAAM,kBAAc,4CAAkB,QAAQ;AAE9C,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,MAAM,SAAS,KAAK;AAC1B,YAAM,YAAY,mBAAmB,gBAAgB,KAAK,CAAC,MAAM,MAAM,IAAI,IAAI;AAC/E,YAAM,QAAuB;AAAA,QAC3B,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW,cAAc,KAAK;AAAA,QAC9B,OAAO;AAAA,MACT;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,cAAY;AAAA,UAEZ;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV,WAAW;AAAA,UACX,MAAK;AAAA,UAEL,uDAAC,uCAAsB,MAAM,IAAI,MAC9B;AAAA,gBAAI,SAAS,mCAAa,UAAU,IAAI,SAAS,mCAAa,YAC7D,4CAAC,oCAAY,GAAG,KAAK,aAAa,YAAY,cAAc,IAAI,aAAa,IAC3E;AAAA,YACH,IAAI,SAAS,mCAAa,YACzB,4CAAC,qDAAkB,GAAI,KAAkD,IACvE;AAAA,YACH,IAAI,SAAS,mCAAa,SAAS,4CAAC,+CAAe,GAAI,KAAoC,IAAK;AAAA,aACnG;AAAA;AAAA,QAfK,kBAAkB,KAAK,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;AAAA,MAgBtD;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,cAAc,UAAU,iBAAiB,WAAW,WAAW;AAAA,EAClE;AAEA,SACE,6CAAC,+BAAe,GAAG,kBACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,yDAAyB;AAAA,QACtC,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAK;AAAA,QACL,WAAW;AAAA,QAEX,uDAAC,sDAAqC,QAAQ,GAAG,SAAS,MACvD;AAAA,WAAC,aAAa,eACb,4CAAC,yCAAwB,cAA4B,MAAK,YACxD;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,SAAS;AAAA,cACT,eAAa,yDAAyB;AAAA,cACtC,UAAU;AAAA,cACX;AAAA;AAAA,UAED,GACF,IACE;AAAA,UACH;AAAA,WACH;AAAA;AAAA,IACF;AAAA,IAEA,4CAAC,kDAAiC,aAAU,UAAS,eAAY,SAC9D,sBAAY,IAAI,CAAC,eAChB,6CAAC,OACE;AAAA,iBAAW;AAAA,MAAM;AAAA,MAAE,WAAW;AAAA,MAAK;AAAA,MAAE,WAAW;AAAA,MAAK;AAAA,MAAE,WAAW;AAAA,MAAa;AAAA,MAAE,WAAW;AAAA,SADvF,WAAW,IAEnB,CACD,GACH;AAAA,KACF;AAEJ;AAEA,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,kCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-container-messages-list/styled.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\n\nexport const StyledWrapper = styled.div`\n width: 100%;\n height: 100%;\n`;\n\n// list\nexport const StyledWrapperListItem = styled.div<Partial<DSChatBubbleT.Props>>`\n min-width: 100%;\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER &&\n `padding: ${props.theme.space.xxs} ${props.theme.space.xxs} ${props.theme.space.xxs} 13%\n `};\n ${(props) =>\n props.type === BUBBLE_TYPES.RECIPIENT &&\n `padding: ${props.theme.space.xxs} 13% ${props.theme.space.xxs}\n ${props.theme.space.xxs}\n `};\n ${(props) =>\n props.type === BUBBLE_TYPES.SYSTEM &&\n `padding: ${props.theme.space.xxs} 0px\n `};\n`;\n\nexport const StyledChatContainerContentList = styled.div`\n width: 100%;\n height: 100%;\n padding: ${(props) => props.theme.space.xs};\n padding-bottom: 0;\n overflow-y: auto;\n overflow-x: hidden;\n`;\n\nexport const StyledNewMessagesHiddenContainer = styled.div`\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n white-space: nowrap;\n`;\n\nexport const StyledChatContainerContentListScroll = styled.div<{ height: string }>`\n width: 100%;\n height: ${(props) => props.height};\n position: relative;\n`;\n\nexport const StyledLoadMoreContainer = styled.div<{ hasMoreItems?: 'top' | 'bottom' }>`\n position: absolute;\n width: calc(100% + ${(props) => props.theme.space.xxs});\n padding: ${(props) => props.theme.space.xxs};\n left: -${(props) => props.theme.space.xxs};\n right: -${(props) => props.theme.space.xxs};\n display: grid;\n justify-content: center;\n align-items: center;\n ${(props) => (props.hasMoreItems === 'top' ? 'top: 0;' : '')}\n ${(props) => (props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '')}\n`;\nexport const ListItem = styled.div`\n &:focus,\n &:focus-visible {\n outline: none;\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: -${(props) => props.theme.space.xxs};\n pointer-events: none;\n border-radius: 2px;\n background-color: #ebedf0;\n width: calc(100% + 24px);\n border: 2px solid #1e79c2;\n height: 100%;\n z-index: -1;\n }\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEvB,4BAA6B;AAEtB,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,wBAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,mCAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEvB,4BAA6B;AAEtB,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,wBAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,mCAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG;AAAA,GACpF;AAAA,IACC,CAAC,UACD,MAAM,SAAS,mCAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,MAAM,GAAG;AAAA,MAC5D,MAAM,MAAM,MAAM,GAAG;AAAA,GACxB;AAAA,IACC,CAAC,UACD,MAAM,SAAS,mCAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG;AAAA,GAClC;AAAA;AAGI,MAAM,iCAAiC,wBAAO;AAAA;AAAA;AAAA,aAGxC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,mCAAmC,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahD,MAAM,uCAAuC,wBAAO;AAAA;AAAA,YAE/C,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAI5B,MAAM,0BAA0B,wBAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,WAClC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,YAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,IAIxC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY,EAAG;AAAA,IAC1D,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe,EAAG;AAAA;AAE7D,MAAM,WAAW,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -46,10 +46,8 @@ const getPadding = ({ hasMoreItems, bannerPosition, isLoading }) => {
|
|
|
46
46
|
paddingStart: 0,
|
|
47
47
|
paddingEnd: -5
|
|
48
48
|
};
|
|
49
|
-
if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === "top"))
|
|
50
|
-
|
|
51
|
-
else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === "bottom"))
|
|
52
|
-
padding.paddingEnd = 42;
|
|
49
|
+
if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === "top")) padding.paddingStart = 42;
|
|
50
|
+
else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === "bottom")) padding.paddingEnd = 42;
|
|
53
51
|
return padding;
|
|
54
52
|
};
|
|
55
53
|
const useChatContainerMessageList = (props) => {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-container-messages-list/useChatContainerMessageList.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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
|
|
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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -46,8 +46,7 @@ const useFocusAndScrollHelpers = ({
|
|
|
46
46
|
pendingOnScroll.current = true;
|
|
47
47
|
return [];
|
|
48
48
|
}
|
|
49
|
-
if (!virtualListRef.current)
|
|
50
|
-
return [];
|
|
49
|
+
if (!virtualListRef.current) return [];
|
|
51
50
|
pendingOnScroll.current = false;
|
|
52
51
|
const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};
|
|
53
52
|
const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
|
|
@@ -55,11 +54,9 @@ const useFocusAndScrollHelpers = ({
|
|
|
55
54
|
list.forEach((item) => {
|
|
56
55
|
const { top: itemTop } = item.getBoundingClientRect();
|
|
57
56
|
const itemPadding = 10;
|
|
58
|
-
if (itemTop + itemPadding < bottom && itemTop + itemPadding > top)
|
|
59
|
-
indexList.push(item.dataset.index || "");
|
|
57
|
+
if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || "");
|
|
60
58
|
});
|
|
61
|
-
if (onScrollEnds)
|
|
62
|
-
onScrollEnds(indexList);
|
|
59
|
+
if (onScrollEnds) onScrollEnds(indexList);
|
|
63
60
|
return indexList;
|
|
64
61
|
}, 500),
|
|
65
62
|
[onScrollEnds, pendingOnScroll, virtualListRef]
|
|
@@ -81,8 +78,7 @@ const useFocusAndScrollHelpers = ({
|
|
|
81
78
|
[onScrollStop, onlyFocus, vScroll]
|
|
82
79
|
);
|
|
83
80
|
const checkPendingOnScroll = import_react.default.useCallback(() => {
|
|
84
|
-
if (pendingOnScroll.current === true)
|
|
85
|
-
onScrollStop();
|
|
81
|
+
if (pendingOnScroll.current === true) onScrollStop();
|
|
86
82
|
}, [onScrollStop, pendingOnScroll]);
|
|
87
83
|
return import_react.default.useMemo(
|
|
88
84
|
() => ({
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-container-messages-list/useFocusAndScrollHelpers.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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';\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 setTimeout(() => {\n onlyFocus(index.toString());\n }, 300);\n onScrollStop();\n },\n [onScrollStop, onlyFocus, vScroll],\n );\n\n const checkPendingOnScroll = React.useCallback(() => {\n if (pendingOnScroll.current === true) onScrollStop();\n }, [onScrollStop, pendingOnScroll]);\n\n return React.useMemo(\n () => ({\n onScrollStop,\n onlyFocus,\n scrollAndFocus,\n checkPendingOnScroll,\n }),\n [onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAElB,oBAAyB;AAUlB,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE,aAAa;AAAA,EACjC,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,eAAe,aAAAA,QAAM;AAAA,IACzB,UACE,wBAAS,MAAgB;AACvB,UAAI,SAAS,oBAAoB,UAAU;AACzC,wBAAgB,UAAU;AAC1B,eAAO,CAAC;AAAA,MACV;AACA,UAAI,CAAC,eAAe
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAElB,oBAAyB;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,wBAAS,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;AAClC,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AACN,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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -43,8 +43,7 @@ const useGlobalEventListener = ({
|
|
|
43
43
|
let handlerCallback;
|
|
44
44
|
const localVirtualRef = virtualListRef.current;
|
|
45
45
|
const onScroll = () => {
|
|
46
|
-
if (handlerCallback)
|
|
47
|
-
clearTimeout(handlerCallback);
|
|
46
|
+
if (handlerCallback) clearTimeout(handlerCallback);
|
|
48
47
|
handlerCallback = setTimeout(onScrollStop, 300);
|
|
49
48
|
};
|
|
50
49
|
if (onScrollEnds) {
|
|
@@ -52,10 +51,8 @@ const useGlobalEventListener = ({
|
|
|
52
51
|
}
|
|
53
52
|
document.addEventListener("visibilitychange", checkPendingOnScroll);
|
|
54
53
|
return () => {
|
|
55
|
-
if (handlerCallback)
|
|
56
|
-
|
|
57
|
-
if (onScrollEnds && localVirtualRef)
|
|
58
|
-
localVirtualRef.removeEventListener("scroll", onScroll);
|
|
54
|
+
if (handlerCallback) clearTimeout(handlerCallback);
|
|
55
|
+
if (onScrollEnds && localVirtualRef) localVirtualRef.removeEventListener("scroll", onScroll);
|
|
59
56
|
document.removeEventListener("visibilitychange", checkPendingOnScroll);
|
|
60
57
|
};
|
|
61
58
|
}, [onScrollStop, onScrollEnds, checkPendingOnScroll, virtualListRef]);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-container-messages-list/useGlobalEventListener.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseGlobalEventListenerArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n onScrollStop: () => string[];\n checkPendingOnScroll: TypescriptHelpersT.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) localVirtualRef.removeEventListener('scroll', onScroll);\n document.removeEventListener('visibilitychange', checkPendingOnScroll);\n };\n }, [onScrollStop, onScrollEnds, checkPendingOnScroll, virtualListRef]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAWX,MAAM,yBAAyB,CAAC;AAAA,EACrC,kBAAkB,EAAE,aAAa;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI;AACJ,UAAM,kBAAkB,eAAe;AACvC,UAAM,WAAW,MAAM;AACrB,UAAI
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAWX,MAAM,yBAAyB,CAAC;AAAA,EACrC,kBAAkB,EAAE,aAAa;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI;AACJ,UAAM,kBAAkB,eAAe;AACvC,UAAM,WAAW,MAAM;AACrB,UAAI,gBAAiB,cAAa,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,gBAAiB,cAAa,eAAe;AACjD,UAAI,gBAAgB,gBAAiB,iBAAgB,oBAAoB,UAAU,QAAQ;AAC3F,eAAS,oBAAoB,oBAAoB,oBAAoB;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,cAAc,cAAc,sBAAsB,cAAc,CAAC;AACvE;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -70,8 +70,7 @@ const useKeyboard = ({
|
|
|
70
70
|
break;
|
|
71
71
|
case "End":
|
|
72
72
|
e.preventDefault();
|
|
73
|
-
if (messages?.length)
|
|
74
|
-
scrollAndFocus(messages.length - 1);
|
|
73
|
+
if (messages?.length) scrollAndFocus(messages.length - 1);
|
|
75
74
|
break;
|
|
76
75
|
case "Tab":
|
|
77
76
|
if (hasMoreItems === "bottom" && !e.shiftKey) {
|
|
@@ -104,8 +103,7 @@ const useKeyboard = ({
|
|
|
104
103
|
e.preventDefault();
|
|
105
104
|
if (document.activeElement !== loadMoreRef.current) {
|
|
106
105
|
const id = onScrollStop()?.shift();
|
|
107
|
-
if (id)
|
|
108
|
-
onlyFocus(id);
|
|
106
|
+
if (id) onlyFocus(id);
|
|
109
107
|
}
|
|
110
108
|
break;
|
|
111
109
|
case "ArrowDown":
|
|
@@ -114,8 +112,7 @@ const useKeyboard = ({
|
|
|
114
112
|
virtualListRef.current?.querySelector(`[data-index="0"]`)?.focus();
|
|
115
113
|
} else {
|
|
116
114
|
const id = onScrollStop()?.pop();
|
|
117
|
-
if (id)
|
|
118
|
-
onlyFocus(id);
|
|
115
|
+
if (id) onlyFocus(id);
|
|
119
116
|
}
|
|
120
117
|
break;
|
|
121
118
|
case "Home":
|
|
@@ -124,8 +121,7 @@ const useKeyboard = ({
|
|
|
124
121
|
break;
|
|
125
122
|
case "End":
|
|
126
123
|
e.preventDefault();
|
|
127
|
-
if (messages?.length)
|
|
128
|
-
scrollAndFocus(messages.length - 1);
|
|
124
|
+
if (messages?.length) scrollAndFocus(messages.length - 1);
|
|
129
125
|
break;
|
|
130
126
|
case "Tab":
|
|
131
127
|
if (document.activeElement !== loadMoreRef.current) {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-container-messages-list/useKeyboard.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;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,YAAY,aAAAA,QAAM;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,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Wrapper, Title, Time, Message } from '@elliemae/ds-chat-system-message';\nimport { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '@elliemae/ds-chat-bubble';\nimport { StyledComposerInput } from './parts/chat-composer/styled.js';\nexport const CONTAINER_WIDTH = 300;\n\nexport const StyledChatContainerContent = styled(Grid)`\n height: 100%;\n min-width: ${CONTAINER_WIDTH}px;\n overflow: hidden;\n background: ${(props) => props.theme.colors.neutral['050']};\n position: relative;\n`;\nexport const StyledIndicatorContainer = styled.div<{\n isLoading?: 'top' | 'bottom';\n linear?: boolean;\n}>`\n transition: 0.2s ease-in-out;\n // 0.2s is the same duration of the banner settimeout function to focus itself\n // this has to be this way to fix visual bugs on safari.\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n width: 100%;\n padding: 0 ${(props) => (!props.linear ? props.theme.space.xxs : 0)};\n left: 0;\n right: 0;\n background: ${(props) => props.theme.colors.neutral['000']};\n ${(props) =>\n props.isLoading === 'top'\n ? `\n top: -41px;\n transform: translate(0, 41px);\n visibility: visible;\n pointer-events: auto;\n `\n : ''}\n ${(props) =>\n props.isLoading === 'bottom'\n ? `\n bottom: -41px;\n transform: translate(0, -41px);\n visibility: visible;\n pointer-events: auto;\n `\n : ''}\n\n & div,a {\n font-size: 13px;\n }\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`\n ${StyledTitleLeftBubble as any},\n ${StyleBodyWrapper as any} {\n font-size: 16px;\n }\n\n ${StyledTitleRightBubble as any} {\n font-size: 13px;\n }\n\n ${Wrapper as any} {\n background-color: #fff;\n box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);\n }\n\n ${Title as any},\n ${Message as any} {\n font-size: 16px;\n text-align: left;\n }\n\n ${Time as any} {\n font-size: 13px;\n }\n\n ${StyledComposerInput as any} {\n font-size: 16px;\n }\n\n ${StyledIndicatorContainer as any} {\n font-size: 16px;\n }\n`;\n/* eslint-enable @typescript-eslint/no-explicit-any */\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,oCAA8C;AAC9C,4BAAgF;AAChF,oBAAoC;AAC7B,MAAM,kBAAkB;AAExB,MAAM,iCAA6B,yBAAO,mBAAI;AAAA;AAAA,eAEtC;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,oCAA8C;AAC9C,4BAAgF;AAChF,oBAAoC;AAC7B,MAAM,kBAAkB;AAExB,MAAM,iCAA6B,yBAAO,mBAAI;AAAA;AAAA,eAEtC,eAAe;AAAA;AAAA,gBAEd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAGrD,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAWhC,CAAC,UAAW,CAAC,MAAM,SAAS,MAAM,MAAM,MAAM,MAAM,CAAE;AAAA;AAAA;AAAA,gBAGrD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IACxD,CAAC,UACD,MAAM,cAAc,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,EAAE;AAAA,IACN,CAAC,UACD,MAAM,cAAc,WAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAQH,MAAM,uCAAmC,yBAAO,0BAA0B;AAAA,IAC7E,2CAA4B;AAAA,IAC5B,sCAAuB;AAAA;AAAA;AAAA;AAAA,IAIvB,4CAA6B;AAAA;AAAA;AAAA;AAAA,IAI7B,qCAAc;AAAA;AAAA;AAAA;AAAA;AAAA,IAKd,mCAAY;AAAA,IACZ,qCAAc;AAAA;AAAA;AAAA;AAAA;AAAA,IAKd,kCAAW;AAAA;AAAA;AAAA;AAAA,IAIX,iCAA0B;AAAA;AAAA;AAAA;AAAA,IAI1B,wBAA+B;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,8 +42,7 @@ const ChatContainer = (props) => {
|
|
|
42
42
|
const Container = device === "desktop" ? StyledChatContainerContent : MobileStyledChatContainerContent;
|
|
43
43
|
const handleTabs = React2.useCallback(
|
|
44
44
|
(e) => {
|
|
45
|
-
if (onComposerKeyDown)
|
|
46
|
-
onComposerKeyDown(e);
|
|
45
|
+
if (onComposerKeyDown) onComposerKeyDown(e);
|
|
47
46
|
else if (e.shiftKey && e.key === "Tab" && messagesListProps.messages?.length > 0) {
|
|
48
47
|
e.preventDefault();
|
|
49
48
|
if (bannerPosition && ["top", "bottom"].includes(bannerPosition)) {
|
|
@@ -51,8 +50,7 @@ const ChatContainer = (props) => {
|
|
|
51
50
|
}
|
|
52
51
|
if (actionRef?.current && actionRef.current.getMessagesInView) {
|
|
53
52
|
const last = actionRef.current.getMessagesInView().pop();
|
|
54
|
-
if (last && actionRef.current.focusToIndexWithoutScroll)
|
|
55
|
-
actionRef.current?.focusToIndexWithoutScroll(last);
|
|
53
|
+
if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);
|
|
56
54
|
}
|
|
57
55
|
}
|
|
58
56
|
},
|
|
@@ -111,7 +109,6 @@ const ChatContainer = (props) => {
|
|
|
111
109
|
)
|
|
112
110
|
] });
|
|
113
111
|
};
|
|
114
|
-
ChatContainer.propTypes = ChatContainerPropTypes;
|
|
115
112
|
ChatContainer.displayName = "ChatContainer";
|
|
116
113
|
const ChatContainerWithSchema = describe(ChatContainer);
|
|
117
114
|
ChatContainerWithSchema.propTypes = ChatContainerPropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ChatContainer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { noop } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { DSBanner, BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from './parts/chat-composer/index.js';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list/index.js';\nimport type { DSChatT } from './react-desc-prop-types.js';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types.js';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids.js';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled.js';\nimport { DSChatContainerName } from './DSChatContainerDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes, DSChatContainerName);\n const globalAttributes = useGetGlobalAttributes<DSChatT.ContainerProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefault,\n );\n\n const {\n sendingText,\n sendingMessages,\n bannerPosition,\n bannerProps,\n messagesListProps,\n composerProps,\n composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },\n actionRef,\n device,\n isLoading,\n hasMoreItems,\n getMoreMessages,\n } = propsWithDefault;\n const bannerRef = React.useRef({ focusOnWrapper: noop, focusOnLink: noop });\n const containerRef = React.useRef<HTMLDivElement | null>(null);\n const listRef = React.useRef({ scrollToIndex: noop });\n\n const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n const handleTabs = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (onComposerKeyDown) onComposerKeyDown(e);\n else if (e.shiftKey && e.key === 'Tab' && messagesListProps.messages?.length > 0) {\n e.preventDefault();\n if (bannerPosition && ['top', 'bottom'].includes(bannerPosition)) {\n bannerRef.current.focusOnWrapper();\n }\n if (actionRef?.current && actionRef.current.getMessagesInView) {\n const last = actionRef.current.getMessagesInView().pop();\n if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);\n }\n }\n },\n [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length],\n );\n\n // Map actions\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;\n actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;\n }\n }, [actionRef]);\n return (\n <Container {...globalAttributes} rows={['minmax(0, 1fr)', 'auto']} innerRef={containerRef} role=\"region\">\n <div style={{ position: 'relative', overflow: 'hidden' }}>\n <ChatContainerMessagesList\n {...messagesListProps}\n actionRef={actionRef || listRef}\n isLoading={isLoading}\n hasMoreItems={hasMoreItems}\n getMoreMessages={getMoreMessages}\n sendingMessages={sendingMessages}\n sendingText={sendingText}\n bannerPosition={bannerPosition}\n bannerRef={bannerRef}\n />\n {isLoading && ['top', 'bottom'].includes(isLoading) ? (\n <StyledIndicatorContainer isLoading={isLoading} data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n </StyledIndicatorContainer>\n ) : null}\n <StyledIndicatorContainer linear isLoading={bannerPosition}>\n <DSBanner\n showCloseButton\n label={bannerProps?.label || 'Unread messages'}\n containerProps={{ id: 'ds-chat-banner' }}\n actionLink={{\n label: bannerProps?.viewLabel || 'View',\n onClick: bannerProps?.onView,\n }}\n onClose={bannerProps?.onClose}\n isOpen\n type={bannerProps?.type || BANNER_TYPES.INFO}\n actionRef={bannerRef}\n />\n </StyledIndicatorContainer>\n {sendingMessages && sendingMessages.length > 0 ? (\n <StyledIndicatorContainer isLoading=\"bottom\" linear data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n </StyledIndicatorContainer>\n ) : null}\n </div>\n <ChatComposer\n {...composerProps}\n onKeyDown={handleTabs}\n onResize={onComposerResize}\n maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n actionRef={actionRef || listRef}\n />\n </Container>\n );\n};\n\nChatContainer.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC0EjB,SACE,KADF;AAvEN,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wCAAwC;AACjD,SAAS,UAAU,oBAAoB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,iCAAiC;AAE1C,SAAS,cAAc,8BAA8B;AACrD,SAAS,gCAAgC;AACzC,SAAS,4BAA4B,0BAA0B,wCAAwC;AACvG,SAAS,2BAA2B;AAGpC,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAAqD,OAAO,YAAY;AACjG,iCAAuD,kBAAkB,wBAAwB,mBAAmB;AACpH,QAAM,mBAAmB;AAAA,IACvB;AAAA,EACF;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,EAAE,UAAU,kBAAkB,WAAW,kBAAkB;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,YAAYA,OAAM,OAAO,EAAE,gBAAgB,MAAM,aAAa,KAAK,CAAC;AAC1E,QAAM,eAAeA,OAAM,OAA8B,IAAI;AAC7D,QAAM,UAAUA,OAAM,OAAO,EAAE,eAAe,KAAK,CAAC;AAEpD,QAAM,YAAY,WAAW,YAAY,6BAA6B;AACtE,QAAM,aAAaA,OAAM;AAAA,IACvB,CAAC,MAA2B;AAC1B,UAAI
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { noop } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { DSIndeterminateProgressIndicator } from '@elliemae/ds-indeterminate-progress-indicator';\nimport { DSBanner, BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from './parts/chat-composer/index.js';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list/index.js';\nimport type { DSChatT } from './react-desc-prop-types.js';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types.js';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids.js';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled.js';\nimport { DSChatContainerName } from './DSChatContainerDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes, DSChatContainerName);\n const globalAttributes = useGetGlobalAttributes<DSChatT.ContainerProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefault,\n );\n\n const {\n sendingText,\n sendingMessages,\n bannerPosition,\n bannerProps,\n messagesListProps,\n composerProps,\n composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },\n actionRef,\n device,\n isLoading,\n hasMoreItems,\n getMoreMessages,\n } = propsWithDefault;\n const bannerRef = React.useRef({ focusOnWrapper: noop, focusOnLink: noop });\n const containerRef = React.useRef<HTMLDivElement | null>(null);\n const listRef = React.useRef({ scrollToIndex: noop });\n\n const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n const handleTabs = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (onComposerKeyDown) onComposerKeyDown(e);\n else if (e.shiftKey && e.key === 'Tab' && messagesListProps.messages?.length > 0) {\n e.preventDefault();\n if (bannerPosition && ['top', 'bottom'].includes(bannerPosition)) {\n bannerRef.current.focusOnWrapper();\n }\n if (actionRef?.current && actionRef.current.getMessagesInView) {\n const last = actionRef.current.getMessagesInView().pop();\n if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);\n }\n }\n },\n [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length],\n );\n\n // Map actions\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;\n actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;\n }\n }, [actionRef]);\n return (\n <Container {...globalAttributes} rows={['minmax(0, 1fr)', 'auto']} innerRef={containerRef} role=\"region\">\n <div style={{ position: 'relative', overflow: 'hidden' }}>\n <ChatContainerMessagesList\n {...messagesListProps}\n actionRef={actionRef || listRef}\n isLoading={isLoading}\n hasMoreItems={hasMoreItems}\n getMoreMessages={getMoreMessages}\n sendingMessages={sendingMessages}\n sendingText={sendingText}\n bannerPosition={bannerPosition}\n bannerRef={bannerRef}\n />\n {isLoading && ['top', 'bottom'].includes(isLoading) ? (\n <StyledIndicatorContainer isLoading={isLoading} data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n </StyledIndicatorContainer>\n ) : null}\n <StyledIndicatorContainer linear isLoading={bannerPosition}>\n <DSBanner\n showCloseButton\n label={bannerProps?.label || 'Unread messages'}\n containerProps={{ id: 'ds-chat-banner' }}\n actionLink={{\n label: bannerProps?.viewLabel || 'View',\n onClick: bannerProps?.onView,\n }}\n onClose={bannerProps?.onClose}\n isOpen\n type={bannerProps?.type || BANNER_TYPES.INFO}\n actionRef={bannerRef}\n />\n </StyledIndicatorContainer>\n {sendingMessages && sendingMessages.length > 0 ? (\n <StyledIndicatorContainer isLoading=\"bottom\" linear data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n </StyledIndicatorContainer>\n ) : null}\n </div>\n <ChatComposer\n {...composerProps}\n onKeyDown={handleTabs}\n onResize={onComposerResize}\n maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n actionRef={actionRef || listRef}\n />\n </Container>\n );\n};\n\nChatContainer.displayName = 'ChatContainer';\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainer, ChatContainerWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -48,8 +48,7 @@ const ChatComposer = (props) => {
|
|
|
48
48
|
React2.useEffect(() => {
|
|
49
49
|
if (inputSize?.current?.scrollHeight) {
|
|
50
50
|
const newHeight = inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;
|
|
51
|
-
if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize)
|
|
52
|
-
onResize(newHeight);
|
|
51
|
+
if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);
|
|
53
52
|
setHeight(newHeight);
|
|
54
53
|
setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);
|
|
55
54
|
}
|
|
@@ -73,8 +72,7 @@ const ChatComposer = (props) => {
|
|
|
73
72
|
const heightProps = { height, overflow: showScroll ? "auto" : "hidden" };
|
|
74
73
|
const inputLength = String(inputValue || "").length;
|
|
75
74
|
const hasError = React2.useMemo(() => {
|
|
76
|
-
if (!inputMaxLength)
|
|
77
|
-
return false;
|
|
75
|
+
if (!inputMaxLength) return false;
|
|
78
76
|
return inputLength > inputMaxLength;
|
|
79
77
|
}, [inputLength, inputMaxLength]);
|
|
80
78
|
const isSendButtonDisabled = useMemo(
|
|
@@ -163,7 +161,6 @@ const ChatComposer = (props) => {
|
|
|
163
161
|
}
|
|
164
162
|
);
|
|
165
163
|
};
|
|
166
|
-
ChatComposer.propTypes = ChatComposerPropTypes;
|
|
167
164
|
ChatComposer.displayName = "ChatComposer";
|
|
168
165
|
const ChatComposerWithSchema = describe(ChatComposer);
|
|
169
166
|
ChatComposerWithSchema.propTypes = ChatComposerPropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/ChatContainerComposer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-props-helpers';\nimport {\n StyledChatContainerContentComposer,\n StyledComposerInput,\n StyledComposerButton,\n StyledCounterArea,\n StyledCounterErrorA11y,\n} from './styled.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\nimport { DSChatContainerComposerName } from '../../DSChatContainerDefinitions.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types.js';\n// eslint-disable-next-line complexity\nconst ChatComposer: React.ComponentType<DSChatT.ComposerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ComposerProps>(props, defaultPropsComposer);\n useValidateTypescriptPropTypes<DSChatT.ComposerProps>(\n propsWithDefault,\n ChatComposerPropTypes,\n DSChatContainerComposerName,\n );\n const {\n inputValue,\n onChange,\n onResize,\n onSend,\n onFocus,\n onBlur,\n onKeyDown,\n maxHeight = 300,\n placeholder,\n inputMaxLength,\n maxLengthMessage,\n ariaMaxLengthMessage,\n buttonDisabled,\n dataTestid,\n actionRef,\n } = propsWithDefault;\n\n const COMPOSER_MIN_HEIGHT = 32;\n const input = React.useRef<HTMLTextAreaElement | null>(null);\n const inputSize = React.useRef<HTMLTextAreaElement | null>(null);\n const inputSend = React.useRef<HTMLButtonElement>(null);\n const [height, setHeight] = React.useState(32);\n const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n const [showScroll, setShowScroll] = React.useState(true);\n\n React.useEffect(() => {\n if (inputSize?.current?.scrollHeight) {\n const newHeight =\n inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);\n setHeight(newHeight);\n setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);\n }\n }, [inputValue, internalMaxHeight, height, onResize]);\n\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusToComposer = () => {\n input?.current?.focus?.();\n };\n actionRef.current.focusToSend = () => {\n inputSend?.current?.focus?.();\n };\n }\n }, [actionRef]);\n\n const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = React.useCallback(\n (e) => {\n onChange(e.target.value);\n },\n [onChange],\n );\n const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n const inputLength = String(inputValue || '').length;\n const hasError = React.useMemo(() => {\n if (!inputMaxLength) return false;\n return inputLength > inputMaxLength;\n }, [inputLength, inputMaxLength]);\n\n const isSendButtonDisabled = useMemo(\n () => !inputValue || buttonDisabled || hasError,\n [inputValue, buttonDisabled, hasError],\n );\n return (\n <StyledChatContainerContentComposer\n rows={['auto', '15px']}\n maxHeight={`${maxHeight}px`}\n data-testid={dataTestid ?? ChatContainerDataTestIds.COMPOSER}\n >\n <Grid\n cols={['1fr', '24px']}\n style={{ height: heightProps.height }}\n justifyContent=\"center\"\n alignItems=\"flex-end\"\n gutter=\"xxs\"\n >\n <StyledComposerInput\n innerRef={input}\n onChange={handleChange}\n style={{ ...heightProps }}\n height={heightProps.height}\n value={inputValue}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n aria-label=\"Message to send\"\n data-testid={ChatContainerDataTestIds.COMPOSER_TEXTAREA}\n name=\"chat-composer-textarea\"\n id=\"chat-composer-textarea\"\n />\n\n <Grid height=\"32px\" alignItems=\"center\">\n <StyledComposerButton\n buttonType=\"icon\"\n onClick={onSend}\n size=\"s\"\n disabled={isSendButtonDisabled}\n aria-disabled={isSendButtonDisabled}\n data-testid={ChatContainerDataTestIds.COMPOSER_SEND_BUTTON}\n aria-label=\"Send\"\n innerRef={inputSend}\n >\n <PaperAirplane width={18} height={18} />\n </StyledComposerButton>\n </Grid>\n </Grid>\n <StyledComposerInput\n innerRef={inputSize}\n aria-label=\"ghost\"\n style={{\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n top: 0,\n width: input.current?.clientWidth,\n }}\n height={32}\n onChange={handleChange}\n value={inputValue}\n />\n <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n <StyledCounterArea hasError={hasError} data-testid={ChatContainerDataTestIds.COMPOSER_COUNTER_AREA}>\n {inputMaxLength && hasError ? (\n <>\n <StyledCounterErrorA11y role=\"alert\">\n {ariaMaxLengthMessage ||\n `You have entered ${inputLength} characters and have exceeded the limit by ${\n inputLength - inputMaxLength\n }. Please limit to less than ${inputMaxLength} characters. `}\n </StyledCounterErrorA11y>\n {maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `}\n </>\n ) : (\n ''\n )}\n {inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ''}\n </StyledCounterArea>\n <Grid />\n </Grid>\n </StyledChatContainerContentComposer>\n );\n};\n\nChatComposer.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgGjB,SAuDM,UAhDJ,KAPF;AA9FN,OAAOA,UAAS,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B,gCAAgC,gBAAgB;AACvF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,mCAAmC;AAE5C,SAAS,uBAAuB,4BAA4B;AAE5D,MAAM,eAA2D,CAAC,UAAU;AAC1E,QAAM,mBAAmB,6BAAoD,OAAO,oBAAoB;AACxG;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAsB;AAC5B,QAAM,QAAQA,OAAM,OAAmC,IAAI;AAC3D,QAAM,YAAYA,OAAM,OAAmC,IAAI;AAC/D,QAAM,YAAYA,OAAM,OAA0B,IAAI;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAIA,OAAM,SAAS,EAAE;AAC7C,QAAM,oBAAoBA,OAAM,QAAQ,MAAM,YAAY,IAAI,CAAC,SAAS,CAAC;AACzE,QAAM,CAAC,YAAY,aAAa,IAAIA,OAAM,SAAS,IAAI;AAEvD,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,WAAW,SAAS,cAAc;AACpC,YAAM,YACJ,UAAU,QAAQ,eAAe,oBAAoB,oBAAoB,UAAU,SAAS;AAC9F,UAAI,cAAc,UAAU,YAAY,uBAAuB
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-props-helpers';\nimport {\n StyledChatContainerContentComposer,\n StyledComposerInput,\n StyledComposerButton,\n StyledCounterArea,\n StyledCounterErrorA11y,\n} from './styled.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\nimport { DSChatContainerComposerName } from '../../DSChatContainerDefinitions.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types.js';\n// eslint-disable-next-line complexity\nconst ChatComposer: React.ComponentType<DSChatT.ComposerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ComposerProps>(props, defaultPropsComposer);\n useValidateTypescriptPropTypes<DSChatT.ComposerProps>(\n propsWithDefault,\n ChatComposerPropTypes,\n DSChatContainerComposerName,\n );\n const {\n inputValue,\n onChange,\n onResize,\n onSend,\n onFocus,\n onBlur,\n onKeyDown,\n maxHeight = 300,\n placeholder,\n inputMaxLength,\n maxLengthMessage,\n ariaMaxLengthMessage,\n buttonDisabled,\n dataTestid,\n actionRef,\n } = propsWithDefault;\n\n const COMPOSER_MIN_HEIGHT = 32;\n const input = React.useRef<HTMLTextAreaElement | null>(null);\n const inputSize = React.useRef<HTMLTextAreaElement | null>(null);\n const inputSend = React.useRef<HTMLButtonElement>(null);\n const [height, setHeight] = React.useState(32);\n const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n const [showScroll, setShowScroll] = React.useState(true);\n\n React.useEffect(() => {\n if (inputSize?.current?.scrollHeight) {\n const newHeight =\n inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);\n setHeight(newHeight);\n setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);\n }\n }, [inputValue, internalMaxHeight, height, onResize]);\n\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusToComposer = () => {\n input?.current?.focus?.();\n };\n actionRef.current.focusToSend = () => {\n inputSend?.current?.focus?.();\n };\n }\n }, [actionRef]);\n\n const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = React.useCallback(\n (e) => {\n onChange(e.target.value);\n },\n [onChange],\n );\n const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n const inputLength = String(inputValue || '').length;\n const hasError = React.useMemo(() => {\n if (!inputMaxLength) return false;\n return inputLength > inputMaxLength;\n }, [inputLength, inputMaxLength]);\n\n const isSendButtonDisabled = useMemo(\n () => !inputValue || buttonDisabled || hasError,\n [inputValue, buttonDisabled, hasError],\n );\n return (\n <StyledChatContainerContentComposer\n rows={['auto', '15px']}\n maxHeight={`${maxHeight}px`}\n data-testid={dataTestid ?? ChatContainerDataTestIds.COMPOSER}\n >\n <Grid\n cols={['1fr', '24px']}\n style={{ height: heightProps.height }}\n justifyContent=\"center\"\n alignItems=\"flex-end\"\n gutter=\"xxs\"\n >\n <StyledComposerInput\n innerRef={input}\n onChange={handleChange}\n style={{ ...heightProps }}\n height={heightProps.height}\n value={inputValue}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n aria-label=\"Message to send\"\n data-testid={ChatContainerDataTestIds.COMPOSER_TEXTAREA}\n name=\"chat-composer-textarea\"\n id=\"chat-composer-textarea\"\n />\n\n <Grid height=\"32px\" alignItems=\"center\">\n <StyledComposerButton\n buttonType=\"icon\"\n onClick={onSend}\n size=\"s\"\n disabled={isSendButtonDisabled}\n aria-disabled={isSendButtonDisabled}\n data-testid={ChatContainerDataTestIds.COMPOSER_SEND_BUTTON}\n aria-label=\"Send\"\n innerRef={inputSend}\n >\n <PaperAirplane width={18} height={18} />\n </StyledComposerButton>\n </Grid>\n </Grid>\n <StyledComposerInput\n innerRef={inputSize}\n aria-label=\"ghost\"\n style={{\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n top: 0,\n width: input.current?.clientWidth,\n }}\n height={32}\n onChange={handleChange}\n value={inputValue}\n />\n <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n <StyledCounterArea hasError={hasError} data-testid={ChatContainerDataTestIds.COMPOSER_COUNTER_AREA}>\n {inputMaxLength && hasError ? (\n <>\n <StyledCounterErrorA11y role=\"alert\">\n {ariaMaxLengthMessage ||\n `You have entered ${inputLength} characters and have exceeded the limit by ${\n inputLength - inputMaxLength\n }. Please limit to less than ${inputMaxLength} characters. `}\n </StyledCounterErrorA11y>\n {maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `}\n </>\n ) : (\n ''\n )}\n {inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ''}\n </StyledCounterArea>\n <Grid />\n </Grid>\n </StyledChatContainerContentComposer>\n );\n};\n\nChatComposer.displayName = 'ChatComposer';\nconst ChatComposerWithSchema = describe(ChatComposer);\nChatComposerWithSchema.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatComposer, ChatComposerWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
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-composer/styled.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { TextAreaProps } from '../../react-desc-prop-types.js';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)<{ maxHeight: string }>`\n width: 100%;\n min-height: 56px;\n background: ${(props) => props.theme.colors.neutral['050']};\n padding: ${(props) => props.theme.space.xxs};\n padding-bottom: 3px;\n padding-top: 6px;\n padding-left: ${(props) => props.theme.space.xs};\n max-height: ${(props) => props.maxHeight};\n border-top: 1px solid #cbcfd7;\n`;\n\nexport const StyledComposerInput = styled.textarea<TextAreaProps>`\n padding: ${(props) => props.theme.space.xxs};\n resize: none;\n min-height: 32px;\n border-radius: 2px;\n border: solid 1px #cbcfd7;\n color: #25292f;\n height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};\n min-width: 244px;\n overflow-y: auto;\n font-size: 13px;\n font-weight: 400;\n line-height: 1;\n transition: height 0.05s;\n\n &:focus {\n outline: none;\n border: 1px solid ${(props) => props.theme.colors.brand[600]};\n box-shadow: inset 0 0 0 1px #8cc2ed;\n border-radius: 2px;\n }\n`;\nexport const StyledComposerButton = styled(DSButtonV2)`\n &:disabled {\n background: none;\n svg {\n fill: #5d6775;\n }\n }\n svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n &:focus {\n background: ${(props) => props.theme.colors.brand[200]};\n }\n`;\n\nexport const StyledCounterArea = styled(Grid)<{ hasError: boolean }>`\n text-align: right;\n font-size: 11px;\n height: 15px;\n align-items: center;\n font-style: italic;\n ${(props) => (props.hasError ? `color:${props.theme.colors.danger[900]};` : '')}\n position:relative;\n`;\n\nexport const StyledCounterErrorA11y = styled.span`\n width: 1px;\n height: 1px;\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAIpB,MAAM,qCAAqC,OAAO,IAAI;AAAA;AAAA;AAAA,gBAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAIpB,MAAM,qCAAqC,OAAO,IAAI;AAAA;AAAA;AAAA,gBAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,aAC/C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,kBAG3B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,gBACjC,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA;AAInC,MAAM,sBAAsB,OAAO;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMjC,CAAC,UAAW,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUtE,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAKzD,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQzC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,kBAGlC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAInD,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxC,CAAC,UAAW,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC,MAAM,EAAG;AAAA;AAAA;AAI1E,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -102,7 +102,6 @@ const ChatContainerMessagesList = (props) => {
|
|
|
102
102
|
] }, newMessage.dsId)) })
|
|
103
103
|
] });
|
|
104
104
|
};
|
|
105
|
-
ChatContainerMessagesList.propTypes = ChatContainerMessagesListPropTypes;
|
|
106
105
|
ChatContainerMessagesList.displayName = "ChatContainerMessagesList";
|
|
107
106
|
const ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);
|
|
108
107
|
ChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes;
|
|
@@ -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/ChatContainerMessagesList.tsx"],
|
|
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 type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n StyledWrapperListItem,\n StyledChatContainerContentList,\n StyledChatContainerContentListScroll,\n StyledWrapper,\n StyledLoadMoreContainer,\n ListItem,\n StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\n\ntype ButtonV2InnerRefT = DSButtonV2T.Props['innerRef'];\n\nconst ChatContainerMessagesList: React.ComponentType<DSChatT.MessagesListProps> = (props) => {\n const {\n propsWithDefault,\n globalAttributes,\n useVirtualHelpers,\n handleKey,\n handleListKey,\n loadMoreRef,\n virtualListRef,\n } = useChatContainerMessageList(props);\n\n const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;\n const { totalSize, virtualItems } = useVirtualHelpers;\n\n const newMessages = useGetNewMessages(messages);\n\n const render = React.useMemo(\n () =>\n virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const row = messages[index];\n const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n const style: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n transform: `translateY(${start}px)`,\n width: '100%',\n };\n\n return (\n <ListItem\n data-element=\"chat-element-list-item\"\n data-index={index}\n key={`ds-chat-bubble-${index}-${row.dsId}-${row.type}`}\n style={style}\n innerRef={measureRef}\n tabIndex={-1}\n onKeyDown={handleKey}\n role=\"listitem\"\n >\n <StyledWrapperListItem type={row.type}>\n {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n ) : null}\n {row.type === BUBBLE_TYPES.DELIMITER ? (\n <MessageDelimiter {...(row as unknown as DSChatMessageDelimeterT.Props)} />\n ) : null}\n {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as DSChatSystemMessageT.Props)} /> : null}\n </StyledWrapperListItem>\n </ListItem>\n );\n }),\n [virtualItems, messages, sendingMessages, handleKey, sendingText],\n );\n\n return (\n <StyledWrapper {...globalAttributes}>\n <StyledChatContainerContentList\n data-testid={ChatContainerDataTestIds.THREAD_CONTAINER}\n tabIndex={0}\n innerRef={virtualListRef as React.RefObject<HTMLDivElement>}\n role=\"list\"\n onKeyDown={handleListKey}\n >\n <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n {!isLoading && hasMoreItems ? (\n <StyledLoadMoreContainer hasMoreItems={hasMoreItems} role=\"listitem\">\n <DSButtonV2\n buttonType=\"outline\"\n onClick={getMoreMessages}\n data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n innerRef={loadMoreRef as ButtonV2InnerRefT}\n >\n Load More\n </DSButtonV2>\n </StyledLoadMoreContainer>\n ) : null}\n {render}\n </StyledChatContainerContentListScroll>\n </StyledChatContainerContentList>\n {/* We repeat the render with the new available messages */}\n <StyledNewMessagesHiddenContainer aria-live=\"polite\" aria-hidden=\"false\">\n {newMessages.map((newMessage) => (\n <p key={newMessage.dsId}>\n {newMessage.title} {newMessage.time} {newMessage.body} {newMessage.errorMessage} {newMessage.helpMessage}\n </p>\n ))}\n </StyledNewMessagesHiddenContainer>\n </StyledWrapper>\n );\n};\n\nChatContainerMessagesList.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACsEX,SAEI,KAFJ;AAlEZ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,kBAAoC;AAC7C,SAAS,YAAY,oBAAoB;AAEzC,SAAS,wBAAwB;AAEjC,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0CAA0C;AACnD,SAAS,yBAAyB;AAClC,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AAIzC,MAAM,4BAA4E,CAAC,UAAU;AAC3F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B,KAAK;AAErC,QAAM,EAAE,aAAa,iBAAiB,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAC7F,QAAM,EAAE,WAAW,aAAa,IAAI;AAEpC,QAAM,cAAc,kBAAkB,QAAQ;AAE9C,QAAM,SAASA,OAAM;AAAA,IACnB,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,MAAM,SAAS,KAAK;AAC1B,YAAM,YAAY,mBAAmB,gBAAgB,KAAK,CAAC,MAAM,MAAM,IAAI,IAAI;AAC/E,YAAM,QAAuB;AAAA,QAC3B,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW,cAAc;AAAA,
|
|
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 type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n StyledWrapperListItem,\n StyledChatContainerContentList,\n StyledChatContainerContentListScroll,\n StyledWrapper,\n StyledLoadMoreContainer,\n ListItem,\n StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\n\ntype ButtonV2InnerRefT = DSButtonV2T.Props['innerRef'];\n\nconst ChatContainerMessagesList: React.ComponentType<DSChatT.MessagesListProps> = (props) => {\n const {\n propsWithDefault,\n globalAttributes,\n useVirtualHelpers,\n handleKey,\n handleListKey,\n loadMoreRef,\n virtualListRef,\n } = useChatContainerMessageList(props);\n\n const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;\n const { totalSize, virtualItems } = useVirtualHelpers;\n\n const newMessages = useGetNewMessages(messages);\n\n const render = React.useMemo(\n () =>\n virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const row = messages[index];\n const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n const style: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n transform: `translateY(${start}px)`,\n width: '100%',\n };\n\n return (\n <ListItem\n data-element=\"chat-element-list-item\"\n data-index={index}\n key={`ds-chat-bubble-${index}-${row.dsId}-${row.type}`}\n style={style}\n innerRef={measureRef}\n tabIndex={-1}\n onKeyDown={handleKey}\n role=\"listitem\"\n >\n <StyledWrapperListItem type={row.type}>\n {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n ) : null}\n {row.type === BUBBLE_TYPES.DELIMITER ? (\n <MessageDelimiter {...(row as unknown as DSChatMessageDelimeterT.Props)} />\n ) : null}\n {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as DSChatSystemMessageT.Props)} /> : null}\n </StyledWrapperListItem>\n </ListItem>\n );\n }),\n [virtualItems, messages, sendingMessages, handleKey, sendingText],\n );\n\n return (\n <StyledWrapper {...globalAttributes}>\n <StyledChatContainerContentList\n data-testid={ChatContainerDataTestIds.THREAD_CONTAINER}\n tabIndex={0}\n innerRef={virtualListRef as React.RefObject<HTMLDivElement>}\n role=\"list\"\n onKeyDown={handleListKey}\n >\n <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n {!isLoading && hasMoreItems ? (\n <StyledLoadMoreContainer hasMoreItems={hasMoreItems} role=\"listitem\">\n <DSButtonV2\n buttonType=\"outline\"\n onClick={getMoreMessages}\n data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n innerRef={loadMoreRef as ButtonV2InnerRefT}\n >\n Load More\n </DSButtonV2>\n </StyledLoadMoreContainer>\n ) : null}\n {render}\n </StyledChatContainerContentListScroll>\n </StyledChatContainerContentList>\n {/* We repeat the render with the new available messages */}\n <StyledNewMessagesHiddenContainer aria-live=\"polite\" aria-hidden=\"false\">\n {newMessages.map((newMessage) => (\n <p key={newMessage.dsId}>\n {newMessage.title} {newMessage.time} {newMessage.body} {newMessage.errorMessage} {newMessage.helpMessage}\n </p>\n ))}\n </StyledNewMessagesHiddenContainer>\n </StyledWrapper>\n );\n};\n\nChatContainerMessagesList.displayName = 'ChatContainerMessagesList';\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
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/styled.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\n\nexport const StyledWrapper = styled.div`\n width: 100%;\n height: 100%;\n`;\n\n// list\nexport const StyledWrapperListItem = styled.div<Partial<DSChatBubbleT.Props>>`\n min-width: 100%;\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER &&\n `padding: ${props.theme.space.xxs} ${props.theme.space.xxs} ${props.theme.space.xxs} 13%\n `};\n ${(props) =>\n props.type === BUBBLE_TYPES.RECIPIENT &&\n `padding: ${props.theme.space.xxs} 13% ${props.theme.space.xxs}\n ${props.theme.space.xxs}\n `};\n ${(props) =>\n props.type === BUBBLE_TYPES.SYSTEM &&\n `padding: ${props.theme.space.xxs} 0px\n `};\n`;\n\nexport const StyledChatContainerContentList = styled.div`\n width: 100%;\n height: 100%;\n padding: ${(props) => props.theme.space.xs};\n padding-bottom: 0;\n overflow-y: auto;\n overflow-x: hidden;\n`;\n\nexport const StyledNewMessagesHiddenContainer = styled.div`\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n white-space: nowrap;\n`;\n\nexport const StyledChatContainerContentListScroll = styled.div<{ height: string }>`\n width: 100%;\n height: ${(props) => props.height};\n position: relative;\n`;\n\nexport const StyledLoadMoreContainer = styled.div<{ hasMoreItems?: 'top' | 'bottom' }>`\n position: absolute;\n width: calc(100% + ${(props) => props.theme.space.xxs});\n padding: ${(props) => props.theme.space.xxs};\n left: -${(props) => props.theme.space.xxs};\n right: -${(props) => props.theme.space.xxs};\n display: grid;\n justify-content: center;\n align-items: center;\n ${(props) => (props.hasMoreItems === 'top' ? 'top: 0;' : '')}\n ${(props) => (props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '')}\n`;\nexport const ListItem = styled.div`\n &:focus,\n &:focus-visible {\n outline: none;\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: -${(props) => props.theme.space.xxs};\n pointer-events: none;\n border-radius: 2px;\n background-color: #ebedf0;\n width: calc(100% + 24px);\n border: 2px solid #1e79c2;\n height: 100%;\n z-index: -1;\n }\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEvB,SAAS,oBAAoB;AAEtB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,OAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEvB,SAAS,oBAAoB;AAEtB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,OAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG;AAAA,GACpF;AAAA,IACC,CAAC,UACD,MAAM,SAAS,aAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,MAAM,GAAG;AAAA,MAC5D,MAAM,MAAM,MAAM,GAAG;AAAA,GACxB;AAAA,IACC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG;AAAA,GAClC;AAAA;AAGI,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA,aAGxC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,mCAAmC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahD,MAAM,uCAAuC,OAAO;AAAA;AAAA,YAE/C,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAI5B,MAAM,0BAA0B,OAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,WAClC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,YAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,IAIxC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY,EAAG;AAAA,IAC1D,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe,EAAG;AAAA;AAE7D,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,10 +17,8 @@ const getPadding = ({ hasMoreItems, bannerPosition, isLoading }) => {
|
|
|
17
17
|
paddingStart: 0,
|
|
18
18
|
paddingEnd: -5
|
|
19
19
|
};
|
|
20
|
-
if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === "top"))
|
|
21
|
-
|
|
22
|
-
else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === "bottom"))
|
|
23
|
-
padding.paddingEnd = 42;
|
|
20
|
+
if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === "top")) padding.paddingStart = 42;
|
|
21
|
+
else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === "bottom")) padding.paddingEnd = 42;
|
|
24
22
|
return padding;
|
|
25
23
|
};
|
|
26
24
|
const useChatContainerMessageList = (props) => {
|
|
@@ -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-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
|
|
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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -13,8 +13,7 @@ const useFocusAndScrollHelpers = ({
|
|
|
13
13
|
pendingOnScroll.current = true;
|
|
14
14
|
return [];
|
|
15
15
|
}
|
|
16
|
-
if (!virtualListRef.current)
|
|
17
|
-
return [];
|
|
16
|
+
if (!virtualListRef.current) return [];
|
|
18
17
|
pendingOnScroll.current = false;
|
|
19
18
|
const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};
|
|
20
19
|
const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
|
|
@@ -22,11 +21,9 @@ const useFocusAndScrollHelpers = ({
|
|
|
22
21
|
list.forEach((item) => {
|
|
23
22
|
const { top: itemTop } = item.getBoundingClientRect();
|
|
24
23
|
const itemPadding = 10;
|
|
25
|
-
if (itemTop + itemPadding < bottom && itemTop + itemPadding > top)
|
|
26
|
-
indexList.push(item.dataset.index || "");
|
|
24
|
+
if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || "");
|
|
27
25
|
});
|
|
28
|
-
if (onScrollEnds)
|
|
29
|
-
onScrollEnds(indexList);
|
|
26
|
+
if (onScrollEnds) onScrollEnds(indexList);
|
|
30
27
|
return indexList;
|
|
31
28
|
}, 500),
|
|
32
29
|
[onScrollEnds, pendingOnScroll, virtualListRef]
|
|
@@ -48,8 +45,7 @@ const useFocusAndScrollHelpers = ({
|
|
|
48
45
|
[onScrollStop, onlyFocus, vScroll]
|
|
49
46
|
);
|
|
50
47
|
const checkPendingOnScroll = React2.useCallback(() => {
|
|
51
|
-
if (pendingOnScroll.current === true)
|
|
52
|
-
onScrollStop();
|
|
48
|
+
if (pendingOnScroll.current === true) onScrollStop();
|
|
53
49
|
}, [onScrollStop, pendingOnScroll]);
|
|
54
50
|
return React2.useMemo(
|
|
55
51
|
() => ({
|
|
@@ -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 type { useVirtual } from 'react-virtual';\nimport { debounce } from 'lodash';\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 setTimeout(() => {\n onlyFocus(index.toString());\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,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
|
|
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;AAClC,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AACN,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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -10,8 +10,7 @@ const useGlobalEventListener = ({
|
|
|
10
10
|
let handlerCallback;
|
|
11
11
|
const localVirtualRef = virtualListRef.current;
|
|
12
12
|
const onScroll = () => {
|
|
13
|
-
if (handlerCallback)
|
|
14
|
-
clearTimeout(handlerCallback);
|
|
13
|
+
if (handlerCallback) clearTimeout(handlerCallback);
|
|
15
14
|
handlerCallback = setTimeout(onScrollStop, 300);
|
|
16
15
|
};
|
|
17
16
|
if (onScrollEnds) {
|
|
@@ -19,10 +18,8 @@ const useGlobalEventListener = ({
|
|
|
19
18
|
}
|
|
20
19
|
document.addEventListener("visibilitychange", checkPendingOnScroll);
|
|
21
20
|
return () => {
|
|
22
|
-
if (handlerCallback)
|
|
23
|
-
|
|
24
|
-
if (onScrollEnds && localVirtualRef)
|
|
25
|
-
localVirtualRef.removeEventListener("scroll", onScroll);
|
|
21
|
+
if (handlerCallback) clearTimeout(handlerCallback);
|
|
22
|
+
if (onScrollEnds && localVirtualRef) localVirtualRef.removeEventListener("scroll", onScroll);
|
|
26
23
|
document.removeEventListener("visibilitychange", checkPendingOnScroll);
|
|
27
24
|
};
|
|
28
25
|
}, [onScrollStop, onScrollEnds, checkPendingOnScroll, virtualListRef]);
|
|
@@ -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 TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseGlobalEventListenerArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n onScrollStop: () => string[];\n checkPendingOnScroll: TypescriptHelpersT.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) localVirtualRef.removeEventListener('scroll', onScroll);\n document.removeEventListener('visibilitychange', checkPendingOnScroll);\n };\n }, [onScrollStop, onScrollEnds, checkPendingOnScroll, virtualListRef]);\n};\n"],
|
|
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
|
|
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,gBAAiB,cAAa,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,gBAAiB,cAAa,eAAe;AACjD,UAAI,gBAAgB,gBAAiB,iBAAgB,oBAAoB,UAAU,QAAQ;AAC3F,eAAS,oBAAoB,oBAAoB,oBAAoB;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,cAAc,cAAc,sBAAsB,cAAc,CAAC;AACvE;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -37,8 +37,7 @@ const useKeyboard = ({
|
|
|
37
37
|
break;
|
|
38
38
|
case "End":
|
|
39
39
|
e.preventDefault();
|
|
40
|
-
if (messages?.length)
|
|
41
|
-
scrollAndFocus(messages.length - 1);
|
|
40
|
+
if (messages?.length) scrollAndFocus(messages.length - 1);
|
|
42
41
|
break;
|
|
43
42
|
case "Tab":
|
|
44
43
|
if (hasMoreItems === "bottom" && !e.shiftKey) {
|
|
@@ -71,8 +70,7 @@ const useKeyboard = ({
|
|
|
71
70
|
e.preventDefault();
|
|
72
71
|
if (document.activeElement !== loadMoreRef.current) {
|
|
73
72
|
const id = onScrollStop()?.shift();
|
|
74
|
-
if (id)
|
|
75
|
-
onlyFocus(id);
|
|
73
|
+
if (id) onlyFocus(id);
|
|
76
74
|
}
|
|
77
75
|
break;
|
|
78
76
|
case "ArrowDown":
|
|
@@ -81,8 +79,7 @@ const useKeyboard = ({
|
|
|
81
79
|
virtualListRef.current?.querySelector(`[data-index="0"]`)?.focus();
|
|
82
80
|
} else {
|
|
83
81
|
const id = onScrollStop()?.pop();
|
|
84
|
-
if (id)
|
|
85
|
-
onlyFocus(id);
|
|
82
|
+
if (id) onlyFocus(id);
|
|
86
83
|
}
|
|
87
84
|
break;
|
|
88
85
|
case "Home":
|
|
@@ -91,8 +88,7 @@ const useKeyboard = ({
|
|
|
91
88
|
break;
|
|
92
89
|
case "End":
|
|
93
90
|
e.preventDefault();
|
|
94
|
-
if (messages?.length)
|
|
95
|
-
scrollAndFocus(messages.length - 1);
|
|
91
|
+
if (messages?.length) scrollAndFocus(messages.length - 1);
|
|
96
92
|
break;
|
|
97
93
|
case "Tab":
|
|
98
94
|
if (document.activeElement !== loadMoreRef.current) {
|
|
@@ -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 { 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,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
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.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Wrapper, Title, Time, Message } from '@elliemae/ds-chat-system-message';\nimport { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '@elliemae/ds-chat-bubble';\nimport { StyledComposerInput } from './parts/chat-composer/styled.js';\nexport const CONTAINER_WIDTH = 300;\n\nexport const StyledChatContainerContent = styled(Grid)`\n height: 100%;\n min-width: ${CONTAINER_WIDTH}px;\n overflow: hidden;\n background: ${(props) => props.theme.colors.neutral['050']};\n position: relative;\n`;\nexport const StyledIndicatorContainer = styled.div<{\n isLoading?: 'top' | 'bottom';\n linear?: boolean;\n}>`\n transition: 0.2s ease-in-out;\n // 0.2s is the same duration of the banner settimeout function to focus itself\n // this has to be this way to fix visual bugs on safari.\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n width: 100%;\n padding: 0 ${(props) => (!props.linear ? props.theme.space.xxs : 0)};\n left: 0;\n right: 0;\n background: ${(props) => props.theme.colors.neutral['000']};\n ${(props) =>\n props.isLoading === 'top'\n ? `\n top: -41px;\n transform: translate(0, 41px);\n visibility: visible;\n pointer-events: auto;\n `\n : ''}\n ${(props) =>\n props.isLoading === 'bottom'\n ? `\n bottom: -41px;\n transform: translate(0, -41px);\n visibility: visible;\n pointer-events: auto;\n `\n : ''}\n\n & div,a {\n font-size: 13px;\n }\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`\n ${StyledTitleLeftBubble as any},\n ${StyleBodyWrapper as any} {\n font-size: 16px;\n }\n\n ${StyledTitleRightBubble as any} {\n font-size: 13px;\n }\n\n ${Wrapper as any} {\n background-color: #fff;\n box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);\n }\n\n ${Title as any},\n ${Message as any} {\n font-size: 16px;\n text-align: left;\n }\n\n ${Time as any} {\n font-size: 13px;\n }\n\n ${StyledComposerInput as any} {\n font-size: 16px;\n }\n\n ${StyledIndicatorContainer as any} {\n font-size: 16px;\n }\n`;\n/* eslint-enable @typescript-eslint/no-explicit-any */\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,SAAS,OAAO,MAAM,eAAe;AAC9C,SAAS,wBAAwB,uBAAuB,wBAAwB;AAChF,SAAS,2BAA2B;AAC7B,MAAM,kBAAkB;AAExB,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA,eAEtC;AAAA;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,SAAS,OAAO,MAAM,eAAe;AAC9C,SAAS,wBAAwB,uBAAuB,wBAAwB;AAChF,SAAS,2BAA2B;AAC7B,MAAM,kBAAkB;AAExB,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA,eAEtC,eAAe;AAAA;AAAA,gBAEd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAGrD,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAWhC,CAAC,UAAW,CAAC,MAAM,SAAS,MAAM,MAAM,MAAM,MAAM,CAAE;AAAA;AAAA;AAAA,gBAGrD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IACxD,CAAC,UACD,MAAM,cAAc,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,EAAE;AAAA,IACN,CAAC,UACD,MAAM,cAAc,WAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAQH,MAAM,mCAAmC,OAAO,0BAA0B;AAAA,IAC7E,qBAA4B;AAAA,IAC5B,gBAAuB;AAAA;AAAA;AAAA;AAAA,IAIvB,sBAA6B;AAAA;AAAA;AAAA;AAAA,IAI7B,OAAc;AAAA;AAAA;AAAA;AAAA;AAAA,IAKd,KAAY;AAAA,IACZ,OAAc;AAAA;AAAA;AAAA;AAAA;AAAA,IAKd,IAAW;AAAA;AAAA;AAAA;AAAA,IAIX,mBAA0B;AAAA;AAAA;AAAA;AAAA,IAI1B,wBAA+B;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chat-container",
|
|
3
|
-
"version": "3.36.0-next.
|
|
3
|
+
"version": "3.36.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chat Container",
|
|
6
6
|
"files": [
|
|
@@ -125,24 +125,24 @@
|
|
|
125
125
|
},
|
|
126
126
|
"dependencies": {
|
|
127
127
|
"react-virtual": "~2.10.4",
|
|
128
|
-
"@elliemae/ds-
|
|
129
|
-
"@elliemae/ds-button-v2": "3.36.0-next.
|
|
130
|
-
"@elliemae/ds-
|
|
131
|
-
"@elliemae/ds-chat-container-header": "3.36.0-next.
|
|
132
|
-
"@elliemae/ds-chat-message-delimeter": "3.36.0-next.
|
|
133
|
-
"@elliemae/ds-chat-system-message": "3.36.0-next.
|
|
134
|
-
"@elliemae/ds-grid": "3.36.0-next.
|
|
135
|
-
"@elliemae/ds-
|
|
136
|
-
"@elliemae/ds-
|
|
137
|
-
"@elliemae/ds-
|
|
138
|
-
"@elliemae/ds-system": "3.36.0-next.
|
|
139
|
-
"@elliemae/ds-typescript-helpers": "3.36.0-next.
|
|
128
|
+
"@elliemae/ds-banner": "3.36.0-next.1",
|
|
129
|
+
"@elliemae/ds-button-v2": "3.36.0-next.1",
|
|
130
|
+
"@elliemae/ds-chat-bubble": "3.36.0-next.1",
|
|
131
|
+
"@elliemae/ds-chat-container-header": "3.36.0-next.1",
|
|
132
|
+
"@elliemae/ds-chat-message-delimeter": "3.36.0-next.1",
|
|
133
|
+
"@elliemae/ds-chat-system-message": "3.36.0-next.1",
|
|
134
|
+
"@elliemae/ds-grid": "3.36.0-next.1",
|
|
135
|
+
"@elliemae/ds-icons": "3.36.0-next.1",
|
|
136
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.36.0-next.1",
|
|
137
|
+
"@elliemae/ds-props-helpers": "3.36.0-next.1",
|
|
138
|
+
"@elliemae/ds-system": "3.36.0-next.1",
|
|
139
|
+
"@elliemae/ds-typescript-helpers": "3.36.0-next.1"
|
|
140
140
|
},
|
|
141
141
|
"devDependencies": {
|
|
142
142
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
143
143
|
"@types/react": "latest",
|
|
144
144
|
"styled-components": "~5.3.9",
|
|
145
|
-
"@elliemae/ds-monorepo-devops": "3.36.0-next.
|
|
145
|
+
"@elliemae/ds-monorepo-devops": "3.36.0-next.1"
|
|
146
146
|
},
|
|
147
147
|
"peerDependencies": {
|
|
148
148
|
"lodash": "^4.17.21",
|