@elliemae/ds-chat 2.0.0-next.8 → 2.0.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/ChatDataTestids.js +27 -0
- package/cjs/parts/bubble/ChatBubble.js +9 -6
- package/cjs/parts/bubble/ChatBubbleArrow.js +64 -61
- package/cjs/parts/bubble/props.js +1 -1
- package/cjs/parts/bubble/styled.js +1 -1
- package/cjs/parts/chat-composer/ChatContainerComposer.js +14 -7
- package/cjs/parts/chat-composer/props.js +4 -0
- package/cjs/parts/chat-composer/styled.js +2 -2
- package/cjs/parts/chat-container/ChatContainer.js +53 -11
- package/cjs/parts/chat-container/props.js +7 -3
- package/cjs/parts/chat-container/styled.js +1 -1
- package/cjs/parts/chat-container-header/ChatContainerHeader.js +3 -3
- package/cjs/parts/chat-container-header/helpers.js +31 -0
- package/cjs/parts/chat-container-header/styled.js +6 -6
- package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +134 -29
- package/cjs/parts/chat-container-messages-list/props.js +4 -2
- package/cjs/parts/chat-container-messages-list/styled.js +2 -2
- package/cjs/parts/chat-empty-state/ChatEmptyState.js +2 -3
- package/cjs/parts/chat-sidebar/SideBarChat.js +57 -29
- package/cjs/parts/chat-sidebar/props.js +11 -1
- package/cjs/parts/chat-sidebar/styled.js +2 -2
- package/cjs/parts/floating-button/FloatingButton.js +18 -10
- package/cjs/parts/floating-button/props.js +6 -2
- package/cjs/parts/sidebar-button/SidebarButton.js +5 -0
- package/cjs/parts/sidebar-button/props.js +2 -3
- package/cjs/parts/system-message/style.js +1 -1
- package/cjs/parts/tile-button/TileButton.js +30 -27
- package/cjs/parts/tile-button/props.js +12 -8
- package/cjs/parts/tile-button/styled.js +6 -2
- package/esm/ChatDataTestids.js +23 -0
- package/esm/parts/bubble/ChatBubble.js +8 -5
- package/esm/parts/bubble/ChatBubbleArrow.js +64 -61
- package/esm/parts/bubble/props.js +1 -1
- package/esm/parts/bubble/styled.js +1 -1
- package/esm/parts/chat-composer/ChatContainerComposer.js +13 -5
- package/esm/parts/chat-composer/props.js +4 -0
- package/esm/parts/chat-container/ChatContainer.js +53 -11
- package/esm/parts/chat-container/props.js +7 -3
- package/esm/parts/chat-container/styled.js +1 -1
- package/esm/parts/chat-container-header/ChatContainerHeader.js +3 -2
- package/esm/parts/chat-container-header/helpers.js +23 -0
- package/esm/parts/chat-container-header/styled.js +6 -6
- package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +134 -29
- package/esm/parts/chat-container-messages-list/props.js +4 -2
- package/esm/parts/chat-container-messages-list/styled.js +2 -2
- package/esm/parts/chat-empty-state/ChatEmptyState.js +1 -1
- package/esm/parts/chat-sidebar/SideBarChat.js +57 -28
- package/esm/parts/chat-sidebar/props.js +11 -1
- package/esm/parts/chat-sidebar/styled.js +2 -2
- package/esm/parts/floating-button/FloatingButton.js +18 -9
- package/esm/parts/floating-button/props.js +6 -2
- package/esm/parts/sidebar-button/SidebarButton.js +5 -0
- package/esm/parts/sidebar-button/props.js +1 -1
- package/esm/parts/system-message/style.js +1 -1
- package/esm/parts/tile-button/TileButton.js +31 -26
- package/esm/parts/tile-button/props.js +11 -3
- package/esm/parts/tile-button/styled.js +6 -3
- package/package.json +24 -6
- package/types/ChatDataTestids.d.ts +21 -0
- package/types/parts/bubble/styled.d.ts +3 -3
- package/types/parts/bubble/tests/ChatBubble.test.d.ts +1 -0
- package/types/parts/chat-card/styled.d.ts +1 -1
- package/types/parts/chat-composer/ChatContainerComposer.d.ts +2 -0
- package/types/parts/chat-composer/props.d.ts +10 -6
- package/types/parts/chat-composer/styled.d.ts +2 -2
- package/types/parts/chat-composer/tests/ChatContainerComposer.test.d.ts +1 -0
- package/types/parts/chat-container/ChatContainer.d.ts +1 -0
- package/types/parts/chat-container/props.d.ts +4 -0
- package/types/parts/chat-container/styled.d.ts +2 -2
- package/types/parts/chat-container/tests/ChatContainer.test.d.ts +1 -0
- package/types/parts/chat-container-header/helpers.d.ts +6 -0
- package/types/parts/chat-container-header/styled.d.ts +3 -3
- package/types/parts/chat-container-messages-list/props.d.ts +6 -0
- package/types/parts/chat-empty-state/styled.d.ts +1 -1
- package/types/parts/chat-sidebar/SideBarChat.d.ts +3 -0
- package/types/parts/chat-sidebar/props.d.ts +8 -1
- package/types/parts/chat-sidebar/styled.d.ts +2 -2
- package/types/parts/floating-button/FloatingButton.d.ts +3 -1
- package/types/parts/floating-button/props.d.ts +5 -0
- package/types/parts/floating-container/styled.d.ts +1 -2
- package/types/parts/grid-influencer/styled.d.ts +2 -2
- package/types/parts/message-delimiter/styled.d.ts +1 -1
- package/types/parts/sidebar-button/styled.d.ts +1 -1
- package/types/parts/system-message/style.d.ts +2 -2
- package/types/parts/tile-button/TileButton.d.ts +3 -0
- package/types/parts/tile-button/props.d.ts +6 -0
- package/types/parts/tile-button/styled.d.ts +5 -4
- package/types/tests/utils.d.ts +27 -0
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
8
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import propsTypes from 'prop-types';
|
|
2
2
|
import { PropTypes } from 'react-desc';
|
|
3
3
|
import { noop } from 'lodash';
|
|
4
|
-
import Comments from '@elliemae/ds-icons
|
|
4
|
+
import { Comments } from '@elliemae/ds-icons';
|
|
5
5
|
|
|
6
6
|
const defaultSidebarButton = {
|
|
7
7
|
Icon: Comments,
|
|
@@ -3,7 +3,7 @@ import { Grid } from '@elliemae/ds-grid';
|
|
|
3
3
|
|
|
4
4
|
const Wrapper = /*#__PURE__*/styled(Grid).withConfig({
|
|
5
5
|
componentId: "sc-80w41d-0"
|
|
6
|
-
})(["align-items:center;justify-content:center;
|
|
6
|
+
})(["align-items:center;justify-content:center;max-width:100%;padding:0 8px 8px;border:1px solid ", ";border-radius:10px;background-color:", ";box-shadow:none;"], props => props.theme.colors.neutral['100'], props => props.theme.colors.neutral['080']);
|
|
7
7
|
const Header = /*#__PURE__*/styled(Grid).withConfig({
|
|
8
8
|
componentId: "sc-80w41d-1"
|
|
9
9
|
})(["align-items:center;height:36px;"]);
|
|
@@ -2,17 +2,18 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
|
2
2
|
import 'core-js/modules/web.url.to-json.js';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { describe } from 'react-desc';
|
|
5
|
-
import
|
|
5
|
+
import { DSTooltipV3 } from '@elliemae/ds-tooltip';
|
|
6
6
|
import { Grid } from '@elliemae/ds-grid';
|
|
7
|
-
import CloseXsmall from '@elliemae/ds-icons
|
|
8
|
-
import { StyledWrapperCentralContent, StyledTileButtonIcon, StyledStatusBadge, StyledTileButtonLabel, StyledTileButton, StyledWrapper, StyledWrapperLeftBorder, CloseButton } from './styled.js';
|
|
7
|
+
import { CloseXsmall } from '@elliemae/ds-icons';
|
|
8
|
+
import { StyledWrapperCentralContent, StyledTileButtonIcon, StyledStatusBadge, StyledTileButtonLabel, StyledTileButton, StyledWrapper, StyledWrapperLeftBorder, CloseButton, StyledTooltipV3ButtonWrapper } from './styled.js';
|
|
9
9
|
import { propsTileButton, defaultTileButton } from './props.js';
|
|
10
10
|
import { useValidateProps } from './config/useValidateProps.js';
|
|
11
|
+
import { jsx } from 'react/jsx-runtime';
|
|
11
12
|
|
|
12
13
|
var _StyledWrapperLeftBor, _CloseXsmall;
|
|
13
14
|
|
|
14
15
|
const TileButton = props => {
|
|
15
|
-
var _Icon,
|
|
16
|
+
var _Icon, _StyledTileButtonLabe, _span;
|
|
16
17
|
|
|
17
18
|
useValidateProps(props, TileButtonWithSchema.toJSON());
|
|
18
19
|
const {
|
|
@@ -31,7 +32,10 @@ const TileButton = props => {
|
|
|
31
32
|
disabled,
|
|
32
33
|
selected,
|
|
33
34
|
isHeader,
|
|
34
|
-
ariaLabel
|
|
35
|
+
ariaLabel,
|
|
36
|
+
tooltipPlacement,
|
|
37
|
+
disableTooltip,
|
|
38
|
+
innerRef
|
|
35
39
|
} = props;
|
|
36
40
|
const handleClick = React.useCallback(() => {
|
|
37
41
|
onClick(dsId, title);
|
|
@@ -47,17 +51,19 @@ const TileButton = props => {
|
|
|
47
51
|
justifyContent: "center"
|
|
48
52
|
}, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
|
|
49
53
|
size: "m"
|
|
50
|
-
})), badge ?
|
|
54
|
+
})), badge ? /*#__PURE__*/_jsx(StyledStatusBadge, {
|
|
51
55
|
badgeColor: badgeColor,
|
|
52
|
-
badgePosition: badgePosition
|
|
53
|
-
|
|
56
|
+
badgePosition: badgePosition,
|
|
57
|
+
"data-testid": "tile-badge-".concat(dsId)
|
|
58
|
+
}) : null)), !isHeader ? /*#__PURE__*/_jsx(Grid, {
|
|
54
59
|
width: "100%",
|
|
55
60
|
justifyContent: "center"
|
|
56
61
|
}, void 0, label ? _StyledTileButtonLabe || (_StyledTileButtonLabe = /*#__PURE__*/_jsx(StyledTileButtonLabel, {}, void 0, label)) : null) : null), [isHeader, Icon, badge, badgeColor, badgePosition, label]);
|
|
57
|
-
|
|
62
|
+
const Btn = React.useMemo(() => /*#__PURE__*/jsx(StyledTileButton, {
|
|
58
63
|
isHeader: isHeader,
|
|
59
64
|
value: dsId,
|
|
60
65
|
"data-testid": "tile-button-".concat(dsId),
|
|
66
|
+
"data-key": dsId,
|
|
61
67
|
onClick: handleClick,
|
|
62
68
|
onFocus: onFocus,
|
|
63
69
|
onBlur: onBlur,
|
|
@@ -66,23 +72,22 @@ const TileButton = props => {
|
|
|
66
72
|
badgeColor: badgeColor,
|
|
67
73
|
badgePosition: badgePosition,
|
|
68
74
|
"aria-pressed": selected,
|
|
69
|
-
"aria-label": ariaLabel
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}, void 0, _CloseXsmall || (_CloseXsmall = /*#__PURE__*/_jsx(CloseXsmall, {}))) : null));
|
|
75
|
+
"aria-label": ariaLabel,
|
|
76
|
+
ref: innerRef,
|
|
77
|
+
children: /*#__PURE__*/_jsx(StyledWrapper, {
|
|
78
|
+
alignItems: "center",
|
|
79
|
+
justifyContent: "center"
|
|
80
|
+
}, void 0, _span || (_span = /*#__PURE__*/_jsx("span", {}, void 0, MainContent)), _StyledWrapperLeftBor || (_StyledWrapperLeftBor = /*#__PURE__*/_jsx(StyledWrapperLeftBorder, {})), showClose && !disabled ? /*#__PURE__*/_jsx(CloseButton, {
|
|
81
|
+
onClick: onClose,
|
|
82
|
+
value: dsId,
|
|
83
|
+
"data-testid": "tile-close-btn-".concat(dsId)
|
|
84
|
+
}, void 0, _CloseXsmall || (_CloseXsmall = /*#__PURE__*/_jsx(CloseXsmall, {}))) : null)
|
|
85
|
+
}, dsId), [MainContent, ariaLabel, badgeColor, badgePosition, disabled, dsId, handleClick, isHeader, onBlur, onClose, onFocus, selected, showClose, innerRef]);
|
|
86
|
+
return title && !disableTooltip ? /*#__PURE__*/_jsx(StyledTooltipV3ButtonWrapper, {}, void 0, /*#__PURE__*/_jsx(DSTooltipV3, {
|
|
87
|
+
id: "ds-chat-tile-tooltip-button-".concat(dsId),
|
|
88
|
+
text: title,
|
|
89
|
+
startPlacementPreference: tooltipPlacement
|
|
90
|
+
}, void 0, Btn)) : Btn;
|
|
86
91
|
};
|
|
87
92
|
|
|
88
93
|
TileButton.defaultProps = defaultTileButton;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PropTypes } from 'react-desc';
|
|
2
2
|
import { noop } from 'lodash';
|
|
3
|
-
import Comments from '@elliemae/ds-icons
|
|
3
|
+
import { Comments } from '@elliemae/ds-icons';
|
|
4
4
|
|
|
5
5
|
const defaultTileButton = {
|
|
6
6
|
Icon: Comments,
|
|
@@ -18,7 +18,10 @@ const defaultTileButton = {
|
|
|
18
18
|
disabled: false,
|
|
19
19
|
selected: false,
|
|
20
20
|
isHeader: false,
|
|
21
|
-
ariaLabel: 'Tile button'
|
|
21
|
+
ariaLabel: 'Tile button',
|
|
22
|
+
tooltipPlacement: 'right',
|
|
23
|
+
disableTooltip: false,
|
|
24
|
+
innerRef: noop
|
|
22
25
|
};
|
|
23
26
|
const propsTileButton = {
|
|
24
27
|
Icon: PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),
|
|
@@ -36,7 +39,12 @@ const propsTileButton = {
|
|
|
36
39
|
disabled: PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),
|
|
37
40
|
selected: PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),
|
|
38
41
|
isHeader: PropTypes.bool.description("It won't render the label").defaultValue(defaultTileButton.disabled),
|
|
39
|
-
ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel)
|
|
42
|
+
ariaLabel: PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),
|
|
43
|
+
tooltipPlacement: PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preferences, as per popperjs placement option').defaultValue("'right'"),
|
|
44
|
+
disableTooltip: PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip),
|
|
45
|
+
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
|
46
|
+
current: PropTypes.any
|
|
47
|
+
})]).description('reference to the component')
|
|
40
48
|
};
|
|
41
49
|
|
|
42
50
|
export { defaultTileButton, propsTileButton };
|
|
@@ -46,8 +46,11 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
|
|
|
46
46
|
componentId: "sc-1ebp1zs-5"
|
|
47
47
|
})(["outline:none;background:none;height:9px;width:9px;position:absolute;top:1px;right:1px;overflow:hidden;padding:0;border:none;span{position:absolute;left:-3px;top:-4px;}&:focus,&:hover{svg{fill:", ";}&:after{display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:solid 1px ", ";border-radius:2px;}}cursor:pointer;"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[600]); // MAIN WRAPPER
|
|
48
48
|
|
|
49
|
-
const
|
|
49
|
+
const StyledTooltipV3ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
50
50
|
componentId: "sc-1ebp1zs-6"
|
|
51
|
+
})(["height:", "px;width:", "px;"], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR);
|
|
52
|
+
const StyledTileButton = /*#__PURE__*/styled.button.withConfig({
|
|
53
|
+
componentId: "sc-1ebp1zs-7"
|
|
51
54
|
})(["outline:none;background:transparent;height:", "px;width:", "px;position:relative;padding:0;border:none;cursor:pointer;border-bottom:", ";&:focus,&:hover,&:active,&:disabled{background:", ";& ", "{border:2px solid ", ";margin-top:-2px;", ";}}&:focus,&:hover{& ", "{background:", ";}& ", "{color:", ";}& svg{fill:", ";}}&:active:not(:disabled){background:", ";& ", "{background:", ";}& ", "{color:", ";font-weight:600;}& svg{fill:", ";}& ", "{border:2px solid ", ";}}&:disabled{background:", ";", "{background:", ";}& ", "{background:", ";border:2px solid ", ";}", "{svg{fill:", ";}}", "{color:", ";}}", ""], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR, props => props.isHeader ? "1px solid ".concat(props.theme.colors.neutral['200']) : 'none', props => props.theme.colors.neutral['080'], StyledStatusBadge, props => props.theme.colors.neutral['080'], props => {
|
|
52
55
|
switch (props.badgePosition) {
|
|
53
56
|
case 'left':
|
|
@@ -67,7 +70,7 @@ const StyledTileButton = /*#__PURE__*/styled.button.withConfig({
|
|
|
67
70
|
return '';
|
|
68
71
|
});
|
|
69
72
|
const StyledWrapper = /*#__PURE__*/styled(Grid).withConfig({
|
|
70
|
-
componentId: "sc-1ebp1zs-
|
|
73
|
+
componentId: "sc-1ebp1zs-8"
|
|
71
74
|
})(["height:100%;width:100%;position:relative;"]);
|
|
72
75
|
|
|
73
|
-
export { CloseButton, StyledStatusBadge, StyledTileButton, StyledTileButtonIcon, StyledTileButtonLabel, StyledWrapper, StyledWrapperCentralContent, StyledWrapperLeftBorder };
|
|
76
|
+
export { CloseButton, StyledStatusBadge, StyledTileButton, StyledTileButtonIcon, StyledTileButtonLabel, StyledTooltipV3ButtonWrapper, StyledWrapper, StyledWrapperCentralContent, StyledWrapperLeftBorder };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chat",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chat",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -11,6 +11,10 @@
|
|
|
11
11
|
"import": "./esm/index.js",
|
|
12
12
|
"require": "./cjs/index.js"
|
|
13
13
|
},
|
|
14
|
+
"./tests/utils": {
|
|
15
|
+
"import": "./esm/tests/utils.js",
|
|
16
|
+
"require": "./cjs/tests/utils.js"
|
|
17
|
+
},
|
|
14
18
|
"./styled": {
|
|
15
19
|
"import": "./esm/styled.js",
|
|
16
20
|
"require": "./cjs/styled.js"
|
|
@@ -203,6 +207,10 @@
|
|
|
203
207
|
"import": "./esm/parts/chat-container-header/styled.js",
|
|
204
208
|
"require": "./cjs/parts/chat-container-header/styled.js"
|
|
205
209
|
},
|
|
210
|
+
"./parts/chat-container-header/helpers": {
|
|
211
|
+
"import": "./esm/parts/chat-container-header/helpers.js",
|
|
212
|
+
"require": "./cjs/parts/chat-container-header/helpers.js"
|
|
213
|
+
},
|
|
206
214
|
"./parts/chat-container-header/ChatContainerHeader": {
|
|
207
215
|
"import": "./esm/parts/chat-container-header/ChatContainerHeader.js",
|
|
208
216
|
"require": "./cjs/parts/chat-container-header/ChatContainerHeader.js"
|
|
@@ -270,6 +278,10 @@
|
|
|
270
278
|
"./parts/bubble/ChatBubble": {
|
|
271
279
|
"import": "./esm/parts/bubble/ChatBubble.js",
|
|
272
280
|
"require": "./cjs/parts/bubble/ChatBubble.js"
|
|
281
|
+
},
|
|
282
|
+
"./ChatDataTestids": {
|
|
283
|
+
"import": "./esm/ChatDataTestids.js",
|
|
284
|
+
"require": "./cjs/ChatDataTestids.js"
|
|
273
285
|
}
|
|
274
286
|
},
|
|
275
287
|
"repository": {
|
|
@@ -293,19 +305,25 @@
|
|
|
293
305
|
"generateSubmodules": true
|
|
294
306
|
},
|
|
295
307
|
"dependencies": {
|
|
296
|
-
"@elliemae/ds-
|
|
297
|
-
"@elliemae/ds-
|
|
298
|
-
"@elliemae/ds-
|
|
308
|
+
"@elliemae/ds-banner": "2.0.0-rc.3",
|
|
309
|
+
"@elliemae/ds-basic": "2.0.0-rc.3",
|
|
310
|
+
"@elliemae/ds-button": "2.0.0-rc.3",
|
|
311
|
+
"@elliemae/ds-grid": "2.0.0-rc.3",
|
|
312
|
+
"@elliemae/ds-icons": "2.0.0-rc.3",
|
|
313
|
+
"@elliemae/ds-props-helpers": "2.0.0-rc.3",
|
|
314
|
+
"@elliemae/ds-tooltip": "2.0.0-rc.3",
|
|
315
|
+
"@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.3",
|
|
299
316
|
"prop-types": "~15.7.2",
|
|
317
|
+
"react-desc": "~4.1.2",
|
|
300
318
|
"react-virtual": "~2.3.2"
|
|
301
319
|
},
|
|
302
320
|
"devDependencies": {
|
|
303
|
-
"styled-components": "~5.3.
|
|
321
|
+
"styled-components": "~5.3.3"
|
|
304
322
|
},
|
|
305
323
|
"peerDependencies": {
|
|
306
324
|
"lodash": "^4.17.21",
|
|
307
325
|
"react": "^16.14.0",
|
|
308
326
|
"react-dom": "^16.14.0",
|
|
309
|
-
"styled-components": "^5.3.
|
|
327
|
+
"styled-components": "^5.3.3"
|
|
310
328
|
}
|
|
311
329
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export declare const ChatDataTestIds: {
|
|
2
|
+
COMPOSER_TEXTAREA: string;
|
|
3
|
+
COMPOSER_SEND_BUTTON: string;
|
|
4
|
+
CARD_TITLE: string;
|
|
5
|
+
CARD_WRAPPER: string;
|
|
6
|
+
CARD_TIME: string;
|
|
7
|
+
CARD_RIGHT_ADDON: string;
|
|
8
|
+
CARD_CONTENT: string;
|
|
9
|
+
LOADING_INDICATOR: string;
|
|
10
|
+
HEADER_TITLE: string;
|
|
11
|
+
HEADER_CHILDREN: string;
|
|
12
|
+
THREAD_CONTAINER: string;
|
|
13
|
+
LOAD_MORE_BUTTON: string;
|
|
14
|
+
FLOATING_BUTTON: string;
|
|
15
|
+
SYSTEM_MSG_TITLE: string;
|
|
16
|
+
SYSTEM_MSG_BODY: string;
|
|
17
|
+
SYSTEM_MSG_TIME: string;
|
|
18
|
+
BUBBLE: string;
|
|
19
|
+
BUBBLE_TITLE: string;
|
|
20
|
+
BUBBLE_BODY: string;
|
|
21
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, any, never>;
|
|
3
|
-
export declare const StyledTitleBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
4
|
-
export declare const StyledTitleLeftBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
5
|
-
export declare const StyledTitleRightBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
3
|
+
export declare const StyledTitleBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
4
|
+
export declare const StyledTitleLeftBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
5
|
+
export declare const StyledTitleRightBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
6
6
|
export declare const StyleBodyWrapper: import("styled-components").StyledComponent<"div", any, any, never>;
|
|
7
7
|
export declare const StyleErrorMessage: import("styled-components").StyledComponent<"div", any, any, never>;
|
|
8
8
|
export declare const StyleHelpMessage: import("styled-components").StyledComponent<"div", any, any, never>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
2
|
+
export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
3
3
|
export declare const MainContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
4
|
export declare const Title: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
5
5
|
export declare const Content: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
@@ -5,11 +5,13 @@ declare const ChatComposer: {
|
|
|
5
5
|
propTypes: {
|
|
6
6
|
placeholder: any;
|
|
7
7
|
inputValue: any;
|
|
8
|
+
maxLengthMessage: any;
|
|
8
9
|
onChange: any;
|
|
9
10
|
onResize: any;
|
|
10
11
|
onSend: any;
|
|
11
12
|
onFocus: any;
|
|
12
13
|
onBlur: any;
|
|
14
|
+
onKeyDown: any;
|
|
13
15
|
maxHeight: any;
|
|
14
16
|
inputMaxLength: any;
|
|
15
17
|
buttonDisabled: any;
|
|
@@ -6,14 +6,16 @@ export interface TextAreaProps {
|
|
|
6
6
|
}
|
|
7
7
|
export declare const defaultComposerPros: ChatComposerProps;
|
|
8
8
|
export interface ChatComposerProps {
|
|
9
|
-
placeholder
|
|
10
|
-
inputValue
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
inputValue?: string;
|
|
11
|
+
maxLengthMessage?: string;
|
|
11
12
|
onChange: (value: string) => void;
|
|
12
|
-
onResize
|
|
13
|
+
onResize?: (value: number) => void;
|
|
13
14
|
onSend: (value: string) => void;
|
|
14
|
-
onFocus
|
|
15
|
-
onBlur
|
|
16
|
-
|
|
15
|
+
onFocus?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
|
|
16
|
+
onBlur?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
|
|
17
|
+
onKeyDown?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
18
|
+
maxHeight?: number;
|
|
17
19
|
inputMaxLength: number | undefined;
|
|
18
20
|
buttonDisabled: boolean;
|
|
19
21
|
dataTestid?: string;
|
|
@@ -22,11 +24,13 @@ export interface ChatComposerProps {
|
|
|
22
24
|
export declare const composerProps: {
|
|
23
25
|
placeholder: any;
|
|
24
26
|
inputValue: any;
|
|
27
|
+
maxLengthMessage: any;
|
|
25
28
|
onChange: any;
|
|
26
29
|
onResize: any;
|
|
27
30
|
onSend: any;
|
|
28
31
|
onFocus: any;
|
|
29
32
|
onBlur: any;
|
|
33
|
+
onKeyDown: any;
|
|
30
34
|
maxHeight: any;
|
|
31
35
|
inputMaxLength: any;
|
|
32
36
|
buttonDisabled: any;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const StyledChatContainerContentComposer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
2
|
+
export declare const StyledChatContainerContentComposer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
3
3
|
export declare const StyledComposerInput: import("styled-components").StyledComponent<"textarea", any, any, never>;
|
|
4
4
|
export declare const StyledComposerButton: import("styled-components").StyledComponent<{
|
|
5
5
|
({ innerRef, disabled, buttonType, fluidWidth, size, labelText, icon, onBlur, onClick, onKeyPress, leftIcon, tabIndex, variant, intent, containerProps, className, as: Component, type, ...rest }: {
|
|
@@ -60,5 +60,5 @@ export declare const StyledComposerButton: import("styled-components").StyledCom
|
|
|
60
60
|
onKeyPress: any;
|
|
61
61
|
};
|
|
62
62
|
}, any, {}, never>;
|
|
63
|
-
export declare const StyledCounterArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
63
|
+
export declare const StyledCounterArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
64
64
|
export declare const StyledCounterErrorA11y: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { PropTypes } from 'react-desc';
|
|
2
|
+
import { BANNER_TYPES } from '@elliemae/ds-banner';
|
|
2
3
|
import { ChatContainerMessagesListProps } from '../chat-container-messages-list/props';
|
|
3
4
|
import { ChatComposerProps } from '../chat-composer/props';
|
|
4
5
|
interface ChatBannerProps {
|
|
5
6
|
label: string;
|
|
6
7
|
viewLabel: string;
|
|
8
|
+
type?: BANNER_TYPES;
|
|
7
9
|
onView: () => void;
|
|
8
10
|
onClose: () => void;
|
|
9
11
|
}
|
|
@@ -20,6 +22,7 @@ export interface ChatContainerProps {
|
|
|
20
22
|
bannerProps?: ChatBannerProps;
|
|
21
23
|
sendingMessages?: string[] | number[];
|
|
22
24
|
sendingText: string;
|
|
25
|
+
ariaLabel: string;
|
|
23
26
|
}
|
|
24
27
|
export declare const defaultProps: ChatContainerProps;
|
|
25
28
|
export declare const containerProps: {
|
|
@@ -35,5 +38,6 @@ export declare const containerProps: {
|
|
|
35
38
|
sendingMessages: any;
|
|
36
39
|
sendingText: any;
|
|
37
40
|
actionRef: any;
|
|
41
|
+
ariaLabel: any;
|
|
38
42
|
};
|
|
39
43
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const CONTAINER_WIDTH = 300;
|
|
3
|
-
export declare const StyledChatContainerContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
3
|
+
export declare const StyledChatContainerContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
4
4
|
export declare const StyledIndicatorContainer: import("styled-components").StyledComponent<"div", any, {
|
|
5
5
|
isLoading?: "bottom" | "top" | undefined;
|
|
6
6
|
linear?: boolean | undefined;
|
|
7
7
|
}, never>;
|
|
8
|
-
export declare const MobileStyledChatContainerContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
8
|
+
export declare const MobileStyledChatContainerContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
2
|
+
export declare const StyledChatContainerContentHeaderActions: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
3
|
+
export declare const StyledChatContainerContentHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
4
|
+
export declare const StyledChatContainerContentHeaderLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { PropTypes } from 'react-desc';
|
|
2
3
|
import { BubbleProps } from '../bubble/props';
|
|
3
4
|
export interface ChatContainerMessagesListProps {
|
|
@@ -9,6 +10,11 @@ export interface ChatContainerMessagesListProps {
|
|
|
9
10
|
getMoreMessages: PropTypes.func;
|
|
10
11
|
sendingMessages?: Array<string | number>;
|
|
11
12
|
sendingText: string;
|
|
13
|
+
bannerPosition?: 'top' | 'bottom';
|
|
14
|
+
bannerRef: React.MutableRefObject<{
|
|
15
|
+
focusOnWrapper: (...args: any[]) => void;
|
|
16
|
+
focusOnLink: (...args: any[]) => void;
|
|
17
|
+
}>;
|
|
12
18
|
}
|
|
13
19
|
export declare const defaultProps: ChatContainerMessagesListProps;
|
|
14
20
|
export declare const listProps: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const CONTAINER_WIDTH = 300;
|
|
3
|
-
export declare const ChatEmptyStateWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
3
|
+
export declare const ChatEmptyStateWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
4
4
|
export declare const MessageWrapper: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
@@ -6,11 +6,14 @@ declare const SideBarChat: {
|
|
|
6
6
|
sidebarItems: any;
|
|
7
7
|
expanded: any;
|
|
8
8
|
selectedItem: any;
|
|
9
|
+
tooltipPlacement: any;
|
|
10
|
+
enableTooltipWhenIsClosed: any;
|
|
9
11
|
onFooterExpand: any;
|
|
10
12
|
onFooterClose: any;
|
|
11
13
|
onHeaderExpand: any;
|
|
12
14
|
onHeaderClose: any;
|
|
13
15
|
footerButtonExtraProps: any;
|
|
16
|
+
actionRef: any;
|
|
14
17
|
};
|
|
15
18
|
defaultProps: CharSidebarProps;
|
|
16
19
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { TileButtonProps } from '../tile-button/props';
|
|
2
3
|
export interface CharSidebarProps {
|
|
3
4
|
sidebarItems: TileButtonProps[];
|
|
@@ -7,16 +8,22 @@ export interface CharSidebarProps {
|
|
|
7
8
|
onFooterExpand: () => void;
|
|
8
9
|
onHeaderExpand: () => void;
|
|
9
10
|
onHeaderClose: () => void;
|
|
10
|
-
footerButtonExtraProps:
|
|
11
|
+
footerButtonExtraProps: Record<string, any>;
|
|
12
|
+
tooltipPlacement: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
|
|
13
|
+
enableTooltipWhenIsClosed: boolean;
|
|
14
|
+
actionRef: React.MutableRefObject<any>;
|
|
11
15
|
}
|
|
12
16
|
export declare const defaultProps: CharSidebarProps;
|
|
13
17
|
export declare const chatSidebarProps: {
|
|
14
18
|
sidebarItems: any;
|
|
15
19
|
expanded: any;
|
|
16
20
|
selectedItem: any;
|
|
21
|
+
tooltipPlacement: any;
|
|
22
|
+
enableTooltipWhenIsClosed: any;
|
|
17
23
|
onFooterExpand: any;
|
|
18
24
|
onFooterClose: any;
|
|
19
25
|
onHeaderExpand: any;
|
|
20
26
|
onHeaderClose: any;
|
|
21
27
|
footerButtonExtraProps: any;
|
|
28
|
+
actionRef: any;
|
|
22
29
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const StyledSideBarContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
3
|
-
export declare const StyledSideBarButtonsContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
2
|
+
export declare const StyledSideBarContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
3
|
+
export declare const StyledSideBarButtonsContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { FloatingButtonProps } from './props';
|
|
3
3
|
export declare const FloatingButton: {
|
|
4
|
-
({ onClick }: FloatingButtonProps): JSX.Element;
|
|
4
|
+
({ onClick, onFocus, innerRef }: FloatingButtonProps): JSX.Element;
|
|
5
5
|
propTypes: {
|
|
6
6
|
onClick: any;
|
|
7
|
+
onFocus: any;
|
|
8
|
+
innerRef: any;
|
|
7
9
|
};
|
|
8
10
|
defaultProps: FloatingButtonProps;
|
|
9
11
|
};
|
|
@@ -1,7 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
export interface FloatingButtonProps {
|
|
2
3
|
onClick: () => void;
|
|
4
|
+
onFocus: () => void;
|
|
5
|
+
innerRef: React.RefObject<HTMLButtonElement>;
|
|
3
6
|
}
|
|
4
7
|
export declare const defaultFloatingButton: FloatingButtonProps;
|
|
5
8
|
export declare const propsFloatingButton: {
|
|
6
9
|
onClick: any;
|
|
10
|
+
onFocus: any;
|
|
11
|
+
innerRef: any;
|
|
7
12
|
};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const StyledFloatingContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
|
|
1
|
+
export declare const StyledFloatingContainer: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const StyledChatContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
3
|
-
export declare const StyledChatContainerContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
2
|
+
export declare const StyledChatContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
3
|
+
export declare const StyledChatContainerContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { MessageDelimiterProps } from './props';
|
|
3
|
-
declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
3
|
+
declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
4
4
|
declare const Line: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
5
5
|
declare const Text: import("styled-components").StyledComponent<"p", any, Pick<MessageDelimiterProps, "size" | "verticalMargin">, never>;
|
|
6
6
|
export { Wrapper, Line, Text };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const StyledSidebarButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
3
|
-
export declare const StyledSidebarButtonIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
3
|
+
export declare const StyledSidebarButtonIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
4
4
|
export declare const StyledSidebarButtonLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
3
|
-
declare const Header: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
2
|
+
declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
3
|
+
declare const Header: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
4
4
|
declare const Title: import("styled-components").StyledComponent<"p", any, any, never>;
|
|
5
5
|
declare const Time: import("styled-components").StyledComponent<"p", any, any, never>;
|
|
6
6
|
declare const Message: import("styled-components").StyledComponent<"p", any, any, never>;
|