@elliemae/ds-chat 3.5.0-rc.9 → 3.6.0-next.0
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/{parts → bubble}/index.js +3 -5
- package/dist/cjs/bubble/index.js.map +7 -0
- package/dist/cjs/{exported-related/chat-card → card}/index.js +4 -11
- package/dist/cjs/card/index.js.map +7 -0
- package/dist/cjs/container/index.js +26 -0
- package/dist/cjs/container/index.js.map +7 -0
- package/dist/cjs/{exported-related/tile-button → container-header}/index.js +4 -11
- package/dist/cjs/container-header/index.js.map +7 -0
- package/dist/cjs/empty-state/index.js +26 -0
- package/dist/cjs/empty-state/index.js.map +7 -0
- package/dist/cjs/{exported-related/floating-button → floating-button}/index.js +1 -1
- package/dist/cjs/floating-button/index.js.map +7 -0
- package/dist/cjs/index.js +10 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/message-delimeter/index.js +26 -0
- package/dist/cjs/message-delimeter/index.js.map +7 -0
- package/dist/cjs/sidebar/index.js +26 -0
- package/dist/cjs/sidebar/index.js.map +7 -0
- package/dist/cjs/{exported-related/system-message → system-message}/index.js +2 -9
- package/dist/cjs/system-message/index.js.map +7 -0
- package/dist/cjs/tile/index.js +26 -0
- package/dist/cjs/tile/index.js.map +7 -0
- package/dist/esm/bubble/index.js +3 -0
- package/dist/esm/bubble/index.js.map +7 -0
- package/dist/esm/{exported-related/chat-sidebar/sidebar-button → card}/index.js +1 -0
- package/dist/esm/card/index.js.map +7 -0
- package/dist/esm/container/index.js +3 -0
- package/dist/esm/container/index.js.map +7 -0
- package/dist/esm/container-header/index.js +3 -0
- package/dist/esm/container-header/index.js.map +7 -0
- package/dist/esm/empty-state/index.js +3 -0
- package/dist/esm/empty-state/index.js.map +7 -0
- package/dist/esm/floating-button/index.js +3 -0
- package/dist/esm/floating-button/index.js.map +7 -0
- package/dist/esm/index.js +10 -4
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/message-delimeter/index.js +3 -0
- package/dist/esm/message-delimeter/index.js.map +7 -0
- package/dist/esm/sidebar/index.js +3 -0
- package/dist/esm/sidebar/index.js.map +7 -0
- package/dist/esm/system-message/index.js +3 -0
- package/dist/esm/system-message/index.js.map +7 -0
- package/dist/esm/{exported-related/floating-button → tile}/index.js +1 -1
- package/dist/esm/tile/index.js.map +7 -0
- package/package.json +49 -287
- package/dist/cjs/ChatDataTestids.js +0 -53
- package/dist/cjs/ChatDataTestids.js.map +0 -7
- package/dist/cjs/exported-related/bubble/ChatBubble.js +0 -81
- package/dist/cjs/exported-related/bubble/ChatBubble.js.map +0 -7
- package/dist/cjs/exported-related/bubble/ChatBubbleArrow.js +0 -94
- package/dist/cjs/exported-related/bubble/ChatBubbleArrow.js.map +0 -7
- package/dist/cjs/exported-related/bubble/index.js +0 -35
- package/dist/cjs/exported-related/bubble/index.js.map +0 -7
- package/dist/cjs/exported-related/bubble/props.js +0 -65
- package/dist/cjs/exported-related/bubble/props.js.map +0 -7
- package/dist/cjs/exported-related/bubble/styled.js +0 -143
- package/dist/cjs/exported-related/bubble/styled.js.map +0 -7
- package/dist/cjs/exported-related/chat-card/ChatCard.js +0 -60
- package/dist/cjs/exported-related/chat-card/ChatCard.js.map +0 -7
- package/dist/cjs/exported-related/chat-card/index.js.map +0 -7
- package/dist/cjs/exported-related/chat-card/props.js +0 -45
- package/dist/cjs/exported-related/chat-card/props.js.map +0 -7
- package/dist/cjs/exported-related/chat-card/styled.js +0 -68
- package/dist/cjs/exported-related/chat-card/styled.js.map +0 -7
- package/dist/cjs/exported-related/chat-container-header/ChatContainerHeader.js +0 -63
- package/dist/cjs/exported-related/chat-container-header/ChatContainerHeader.js.map +0 -7
- package/dist/cjs/exported-related/chat-container-header/props.js +0 -40
- package/dist/cjs/exported-related/chat-container-header/props.js.map +0 -7
- package/dist/cjs/exported-related/chat-container-header/styled.js +0 -57
- package/dist/cjs/exported-related/chat-container-header/styled.js.map +0 -7
- package/dist/cjs/exported-related/chat-empty-state/ChatEmptyState.js +0 -70
- package/dist/cjs/exported-related/chat-empty-state/ChatEmptyState.js.map +0 -7
- package/dist/cjs/exported-related/chat-empty-state/props.js +0 -41
- package/dist/cjs/exported-related/chat-empty-state/props.js.map +0 -7
- package/dist/cjs/exported-related/chat-empty-state/styled.js +0 -44
- package/dist/cjs/exported-related/chat-empty-state/styled.js.map +0 -7
- package/dist/cjs/exported-related/chat-sidebar/SideBarChat.js +0 -99
- package/dist/cjs/exported-related/chat-sidebar/SideBarChat.js.map +0 -7
- package/dist/cjs/exported-related/chat-sidebar/index.js +0 -33
- package/dist/cjs/exported-related/chat-sidebar/index.js.map +0 -7
- package/dist/cjs/exported-related/chat-sidebar/props.js +0 -80
- package/dist/cjs/exported-related/chat-sidebar/props.js.map +0 -7
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/SidebarButton.js +0 -53
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/SidebarButton.js.map +0 -7
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/index.js +0 -21
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/index.js.map +0 -7
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/props.js +0 -49
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/props.js.map +0 -7
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/styled.js +0 -66
- package/dist/cjs/exported-related/chat-sidebar/sidebar-button/styled.js.map +0 -7
- package/dist/cjs/exported-related/chat-sidebar/styled.js +0 -54
- package/dist/cjs/exported-related/chat-sidebar/styled.js.map +0 -7
- package/dist/cjs/exported-related/floating-button/FloatingButton.js +0 -54
- package/dist/cjs/exported-related/floating-button/FloatingButton.js.map +0 -7
- package/dist/cjs/exported-related/floating-button/index.js.map +0 -7
- package/dist/cjs/exported-related/floating-button/props.js +0 -44
- package/dist/cjs/exported-related/floating-button/props.js.map +0 -7
- package/dist/cjs/exported-related/floating-button/styled.js +0 -61
- package/dist/cjs/exported-related/floating-button/styled.js.map +0 -7
- package/dist/cjs/exported-related/floating-container/styled.js +0 -44
- package/dist/cjs/exported-related/floating-container/styled.js.map +0 -7
- package/dist/cjs/exported-related/grid-influencer/InfluencerContainer.js +0 -43
- package/dist/cjs/exported-related/grid-influencer/InfluencerContainer.js.map +0 -7
- package/dist/cjs/exported-related/grid-influencer/styled.js +0 -53
- package/dist/cjs/exported-related/grid-influencer/styled.js.map +0 -7
- package/dist/cjs/exported-related/index.js +0 -59
- package/dist/cjs/exported-related/index.js.map +0 -7
- package/dist/cjs/exported-related/message-delimiter/MessageDelimiter.js +0 -54
- package/dist/cjs/exported-related/message-delimiter/MessageDelimiter.js.map +0 -7
- package/dist/cjs/exported-related/message-delimiter/index.js +0 -33
- package/dist/cjs/exported-related/message-delimiter/index.js.map +0 -7
- package/dist/cjs/exported-related/message-delimiter/props.js +0 -47
- package/dist/cjs/exported-related/message-delimiter/props.js.map +0 -7
- package/dist/cjs/exported-related/message-delimiter/styled.js +0 -50
- package/dist/cjs/exported-related/message-delimiter/styled.js.map +0 -7
- package/dist/cjs/exported-related/system-message/SystemMessage.js +0 -56
- package/dist/cjs/exported-related/system-message/SystemMessage.js.map +0 -7
- package/dist/cjs/exported-related/system-message/index.js.map +0 -7
- package/dist/cjs/exported-related/system-message/props.js +0 -43
- package/dist/cjs/exported-related/system-message/props.js.map +0 -7
- package/dist/cjs/exported-related/system-message/style.js +0 -72
- package/dist/cjs/exported-related/system-message/style.js.map +0 -7
- package/dist/cjs/exported-related/tile-button/TileButton.js +0 -140
- package/dist/cjs/exported-related/tile-button/TileButton.js.map +0 -7
- package/dist/cjs/exported-related/tile-button/index.js.map +0 -7
- package/dist/cjs/exported-related/tile-button/props.js +0 -92
- package/dist/cjs/exported-related/tile-button/props.js.map +0 -7
- package/dist/cjs/exported-related/tile-button/styled.js +0 -243
- package/dist/cjs/exported-related/tile-button/styled.js.map +0 -7
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js +0 -158
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js.map +0 -7
- package/dist/cjs/parts/chat-composer/index.js +0 -33
- package/dist/cjs/parts/chat-composer/index.js.map +0 -7
- package/dist/cjs/parts/chat-composer/styled.js +0 -99
- package/dist/cjs/parts/chat-composer/styled.js.map +0 -7
- package/dist/cjs/parts/chat-container/ChatContainer.js +0 -160
- package/dist/cjs/parts/chat-container/ChatContainer.js.map +0 -7
- package/dist/cjs/parts/chat-container/styled.js +0 -109
- package/dist/cjs/parts/chat-container/styled.js.map +0 -7
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +0 -118
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +0 -7
- package/dist/cjs/parts/chat-container-messages-list/index.js +0 -33
- package/dist/cjs/parts/chat-container-messages-list/index.js.map +0 -7
- package/dist/cjs/parts/chat-container-messages-list/styled.js +0 -110
- package/dist/cjs/parts/chat-container-messages-list/styled.js.map +0 -7
- package/dist/cjs/parts/chat-container-messages-list/useActionRef.js +0 -61
- package/dist/cjs/parts/chat-container-messages-list/useActionRef.js.map +0 -7
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js +0 -106
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js.map +0 -7
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +0 -93
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +0 -7
- package/dist/cjs/parts/chat-container-messages-list/useGetNewMessages.js +0 -46
- package/dist/cjs/parts/chat-container-messages-list/useGetNewMessages.js.map +0 -7
- package/dist/cjs/parts/chat-container-messages-list/useGlobalEventListener.js +0 -59
- package/dist/cjs/parts/chat-container-messages-list/useGlobalEventListener.js.map +0 -7
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js +0 -147
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js.map +0 -7
- package/dist/cjs/parts/index.js.map +0 -7
- package/dist/cjs/react-desc-prop-types.js +0 -184
- package/dist/cjs/react-desc-prop-types.js.map +0 -7
- package/dist/cjs/styled.js +0 -42
- package/dist/cjs/styled.js.map +0 -7
- package/dist/cjs/tests/utils.js +0 -63
- package/dist/cjs/tests/utils.js.map +0 -7
- package/dist/esm/ChatDataTestids.js +0 -27
- package/dist/esm/ChatDataTestids.js.map +0 -7
- package/dist/esm/exported-related/bubble/ChatBubble.js +0 -64
- package/dist/esm/exported-related/bubble/ChatBubble.js.map +0 -7
- package/dist/esm/exported-related/bubble/ChatBubbleArrow.js +0 -68
- package/dist/esm/exported-related/bubble/ChatBubbleArrow.js.map +0 -7
- package/dist/esm/exported-related/bubble/index.js +0 -9
- package/dist/esm/exported-related/bubble/index.js.map +0 -7
- package/dist/esm/exported-related/bubble/props.js +0 -39
- package/dist/esm/exported-related/bubble/props.js.map +0 -7
- package/dist/esm/exported-related/bubble/styled.js +0 -117
- package/dist/esm/exported-related/bubble/styled.js.map +0 -7
- package/dist/esm/exported-related/chat-card/ChatCard.js +0 -34
- package/dist/esm/exported-related/chat-card/ChatCard.js.map +0 -7
- package/dist/esm/exported-related/chat-card/index.js +0 -7
- package/dist/esm/exported-related/chat-card/index.js.map +0 -7
- package/dist/esm/exported-related/chat-card/props.js +0 -19
- package/dist/esm/exported-related/chat-card/props.js.map +0 -7
- package/dist/esm/exported-related/chat-card/styled.js +0 -42
- package/dist/esm/exported-related/chat-card/styled.js.map +0 -7
- package/dist/esm/exported-related/chat-container-header/ChatContainerHeader.js +0 -46
- package/dist/esm/exported-related/chat-container-header/ChatContainerHeader.js.map +0 -7
- package/dist/esm/exported-related/chat-container-header/props.js +0 -14
- package/dist/esm/exported-related/chat-container-header/props.js.map +0 -7
- package/dist/esm/exported-related/chat-container-header/styled.js +0 -31
- package/dist/esm/exported-related/chat-container-header/styled.js.map +0 -7
- package/dist/esm/exported-related/chat-empty-state/ChatEmptyState.js +0 -44
- package/dist/esm/exported-related/chat-empty-state/ChatEmptyState.js.map +0 -7
- package/dist/esm/exported-related/chat-empty-state/props.js +0 -15
- package/dist/esm/exported-related/chat-empty-state/props.js.map +0 -7
- package/dist/esm/exported-related/chat-empty-state/styled.js +0 -18
- package/dist/esm/exported-related/chat-empty-state/styled.js.map +0 -7
- package/dist/esm/exported-related/chat-sidebar/SideBarChat.js +0 -73
- package/dist/esm/exported-related/chat-sidebar/SideBarChat.js.map +0 -7
- package/dist/esm/exported-related/chat-sidebar/index.js +0 -7
- package/dist/esm/exported-related/chat-sidebar/index.js.map +0 -7
- package/dist/esm/exported-related/chat-sidebar/props.js +0 -54
- package/dist/esm/exported-related/chat-sidebar/props.js.map +0 -7
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/SidebarButton.js +0 -27
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/SidebarButton.js.map +0 -7
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/index.js.map +0 -7
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/props.js +0 -23
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/props.js.map +0 -7
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/styled.js +0 -40
- package/dist/esm/exported-related/chat-sidebar/sidebar-button/styled.js.map +0 -7
- package/dist/esm/exported-related/chat-sidebar/styled.js +0 -28
- package/dist/esm/exported-related/chat-sidebar/styled.js.map +0 -7
- package/dist/esm/exported-related/floating-button/FloatingButton.js +0 -28
- package/dist/esm/exported-related/floating-button/FloatingButton.js.map +0 -7
- package/dist/esm/exported-related/floating-button/index.js.map +0 -7
- package/dist/esm/exported-related/floating-button/props.js +0 -18
- package/dist/esm/exported-related/floating-button/props.js.map +0 -7
- package/dist/esm/exported-related/floating-button/styled.js +0 -35
- package/dist/esm/exported-related/floating-button/styled.js.map +0 -7
- package/dist/esm/exported-related/floating-container/styled.js +0 -18
- package/dist/esm/exported-related/floating-container/styled.js.map +0 -7
- package/dist/esm/exported-related/grid-influencer/InfluencerContainer.js +0 -17
- package/dist/esm/exported-related/grid-influencer/InfluencerContainer.js.map +0 -7
- package/dist/esm/exported-related/grid-influencer/styled.js +0 -27
- package/dist/esm/exported-related/grid-influencer/styled.js.map +0 -7
- package/dist/esm/exported-related/index.js +0 -33
- package/dist/esm/exported-related/index.js.map +0 -7
- package/dist/esm/exported-related/message-delimiter/MessageDelimiter.js +0 -33
- package/dist/esm/exported-related/message-delimiter/MessageDelimiter.js.map +0 -7
- package/dist/esm/exported-related/message-delimiter/index.js +0 -10
- package/dist/esm/exported-related/message-delimiter/index.js.map +0 -7
- package/dist/esm/exported-related/message-delimiter/props.js +0 -21
- package/dist/esm/exported-related/message-delimiter/props.js.map +0 -7
- package/dist/esm/exported-related/message-delimiter/styled.js +0 -24
- package/dist/esm/exported-related/message-delimiter/styled.js.map +0 -7
- package/dist/esm/exported-related/system-message/SystemMessage.js +0 -30
- package/dist/esm/exported-related/system-message/SystemMessage.js.map +0 -7
- package/dist/esm/exported-related/system-message/index.js +0 -7
- package/dist/esm/exported-related/system-message/index.js.map +0 -7
- package/dist/esm/exported-related/system-message/props.js +0 -17
- package/dist/esm/exported-related/system-message/props.js.map +0 -7
- package/dist/esm/exported-related/system-message/style.js +0 -46
- package/dist/esm/exported-related/system-message/style.js.map +0 -7
- package/dist/esm/exported-related/tile-button/TileButton.js +0 -124
- package/dist/esm/exported-related/tile-button/TileButton.js.map +0 -7
- package/dist/esm/exported-related/tile-button/index.js +0 -7
- package/dist/esm/exported-related/tile-button/index.js.map +0 -7
- package/dist/esm/exported-related/tile-button/props.js +0 -66
- package/dist/esm/exported-related/tile-button/props.js.map +0 -7
- package/dist/esm/exported-related/tile-button/styled.js +0 -217
- package/dist/esm/exported-related/tile-button/styled.js.map +0 -7
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js +0 -138
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js.map +0 -7
- package/dist/esm/parts/chat-composer/index.js +0 -7
- package/dist/esm/parts/chat-composer/index.js.map +0 -7
- package/dist/esm/parts/chat-composer/styled.js +0 -73
- package/dist/esm/parts/chat-composer/styled.js.map +0 -7
- package/dist/esm/parts/chat-container/ChatContainer.js +0 -139
- package/dist/esm/parts/chat-container/ChatContainer.js.map +0 -7
- package/dist/esm/parts/chat-container/styled.js +0 -83
- package/dist/esm/parts/chat-container/styled.js.map +0 -7
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +0 -100
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +0 -7
- package/dist/esm/parts/chat-container-messages-list/index.js +0 -7
- package/dist/esm/parts/chat-container-messages-list/index.js.map +0 -7
- package/dist/esm/parts/chat-container-messages-list/styled.js +0 -84
- package/dist/esm/parts/chat-container-messages-list/styled.js.map +0 -7
- package/dist/esm/parts/chat-container-messages-list/useActionRef.js +0 -35
- package/dist/esm/parts/chat-container-messages-list/useActionRef.js.map +0 -7
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js +0 -84
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js.map +0 -7
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +0 -67
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +0 -7
- package/dist/esm/parts/chat-container-messages-list/useGetNewMessages.js +0 -20
- package/dist/esm/parts/chat-container-messages-list/useGetNewMessages.js.map +0 -7
- package/dist/esm/parts/chat-container-messages-list/useGlobalEventListener.js +0 -33
- package/dist/esm/parts/chat-container-messages-list/useGlobalEventListener.js.map +0 -7
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js +0 -121
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js.map +0 -7
- package/dist/esm/parts/index.js +0 -5
- package/dist/esm/parts/index.js.map +0 -7
- package/dist/esm/react-desc-prop-types.js +0 -158
- package/dist/esm/react-desc-prop-types.js.map +0 -7
- package/dist/esm/styled.js +0 -16
- package/dist/esm/styled.js.map +0 -7
- package/dist/esm/tests/utils.js +0 -37
- package/dist/esm/tests/utils.js.map +0 -7
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { css, styled } from "@elliemae/ds-system";
|
|
3
|
-
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
const MIN_WIDTH_SIDEBAR = 48;
|
|
5
|
-
const BUTTON_SIDEBAR_HEIGHT = 48;
|
|
6
|
-
const StyledWrapperLeftBorder = styled(Grid)`
|
|
7
|
-
height: 100%;
|
|
8
|
-
width: 4px;
|
|
9
|
-
position: absolute;
|
|
10
|
-
top: 0;
|
|
11
|
-
left: 0;
|
|
12
|
-
`;
|
|
13
|
-
const StyledStatusBadge = styled.div`
|
|
14
|
-
height: 8px;
|
|
15
|
-
width: 8px;
|
|
16
|
-
position: absolute;
|
|
17
|
-
top: 0;
|
|
18
|
-
background: ${(props) => {
|
|
19
|
-
switch (props.badgeColor) {
|
|
20
|
-
case "blue":
|
|
21
|
-
return props.theme.colors.brand[600];
|
|
22
|
-
case "green":
|
|
23
|
-
return props.theme.colors.success[900];
|
|
24
|
-
default:
|
|
25
|
-
return props.theme.colors.brand[600];
|
|
26
|
-
}
|
|
27
|
-
}};
|
|
28
|
-
${(props) => {
|
|
29
|
-
switch (props.badgePosition) {
|
|
30
|
-
case "left":
|
|
31
|
-
return "left: -4px;";
|
|
32
|
-
case "right":
|
|
33
|
-
return "right: -4px;";
|
|
34
|
-
default:
|
|
35
|
-
return "left: -4px;";
|
|
36
|
-
}
|
|
37
|
-
}};
|
|
38
|
-
border-radius: 50%;
|
|
39
|
-
box-sizing: content-box;
|
|
40
|
-
`;
|
|
41
|
-
const StyledWrapperCentralContent = styled(Grid)`
|
|
42
|
-
width: 24px;
|
|
43
|
-
height: 40px;
|
|
44
|
-
`;
|
|
45
|
-
const StyledTileButtonIcon = styled(Grid)`
|
|
46
|
-
position: relative;
|
|
47
|
-
height: 24px;
|
|
48
|
-
width: 24px;
|
|
49
|
-
svg {
|
|
50
|
-
fill: ${(props) => props.theme.colors.neutral[500]};
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&:focus {
|
|
54
|
-
svg {
|
|
55
|
-
fill: ${(props) => props.theme.colors.brand[800]};
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
`;
|
|
59
|
-
const StyledTileButtonLabel = styled.div`
|
|
60
|
-
width: 24px;
|
|
61
|
-
height: ${(props) => props.theme.space.xs};
|
|
62
|
-
text-transform: uppercase;
|
|
63
|
-
overflow: hidden;
|
|
64
|
-
text-align: center;
|
|
65
|
-
font-size: 13px;
|
|
66
|
-
color: ${(props) => props.theme.colors.neutral[600]};
|
|
67
|
-
line-height: 17px;
|
|
68
|
-
`;
|
|
69
|
-
const CloseButton = styled.button`
|
|
70
|
-
outline: none;
|
|
71
|
-
background: none;
|
|
72
|
-
height: 9px;
|
|
73
|
-
width: 9px;
|
|
74
|
-
position: absolute;
|
|
75
|
-
top: 1px;
|
|
76
|
-
right: 1px;
|
|
77
|
-
overflow: hidden;
|
|
78
|
-
padding: 0;
|
|
79
|
-
border: none;
|
|
80
|
-
span {
|
|
81
|
-
position: absolute;
|
|
82
|
-
left: -3px;
|
|
83
|
-
top: -4px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
&:focus,
|
|
87
|
-
&:hover {
|
|
88
|
-
svg {
|
|
89
|
-
fill: ${(props) => props.theme.colors.brand[600]};
|
|
90
|
-
}
|
|
91
|
-
&:after {
|
|
92
|
-
display: block;
|
|
93
|
-
content: '';
|
|
94
|
-
position: absolute;
|
|
95
|
-
top: 0;
|
|
96
|
-
left: 0;
|
|
97
|
-
width: 100%;
|
|
98
|
-
height: 100%;
|
|
99
|
-
border: solid 1px ${(props) => props.theme.colors.brand[600]};
|
|
100
|
-
border-radius: 2px;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
cursor: pointer;
|
|
104
|
-
`;
|
|
105
|
-
const StyledTooltipV3ButtonWrapper = styled.div`
|
|
106
|
-
height: ${BUTTON_SIDEBAR_HEIGHT}px;
|
|
107
|
-
width: ${MIN_WIDTH_SIDEBAR}px;
|
|
108
|
-
`;
|
|
109
|
-
const StyledTileButton = styled.button`
|
|
110
|
-
outline: none;
|
|
111
|
-
background: transparent;
|
|
112
|
-
height: ${BUTTON_SIDEBAR_HEIGHT}px;
|
|
113
|
-
width: ${MIN_WIDTH_SIDEBAR}px;
|
|
114
|
-
position: relative;
|
|
115
|
-
padding: 0;
|
|
116
|
-
border: none;
|
|
117
|
-
cursor: pointer;
|
|
118
|
-
border-bottom: ${(props) => props.isHeader ? `1px solid ${props.theme.colors.neutral["200"]}` : "none"};
|
|
119
|
-
&:focus,
|
|
120
|
-
&:hover,
|
|
121
|
-
&:active,
|
|
122
|
-
&:disabled {
|
|
123
|
-
background: ${(props) => props.theme.colors.neutral["080"]};
|
|
124
|
-
& ${StyledStatusBadge} {
|
|
125
|
-
border: 2px solid ${(props) => props.theme.colors.neutral["080"]};
|
|
126
|
-
margin-top: -2px;
|
|
127
|
-
${(props) => {
|
|
128
|
-
switch (props.badgePosition) {
|
|
129
|
-
case "left":
|
|
130
|
-
return "margin-left: -2px;";
|
|
131
|
-
case "right":
|
|
132
|
-
return "margin-right: -2px;";
|
|
133
|
-
default:
|
|
134
|
-
return "margin-left: -2px;";
|
|
135
|
-
}
|
|
136
|
-
}};
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
&:focus,
|
|
141
|
-
&:hover {
|
|
142
|
-
& ${StyledWrapperLeftBorder} {
|
|
143
|
-
background: ${(props) => props.theme.colors.brand[800]};
|
|
144
|
-
}
|
|
145
|
-
& ${StyledTileButtonLabel} {
|
|
146
|
-
color: ${(props) => props.theme.colors.neutral[600]};
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
& svg {
|
|
150
|
-
fill: ${(props) => props.theme.colors.brand[800]};
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
&:active:not(:disabled) {
|
|
155
|
-
background: ${(props) => props.theme.colors.neutral["050"]};
|
|
156
|
-
& ${StyledWrapperLeftBorder} {
|
|
157
|
-
background: ${(props) => props.theme.colors.brand[600]};
|
|
158
|
-
}
|
|
159
|
-
& ${StyledTileButtonLabel} {
|
|
160
|
-
color: ${(props) => props.theme.colors.neutral[600]};
|
|
161
|
-
font-weight: 600;
|
|
162
|
-
}
|
|
163
|
-
& svg {
|
|
164
|
-
fill: ${(props) => props.theme.colors.brand[600]};
|
|
165
|
-
}
|
|
166
|
-
& ${StyledStatusBadge} {
|
|
167
|
-
border: 2px solid ${(props) => props.theme.colors.neutral["050"]};
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
&:disabled {
|
|
172
|
-
background: ${(props) => props.theme.colors.neutral["080"]};
|
|
173
|
-
${StyledWrapperLeftBorder} {
|
|
174
|
-
background: ${(props) => props.theme.colors.neutral["400"]};
|
|
175
|
-
}
|
|
176
|
-
& ${StyledStatusBadge} {
|
|
177
|
-
background: ${(props) => props.theme.colors.neutral["500"]};
|
|
178
|
-
border: 2px solid ${(props) => props.theme.colors.neutral["080"]};
|
|
179
|
-
}
|
|
180
|
-
${StyledTileButtonIcon} {
|
|
181
|
-
svg {
|
|
182
|
-
fill: ${(props) => props.theme.colors.neutral[400]};
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
${StyledTileButtonLabel} {
|
|
186
|
-
color: ${(props) => props.theme.colors.neutral[400]};
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
${(props) => {
|
|
191
|
-
if (props.selected) {
|
|
192
|
-
return css`
|
|
193
|
-
& ${StyledWrapperLeftBorder} {
|
|
194
|
-
background: ${(nestedProps) => nestedProps.theme.colors.brand[600]};
|
|
195
|
-
}
|
|
196
|
-
`;
|
|
197
|
-
}
|
|
198
|
-
return "";
|
|
199
|
-
}}
|
|
200
|
-
`;
|
|
201
|
-
const StyledWrapper = styled(Grid)`
|
|
202
|
-
height: 100%;
|
|
203
|
-
width: 100%;
|
|
204
|
-
position: relative;
|
|
205
|
-
`;
|
|
206
|
-
export {
|
|
207
|
-
CloseButton,
|
|
208
|
-
StyledStatusBadge,
|
|
209
|
-
StyledTileButton,
|
|
210
|
-
StyledTileButtonIcon,
|
|
211
|
-
StyledTileButtonLabel,
|
|
212
|
-
StyledTooltipV3ButtonWrapper,
|
|
213
|
-
StyledWrapper,
|
|
214
|
-
StyledWrapperCentralContent,
|
|
215
|
-
StyledWrapperLeftBorder
|
|
216
|
-
};
|
|
217
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/tile-button/styled.ts"],
|
|
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": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2 from "react";
|
|
3
|
-
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
import { PaperAirplane } from "@elliemae/ds-icons";
|
|
5
|
-
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from "@elliemae/ds-utilities";
|
|
6
|
-
import {
|
|
7
|
-
StyledChatContainerContentComposer,
|
|
8
|
-
StyledComposerInput,
|
|
9
|
-
StyledComposerButton,
|
|
10
|
-
StyledCounterArea,
|
|
11
|
-
StyledCounterErrorA11y
|
|
12
|
-
} from "./styled";
|
|
13
|
-
import { ChatComposerPropTypes, defaultPropsComposer } from "../../react-desc-prop-types";
|
|
14
|
-
const ChatComposer = (props) => {
|
|
15
|
-
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsComposer);
|
|
16
|
-
useValidateTypescriptPropTypes(propsWithDefault, ChatComposerPropTypes);
|
|
17
|
-
const {
|
|
18
|
-
inputValue,
|
|
19
|
-
onChange,
|
|
20
|
-
onResize,
|
|
21
|
-
onSend,
|
|
22
|
-
onFocus,
|
|
23
|
-
onBlur,
|
|
24
|
-
onKeyDown,
|
|
25
|
-
maxHeight = 300,
|
|
26
|
-
placeholder,
|
|
27
|
-
inputMaxLength,
|
|
28
|
-
maxLengthMessage,
|
|
29
|
-
ariaMaxLengthMessage,
|
|
30
|
-
buttonDisabled,
|
|
31
|
-
dataTestid,
|
|
32
|
-
actionRef
|
|
33
|
-
} = propsWithDefault;
|
|
34
|
-
const COMPOSER_MIN_HEIGHT = 32;
|
|
35
|
-
const input = React2.useRef();
|
|
36
|
-
const inputSize = React2.useRef();
|
|
37
|
-
const inputSend = React2.useRef();
|
|
38
|
-
const [height, setHeight] = React2.useState(32);
|
|
39
|
-
const internalMaxHeight = React2.useMemo(() => maxHeight - 24, [maxHeight]);
|
|
40
|
-
const [showScroll, setShowScroll] = React2.useState(true);
|
|
41
|
-
React2.useEffect(() => {
|
|
42
|
-
const newHeight = inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;
|
|
43
|
-
if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT)
|
|
44
|
-
onResize(newHeight);
|
|
45
|
-
setHeight(newHeight);
|
|
46
|
-
setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);
|
|
47
|
-
}, [inputValue, internalMaxHeight, height, onResize]);
|
|
48
|
-
React2.useEffect(() => {
|
|
49
|
-
if (actionRef && actionRef.current) {
|
|
50
|
-
actionRef.current.focusToComposer = () => {
|
|
51
|
-
input.current.focus();
|
|
52
|
-
};
|
|
53
|
-
actionRef.current.focusToSend = () => {
|
|
54
|
-
inputSend.current.focus();
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
}, [actionRef]);
|
|
58
|
-
const handleChange = React2.useCallback(
|
|
59
|
-
(e) => {
|
|
60
|
-
onChange(e.target.value);
|
|
61
|
-
},
|
|
62
|
-
[onChange]
|
|
63
|
-
);
|
|
64
|
-
const heightProps = { height, overflow: showScroll ? "auto" : "hidden" };
|
|
65
|
-
const inputLength = String(inputValue || "").length;
|
|
66
|
-
const hasError = React2.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
|
|
67
|
-
return /* @__PURE__ */ React2.createElement(StyledChatContainerContentComposer, {
|
|
68
|
-
rows: ["auto", "15px"],
|
|
69
|
-
maxHeight: `${maxHeight}px`,
|
|
70
|
-
"data-testid": dataTestid
|
|
71
|
-
}, /* @__PURE__ */ React2.createElement(Grid, {
|
|
72
|
-
cols: ["1fr", "24px"],
|
|
73
|
-
style: { height: heightProps.height },
|
|
74
|
-
justifyContent: "center",
|
|
75
|
-
alignItems: "flex-end",
|
|
76
|
-
gutter: "xxs"
|
|
77
|
-
}, /* @__PURE__ */ React2.createElement(StyledComposerInput, {
|
|
78
|
-
ref: input,
|
|
79
|
-
onChange: handleChange,
|
|
80
|
-
style: { ...heightProps },
|
|
81
|
-
value: inputValue,
|
|
82
|
-
onFocus,
|
|
83
|
-
onBlur,
|
|
84
|
-
onKeyDown,
|
|
85
|
-
placeholder,
|
|
86
|
-
"aria-label": "Message to send",
|
|
87
|
-
"data-testid": "chat-composer-textarea",
|
|
88
|
-
name: "chat-composer-textarea",
|
|
89
|
-
id: "chat-composer-textarea"
|
|
90
|
-
}), /* @__PURE__ */ React2.createElement(Grid, {
|
|
91
|
-
height: "32px",
|
|
92
|
-
alignItems: "center"
|
|
93
|
-
}, /* @__PURE__ */ React2.createElement(StyledComposerButton, {
|
|
94
|
-
buttonType: "text",
|
|
95
|
-
icon: /* @__PURE__ */ React2.createElement(PaperAirplane, {
|
|
96
|
-
width: 18,
|
|
97
|
-
height: 18
|
|
98
|
-
}),
|
|
99
|
-
onClick: onSend,
|
|
100
|
-
size: "s",
|
|
101
|
-
disabled: !inputValue || buttonDisabled || hasError,
|
|
102
|
-
"data-testid": "chat-composer-send-button",
|
|
103
|
-
"aria-label": "Send",
|
|
104
|
-
innerRef: inputSend
|
|
105
|
-
}))), /* @__PURE__ */ React2.createElement(StyledComposerInput, {
|
|
106
|
-
ref: inputSize,
|
|
107
|
-
style: {
|
|
108
|
-
height: 32,
|
|
109
|
-
visibility: "hidden",
|
|
110
|
-
pointerEvents: "none",
|
|
111
|
-
position: "absolute",
|
|
112
|
-
top: 0,
|
|
113
|
-
width: input.current?.clientWidth
|
|
114
|
-
},
|
|
115
|
-
onChange: handleChange,
|
|
116
|
-
value: inputValue
|
|
117
|
-
}), /* @__PURE__ */ React2.createElement(Grid, {
|
|
118
|
-
cols: ["1fr", "24px"],
|
|
119
|
-
justifyContent: "flex-end",
|
|
120
|
-
alignItems: "center",
|
|
121
|
-
gutter: "xxs",
|
|
122
|
-
pb: "xxs"
|
|
123
|
-
}, /* @__PURE__ */ React2.createElement(StyledCounterArea, {
|
|
124
|
-
hasError,
|
|
125
|
-
"data-testid": "composer-counter-area"
|
|
126
|
-
}, inputMaxLength && hasError ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledCounterErrorA11y, {
|
|
127
|
-
role: "alert"
|
|
128
|
-
}, ariaMaxLengthMessage || `You have entered ${inputLength} characters and have exceeded the limit by ${inputLength - inputMaxLength}. Please limit to less than ${inputMaxLength} characters. `), maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `) : "", inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ""), /* @__PURE__ */ React2.createElement(Grid, null)));
|
|
129
|
-
};
|
|
130
|
-
ChatComposer.propTypes = ChatComposerPropTypes;
|
|
131
|
-
ChatComposer.displayName = "ChatComposer";
|
|
132
|
-
const ChatComposerWithSchema = describe(ChatComposer);
|
|
133
|
-
ChatComposerWithSchema.propTypes = ChatComposerPropTypes;
|
|
134
|
-
export {
|
|
135
|
-
ChatComposer,
|
|
136
|
-
ChatComposerWithSchema
|
|
137
|
-
};
|
|
138
|
-
//# sourceMappingURL=ChatContainerComposer.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/ChatContainerComposer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport 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": "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",
|
|
6
|
-
"names": ["React"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatComposer, ChatComposerWithSchema } from './ChatContainerComposer';\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,8BAA8B;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { styled } from "@elliemae/ds-system";
|
|
3
|
-
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
import { DSButton } from "@elliemae/ds-button";
|
|
5
|
-
const StyledChatContainerContentComposer = styled(Grid)`
|
|
6
|
-
width: 100%;
|
|
7
|
-
min-height: 56px;
|
|
8
|
-
background: ${(props) => props.theme.colors.neutral["050"]};
|
|
9
|
-
padding: ${(props) => props.theme.space.xxs};
|
|
10
|
-
padding-bottom: 3px;
|
|
11
|
-
padding-top: 6px;
|
|
12
|
-
padding-left: ${(props) => props.theme.space.xs};
|
|
13
|
-
max-height: ${(props) => props.maxHeight};
|
|
14
|
-
border-top: 1px solid #cbcfd7;
|
|
15
|
-
`;
|
|
16
|
-
const StyledComposerInput = styled.textarea`
|
|
17
|
-
padding: ${(props) => props.theme.space.xxs};
|
|
18
|
-
resize: none;
|
|
19
|
-
min-height: 32px;
|
|
20
|
-
border-radius: 2px;
|
|
21
|
-
border: solid 1px #cbcfd7;
|
|
22
|
-
color: #25292f;
|
|
23
|
-
height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height};
|
|
24
|
-
min-width: 244px;
|
|
25
|
-
overflow-y: auto;
|
|
26
|
-
font-size: 13px;
|
|
27
|
-
font-weight: 400;
|
|
28
|
-
line-height: 1;
|
|
29
|
-
transition: height 0.05s;
|
|
30
|
-
&:focus {
|
|
31
|
-
outline: none;
|
|
32
|
-
border: 1px solid ${(props) => props.theme.colors.brand[600]};
|
|
33
|
-
box-shadow: inset 0 0 0 1px #8cc2ed;
|
|
34
|
-
border-radius: 2px;
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
37
|
-
const StyledComposerButton = styled(DSButton)`
|
|
38
|
-
&:disabled {
|
|
39
|
-
background: none;
|
|
40
|
-
svg {
|
|
41
|
-
fill: #5d6775;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
svg {
|
|
45
|
-
fill: ${(props) => props.theme.colors.brand[600]};
|
|
46
|
-
}
|
|
47
|
-
&:focus {
|
|
48
|
-
background: ${(props) => props.theme.colors.brand[200]};
|
|
49
|
-
}
|
|
50
|
-
`;
|
|
51
|
-
const StyledCounterArea = styled(Grid)`
|
|
52
|
-
text-align: right;
|
|
53
|
-
font-size: 11px;
|
|
54
|
-
height: 15px;
|
|
55
|
-
align-items: center;
|
|
56
|
-
font-style: italic;
|
|
57
|
-
${(props) => props.hasError ? `color:${props.theme.colors.danger[900]};` : ""}
|
|
58
|
-
position:relative;
|
|
59
|
-
`;
|
|
60
|
-
const StyledCounterErrorA11y = styled.span`
|
|
61
|
-
width: 1px;
|
|
62
|
-
height: 1px;
|
|
63
|
-
position: absolute;
|
|
64
|
-
clip: rect(1px, 1px, 1px, 1px);
|
|
65
|
-
`;
|
|
66
|
-
export {
|
|
67
|
-
StyledChatContainerContentComposer,
|
|
68
|
-
StyledComposerButton,
|
|
69
|
-
StyledComposerInput,
|
|
70
|
-
StyledCounterArea,
|
|
71
|
-
StyledCounterErrorA11y
|
|
72
|
-
};
|
|
73
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/styled.ts"],
|
|
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,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
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2 from "react";
|
|
3
|
-
import { noop } from "lodash";
|
|
4
|
-
import {
|
|
5
|
-
useMemoMergePropsWithDefault,
|
|
6
|
-
useGetGlobalAttributes,
|
|
7
|
-
useValidateTypescriptPropTypes,
|
|
8
|
-
describe
|
|
9
|
-
} from "@elliemae/ds-utilities";
|
|
10
|
-
import DSIndeterminateProgressIndicator from "@elliemae/ds-indeterminate-progress-indicator";
|
|
11
|
-
import DSBanner, { BANNER_TYPES } from "@elliemae/ds-banner";
|
|
12
|
-
import { ChatComposer } from "../chat-composer";
|
|
13
|
-
import { ChatContainerMessagesList } from "../chat-container-messages-list";
|
|
14
|
-
import { defaultProps, ChatContainerPropTypes } from "../../react-desc-prop-types";
|
|
15
|
-
import { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from "./styled";
|
|
16
|
-
const ChatContainer = (props) => {
|
|
17
|
-
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
18
|
-
useValidateTypescriptPropTypes(propsWithDefault, ChatContainerPropTypes);
|
|
19
|
-
const globalAttributes = useGetGlobalAttributes(propsWithDefault);
|
|
20
|
-
const {
|
|
21
|
-
sendingText,
|
|
22
|
-
sendingMessages,
|
|
23
|
-
bannerPosition,
|
|
24
|
-
bannerProps,
|
|
25
|
-
messagesListProps,
|
|
26
|
-
composerProps,
|
|
27
|
-
composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },
|
|
28
|
-
actionRef,
|
|
29
|
-
device,
|
|
30
|
-
isLoading,
|
|
31
|
-
hasMoreItems,
|
|
32
|
-
getMoreMessages
|
|
33
|
-
} = propsWithDefault;
|
|
34
|
-
const bannerRef = React2.useRef({ focusOnWrapper: noop, focusOnLink: noop });
|
|
35
|
-
const containerRef = React2.useRef();
|
|
36
|
-
const listRef = React2.useRef({ scrollToIndex: noop });
|
|
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
|
-
);
|
|
49
|
-
const Container = device === "desktop" ? StyledChatContainerContent : MobileStyledChatContainerContent;
|
|
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
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
[actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length]
|
|
70
|
-
);
|
|
71
|
-
React2.useEffect(() => {
|
|
72
|
-
if (actionRef && actionRef.current) {
|
|
73
|
-
actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;
|
|
74
|
-
actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
|
|
75
|
-
}
|
|
76
|
-
}, [actionRef]);
|
|
77
|
-
return /* @__PURE__ */ React2.createElement(Container, {
|
|
78
|
-
...globalAttributes,
|
|
79
|
-
rows: ["minmax(0, 1fr)", "auto"],
|
|
80
|
-
ref: containerRef,
|
|
81
|
-
role: "region"
|
|
82
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
83
|
-
style: { position: "relative", overflow: "hidden" }
|
|
84
|
-
}, /* @__PURE__ */ React2.createElement(ChatContainerMessagesList, {
|
|
85
|
-
...messagesListProps,
|
|
86
|
-
actionRef: actionRef || listRef,
|
|
87
|
-
isLoading,
|
|
88
|
-
hasMoreItems,
|
|
89
|
-
getMoreMessages,
|
|
90
|
-
sendingMessages,
|
|
91
|
-
sendingText,
|
|
92
|
-
bannerPosition,
|
|
93
|
-
bannerRef
|
|
94
|
-
}), isLoading && ["top", "bottom"].includes(isLoading) ? /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
|
|
95
|
-
isLoading,
|
|
96
|
-
"data-testid": "ds-chat-loading-indicator"
|
|
97
|
-
}, /* @__PURE__ */ React2.createElement(DSIndeterminateProgressIndicator, {
|
|
98
|
-
processing: true,
|
|
99
|
-
title: "Loading"
|
|
100
|
-
})) : null, /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
|
|
101
|
-
linear: true,
|
|
102
|
-
isLoading: bannerPosition
|
|
103
|
-
}, /* @__PURE__ */ React2.createElement(DSBanner, {
|
|
104
|
-
showCloseButton: true,
|
|
105
|
-
label: bannerProps?.label || "Unread messages",
|
|
106
|
-
containerProps: { id: "ds-chat-banner" },
|
|
107
|
-
actionLink: {
|
|
108
|
-
label: bannerProps?.viewLabel || "View",
|
|
109
|
-
onClick: bannerProps?.onView
|
|
110
|
-
},
|
|
111
|
-
onClose: bannerProps?.onClose,
|
|
112
|
-
isOpen: true,
|
|
113
|
-
type: bannerProps?.type || BANNER_TYPES.INFO,
|
|
114
|
-
actionRef: bannerRef
|
|
115
|
-
})), sendingMessages && sendingMessages.length > 0 ? /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
|
|
116
|
-
isLoading: "bottom",
|
|
117
|
-
linear: true,
|
|
118
|
-
"data-testid": "ds-chat-loading-indicator"
|
|
119
|
-
}, /* @__PURE__ */ React2.createElement(DSIndeterminateProgressIndicator, {
|
|
120
|
-
processing: true,
|
|
121
|
-
title: sendingText,
|
|
122
|
-
lineOnly: true
|
|
123
|
-
})) : null), /* @__PURE__ */ React2.createElement(ChatComposer, {
|
|
124
|
-
...composerProps,
|
|
125
|
-
onKeyDown: handleTabs,
|
|
126
|
-
onResize,
|
|
127
|
-
maxHeight: (containerRef.current?.clientHeight || 0) / 2,
|
|
128
|
-
actionRef: actionRef || listRef
|
|
129
|
-
}));
|
|
130
|
-
};
|
|
131
|
-
ChatContainer.propTypes = ChatContainerPropTypes;
|
|
132
|
-
ChatContainer.displayName = "ChatContainer";
|
|
133
|
-
const ChatContainerWithSchema = describe(ChatContainer);
|
|
134
|
-
ChatContainerWithSchema.propTypes = ChatContainerPropTypes;
|
|
135
|
-
export {
|
|
136
|
-
ChatContainer,
|
|
137
|
-
ChatContainerWithSchema
|
|
138
|
-
};
|
|
139
|
-
//# sourceMappingURL=ChatContainer.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container/ChatContainer.tsx"],
|
|
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": "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",
|
|
6
|
-
"names": ["React"]
|
|
7
|
-
}
|