@elliemae/ds-chat 3.5.0-rc.4 → 3.5.0-rc.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ChatDataTestids.js +4 -1
- package/dist/cjs/ChatDataTestids.js.map +1 -1
- package/dist/cjs/exported-related/bubble/ChatBubble.js +4 -1
- package/dist/cjs/exported-related/bubble/ChatBubble.js.map +2 -2
- package/dist/cjs/exported-related/bubble/ChatBubbleArrow.js +4 -1
- package/dist/cjs/exported-related/bubble/ChatBubbleArrow.js.map +2 -2
- package/dist/cjs/exported-related/bubble/index.js +4 -1
- package/dist/cjs/exported-related/bubble/index.js.map +1 -1
- package/dist/cjs/exported-related/bubble/props.js +4 -1
- package/dist/cjs/exported-related/bubble/props.js.map +1 -1
- package/dist/cjs/exported-related/bubble/styled.js +4 -1
- package/dist/cjs/exported-related/bubble/styled.js.map +1 -1
- package/dist/cjs/exported-related/chat-card/ChatCard.js +4 -1
- package/dist/cjs/exported-related/chat-card/ChatCard.js.map +2 -2
- package/dist/cjs/exported-related/chat-card/index.js +4 -1
- package/dist/cjs/exported-related/chat-card/index.js.map +1 -1
- package/dist/cjs/exported-related/chat-card/props.js +4 -1
- package/dist/cjs/exported-related/chat-card/props.js.map +1 -1
- package/dist/cjs/exported-related/chat-card/styled.js +4 -1
- package/dist/cjs/exported-related/chat-card/styled.js.map +1 -1
- package/dist/cjs/exported-related/chat-container-header/ChatContainerHeader.js +4 -1
- package/dist/cjs/exported-related/chat-container-header/ChatContainerHeader.js.map +2 -2
- package/dist/cjs/exported-related/chat-container-header/props.js +4 -1
- package/dist/cjs/exported-related/chat-container-header/props.js.map +1 -1
- package/dist/cjs/exported-related/chat-container-header/styled.js +4 -1
- package/dist/cjs/exported-related/chat-container-header/styled.js.map +1 -1
- package/dist/cjs/exported-related/chat-empty-state/ChatEmptyState.js +23 -17
- package/dist/cjs/exported-related/chat-empty-state/ChatEmptyState.js.map +2 -2
- package/dist/cjs/exported-related/chat-empty-state/props.js +4 -1
- package/dist/cjs/exported-related/chat-empty-state/props.js.map +1 -1
- package/dist/cjs/exported-related/chat-empty-state/styled.js +4 -1
- package/dist/cjs/exported-related/chat-empty-state/styled.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/SideBarChat.js +11 -5
- package/dist/cjs/exported-related/chat-sidebar/SideBarChat.js.map +2 -2
- package/dist/cjs/exported-related/chat-sidebar/index.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/index.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/props.js +8 -3
- package/dist/cjs/exported-related/chat-sidebar/props.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/SidebarButton.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/SidebarButton.js.map +2 -2
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/index.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/index.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/props.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/props.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/styled.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/styled.js.map +1 -1
- package/dist/cjs/exported-related/chat-sidebar/styled.js +4 -1
- package/dist/cjs/exported-related/chat-sidebar/styled.js.map +1 -1
- package/dist/cjs/exported-related/floating-button/FloatingButton.js +4 -1
- package/dist/cjs/exported-related/floating-button/FloatingButton.js.map +2 -2
- package/dist/cjs/exported-related/floating-button/index.js +4 -1
- package/dist/cjs/exported-related/floating-button/index.js.map +1 -1
- package/dist/cjs/exported-related/floating-button/props.js +4 -1
- package/dist/cjs/exported-related/floating-button/props.js.map +1 -1
- package/dist/cjs/exported-related/floating-button/styled.js +4 -1
- package/dist/cjs/exported-related/floating-button/styled.js.map +1 -1
- package/dist/cjs/exported-related/floating-container/styled.js +4 -1
- package/dist/cjs/exported-related/floating-container/styled.js.map +1 -1
- package/dist/cjs/exported-related/grid-influencer/InfluencerContainer.js +12 -6
- package/dist/cjs/exported-related/grid-influencer/InfluencerContainer.js.map +2 -2
- package/dist/cjs/exported-related/grid-influencer/styled.js +4 -1
- package/dist/cjs/exported-related/grid-influencer/styled.js.map +1 -1
- package/dist/cjs/exported-related/index.js +4 -1
- package/dist/cjs/exported-related/index.js.map +1 -1
- package/dist/cjs/exported-related/message-delimiter/MessageDelimiter.js +4 -1
- package/dist/cjs/exported-related/message-delimiter/MessageDelimiter.js.map +2 -2
- package/dist/cjs/exported-related/message-delimiter/index.js +4 -1
- package/dist/cjs/exported-related/message-delimiter/index.js.map +1 -1
- package/dist/cjs/exported-related/message-delimiter/props.js +7 -2
- package/dist/cjs/exported-related/message-delimiter/props.js.map +1 -1
- package/dist/cjs/exported-related/message-delimiter/styled.js +4 -1
- package/dist/cjs/exported-related/message-delimiter/styled.js.map +1 -1
- package/dist/cjs/exported-related/system-message/SystemMessage.js +4 -1
- package/dist/cjs/exported-related/system-message/SystemMessage.js.map +2 -2
- package/dist/cjs/exported-related/system-message/index.js +4 -1
- package/dist/cjs/exported-related/system-message/index.js.map +1 -1
- package/dist/cjs/exported-related/system-message/props.js +4 -1
- package/dist/cjs/exported-related/system-message/props.js.map +1 -1
- package/dist/cjs/exported-related/system-message/style.js +4 -1
- package/dist/cjs/exported-related/system-message/style.js.map +1 -1
- package/dist/cjs/exported-related/tile-button/TileButton.js +68 -59
- package/dist/cjs/exported-related/tile-button/TileButton.js.map +2 -2
- package/dist/cjs/exported-related/tile-button/index.js +4 -1
- package/dist/cjs/exported-related/tile-button/index.js.map +1 -1
- package/dist/cjs/exported-related/tile-button/props.js +7 -2
- package/dist/cjs/exported-related/tile-button/props.js.map +1 -1
- package/dist/cjs/exported-related/tile-button/styled.js +4 -1
- package/dist/cjs/exported-related/tile-button/styled.js.map +1 -1
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js +10 -4
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js.map +2 -2
- package/dist/cjs/parts/chat-composer/index.js +4 -1
- package/dist/cjs/parts/chat-composer/index.js.map +1 -1
- package/dist/cjs/parts/chat-composer/styled.js +4 -1
- package/dist/cjs/parts/chat-composer/styled.js.map +1 -1
- package/dist/cjs/parts/chat-container/ChatContainer.js +34 -25
- package/dist/cjs/parts/chat-container/ChatContainer.js.map +2 -2
- package/dist/cjs/parts/chat-container/styled.js +4 -1
- package/dist/cjs/parts/chat-container/styled.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +38 -32
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/index.js +4 -1
- package/dist/cjs/parts/chat-container-messages-list/index.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/styled.js +4 -1
- package/dist/cjs/parts/chat-container-messages-list/styled.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useActionRef.js +4 -1
- package/dist/cjs/parts/chat-container-messages-list/useActionRef.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js +15 -9
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +53 -38
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/useGetNewMessages.js +4 -1
- package/dist/cjs/parts/chat-container-messages-list/useGetNewMessages.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useGlobalEventListener.js +4 -1
- package/dist/cjs/parts/chat-container-messages-list/useGlobalEventListener.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js +95 -86
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js.map +2 -2
- package/dist/cjs/parts/index.js +4 -1
- package/dist/cjs/parts/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +35 -14
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/styled.js +4 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/cjs/tests/utils.js +4 -1
- package/dist/cjs/tests/utils.js.map +1 -1
- package/dist/esm/ChatDataTestids.js.map +1 -1
- package/dist/esm/exported-related/bubble/ChatBubble.js.map +2 -2
- package/dist/esm/exported-related/bubble/ChatBubbleArrow.js.map +2 -2
- package/dist/esm/exported-related/bubble/index.js.map +1 -1
- package/dist/esm/exported-related/bubble/props.js.map +1 -1
- package/dist/esm/exported-related/bubble/styled.js.map +1 -1
- package/dist/esm/exported-related/chat-card/ChatCard.js.map +2 -2
- package/dist/esm/exported-related/chat-card/index.js.map +1 -1
- package/dist/esm/exported-related/chat-card/props.js.map +1 -1
- package/dist/esm/exported-related/chat-card/styled.js.map +1 -1
- package/dist/esm/exported-related/chat-container-header/ChatContainerHeader.js.map +2 -2
- package/dist/esm/exported-related/chat-container-header/props.js.map +1 -1
- package/dist/esm/exported-related/chat-container-header/styled.js.map +1 -1
- package/dist/esm/exported-related/chat-empty-state/ChatEmptyState.js +19 -16
- package/dist/esm/exported-related/chat-empty-state/ChatEmptyState.js.map +2 -2
- package/dist/esm/exported-related/chat-empty-state/props.js.map +1 -1
- package/dist/esm/exported-related/chat-empty-state/styled.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/SideBarChat.js +7 -4
- package/dist/esm/exported-related/chat-sidebar/SideBarChat.js.map +2 -2
- package/dist/esm/exported-related/chat-sidebar/index.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/props.js +4 -2
- package/dist/esm/exported-related/chat-sidebar/props.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/SidebarButton.js.map +2 -2
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/index.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/props.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/styled.js.map +1 -1
- package/dist/esm/exported-related/chat-sidebar/styled.js.map +1 -1
- package/dist/esm/exported-related/floating-button/FloatingButton.js.map +2 -2
- package/dist/esm/exported-related/floating-button/index.js.map +1 -1
- package/dist/esm/exported-related/floating-button/props.js.map +1 -1
- package/dist/esm/exported-related/floating-button/styled.js.map +1 -1
- package/dist/esm/exported-related/floating-container/styled.js.map +1 -1
- package/dist/esm/exported-related/grid-influencer/InfluencerContainer.js +8 -5
- package/dist/esm/exported-related/grid-influencer/InfluencerContainer.js.map +2 -2
- package/dist/esm/exported-related/grid-influencer/styled.js.map +1 -1
- package/dist/esm/exported-related/index.js.map +1 -1
- package/dist/esm/exported-related/message-delimiter/MessageDelimiter.js.map +2 -2
- package/dist/esm/exported-related/message-delimiter/index.js.map +1 -1
- package/dist/esm/exported-related/message-delimiter/props.js +3 -1
- package/dist/esm/exported-related/message-delimiter/props.js.map +1 -1
- package/dist/esm/exported-related/message-delimiter/styled.js.map +1 -1
- package/dist/esm/exported-related/system-message/SystemMessage.js.map +2 -2
- package/dist/esm/exported-related/system-message/index.js.map +1 -1
- package/dist/esm/exported-related/system-message/props.js.map +1 -1
- package/dist/esm/exported-related/system-message/style.js.map +1 -1
- package/dist/esm/exported-related/tile-button/TileButton.js +64 -58
- package/dist/esm/exported-related/tile-button/TileButton.js.map +2 -2
- package/dist/esm/exported-related/tile-button/index.js.map +1 -1
- package/dist/esm/exported-related/tile-button/props.js +3 -1
- package/dist/esm/exported-related/tile-button/props.js.map +1 -1
- package/dist/esm/exported-related/tile-button/styled.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js +6 -3
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js.map +2 -2
- package/dist/esm/parts/chat-composer/index.js.map +1 -1
- package/dist/esm/parts/chat-composer/styled.js.map +1 -1
- package/dist/esm/parts/chat-container/ChatContainer.js +30 -24
- package/dist/esm/parts/chat-container/ChatContainer.js.map +2 -2
- package/dist/esm/parts/chat-container/styled.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +34 -31
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/index.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/styled.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useActionRef.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js +11 -8
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +49 -37
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/useGetNewMessages.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useGlobalEventListener.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js +91 -85
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js.map +2 -2
- package/dist/esm/parts/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +31 -13
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/esm/tests/utils.js.map +1 -1
- package/package.json +10 -10
|
@@ -43,64 +43,70 @@ const TileButton = (props) => {
|
|
|
43
43
|
const handleClick = React2.useCallback(() => {
|
|
44
44
|
onClick(dsId, title);
|
|
45
45
|
}, [dsId, onClick, title]);
|
|
46
|
-
const MainContent = React2.useMemo(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
46
|
+
const MainContent = React2.useMemo(
|
|
47
|
+
() => /* @__PURE__ */ React2.createElement(StyledWrapperCentralContent, {
|
|
48
|
+
alignItems: isHeader ? "center" : void 0
|
|
49
|
+
}, /* @__PURE__ */ React2.createElement(Grid, {
|
|
50
|
+
width: "100%",
|
|
51
|
+
alignItems: "center",
|
|
52
|
+
justifyContent: "center"
|
|
53
|
+
}, /* @__PURE__ */ React2.createElement(StyledTileButtonIcon, {
|
|
54
|
+
alignItems: "center",
|
|
55
|
+
justifyContent: "center"
|
|
56
|
+
}, /* @__PURE__ */ React2.createElement(Icon, {
|
|
57
|
+
size: "m"
|
|
58
|
+
}), badge ? /* @__PURE__ */ React2.createElement(StyledStatusBadge, {
|
|
59
|
+
badgeColor,
|
|
60
|
+
badgePosition,
|
|
61
|
+
"data-testid": `tile-badge-${dsId}`
|
|
62
|
+
}) : null)), !isHeader ? /* @__PURE__ */ React2.createElement(Grid, {
|
|
63
|
+
width: "100%",
|
|
64
|
+
justifyContent: "center"
|
|
65
|
+
}, label ? /* @__PURE__ */ React2.createElement(StyledTileButtonLabel, null, label) : null) : null),
|
|
66
|
+
[isHeader, Icon, badge, dsId, badgeColor, badgePosition, label]
|
|
67
|
+
);
|
|
68
|
+
const Btn = React2.useMemo(
|
|
69
|
+
() => /* @__PURE__ */ React2.createElement(StyledTileButton, {
|
|
70
|
+
key: dsId,
|
|
71
|
+
isHeader,
|
|
72
|
+
value: dsId,
|
|
73
|
+
"data-testid": `tile-button-${dsId}`,
|
|
74
|
+
"data-key": dsId,
|
|
75
|
+
onClick: handleClick,
|
|
76
|
+
onFocus,
|
|
77
|
+
onBlur,
|
|
78
|
+
disabled,
|
|
79
|
+
selected,
|
|
80
|
+
badgeColor,
|
|
81
|
+
badgePosition,
|
|
82
|
+
"aria-pressed": selected,
|
|
83
|
+
"aria-label": ariaLabel,
|
|
84
|
+
ref: innerRef
|
|
85
|
+
}, /* @__PURE__ */ React2.createElement(StyledWrapper, {
|
|
86
|
+
alignItems: "center",
|
|
87
|
+
justifyContent: "center"
|
|
88
|
+
}, /* @__PURE__ */ React2.createElement("span", null, MainContent), /* @__PURE__ */ React2.createElement(StyledWrapperLeftBorder, null), showClose && !disabled ? /* @__PURE__ */ React2.createElement(CloseButton, {
|
|
89
|
+
onClick: onClose,
|
|
90
|
+
value: dsId,
|
|
91
|
+
"data-testid": `tile-close-btn-${dsId}`
|
|
92
|
+
}, /* @__PURE__ */ React2.createElement(CloseXsmall, null)) : null)),
|
|
93
|
+
[
|
|
94
|
+
MainContent,
|
|
95
|
+
ariaLabel,
|
|
96
|
+
badgeColor,
|
|
97
|
+
badgePosition,
|
|
98
|
+
disabled,
|
|
99
|
+
dsId,
|
|
100
|
+
handleClick,
|
|
101
|
+
isHeader,
|
|
102
|
+
onBlur,
|
|
103
|
+
onClose,
|
|
104
|
+
onFocus,
|
|
105
|
+
selected,
|
|
106
|
+
showClose,
|
|
107
|
+
innerRef
|
|
108
|
+
]
|
|
109
|
+
);
|
|
104
110
|
return title && !disableTooltip ? /* @__PURE__ */ React2.createElement(StyledTooltipV3ButtonWrapper, null, /* @__PURE__ */ React2.createElement(DSTooltipV3, {
|
|
105
111
|
id: `ds-chat-tile-tooltip-button-${dsId}`,
|
|
106
112
|
text: title,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/tile-button/TileButton.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { WeakValidationMap } from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { Grid } from '@elliemae/ds-grid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport {\n StyledTooltipV3ButtonWrapper,\n StyledTileButton,\n StyledTileButtonIcon,\n StyledTileButtonLabel,\n StyledWrapper,\n StyledWrapperLeftBorder,\n StyledStatusBadge,\n StyledWrapperCentralContent,\n CloseButton,\n} from './styled';\nimport { propsTileButton, defaultTileButton, TileButtonProps } from './props';\n\nconst TileButton: React.ComponentType<TileButtonProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultTileButton);\n useValidateTypescriptPropTypes(propsWithDefault, propsTileButton);\n\n const {\n label,\n title,\n dsId,\n onClick,\n onFocus,\n onBlur,\n Icon,\n showClose,\n onClose,\n badge,\n badgeColor,\n badgePosition,\n disabled,\n selected,\n isHeader,\n ariaLabel,\n tooltipPlacement,\n disableTooltip,\n innerRef,\n } = propsWithDefault;\n const handleClick = React.useCallback(() => {\n onClick(dsId, title);\n }, [dsId, onClick, title]);\n\n const MainContent = React.useMemo(\n () => (\n <StyledWrapperCentralContent alignItems={isHeader ? 'center' : undefined}>\n <Grid width=\"100%\" alignItems=\"center\" justifyContent=\"center\">\n <StyledTileButtonIcon alignItems=\"center\" justifyContent=\"center\">\n <Icon size=\"m\" />\n {badge ? (\n <StyledStatusBadge\n badgeColor={badgeColor}\n badgePosition={badgePosition}\n data-testid={`tile-badge-${dsId}`}\n />\n ) : null}\n </StyledTileButtonIcon>\n </Grid>\n {!isHeader ? (\n <Grid width=\"100%\" justifyContent=\"center\">\n {label ? <StyledTileButtonLabel>{label}</StyledTileButtonLabel> : null}\n </Grid>\n ) : null}\n </StyledWrapperCentralContent>\n ),\n [isHeader, Icon, badge, dsId, badgeColor, badgePosition, label],\n );\n\n const Btn = React.useMemo(\n () => (\n <StyledTileButton\n key={dsId}\n isHeader={isHeader}\n value={dsId}\n data-testid={`tile-button-${dsId}`}\n data-key={dsId}\n onClick={handleClick}\n onFocus={onFocus}\n onBlur={onBlur}\n disabled={disabled}\n selected={selected}\n badgeColor={badgeColor}\n badgePosition={badgePosition}\n aria-pressed={selected}\n aria-label={ariaLabel}\n ref={innerRef}\n >\n <StyledWrapper alignItems=\"center\" justifyContent=\"center\">\n <span>{MainContent}</span>\n <StyledWrapperLeftBorder />\n {showClose && !disabled ? (\n <CloseButton onClick={onClose} value={dsId} data-testid={`tile-close-btn-${dsId}`}>\n <CloseXsmall />\n </CloseButton>\n ) : null}\n </StyledWrapper>\n </StyledTileButton>\n ),\n [\n MainContent,\n ariaLabel,\n badgeColor,\n badgePosition,\n disabled,\n dsId,\n handleClick,\n isHeader,\n onBlur,\n onClose,\n onFocus,\n selected,\n showClose,\n innerRef,\n ],\n );\n\n return title && !disableTooltip ? (\n <StyledTooltipV3ButtonWrapper>\n <DSTooltipV3 id={`ds-chat-tile-tooltip-button-${dsId}`} text={title} startPlacementPreference={tooltipPlacement}>\n {Btn}\n </DSTooltipV3>\n </StyledTooltipV3ButtonWrapper>\n ) : (\n Btn\n );\n};\n\nTileButton.propTypes = propsTileButton as WeakValidationMap<unknown>;\nTileButton.displayName = 'TileButton';\nconst TileButtonWithSchema = describe(TileButton);\nTileButtonWithSchema.propTypes = propsTileButton as WeakValidationMap<unknown>;\n\nexport { TileButton, TileButtonWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/tile-button/index.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { TileButton, TileButtonWithSchema } from './TileButton';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,4BAA4B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -55,7 +55,9 @@ const propsTileButton = {
|
|
|
55
55
|
"left-start"
|
|
56
56
|
]).description("start placement preferences, as per popperjs placement option").defaultValue("'right'"),
|
|
57
57
|
disableTooltip: PropTypes.bool.description("Disable tooltip option").defaultValue(defaultTileButton.disableTooltip),
|
|
58
|
-
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(
|
|
58
|
+
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(
|
|
59
|
+
"reference to the component"
|
|
60
|
+
)
|
|
59
61
|
};
|
|
60
62
|
export {
|
|
61
63
|
defaultTileButton,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/tile-button/props.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\nimport { Comments } from '@elliemae/ds-icons';\n\nexport interface TileButtonProps {\n Icon: React.FC<{ size: string }>;\n dsId: string | number;\n label: string;\n onClick?: (dsId: string | number, label: string) => void;\n onBlur?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n onFocus?: (e: React.ChangeEvent<HTMLButtonElement>) => void;\n title: string;\n showClose: boolean;\n onClose?: (dsId: string | number) => void;\n badge: boolean;\n badgeColor: 'blue' | 'green';\n badgePosition: 'left' | 'right';\n disabled: boolean;\n selected: boolean;\n isHeader: boolean;\n ariaLabel: string;\n tooltipPlacement:\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n disableTooltip: boolean;\n innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n}\n\nexport const defaultTileButton: TileButtonProps = {\n Icon: Comments,\n dsId: '',\n label: '',\n onClick: noop,\n onBlur: noop,\n onFocus: noop,\n title: '',\n onClose: noop,\n showClose: false,\n badge: false,\n badgeColor: 'blue',\n badgePosition: 'left',\n disabled: false,\n selected: false,\n isHeader: false,\n ariaLabel: 'Tile button',\n tooltipPlacement: 'right',\n disableTooltip: false,\n innerRef: noop,\n};\n\nexport const propsTileButton = {\n Icon: PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),\n dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('Unique id for the button')\n .defaultValue(defaultTileButton.dsId),\n label: PropTypes.string.description('It will display under the icon').defaultValue(defaultTileButton.label),\n title: PropTypes.string.description('Tooltip').defaultValue(defaultTileButton.title),\n onClick: PropTypes.func.description('The function to call when is clicked').defaultValue(defaultTileButton.onClick),\n onFocus: PropTypes.func.description('The function to call when is focused').defaultValue(defaultTileButton.onFocus),\n onBlur: PropTypes.func.description('The function to call when is on blur').defaultValue(defaultTileButton.onBlur),\n onClose: PropTypes.func\n .description('The function to call when the X is Clicked')\n .defaultValue(defaultTileButton.onClose),\n showClose: PropTypes.bool.description('It will display the X').defaultValue(defaultTileButton.showClose),\n badge: PropTypes.bool.description('It will display the badge').defaultValue(defaultTileButton.badge),\n badgeColor: PropTypes.oneOf(['blue', 'green'])\n .description('Color badge: blue or green')\n .defaultValue(defaultTileButton.badgeColor),\n badgePosition: PropTypes.oneOf(['left', 'right'])\n .description('Color badge: blue or green')\n .defaultValue(defaultTileButton.badgePosition),\n disabled: PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),\n selected: PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),\n isHeader: PropTypes.bool.description(\"It won't render the label\").defaultValue(defaultTileButton.disabled),\n ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),\n tooltipPlacement: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preferences, as per popperjs placement option')\n .defaultValue(\"'right'\"),\n disableTooltip: PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAoClB,MAAM,oBAAqC;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AACZ;AAEO,MAAM,kBAAkB;AAAA,EAC7B,MAAM,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,kBAAkB,IAAI;AAAA,EACtF,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,kBAAkB,IAAI;AAAA,EACtC,OAAO,UAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,kBAAkB,KAAK;AAAA,EAC1G,OAAO,UAAU,OAAO,YAAY,SAAS,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnF,SAAS,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,SAAS,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,OAAO;AAAA,EAClH,QAAQ,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,MAAM;AAAA,EAChH,SAAS,UAAU,KAChB,YAAY,4CAA4C,EACxD,aAAa,kBAAkB,OAAO;AAAA,EACzC,WAAW,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACvG,OAAO,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,KAAK;AAAA,EACnG,YAAY,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC1C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,UAAU;AAAA,EAC5C,eAAe,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAC7C,YAAY,4BAA4B,EACxC,aAAa,kBAAkB,aAAa;AAAA,EAC/C,UAAU,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EAC3G,UAAU,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACpH,UAAU,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,kBAAkB,QAAQ;AAAA,EACzG,WAAW,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,kBAAkB,SAAS;AAAA,EACxG,kBAAkB,UAAU,MAAM;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,SAAS;AAAA,EACzB,gBAAgB,UAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,kBAAkB,cAAc;AAAA,EAClH,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/tile-button/styled.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { TileButtonProps } from './props';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n\n// Buttons\nexport const StyledWrapperLeftBorder = styled(Grid)`\n height: 100%;\n width: 4px;\n position: absolute;\n top: 0;\n left: 0;\n`;\n\nexport const StyledStatusBadge = styled.div<Partial<TileButtonProps>>`\n height: 8px;\n width: 8px;\n position: absolute;\n top: 0;\n background: ${(props) => {\n switch (props.badgeColor) {\n case 'blue':\n return props.theme.colors.brand[600];\n case 'green':\n return props.theme.colors.success[900];\n default:\n return props.theme.colors.brand[600];\n }\n }};\n ${(props) => {\n switch (props.badgePosition) {\n case 'left':\n return 'left: -4px;';\n case 'right':\n return 'right: -4px;';\n default:\n return 'left: -4px;';\n }\n }};\n border-radius: 50%;\n box-sizing: content-box;\n`;\n\nexport const StyledWrapperCentralContent = styled(Grid)`\n width: 24px;\n height: 40px;\n`;\n\nexport const StyledTileButtonIcon = styled(Grid)`\n position: relative;\n height: 24px;\n width: 24px;\n svg {\n fill: ${(props) => props.theme.colors.neutral[500]};\n }\n\n &:focus {\n svg {\n fill: ${(props) => props.theme.colors.brand[800]};\n }\n }\n`;\n\nexport const StyledTileButtonLabel = styled.div`\n width: 24px;\n height: ${(props) => props.theme.space.xs};\n text-transform: uppercase;\n overflow: hidden;\n text-align: center;\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 17px;\n`;\n\nexport const CloseButton = styled.button`\n outline: none;\n background: none;\n height: 9px;\n width: 9px;\n position: absolute;\n top: 1px;\n right: 1px;\n overflow: hidden;\n padding: 0;\n border: none;\n span {\n position: absolute;\n left: -3px;\n top: -4px;\n }\n\n &:focus,\n &:hover {\n svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n &:after {\n display: block;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: solid 1px ${(props) => props.theme.colors.brand[600]};\n border-radius: 2px;\n }\n }\n cursor: pointer;\n`;\n\n// MAIN WRAPPER\nexport const StyledTooltipV3ButtonWrapper = styled.div`\n height: ${BUTTON_SIDEBAR_HEIGHT}px;\n width: ${MIN_WIDTH_SIDEBAR}px;\n`;\nexport const StyledTileButton = styled.button<Partial<TileButtonProps>>`\n outline: none;\n background: transparent;\n height: ${BUTTON_SIDEBAR_HEIGHT}px;\n width: ${MIN_WIDTH_SIDEBAR}px;\n position: relative;\n padding: 0;\n border: none;\n cursor: pointer;\n border-bottom: ${(props) => (props.isHeader ? `1px solid ${props.theme.colors.neutral['200']}` : 'none')};\n &:focus,\n &:hover,\n &:active,\n &:disabled {\n background: ${(props) => props.theme.colors.neutral['080']};\n & ${StyledStatusBadge} {\n border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n margin-top: -2px;\n ${(props) => {\n switch (props.badgePosition) {\n case 'left':\n return 'margin-left: -2px;';\n case 'right':\n return 'margin-right: -2px;';\n default:\n return 'margin-left: -2px;';\n }\n }};\n }\n }\n\n &:focus,\n &:hover {\n & ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.brand[800]};\n }\n & ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[600]};\n }\n\n & svg {\n fill: ${(props) => props.theme.colors.brand[800]};\n }\n }\n\n &:active:not(:disabled) {\n background: ${(props) => props.theme.colors.neutral['050']};\n & ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.brand[600]};\n }\n & ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[600]};\n font-weight: 600;\n }\n & svg {\n fill: ${(props) => props.theme.colors.brand[600]};\n }\n & ${StyledStatusBadge} {\n border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n }\n }\n\n &:disabled {\n background: ${(props) => props.theme.colors.neutral['080']};\n ${StyledWrapperLeftBorder} {\n background: ${(props) => props.theme.colors.neutral['400']};\n }\n & ${StyledStatusBadge} {\n background: ${(props) => props.theme.colors.neutral['500']};\n border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n }\n ${StyledTileButtonIcon} {\n svg {\n fill: ${(props) => props.theme.colors.neutral[400]};\n }\n }\n ${StyledTileButtonLabel} {\n color: ${(props) => props.theme.colors.neutral[400]};\n }\n }\n\n ${(props) => {\n if (props.selected) {\n return css`\n & ${StyledWrapperLeftBorder} {\n background: ${(nestedProps) => nestedProps.theme.colors.brand[600]};\n }\n `;\n }\n return '';\n }}\n`;\n\nexport const StyledWrapper = styled(Grid)`\n height: 100%;\n width: 100%;\n position: relative;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './exported-related';\nexport * from './react-desc-prop-types';\nexport * from './parts';\nexport * from './ChatDataTestids';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -55,9 +55,12 @@ const ChatComposer = (props) => {
|
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
57
|
}, [actionRef]);
|
|
58
|
-
const handleChange = React2.useCallback(
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
const handleChange = React2.useCallback(
|
|
59
|
+
(e) => {
|
|
60
|
+
onChange(e.target.value);
|
|
61
|
+
},
|
|
62
|
+
[onChange]
|
|
63
|
+
);
|
|
61
64
|
const heightProps = { height, overflow: showScroll ? "auto" : "hidden" };
|
|
62
65
|
const inputLength = String(inputValue || "").length;
|
|
63
66
|
const hasError = React2.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/ChatContainerComposer.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-utilities';\nimport {\n StyledChatContainerContentComposer,\n StyledComposerInput,\n StyledComposerButton,\n StyledCounterArea,\n StyledCounterErrorA11y,\n} from './styled';\n\nimport { DSChatT, 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>(propsWithDefault, ChatComposerPropTypes);\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>();\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 const newHeight =\n inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);\n setHeight(newHeight);\n setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);\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.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(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);\n return (\n <StyledChatContainerContentComposer rows={['auto', '15px']} maxHeight={`${maxHeight}px`} data-testid={dataTestid}>\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=\"chat-composer-textarea\"\n name=\"chat-composer-textarea\"\n id=\"chat-composer-textarea\"\n />\n\n <Grid height=\"32px\" alignItems=\"center\">\n <StyledComposerButton\n buttonType=\"text\"\n icon={<PaperAirplane width={18} height={18} />}\n onClick={onSend}\n size=\"s\"\n disabled={!inputValue || buttonDisabled || hasError}\n data-testid=\"chat-composer-send-button\"\n aria-label=\"Send\"\n innerRef={inputSend}\n />\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=\"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"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatComposer, ChatComposerWithSchema } from './ChatContainerComposer';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,8BAA8B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-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 { DSButton } from '@elliemae/ds-button';\nimport { TextAreaProps } from './props';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)`\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<any>`\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: TextAreaProps) => (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 &: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(DSButton)`\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)`\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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAIlB,MAAM,qCAAqC,OAAO,IAAI;AAAA;AAAA;AAAA,gBAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,kBAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAC/B,CAAC,UAAU,MAAM;AAAA;AAAA;AAI1B,MAAM,sBAAsB,OAAO;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,CAAC,UAA0B,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAS9E,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKrD,MAAM,uBAAuB,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQvC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,kBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxC,CAAC,UAAW,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,OAAO,UAAU;AAAA;AAAA;AAIvE,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,34 +34,40 @@ const ChatContainer = (props) => {
|
|
|
34
34
|
const bannerRef = React2.useRef({ focusOnWrapper: noop, focusOnLink: noop });
|
|
35
35
|
const containerRef = React2.useRef();
|
|
36
36
|
const listRef = React2.useRef({ scrollToIndex: noop });
|
|
37
|
-
const onResize = React2.useCallback(
|
|
38
|
-
|
|
39
|
-
onComposerResize
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
37
|
+
const onResize = React2.useCallback(
|
|
38
|
+
(height) => {
|
|
39
|
+
if (onComposerResize)
|
|
40
|
+
onComposerResize(height);
|
|
41
|
+
setTimeout(() => {
|
|
42
|
+
actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
|
|
43
|
+
align: "start"
|
|
44
|
+
});
|
|
45
|
+
}, 50);
|
|
46
|
+
},
|
|
47
|
+
[onComposerResize, messagesListProps.messages, actionRef]
|
|
48
|
+
);
|
|
46
49
|
const Container = device === "desktop" ? StyledChatContainerContent : MobileStyledChatContainerContent;
|
|
47
|
-
const handleTabs = React2.useCallback(
|
|
48
|
-
|
|
49
|
-
onComposerKeyDown
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
50
|
+
const handleTabs = React2.useCallback(
|
|
51
|
+
(e) => {
|
|
52
|
+
if (onComposerKeyDown)
|
|
53
|
+
onComposerKeyDown(e);
|
|
54
|
+
else {
|
|
55
|
+
const ref = actionRef || listRef;
|
|
56
|
+
if (e.shiftKey && e.key === "Tab") {
|
|
57
|
+
if (messagesListProps.messages?.length > 0) {
|
|
58
|
+
e.preventDefault();
|
|
59
|
+
if (["top", "bottom"].includes(bannerPosition)) {
|
|
60
|
+
bannerRef.current.focusOnWrapper();
|
|
61
|
+
} else {
|
|
62
|
+
const last = ref.current.getMessagesInView().pop();
|
|
63
|
+
ref.current?.focusToIndexWithoutScroll(last);
|
|
64
|
+
}
|
|
60
65
|
}
|
|
61
66
|
}
|
|
62
67
|
}
|
|
63
|
-
}
|
|
64
|
-
|
|
68
|
+
},
|
|
69
|
+
[actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length]
|
|
70
|
+
);
|
|
65
71
|
React2.useEffect(() => {
|
|
66
72
|
if (actionRef && actionRef.current) {
|
|
67
73
|
actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container/ChatContainer.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { WeakValidationMap } from 'react';\nimport { noop } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-utilities';\n\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from '../chat-composer';\nimport { ChatContainerMessagesList } from '../chat-container-messages-list';\nimport { DSChatT, defaultProps, ChatContainerPropTypes } from '../../react-desc-prop-types';\n\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes);\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 onResize = React.useCallback(\n (height: number) => {\n if (onComposerResize) onComposerResize(height);\n /*\n setTimeout is used to equal the animation duration from the \n composer text area when increase its size\n */\n setTimeout(() => {\n actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {\n align: 'start',\n });\n }, 50);\n },\n [onComposerResize, messagesListProps.messages, actionRef],\n );\n const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n const handleTabs = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (onComposerKeyDown) onComposerKeyDown(e);\n else {\n const ref = actionRef || listRef;\n if (e.shiftKey && e.key === 'Tab') {\n if (messagesListProps.messages?.length > 0) {\n e.preventDefault();\n if (['top', 'bottom'].includes(bannerPosition)) {\n bannerRef.current.focusOnWrapper();\n } else {\n const last = ref.current.getMessagesInView().pop();\n ref.current?.focusToIndexWithoutScroll(last);\n }\n }\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=\"ds-chat-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=\"ds-chat-loading-indicator\">\n <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n </StyledIndicatorContainer>\n ) : null}\n </div>\n <ChatComposer\n {...composerProps}\n onKeyDown={handleTabs}\n onResize={onResize}\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": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,YAAkC;AACzC,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,OAAO,sCAAsC;AAC7C,OAAO,YAAY,oBAAoB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,iCAAiC;AAC1C,SAAkB,cAAc,8BAA8B;AAE9D,SAAS,4BAA4B,0BAA0B,wCAAwC;AAEvG,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAAqD,OAAO,YAAY;AACjG,iCAAuD,kBAAkB,sBAAsB;AAC/F,QAAM,mBAAmB,uBAAuB,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,YAAYA,OAAM,OAAO,EAAE,gBAAgB,MAAM,aAAa,KAAK,CAAC;AAC1E,QAAM,eAAeA,OAAM,OAAoB;AAC/C,QAAM,UAAUA,OAAM,OAAO,EAAE,eAAe,KAAK,CAAC;AAEpD,QAAM,WAAWA,OAAM;AAAA,IACrB,CAAC,WAAmB;AAClB,UAAI;AAAkB,yBAAiB,MAAM;AAK7C,iBAAW,MAAM;AACf,kBAAU,QAAQ,cAAc,kBAAkB,SAAS,SAAS,GAAG;AAAA,UACrE,OAAO;AAAA,QACT,CAAC;AAAA,MACH,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,kBAAkB,kBAAkB,UAAU,SAAS;AAAA,EAC1D;AACA,QAAM,YAAY,WAAW,YAAY,6BAA6B;AACtE,QAAM,aAAaA,OAAM;AAAA,IACvB,CAAC,MAA2B;AAC1B,UAAI;AAAmB,0BAAkB,CAAC;AAAA,WACrC;AACH,cAAM,MAAM,aAAa;AACzB,YAAI,EAAE,YAAY,EAAE,QAAQ,OAAO;AACjC,cAAI,kBAAkB,UAAU,SAAS,GAAG;AAC1C,cAAE,eAAe;AACjB,gBAAI,CAAC,OAAO,QAAQ,EAAE,SAAS,cAAc,GAAG;AAC9C,wBAAU,QAAQ,eAAe;AAAA,YACnC,OAAO;AACL,oBAAM,OAAO,IAAI,QAAQ,kBAAkB,EAAE,IAAI;AACjD,kBAAI,SAAS,0BAA0B,IAAI;AAAA,YAC7C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,mBAAmB,gBAAgB,kBAAkB,UAAU,MAAM;AAAA,EACnF;AAGA,EAAAA,OAAM,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,gBAAAA,OAAA,cAAC;AAAA,IAAW,GAAG;AAAA,IAAkB,MAAM,CAAC,kBAAkB,MAAM;AAAA,IAAG,KAAK;AAAA,IAAc,MAAK;AAAA,KACzF,gBAAAA,OAAA,cAAC;AAAA,IAAI,OAAO,EAAE,UAAU,YAAY,UAAU,SAAS;AAAA,KACrD,gBAAAA,OAAA,cAAC;AAAA,IACE,GAAG;AAAA,IACJ,WAAW,aAAa;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,GACF,GACC,aAAa,CAAC,OAAO,QAAQ,EAAE,SAAS,SAAS,IAChD,gBAAAA,OAAA,cAAC;AAAA,IAAyB;AAAA,IAAsB,eAAY;AAAA,KAC1D,gBAAAA,OAAA,cAAC;AAAA,IAAiC,YAAU;AAAA,IAAC,OAAM;AAAA,GAAU,CAC/D,IACE,MACJ,gBAAAA,OAAA,cAAC;AAAA,IAAyB,QAAM;AAAA,IAAC,WAAW;AAAA,KAC1C,gBAAAA,OAAA,cAAC;AAAA,IACC,iBAAe;AAAA,IACf,OAAO,aAAa,SAAS;AAAA,IAC7B,gBAAgB,EAAE,IAAI,iBAAiB;AAAA,IACvC,YAAY;AAAA,MACV,OAAO,aAAa,aAAa;AAAA,MACjC,SAAS,aAAa;AAAA,IACxB;AAAA,IACA,SAAS,aAAa;AAAA,IACtB,QAAM;AAAA,IACN,MAAM,aAAa,QAAQ,aAAa;AAAA,IACxC,WAAW;AAAA,GACb,CACF,GACC,mBAAmB,gBAAgB,SAAS,IAC3C,gBAAAA,OAAA,cAAC;AAAA,IAAyB,WAAU;AAAA,IAAS,QAAM;AAAA,IAAC,eAAY;AAAA,KAC9D,gBAAAA,OAAA,cAAC;AAAA,IAAiC,YAAU;AAAA,IAAC,OAAO;AAAA,IAAa,UAAQ;AAAA,GAAC,CAC5E,IACE,IACN,GACA,gBAAAA,OAAA,cAAC;AAAA,IACE,GAAG;AAAA,IACJ,WAAW;AAAA,IACX;AAAA,IACA,YAAY,aAAa,SAAS,gBAAgB,KAAK;AAAA,IACvD,WAAW,aAAa;AAAA,GAC1B,CACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
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/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 { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '../../exported-related/bubble/styled';\nimport { StyledComposerInput } from '../chat-composer/styled';\nimport { Wrapper, Title, Time, Message } from '../../exported-related/system-message/style';\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\nexport const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`\n ${StyledTitleLeftBubble},\n ${StyleBodyWrapper} {\n font-size: 16px;\n }\n\n ${StyledTitleRightBubble} {\n font-size: 13px;\n }\n\n ${Wrapper} {\n background-color: #fff;\n box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);\n }\n\n ${Title},\n ${Message} {\n font-size: 16px;\n text-align: left;\n }\n\n ${Time} {\n font-size: 13px;\n }\n\n ${StyledComposerInput} {\n font-size: 16px;\n }\n\n ${StyledIndicatorContainer} {\n font-size: 16px;\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wBAAwB,uBAAuB,wBAAwB;AAChF,SAAS,2BAA2B;AACpC,SAAS,SAAS,OAAO,MAAM,eAAe;AACvC,MAAM,kBAAkB;AAExB,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA,eAEtC;AAAA;AAAA,gBAEC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAG/C,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAWhC,CAAC,UAAW,CAAC,MAAM,SAAS,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,gBAGnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAClD,CAAC,UACD,MAAM,cAAc,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA,IACJ,CAAC,UACD,MAAM,cAAc,WAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,mCAAmC,OAAO,0BAA0B;AAAA,IAC7E;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,37 +30,40 @@ const ChatContainerMessagesList = (props) => {
|
|
|
30
30
|
const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;
|
|
31
31
|
const { totalSize, virtualItems } = useVirtualHelpers;
|
|
32
32
|
const newMessages = useGetNewMessages(messages);
|
|
33
|
-
const render = React2.useMemo(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
33
|
+
const render = React2.useMemo(
|
|
34
|
+
() => virtualItems.map((virtualItem) => {
|
|
35
|
+
const { index, measureRef, start } = virtualItem;
|
|
36
|
+
const row = messages[index];
|
|
37
|
+
const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);
|
|
38
|
+
const style = {
|
|
39
|
+
position: "absolute",
|
|
40
|
+
top: 0,
|
|
41
|
+
left: 0,
|
|
42
|
+
transform: `translateY(${start}px)`,
|
|
43
|
+
width: "100%"
|
|
44
|
+
};
|
|
45
|
+
return /* @__PURE__ */ React2.createElement(ListItem, {
|
|
46
|
+
"data-element": "chat-element-list-item",
|
|
47
|
+
"data-index": index,
|
|
48
|
+
key: `ds-chat-bubble-${index}-${row.dsId}-${row.type}`,
|
|
49
|
+
style,
|
|
50
|
+
ref: measureRef,
|
|
51
|
+
tabIndex: -1,
|
|
52
|
+
onKeyDown: handleKey,
|
|
53
|
+
role: "listitem"
|
|
54
|
+
}, /* @__PURE__ */ React2.createElement(StyledWrapperListItem, {
|
|
55
|
+
type: row.type
|
|
56
|
+
}, row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ React2.createElement(ChatBubble, {
|
|
57
|
+
...row,
|
|
58
|
+
helpMessage: isSending ? sendingText : row.helpMessage
|
|
59
|
+
}) : null, row.type === BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ React2.createElement(MessageDelimiter, {
|
|
60
|
+
...row
|
|
61
|
+
}) : null, row.type === BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ React2.createElement(SystemMessage, {
|
|
62
|
+
...row
|
|
63
|
+
}) : null));
|
|
64
|
+
}),
|
|
65
|
+
[virtualItems, messages, sendingMessages, handleKey, sendingText]
|
|
66
|
+
);
|
|
64
67
|
return /* @__PURE__ */ React2.createElement(StyledWrapper, {
|
|
65
68
|
...globalAttributes
|
|
66
69
|
}, /* @__PURE__ */ React2.createElement(StyledChatContainerContentList, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx"],
|
|
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, { CSSProperties, WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport DSButton from '@elliemae/ds-button';\nimport { ChatBubble, BUBBLE_TYPES } from '../../exported-related/bubble';\nimport { MessageDelimiter } from '../../exported-related/message-delimiter';\nimport { SystemMessage } from '../../exported-related/system-message';\nimport {\n StyledWrapperListItem,\n StyledChatContainerContentList,\n StyledChatContainerContentListScroll,\n StyledWrapper,\n StyledLoadMoreContainer,\n ListItem,\n StyledNewMessagesHiddenContainer,\n} from './styled';\nimport { DSChatT, ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types';\nimport { useGetNewMessages } from './useGetNewMessages';\nimport { useChatContainerMessageList } from './useChatContainerMessageList';\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 // eslint-disable-next-line eslint-comments/no-unlimited-disable\n <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n ) : null}\n {row.type === BUBBLE_TYPES.DELIMITER ? <MessageDelimiter {...row} /> : null}\n {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...row} /> : 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=\"chat-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=\"ds-chat-load-more-btn\"\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"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/index.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatContainerMessagesList, ChatContainerMessagesListWithSchema } from './ChatContainerMessagesList';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,2CAA2C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/styled.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { BUBBLE_TYPES } from '../../exported-related/bubble/index';\nimport { BubblePropsT } from '../../exported-related/bubble/props';\n\nexport const StyledWrapper = styled.div`\n width: 100%;\n height: 100%;\n`;\n\n// list\nexport const StyledWrapperListItem = styled.div<Partial<BubblePropsT>>`\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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAGtB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,OAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA;AAAA,IAEhF,CAAC,UACD,MAAM,SAAS,aAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,WAAW,MAAM,MAAM,MAAM;AAAA,MACzD,MAAM,MAAM,MAAM;AAAA;AAAA,IAEpB,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM;AAAA;AAAA;AAI3B,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA,aAGxC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAMnC,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;AAAA;AAAA;AAItB,MAAM,0BAA0B,OAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,aACvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,YAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAIrC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY;AAAA,IACvD,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe;AAAA;AAE1D,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|