@elliemae/ds-chat-container 3.16.0-next.2 → 3.16.0-next.3
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 +5 -5
- package/dist/cjs/ChatContainer.js.map +2 -2
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js +4 -4
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +2 -2
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js +4 -4
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +38 -38
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/ChatContainer.js +1 -1
- package/dist/esm/ChatContainer.js.map +2 -2
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js +1 -1
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +1 -1
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js +1 -1
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/types/ChatContainer.d.ts +1 -1
- package/dist/types/parts/chat-composer/ChatContainerComposer.d.ts +1 -1
- package/dist/types/parts/chat-container-messages-list/ChatContainerMessagesList.d.ts +1 -1
- package/dist/types/parts/chat-container-messages-list/useChatContainerMessageList.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +763 -763
- package/package.json +14 -13
|
@@ -32,7 +32,7 @@ var React = __toESM(require("react"));
|
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_react = __toESM(require("react"));
|
|
34
34
|
var import_lodash = require("lodash");
|
|
35
|
-
var
|
|
35
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
36
|
var import_ds_indeterminate_progress_indicator = __toESM(require("@elliemae/ds-indeterminate-progress-indicator"));
|
|
37
37
|
var import_ds_banner = __toESM(require("@elliemae/ds-banner"));
|
|
38
38
|
var import_chat_composer = require("./parts/chat-composer");
|
|
@@ -42,9 +42,9 @@ var import_ChatContainerDataTestids = require("./ChatContainerDataTestids");
|
|
|
42
42
|
var import_styled = require("./styled");
|
|
43
43
|
var import_DSChatContainerDefinitions = require("./DSChatContainerDefinitions");
|
|
44
44
|
const ChatContainer = (props) => {
|
|
45
|
-
const propsWithDefault = (0,
|
|
46
|
-
(0,
|
|
47
|
-
const globalAttributes = (0,
|
|
45
|
+
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
46
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.ChatContainerPropTypes, import_DSChatContainerDefinitions.DSChatContainerName);
|
|
47
|
+
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
48
48
|
const {
|
|
49
49
|
sendingText,
|
|
50
50
|
sendingMessages,
|
|
@@ -136,6 +136,6 @@ const ChatContainer = (props) => {
|
|
|
136
136
|
};
|
|
137
137
|
ChatContainer.propTypes = import_react_desc_prop_types.ChatContainerPropTypes;
|
|
138
138
|
ChatContainer.displayName = "ChatContainer";
|
|
139
|
-
const ChatContainerWithSchema = (0,
|
|
139
|
+
const ChatContainerWithSchema = (0, import_ds_props_helpers.describe)(ChatContainer);
|
|
140
140
|
ChatContainerWithSchema.propTypes = import_react_desc_prop_types.ChatContainerPropTypes;
|
|
141
141
|
//# sourceMappingURL=ChatContainer.js.map
|
|
@@ -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-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list';\nimport type { DSChatT } from './react-desc-prop-types';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\nimport { DSChatContainerName } from './DSChatContainerDefinitions';\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(propsWithDefault);\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<HTMLElement>();\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']} ref={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.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuEjB;AApEN,mBAAkB;AAClB,oBAAqB;AACrB,8BAKO;AACP,iDAA6C;AAC7C,uBAAuC;AACvC,2BAA6B;AAC7B,0CAA0C;AAE1C,mCAAqD;AACrD,sCAAyC;AACzC,oBAAuG;AACvG,wCAAoC;AAEpC,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,sDAAqD,OAAO,yCAAY;AACjG,8DAAuD,kBAAkB,qDAAwB,qDAAmB;AACpH,QAAM,uBAAmB,gDAAuB,gBAAgB;AAEhE,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,OAAoB;AAC/C,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;AAAmB,0BAAkB,CAAC;AAAA,eACjC,EAAE,YAAY,EAAE,QAAQ,SAAS,kBAAkB,UAAU,SAAS,GAAG;AAChF,UAAE,eAAe;AACjB,YAAI,kBAAkB,CAAC,OAAO,QAAQ,EAAE,SAAS,cAAc,GAAG;AAChE,oBAAU,QAAQ,eAAe;AAAA,QACnC;AACA,YAAI,WAAW,WAAW,UAAU,QAAQ,mBAAmB;AAC7D,gBAAM,OAAO,UAAU,QAAQ,kBAAkB,EAAE,IAAI;AACvD,cAAI,QAAQ,UAAU,QAAQ;AAA2B,sBAAU,SAAS,0BAA0B,IAAI;AAAA,QAC5G;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,mBAAmB,gBAAgB,kBAAkB,UAAU,MAAM;AAAA,EACnF;AAGA,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,gBAAgB,UAAU,QAAQ;AACpD,gBAAU,QAAQ,oBAAoB,UAAU,QAAQ;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AACd,SACE,6CAAC,aAAW,GAAG,kBAAkB,MAAM,CAAC,kBAAkB,MAAM,GAAG,KAAK,cAAc,MAAK,UACzF;AAAA,iDAAC,SAAI,OAAO,EAAE,UAAU,YAAY,UAAU,SAAS,GACrD;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,aAAa;AAAA,UACxB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC,aAAa,CAAC,OAAO,QAAQ,EAAE,SAAS,SAAS,IAChD,4CAAC,0CAAyB,WAAsB,eAAa,yDAAyB,mBACpF,sDAAC,2CAAAC,SAAA,EAAiC,YAAU,MAAC,OAAM,WAAU,GAC/D,IACE;AAAA,MACJ,4CAAC,0CAAyB,QAAM,MAAC,WAAW,gBAC1C;AAAA,QAAC,iBAAAC;AAAA,QAAA;AAAA,UACC,iBAAe;AAAA,UACf,OAAO,aAAa,SAAS;AAAA,UAC7B,gBAAgB,EAAE,IAAI,iBAAiB;AAAA,UACvC,YAAY;AAAA,YACV,OAAO,aAAa,aAAa;AAAA,YACjC,SAAS,aAAa;AAAA,UACxB;AAAA,UACA,SAAS,aAAa;AAAA,UACtB,QAAM;AAAA,UACN,MAAM,aAAa,QAAQ,8BAAa;AAAA,UACxC,WAAW;AAAA;AAAA,MACb,GACF;AAAA,MACC,mBAAmB,gBAAgB,SAAS,IAC3C,4CAAC,0CAAyB,WAAU,UAAS,QAAM,MAAC,eAAa,yDAAyB,mBACxF,sDAAC,2CAAAD,SAAA,EAAiC,YAAU,MAAC,OAAO,aAAa,UAAQ,MAAC,GAC5E,IACE;AAAA,OACN;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY,aAAa,SAAS,gBAAgB,KAAK;AAAA,QACvD,WAAW,aAAa;AAAA;AAAA,IAC1B;AAAA,KACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": ["React", "DSIndeterminateProgressIndicator", "DSBanner"]
|
|
7
7
|
}
|
|
@@ -33,14 +33,14 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
33
33
|
var import_react = __toESM(require("react"));
|
|
34
34
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
35
35
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
36
|
-
var
|
|
36
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
37
|
var import_styled = require("./styled");
|
|
38
38
|
var import_ChatContainerDataTestids = require("../../ChatContainerDataTestids");
|
|
39
39
|
var import_DSChatContainerDefinitions = require("../../DSChatContainerDefinitions");
|
|
40
40
|
var import_react_desc_prop_types = require("../../react-desc-prop-types");
|
|
41
41
|
const ChatComposer = (props) => {
|
|
42
|
-
const propsWithDefault = (0,
|
|
43
|
-
(0,
|
|
42
|
+
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultPropsComposer);
|
|
43
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(
|
|
44
44
|
propsWithDefault,
|
|
45
45
|
import_react_desc_prop_types.ChatComposerPropTypes,
|
|
46
46
|
import_DSChatContainerDefinitions.DSChatContainerComposerName
|
|
@@ -187,6 +187,6 @@ const ChatComposer = (props) => {
|
|
|
187
187
|
};
|
|
188
188
|
ChatComposer.propTypes = import_react_desc_prop_types.ChatComposerPropTypes;
|
|
189
189
|
ChatComposer.displayName = "ChatComposer";
|
|
190
|
-
const ChatComposerWithSchema = (0,
|
|
190
|
+
const ChatComposerWithSchema = (0, import_ds_props_helpers.describe)(ChatComposer);
|
|
191
191
|
ChatComposerWithSchema.propTypes = import_react_desc_prop_types.ChatComposerPropTypes;
|
|
192
192
|
//# sourceMappingURL=ChatContainerComposer.js.map
|
|
@@ -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-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids';\nimport { DSChatContainerComposerName } from '../../DSChatContainerDefinitions';\nimport type { DSChatT } from '../../react-desc-prop-types';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types';\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>();\n const inputSize = React.useRef<HTMLTextAreaElement>();\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<HTMLInputElement> = 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 ref={input}\n onChange={handleChange}\n style={{ ...heightProps }}\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 ref={inputSize}\n style={{\n height: 32,\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n top: 0,\n width: input.current?.clientWidth,\n }}\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.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\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
|
}
|
|
@@ -31,7 +31,7 @@ module.exports = __toCommonJS(ChatContainerMessagesList_exports);
|
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_react = __toESM(require("react"));
|
|
34
|
-
var
|
|
34
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
35
|
var import_ds_button = require("@elliemae/ds-button");
|
|
36
36
|
var import_ds_chat_bubble = require("@elliemae/ds-chat-bubble");
|
|
37
37
|
var import_ds_chat_message_delimeter = require("@elliemae/ds-chat-message-delimeter");
|
|
@@ -126,6 +126,6 @@ const ChatContainerMessagesList = (props) => {
|
|
|
126
126
|
};
|
|
127
127
|
ChatContainerMessagesList.propTypes = import_react_desc_prop_types.ChatContainerMessagesListPropTypes;
|
|
128
128
|
ChatContainerMessagesList.displayName = "ChatContainerMessagesList";
|
|
129
|
-
const ChatContainerMessagesListWithSchema = (0,
|
|
129
|
+
const ChatContainerMessagesListWithSchema = (0, import_ds_props_helpers.describe)(ChatContainerMessagesList);
|
|
130
130
|
ChatContainerMessagesListWithSchema.propTypes = import_react_desc_prop_types.ChatContainerMessagesListPropTypes;
|
|
131
131
|
//# sourceMappingURL=ChatContainerMessagesList.js.map
|
|
@@ -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-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEX;AAhEZ,mBAAkB;AAClB,
|
|
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 { DSButton } from '@elliemae/ds-button';\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';\nimport type { DSChatT } from '../../react-desc-prop-types';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types';\nimport { useGetNewMessages } from './useGetNewMessages';\nimport { useChatContainerMessageList } from './useChatContainerMessageList';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids';\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 ref={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 ref={virtualListRef as React.RefObject<HTMLDivElement>}\n role=\"list\"\n onKeyDown={handleListKey}\n >\n <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n {!isLoading && hasMoreItems ? (\n <StyledLoadMoreContainer hasMoreItems={hasMoreItems}>\n <DSButton\n labelText=\"Load More\"\n buttonType=\"secondary\"\n onClick={getMoreMessages}\n data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n innerRef={loadMoreRef}\n />\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.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\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;ADoEX;AAhEZ,mBAAkB;AAClB,8BAAyB;AACzB,uBAAyB;AACzB,4BAAyC;AAEzC,uCAAiC;AAEjC,oCAA8B;AAC9B,oBAQO;AAEP,mCAAmD;AACnD,+BAAkC;AAClC,yCAA4C;AAC5C,sCAAyC;AAEzC,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;AACrB,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,QACzB,OAAO;AAAA,MACT;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,cAAY;AAAA,UAEZ;AAAA,UACA,KAAK;AAAA,UACL,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,SAAS,IAAI,QAAQ,IAAI;AAAA,MAgBlD;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,KAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAW;AAAA,QAEX,uDAAC,sDAAqC,QAAQ,GAAG,eAC9C;AAAA,WAAC,aAAa,eACb,4CAAC,yCAAwB,cACvB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,YAAW;AAAA,cACX,SAAS;AAAA,cACT,eAAa,yDAAyB;AAAA,cACtC,UAAU;AAAA;AAAA,UACZ,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,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,kCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -29,7 +29,7 @@ __export(useChatContainerMessageList_exports, {
|
|
|
29
29
|
module.exports = __toCommonJS(useChatContainerMessageList_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_react = __toESM(require("react"));
|
|
32
|
-
var
|
|
32
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
33
33
|
var import_react_virtual = require("react-virtual");
|
|
34
34
|
var import_useActionRef = require("./useActionRef");
|
|
35
35
|
var import_useGlobalEventListener = require("./useGlobalEventListener");
|
|
@@ -49,13 +49,13 @@ const getPadding = ({ hasMoreItems, bannerPosition, isLoading }) => {
|
|
|
49
49
|
return padding;
|
|
50
50
|
};
|
|
51
51
|
const useChatContainerMessageList = (props) => {
|
|
52
|
-
const propsWithDefault = (0,
|
|
53
|
-
(0,
|
|
52
|
+
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultPropsMessagesList);
|
|
53
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(
|
|
54
54
|
propsWithDefault,
|
|
55
55
|
import_react_desc_prop_types.ChatContainerMessagesListPropTypes,
|
|
56
56
|
import_DSChatContainerDefinitions.DSChatContainerMessagesList
|
|
57
57
|
);
|
|
58
|
-
const globalAttributes = (0,
|
|
58
|
+
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
59
59
|
const loadMoreRef = import_react.default.useRef();
|
|
60
60
|
const virtualListRef = import_react.default.useRef();
|
|
61
61
|
const pendingOnScroll = import_react.default.useRef(false);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-container-messages-list/useChatContainerMessageList.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAClB,
|
|
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';\nimport { useGlobalEventListener } from './useGlobalEventListener';\nimport { useKeyboard } from './useKeyboard';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers';\nimport type { DSChatT } from '../../react-desc-prop-types';\nimport { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types';\nimport { DSChatContainerMessagesList } from '../../DSChatContainerDefinitions';\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;AAAG,YAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ;AAAG,YAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,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,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
|
}
|
|
@@ -33,7 +33,7 @@ __export(react_desc_prop_types_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
var
|
|
36
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
37
|
var import_ds_banner = require("@elliemae/ds-banner");
|
|
38
38
|
function noop(..._args) {
|
|
39
39
|
}
|
|
@@ -55,21 +55,21 @@ const defaultPropsComposer = {
|
|
|
55
55
|
actionRef: void 0
|
|
56
56
|
};
|
|
57
57
|
const ChatComposerPropTypes = {
|
|
58
|
-
placeholder:
|
|
59
|
-
inputValue:
|
|
60
|
-
ariaMaxLengthMessage:
|
|
61
|
-
maxLengthMessage:
|
|
62
|
-
onChange:
|
|
63
|
-
onResize:
|
|
64
|
-
onSend:
|
|
65
|
-
onFocus:
|
|
66
|
-
onBlur:
|
|
67
|
-
onKeyDown:
|
|
68
|
-
maxHeight:
|
|
69
|
-
inputMaxLength:
|
|
70
|
-
buttonDisabled:
|
|
71
|
-
dataTestid:
|
|
72
|
-
actionRef:
|
|
58
|
+
placeholder: import_ds_props_helpers.PropTypes.string.description("Input Placeholder").defaultValue(defaultPropsComposer.placeholder),
|
|
59
|
+
inputValue: import_ds_props_helpers.PropTypes.string.description("Input value").defaultValue(defaultPropsComposer.inputValue),
|
|
60
|
+
ariaMaxLengthMessage: import_ds_props_helpers.PropTypes.string.description("Aria message for Max length message when exceeded").defaultValue(defaultPropsComposer.maxLengthMessage),
|
|
61
|
+
maxLengthMessage: import_ds_props_helpers.PropTypes.string.description("Max length message").defaultValue(defaultPropsComposer.maxLengthMessage),
|
|
62
|
+
onChange: import_ds_props_helpers.PropTypes.func.description("Called when the user types").defaultValue(defaultPropsComposer.onChange),
|
|
63
|
+
onResize: import_ds_props_helpers.PropTypes.func.description("Called the input changes his height").defaultValue(defaultPropsComposer.onResize),
|
|
64
|
+
onSend: import_ds_props_helpers.PropTypes.func.description("Called when the click send").defaultValue(defaultPropsComposer.onSend),
|
|
65
|
+
onFocus: import_ds_props_helpers.PropTypes.func.description("Input focus").defaultValue(defaultPropsComposer.onFocus),
|
|
66
|
+
onBlur: import_ds_props_helpers.PropTypes.func.description("Input blur").defaultValue(defaultPropsComposer.onBlur),
|
|
67
|
+
onKeyDown: import_ds_props_helpers.PropTypes.func.description("Input on key down").defaultValue(defaultPropsComposer.onKeyDown),
|
|
68
|
+
maxHeight: import_ds_props_helpers.PropTypes.number.description("Max height of the composer. Use 0 for no limit").defaultValue(defaultPropsComposer.onBlur),
|
|
69
|
+
inputMaxLength: import_ds_props_helpers.PropTypes.number.description("Max length of the composer. `undefined` for no limit").defaultValue(defaultPropsComposer.inputMaxLength),
|
|
70
|
+
buttonDisabled: import_ds_props_helpers.PropTypes.bool.description("Control the disabled for the send button").defaultValue(defaultPropsComposer.buttonDisabled),
|
|
71
|
+
dataTestid: import_ds_props_helpers.PropTypes.string.description("Data testid").defaultValue(defaultPropsComposer.placeholder),
|
|
72
|
+
actionRef: import_ds_props_helpers.PropTypes.object.description(
|
|
73
73
|
`Reference:
|
|
74
74
|
{
|
|
75
75
|
scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,
|
|
@@ -93,9 +93,9 @@ const defaultPropsMessagesList = {
|
|
|
93
93
|
bannerRef: void 0
|
|
94
94
|
};
|
|
95
95
|
const ChatContainerMessagesListPropTypes = {
|
|
96
|
-
...
|
|
97
|
-
messages:
|
|
98
|
-
actionRef:
|
|
96
|
+
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
97
|
+
messages: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description("The array of out-of-the-box items you want to render inside the ChatMessageList").defaultValue(defaultPropsMessagesList.messages),
|
|
98
|
+
actionRef: import_ds_props_helpers.PropTypes.object.description(
|
|
99
99
|
`Reference:
|
|
100
100
|
{
|
|
101
101
|
scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,
|
|
@@ -109,16 +109,16 @@ const ChatContainerMessagesListPropTypes = {
|
|
|
109
109
|
|
|
110
110
|
`
|
|
111
111
|
).defaultValue(defaultPropsMessagesList.actionRef),
|
|
112
|
-
onScrollEnds:
|
|
113
|
-
isLoading:
|
|
112
|
+
onScrollEnds: import_ds_props_helpers.PropTypes.func.description(`Called when the scroll stops.`),
|
|
113
|
+
isLoading: import_ds_props_helpers.PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
114
114
|
"Keeps the load more space while the loading is in progress"
|
|
115
115
|
),
|
|
116
|
-
hasMoreItems:
|
|
116
|
+
hasMoreItems: import_ds_props_helpers.PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
117
117
|
"Show Load More button at the `top` or `bottom` of the container"
|
|
118
118
|
),
|
|
119
|
-
getMoreMessages:
|
|
120
|
-
sendingMessages:
|
|
121
|
-
sendingText:
|
|
119
|
+
getMoreMessages: import_ds_props_helpers.PropTypes.func.description("Called when the user clicks on load more").defaultValue(defaultPropsMessagesList.getMoreMessages),
|
|
120
|
+
sendingMessages: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.string), import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.number)]).description("Array of ids of sending messages").defaultValue(defaultPropsMessagesList.sendingMessages),
|
|
121
|
+
sendingText: import_ds_props_helpers.PropTypes.string.description("Label description for messages in sending status").defaultValue(defaultPropsMessagesList.sendingText)
|
|
122
122
|
};
|
|
123
123
|
const defaultProps = {
|
|
124
124
|
messagesListProps: defaultPropsMessagesList,
|
|
@@ -141,22 +141,22 @@ const defaultProps = {
|
|
|
141
141
|
sendingText: "Sending"
|
|
142
142
|
};
|
|
143
143
|
const ChatContainerPropTypes = {
|
|
144
|
-
...
|
|
145
|
-
messagesListProps:
|
|
146
|
-
composerProps:
|
|
147
|
-
autoScroll:
|
|
148
|
-
device:
|
|
149
|
-
isLoading:
|
|
144
|
+
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
145
|
+
messagesListProps: import_ds_props_helpers.PropTypes.object.description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
|
|
146
|
+
composerProps: import_ds_props_helpers.PropTypes.object.description("Composer configuration").defaultValue(defaultProps.composerProps),
|
|
147
|
+
autoScroll: import_ds_props_helpers.PropTypes.bool.description("Auto scroll to bottom on resize").defaultValue(defaultProps.autoScroll),
|
|
148
|
+
device: import_ds_props_helpers.PropTypes.string.description("Option to render mobile or desktop style composer").defaultValue(defaultProps.device),
|
|
149
|
+
isLoading: import_ds_props_helpers.PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
150
150
|
"Show Loading messages indicator at the `top` or `bottom` of the container"
|
|
151
151
|
),
|
|
152
|
-
hasMoreItems:
|
|
152
|
+
hasMoreItems: import_ds_props_helpers.PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
153
153
|
"Show Load More button at the `top` or `bottom` of the container"
|
|
154
154
|
),
|
|
155
|
-
getMoreMessages:
|
|
156
|
-
bannerPosition:
|
|
155
|
+
getMoreMessages: import_ds_props_helpers.PropTypes.func.description("Called when the user clicks on load more").defaultValue(defaultProps.getMoreMessages),
|
|
156
|
+
bannerPosition: import_ds_props_helpers.PropTypes.oneOf(["top", "bottom", void 0]).description(
|
|
157
157
|
"Show Loading messages indicator at the `top` or `bottom` of the container"
|
|
158
158
|
),
|
|
159
|
-
bannerProps:
|
|
159
|
+
bannerProps: import_ds_props_helpers.PropTypes.object.description(
|
|
160
160
|
`Banner configuration:
|
|
161
161
|
label: string;
|
|
162
162
|
viewLabel: string;
|
|
@@ -165,9 +165,9 @@ const ChatContainerPropTypes = {
|
|
|
165
165
|
onClose: () => void;
|
|
166
166
|
`
|
|
167
167
|
).defaultValue(defaultProps.bannerProps),
|
|
168
|
-
sendingMessages:
|
|
169
|
-
sendingText:
|
|
170
|
-
actionRef:
|
|
168
|
+
sendingMessages: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.string), import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.number)]).description("Array of ids of sending messages").defaultValue(defaultProps.sendingMessages),
|
|
169
|
+
sendingText: import_ds_props_helpers.PropTypes.string.description("Label description for messages in sending status").defaultValue(defaultProps.sendingText),
|
|
170
|
+
actionRef: import_ds_props_helpers.PropTypes.object.description(
|
|
171
171
|
`Reference:
|
|
172
172
|
{
|
|
173
173
|
scrollToIndex: (n: number) => void,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { useVirtual } from 'react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n interface ChatBannerProps {\n label: string;\n viewLabel: string;\n type?: 'info' | 'success' | 'danger' | 'warning';\n onView: () => void;\n onClose: () => void;\n }\n export type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ActionRef = React.MutableRefObject<{\n scrollToIndex?: (index: number, opts: ScrollToIndexOptions) => void;\n focusToIndex?: (index: number, opts: ScrollToIndexOptions) => void;\n getMessagesInView?: () => string[];\n focusToIndexWithoutScroll?: (index: string) => void;\n focusToList?: () => void;\n focusToComposer?: () => void;\n focusToSend?: () => void;\n focusOnBanner?: () => void;\n focusOnBannerLink?: () => void;\n }>;\n\n export interface ComposerProps extends Record<string, unknown> {\n placeholder?: string;\n inputValue?: string;\n ariaMaxLengthMessage?: string;\n maxLengthMessage?: string;\n onChange: (value: string) => void;\n onResize?: (value: number) => void;\n onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n onFocus?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n onBlur?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n maxHeight?: number;\n inputMaxLength?: number;\n buttonDisabled: boolean;\n dataTestid?: string;\n actionRef?: ActionRef;\n }\n\n export interface MessagesListProps extends Record<string, unknown> {\n messages: DSChatBubbleT.Props[];\n actionRef: ActionRef;\n onScrollEnds?: (indexList: string[]) => void;\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n sendingMessages?: Array<string | number>;\n sendingText: string;\n bannerPosition?: 'top' | 'bottom';\n bannerRef?: React.MutableRefObject<{\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnWrapper: (...args: any[]) => void;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnLink: (...args: any[]) => void;\n }>;\n }\n\n export interface ContainerProps extends Record<string, unknown> {\n messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n composerProps: ComposerProps;\n actionRef?: ActionRef;\n autoScroll: boolean;\n device: 'desktop' | 'mobile';\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n bannerPosition?: 'top' | 'bottom';\n bannerProps?: ChatBannerProps;\n sendingMessages?: string[] | number[];\n sendingText: string;\n }\n\n export interface GetPaddingT {\n hasMoreItems: string | undefined;\n bannerPosition: string | undefined;\n isLoading: string | undefined;\n }\n}\n\nexport interface TextAreaProps {\n height: string | number;\n style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n placeholder: 'Type your message',\n inputValue: '',\n ariaMaxLengthMessage: '',\n onChange: noop,\n onResize: noop,\n onSend: noop,\n onFocus: noop,\n onBlur: noop,\n onKeyDown: noop,\n maxHeight: 0,\n inputMaxLength: undefined,\n maxLengthMessage: undefined,\n buttonDisabled: false,\n dataTestid: 'ds-chat-composer',\n actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n ariaMaxLengthMessage: PropTypes.string\n .description('Aria message for Max length message when exceeded')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n maxLengthMessage: PropTypes.string\n .description('Max length message')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n onResize: PropTypes.func\n .description('Called the input changes his height')\n .defaultValue(defaultPropsComposer.onResize),\n onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n maxHeight: PropTypes.number\n .description('Max height of the composer. Use 0 for no limit')\n .defaultValue(defaultPropsComposer.onBlur),\n inputMaxLength: PropTypes.number\n .description('Max length of the composer. `undefined` for no limit')\n .defaultValue(defaultPropsComposer.inputMaxLength),\n buttonDisabled: PropTypes.bool\n .description('Control the disabled for the send button')\n .defaultValue(defaultPropsComposer.buttonDisabled),\n dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView?: () => number[],\n focusToIndex?: (n: number) => void,\n focusToList?: () => void,\n focusToComposer?: () => void,\n focusToSend?: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n messages: [],\n actionRef: { current: {} },\n // we don't want this to exist \"by default\" since this loads document.addEventListener\n // the code is already checking for this callback existence everytime it's invoked anyway\n // onScrollEnds: () => [],\n getMoreMessages: noop,\n sendingMessages: undefined,\n sendingText: 'Sending',\n bannerPosition: undefined,\n bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n ...globalAttributesPropTypes,\n\n messages: PropTypes.arrayOf(PropTypes.object)\n .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n .defaultValue(defaultPropsMessagesList.messages),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToIndexWithoutScroll: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsMessagesList.actionRef),\n onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Keeps the load more space while the loading is in progress',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultPropsMessagesList.getMoreMessages),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultPropsMessagesList.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n messagesListProps: defaultPropsMessagesList,\n composerProps: defaultPropsComposer,\n actionRef: undefined,\n autoScroll: false,\n device: 'desktop',\n isLoading: undefined,\n hasMoreItems: undefined,\n getMoreMessages: noop,\n bannerPosition: undefined,\n bannerProps: {\n type: BANNER_TYPES.INFO,\n label: 'Unread Messages',\n viewLabel: 'View',\n onView: noop,\n onClose: noop,\n },\n sendingMessages: undefined,\n sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n ...globalAttributesPropTypes,\n messagesListProps: PropTypes.object\n .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n .defaultValue(defaultProps.messagesListProps),\n composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),\n autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n device: PropTypes.string\n .description('Option to render mobile or desktop style composer')\n .defaultValue(defaultProps.device),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultProps.getMoreMessages),\n bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n bannerProps: PropTypes.object\n .description(\n `Banner configuration:\n label: string;\n viewLabel: string;\n type: BANNER_TYPES;\n onView: () => void;\n onClose: () => void;\n `,\n )\n .defaultValue(defaultProps.bannerProps),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultProps.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultProps.sendingText),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex: (n: number) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultProps.actionRef),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { useVirtual } from 'react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n interface ChatBannerProps {\n label: string;\n viewLabel: string;\n type?: 'info' | 'success' | 'danger' | 'warning';\n onView: () => void;\n onClose: () => void;\n }\n export type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ActionRef = React.MutableRefObject<{\n scrollToIndex?: (index: number, opts: ScrollToIndexOptions) => void;\n focusToIndex?: (index: number, opts: ScrollToIndexOptions) => void;\n getMessagesInView?: () => string[];\n focusToIndexWithoutScroll?: (index: string) => void;\n focusToList?: () => void;\n focusToComposer?: () => void;\n focusToSend?: () => void;\n focusOnBanner?: () => void;\n focusOnBannerLink?: () => void;\n }>;\n\n export interface ComposerProps extends Record<string, unknown> {\n placeholder?: string;\n inputValue?: string;\n ariaMaxLengthMessage?: string;\n maxLengthMessage?: string;\n onChange: (value: string) => void;\n onResize?: (value: number) => void;\n onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n onFocus?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n onBlur?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n maxHeight?: number;\n inputMaxLength?: number;\n buttonDisabled: boolean;\n dataTestid?: string;\n actionRef?: ActionRef;\n }\n\n export interface MessagesListProps extends Record<string, unknown> {\n messages: DSChatBubbleT.Props[];\n actionRef: ActionRef;\n onScrollEnds?: (indexList: string[]) => void;\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n sendingMessages?: Array<string | number>;\n sendingText: string;\n bannerPosition?: 'top' | 'bottom';\n bannerRef?: React.MutableRefObject<{\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnWrapper: (...args: any[]) => void;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnLink: (...args: any[]) => void;\n }>;\n }\n\n export interface ContainerProps extends Record<string, unknown> {\n messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n composerProps: ComposerProps;\n actionRef?: ActionRef;\n autoScroll: boolean;\n device: 'desktop' | 'mobile';\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n bannerPosition?: 'top' | 'bottom';\n bannerProps?: ChatBannerProps;\n sendingMessages?: string[] | number[];\n sendingText: string;\n }\n\n export interface GetPaddingT {\n hasMoreItems: string | undefined;\n bannerPosition: string | undefined;\n isLoading: string | undefined;\n }\n}\n\nexport interface TextAreaProps {\n height: string | number;\n style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n placeholder: 'Type your message',\n inputValue: '',\n ariaMaxLengthMessage: '',\n onChange: noop,\n onResize: noop,\n onSend: noop,\n onFocus: noop,\n onBlur: noop,\n onKeyDown: noop,\n maxHeight: 0,\n inputMaxLength: undefined,\n maxLengthMessage: undefined,\n buttonDisabled: false,\n dataTestid: 'ds-chat-composer',\n actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n ariaMaxLengthMessage: PropTypes.string\n .description('Aria message for Max length message when exceeded')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n maxLengthMessage: PropTypes.string\n .description('Max length message')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n onResize: PropTypes.func\n .description('Called the input changes his height')\n .defaultValue(defaultPropsComposer.onResize),\n onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n maxHeight: PropTypes.number\n .description('Max height of the composer. Use 0 for no limit')\n .defaultValue(defaultPropsComposer.onBlur),\n inputMaxLength: PropTypes.number\n .description('Max length of the composer. `undefined` for no limit')\n .defaultValue(defaultPropsComposer.inputMaxLength),\n buttonDisabled: PropTypes.bool\n .description('Control the disabled for the send button')\n .defaultValue(defaultPropsComposer.buttonDisabled),\n dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView?: () => number[],\n focusToIndex?: (n: number) => void,\n focusToList?: () => void,\n focusToComposer?: () => void,\n focusToSend?: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n messages: [],\n actionRef: { current: {} },\n // we don't want this to exist \"by default\" since this loads document.addEventListener\n // the code is already checking for this callback existence everytime it's invoked anyway\n // onScrollEnds: () => [],\n getMoreMessages: noop,\n sendingMessages: undefined,\n sendingText: 'Sending',\n bannerPosition: undefined,\n bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n ...globalAttributesPropTypes,\n\n messages: PropTypes.arrayOf(PropTypes.object)\n .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n .defaultValue(defaultPropsMessagesList.messages),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToIndexWithoutScroll: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsMessagesList.actionRef),\n onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Keeps the load more space while the loading is in progress',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultPropsMessagesList.getMoreMessages),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultPropsMessagesList.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n messagesListProps: defaultPropsMessagesList,\n composerProps: defaultPropsComposer,\n actionRef: undefined,\n autoScroll: false,\n device: 'desktop',\n isLoading: undefined,\n hasMoreItems: undefined,\n getMoreMessages: noop,\n bannerPosition: undefined,\n bannerProps: {\n type: BANNER_TYPES.INFO,\n label: 'Unread Messages',\n viewLabel: 'View',\n onView: noop,\n onClose: noop,\n },\n sendingMessages: undefined,\n sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n ...globalAttributesPropTypes,\n messagesListProps: PropTypes.object\n .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n .defaultValue(defaultProps.messagesListProps),\n composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),\n autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n device: PropTypes.string\n .description('Option to render mobile or desktop style composer')\n .defaultValue(defaultProps.device),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultProps.getMoreMessages),\n bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n bannerProps: PropTypes.object\n .description(\n `Banner configuration:\n label: string;\n viewLabel: string;\n type: BANNER_TYPES;\n onView: () => void;\n onClose: () => void;\n `,\n )\n .defaultValue(defaultProps.bannerProps),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultProps.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultProps.sendingText),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex: (n: number) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultProps.actionRef),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
useGetGlobalAttributes,
|
|
8
8
|
useValidateTypescriptPropTypes,
|
|
9
9
|
describe
|
|
10
|
-
} from "@elliemae/ds-
|
|
10
|
+
} from "@elliemae/ds-props-helpers";
|
|
11
11
|
import DSIndeterminateProgressIndicator from "@elliemae/ds-indeterminate-progress-indicator";
|
|
12
12
|
import DSBanner, { BANNER_TYPES } from "@elliemae/ds-banner";
|
|
13
13
|
import { ChatComposer } from "./parts/chat-composer";
|
|
@@ -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-
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list';\nimport type { DSChatT } from './react-desc-prop-types';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\nimport { DSChatContainerName } from './DSChatContainerDefinitions';\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(propsWithDefault);\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<HTMLElement>();\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']} ref={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.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\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
|
}
|
|
@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import React2, { useMemo } from "react";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
5
|
import { PaperAirplane } from "@elliemae/ds-icons";
|
|
6
|
-
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from "@elliemae/ds-
|
|
6
|
+
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from "@elliemae/ds-props-helpers";
|
|
7
7
|
import {
|
|
8
8
|
StyledChatContainerContentComposer,
|
|
9
9
|
StyledComposerInput,
|