@elliemae/ds-chat-bubble 3.60.0-next.2 → 3.60.0-next.21
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/ChatBubble.js +83 -32
- package/dist/cjs/ChatBubble.js.map +2 -2
- package/dist/cjs/ChatBubbleArrow.js +5 -6
- package/dist/cjs/ChatBubbleArrow.js.map +2 -2
- package/dist/cjs/{DSChatBubbleDefinitions.js → constants/index.js} +36 -4
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/index.js +7 -5
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +14 -17
- package/dist/cjs/react-desc-prop-types.js.map +3 -3
- package/dist/cjs/styled.js +39 -12
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/ChatBubble.js +83 -31
- package/dist/esm/ChatBubble.js.map +2 -2
- package/dist/esm/ChatBubbleArrow.js +5 -6
- package/dist/esm/ChatBubbleArrow.js.map +2 -2
- package/dist/esm/constants/index.js +38 -0
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/index.js +12 -4
- package/dist/esm/index.js.map +3 -3
- package/dist/esm/react-desc-prop-types.js +10 -8
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +37 -10
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/ChatBubbleArrow.d.ts +1 -0
- package/dist/types/constants/index.d.ts +30 -0
- package/dist/types/index.d.ts +3 -2
- package/dist/types/react-desc-prop-types.d.ts +6 -10
- package/package.json +24 -26
- package/dist/cjs/ChatBubbleDataTestIds.js +0 -41
- package/dist/cjs/ChatBubbleDataTestIds.js.map +0 -7
- package/dist/cjs/DSChatBubbleDefinitions.js.map +0 -7
- package/dist/esm/ChatBubbleDataTestIds.js +0 -11
- package/dist/esm/ChatBubbleDataTestIds.js.map +0 -7
- package/dist/esm/DSChatBubbleDefinitions.js +0 -6
- package/dist/esm/DSChatBubbleDefinitions.js.map +0 -7
- package/dist/types/ChatBubbleDataTestIds.d.ts +0 -6
- package/dist/types/DSChatBubbleDefinitions.d.ts +0 -1
package/dist/esm/ChatBubble.js
CHANGED
|
@@ -13,12 +13,12 @@ import {
|
|
|
13
13
|
StyledTitleRightBubble,
|
|
14
14
|
StyleBodyWrapper,
|
|
15
15
|
StyleErrorMessage,
|
|
16
|
-
StyleHelpMessage
|
|
16
|
+
StyleHelpMessage,
|
|
17
|
+
StyledBubbleArrow
|
|
17
18
|
} from "./styled.js";
|
|
18
19
|
import { BubblePropTypes, defaultProps } from "./react-desc-prop-types.js";
|
|
19
20
|
import { ChatBubbleArrow } from "./ChatBubbleArrow.js";
|
|
20
|
-
import {
|
|
21
|
-
import { DSChatBubbleName } from "./DSChatBubbleDefinitions.js";
|
|
21
|
+
import { CHAT_BUBBLE_DATA_TESTID, DSChatBubbleName } from "./constants/index.js";
|
|
22
22
|
const ChatBubble = (props) => {
|
|
23
23
|
const defaultPropsIncludingInstanciatedValues = React2.useMemo(() => {
|
|
24
24
|
const dsId2 = props.dsId || `ds-chat-bubble-${uid(9)}`;
|
|
@@ -31,39 +31,91 @@ const ChatBubble = (props) => {
|
|
|
31
31
|
useValidateTypescriptPropTypes(propsWithDefault, BubblePropTypes, DSChatBubbleName);
|
|
32
32
|
const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;
|
|
33
33
|
const bodyParts = React2.useMemo(() => typeof body === "string" ? body.split("\n") : [body], [body]);
|
|
34
|
-
return /* @__PURE__ */ jsxs(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
return /* @__PURE__ */ jsxs(
|
|
35
|
+
StyledWrapper,
|
|
36
|
+
{
|
|
37
|
+
"data-testid": `${CHAT_BUBBLE_DATA_TESTID.WRAPPER}-${dsId}`,
|
|
38
|
+
getOwnerProps: () => propsWithDefault,
|
|
39
|
+
getOwnerPropsArguments: () => ({}),
|
|
40
|
+
children: [
|
|
41
|
+
/* @__PURE__ */ jsxs(StyledColoredBubble, { type, getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), children: [
|
|
42
|
+
/* @__PURE__ */ jsxs(
|
|
43
|
+
StyledTitleBubble,
|
|
44
|
+
{
|
|
45
|
+
cols: ["1fr", "auto"],
|
|
46
|
+
gutter: "xs",
|
|
47
|
+
alignItems: "flex-end",
|
|
48
|
+
className: "sr-only",
|
|
49
|
+
getOwnerProps: () => propsWithDefault,
|
|
50
|
+
getOwnerPropsArguments: () => ({}),
|
|
51
|
+
children: [
|
|
52
|
+
/* @__PURE__ */ jsx(
|
|
53
|
+
StyledTitleLeftBubble,
|
|
54
|
+
{
|
|
55
|
+
"data-testid": `${CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`,
|
|
56
|
+
getOwnerProps: () => propsWithDefault,
|
|
57
|
+
getOwnerPropsArguments: () => ({}),
|
|
58
|
+
children: title
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
/* @__PURE__ */ jsx(
|
|
62
|
+
StyledTitleRightBubble,
|
|
63
|
+
{
|
|
64
|
+
alignItems: "center",
|
|
65
|
+
type,
|
|
66
|
+
"data-testid": `${CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`,
|
|
67
|
+
getOwnerProps: () => propsWithDefault,
|
|
68
|
+
getOwnerPropsArguments: () => ({}),
|
|
69
|
+
children: time
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
StyleBodyWrapper,
|
|
77
|
+
{
|
|
78
|
+
"data-testid": `${CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`,
|
|
79
|
+
getOwnerProps: () => propsWithDefault,
|
|
80
|
+
getOwnerPropsArguments: () => ({}),
|
|
81
|
+
children: bodyParts.map((item, index) => (
|
|
82
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
83
|
+
/* @__PURE__ */ jsxs(React2.Fragment, { children: [
|
|
84
|
+
item,
|
|
85
|
+
index < bodyParts.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
|
|
86
|
+
] }, `body-fragment-${index}-${dsId}`)
|
|
87
|
+
))
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
/* @__PURE__ */ jsx(StyledBubbleArrow, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), children: /* @__PURE__ */ jsx(ChatBubbleArrow, { type, dsId }) })
|
|
91
|
+
] }),
|
|
92
|
+
errorMessage ? /* @__PURE__ */ jsx(
|
|
93
|
+
StyleErrorMessage,
|
|
40
94
|
{
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
children:
|
|
95
|
+
"data-testid": `${CHAT_BUBBLE_DATA_TESTID.ERROR_MESSAGE}-${dsId}`,
|
|
96
|
+
getOwnerProps: () => propsWithDefault,
|
|
97
|
+
getOwnerPropsArguments: () => ({}),
|
|
98
|
+
children: /* @__PURE__ */ jsxs(Grid, { cols: ["1fr", "auto"], children: [
|
|
99
|
+
/* @__PURE__ */ jsx("span", { children: errorMessage }),
|
|
100
|
+
/* @__PURE__ */ jsx(WarningCircleFill, {})
|
|
101
|
+
] })
|
|
45
102
|
}
|
|
46
|
-
)
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
/* @__PURE__ */ jsx(WarningCircleFill, {})
|
|
60
|
-
] }) }) : null,
|
|
61
|
-
helpMessage ? /* @__PURE__ */ jsx(StyleHelpMessage, { "data-testid": `chat-bubble-help-message-${dsId}`, children: /* @__PURE__ */ jsx("span", { children: helpMessage }) }) : null
|
|
62
|
-
] });
|
|
103
|
+
) : null,
|
|
104
|
+
helpMessage ? /* @__PURE__ */ jsx(
|
|
105
|
+
StyleHelpMessage,
|
|
106
|
+
{
|
|
107
|
+
"data-testid": `${CHAT_BUBBLE_DATA_TESTID.HELP_MESSAGE}-${dsId}`,
|
|
108
|
+
getOwnerProps: () => propsWithDefault,
|
|
109
|
+
getOwnerPropsArguments: () => ({}),
|
|
110
|
+
children: /* @__PURE__ */ jsx("span", { children: helpMessage })
|
|
111
|
+
}
|
|
112
|
+
) : null
|
|
113
|
+
]
|
|
114
|
+
}
|
|
115
|
+
);
|
|
63
116
|
};
|
|
64
117
|
ChatBubble.displayName = DSChatBubbleName;
|
|
65
118
|
const ChatBubbleWithSchema = describe(ChatBubble);
|
|
66
|
-
ChatBubbleWithSchema.propTypes = BubblePropTypes;
|
|
67
119
|
export {
|
|
68
120
|
ChatBubble,
|
|
69
121
|
ChatBubbleWithSchema
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ChatBubble.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { WarningCircleFill } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport {\n StyledWrapper,\n StyledColoredBubble,\n StyledTitleBubble,\n StyledTitleLeftBubble,\n StyledTitleRightBubble,\n StyleBodyWrapper,\n StyleErrorMessage,\n StyleHelpMessage,\n} from './styled.js';\nimport { BubblePropTypes, type DSChatBubbleT, defaultProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { WarningCircleFill } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport {\n StyledWrapper,\n StyledColoredBubble,\n StyledTitleBubble,\n StyledTitleLeftBubble,\n StyledTitleRightBubble,\n StyleBodyWrapper,\n StyleErrorMessage,\n StyleHelpMessage,\n StyledBubbleArrow,\n} from './styled.js';\nimport { BubblePropTypes, type DSChatBubbleT, defaultProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport { CHAT_BUBBLE_DATA_TESTID, DSChatBubbleName } from './constants/index.js';\n\nconst ChatBubble: React.ComponentType<DSChatBubbleT.Props> = (props) => {\n const defaultPropsIncludingInstanciatedValues = React.useMemo(() => {\n const dsId = props.dsId || `ds-chat-bubble-${uid(9)}`;\n return { ...defaultProps, dsId };\n }, [props.dsId]);\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatBubbleT.InternalProps>(\n props,\n defaultPropsIncludingInstanciatedValues,\n );\n useValidateTypescriptPropTypes(propsWithDefault, BubblePropTypes, DSChatBubbleName);\n\n const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;\n const bodyParts = React.useMemo(() => (typeof body === 'string' ? body.split('\\n') : [body]), [body]);\n return (\n <StyledWrapper\n data-testid={`${CHAT_BUBBLE_DATA_TESTID.WRAPPER}-${dsId}`}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({})}\n >\n <StyledColoredBubble type={type} getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})}>\n <StyledTitleBubble\n cols={['1fr', 'auto']}\n gutter=\"xs\"\n alignItems=\"flex-end\"\n className=\"sr-only\"\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({})}\n >\n <StyledTitleLeftBubble\n data-testid={`${CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({})}\n >\n {title}\n </StyledTitleLeftBubble>\n <StyledTitleRightBubble\n alignItems=\"center\"\n type={type}\n data-testid={`${CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({})}\n >\n {time}\n </StyledTitleRightBubble>\n </StyledTitleBubble>\n <StyleBodyWrapper\n data-testid={`${CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({})}\n >\n {bodyParts.map((item, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <React.Fragment key={`body-fragment-${index}-${dsId}`}>\n {item}\n {index < bodyParts.length - 1 ? <br /> : null}\n </React.Fragment>\n ))}\n </StyleBodyWrapper>\n <StyledBubbleArrow getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})}>\n <ChatBubbleArrow type={type} dsId={dsId} />\n </StyledBubbleArrow>\n </StyledColoredBubble>\n {errorMessage ? (\n <StyleErrorMessage\n data-testid={`${CHAT_BUBBLE_DATA_TESTID.ERROR_MESSAGE}-${dsId}`}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({})}\n >\n <Grid cols={['1fr', 'auto']}>\n <span>{errorMessage}</span>\n <WarningCircleFill />\n </Grid>\n </StyleErrorMessage>\n ) : null}\n {helpMessage ? (\n <StyleHelpMessage\n data-testid={`${CHAT_BUBBLE_DATA_TESTID.HELP_MESSAGE}-${dsId}`}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({})}\n >\n <span>{helpMessage}</span>\n </StyleHelpMessage>\n ) : null}\n </StyledWrapper>\n );\n};\n\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\n\nexport { ChatBubble, ChatBubbleWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "dsId"]
|
|
7
7
|
}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ jsx(StyledBubbleArrow, { children: type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsxs("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
|
|
4
|
+
import { BUBBLE_TYPES } from "./constants/index.js";
|
|
5
|
+
const ChatBubbleArrow = ({ type, dsId }) => type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsxs("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
|
|
7
6
|
/* @__PURE__ */ jsxs("defs", { children: [
|
|
8
7
|
/* @__PURE__ */ jsx(
|
|
9
8
|
"path",
|
|
@@ -54,10 +53,10 @@ const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ jsx(StyledBubbleArro
|
|
|
54
53
|
d: "M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z",
|
|
55
54
|
fill: "#1E79C2"
|
|
56
55
|
}
|
|
57
|
-
) }) })
|
|
56
|
+
) }) });
|
|
58
57
|
const ChatBubbleArrowWithSchema = describe(ChatBubbleArrow);
|
|
59
|
-
ChatBubbleArrowWithSchema.propTypes = propsArrowBubble;
|
|
60
58
|
export {
|
|
61
|
-
ChatBubbleArrow
|
|
59
|
+
ChatBubbleArrow,
|
|
60
|
+
ChatBubbleArrowWithSchema
|
|
62
61
|
};
|
|
63
62
|
//# sourceMappingURL=ChatBubbleArrow.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ChatBubbleArrow.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUBBLE_TYPES } from './constants/index.js';\nimport { type DSChatBubbleT } from './react-desc-prop-types.js';\n\nexport const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type' | 'dsId'>> = ({ type, dsId }) =>\n type === BUBBLE_TYPES.RECIPIENT ? (\n <svg width=\"1.15rem\" height=\"1.07rem\" viewBox=\"0 0 15 14\" aria-hidden=\"true\">\n <defs>\n <path\n id={`arrow-svg-path-${dsId}`}\n d=\"M12,8.5 C12,7.9373169 11.6782751,7.4856453 11.2282104,7.196228 C11.2286673,7.1967363 3,2 3,2 L3,10 L10.5627441,10 L10.5658569,9.9933472 C11.3630371,9.9580688 12,9.3058472 12,8.5 Z\"\n ></path>\n <filter\n id={`arrow-svg-filter-${dsId}`}\n x=\"-55.6%\"\n y=\"-50.0%\"\n width=\"211.1%\"\n height=\"225.0%\"\n filterUnits=\"objectBoundingBox\"\n >\n <feOffset dx=\"2.3\" dy=\"1.2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"></feOffset>\n <feGaussianBlur stdDeviation=\"1.5\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"></feGaussianBlur>\n <feColorMatrix\n values=\"0 0 0 0 0.207843137 \n 0 0 0 0 0.235294118 \n 0 0 0 0 0.274509804 \n 0 0 0 0.8 0\"\n type=\"matrix\"\n in=\"shadowBlurOuter1\"\n ></feColorMatrix>\n </filter>\n </defs>\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <g transform=\"translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) \">\n <use\n fill=\"black\"\n fillOpacity=\"1\"\n filter={`url(#arrow-svg-filter-${dsId})`}\n xlinkHref={`#arrow-svg-path-${dsId}`}\n ></use>\n <use fill=\"#FFFFFF\" fillRule=\"evenodd\" xlinkHref={`#arrow-svg-path-${dsId}`}></use>\n </g>\n </g>\n </svg>\n ) : (\n <svg width=\"0.692rem\" height=\"0.615rem\" viewBox=\"0 0 9 8\" aria-hidden=\"true\">\n <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z\"\n fill=\"#1E79C2\"\n ></path>\n </g>\n </svg>\n );\n\nexport const ChatBubbleArrowWithSchema = describe(ChatBubbleArrow);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACSf,cAIA,YAJA;AARR,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAGtB,MAAM,kBAAmF,CAAC,EAAE,MAAM,KAAK,MAC5G,SAAS,aAAa,YACpB,qBAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,uBAAC,UACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,kBAAkB,IAAI;AAAA,QAC1B,GAAE;AAAA;AAAA,IACH;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,oBAAoB,IAAI;AAAA,QAC5B,GAAE;AAAA,QACF,GAAE;AAAA,QACF,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAY;AAAA,QAEZ;AAAA,8BAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,UACzE,oBAAC,oBAAe,cAAa,OAAM,IAAG,sBAAqB,QAAO,oBAAmB;AAAA,UACrF;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cAIP,MAAK;AAAA,cACL,IAAG;AAAA;AAAA,UACJ;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAAA,EACA,oBAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD,+BAAC,OAAE,WAAU,+EACX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,QAAQ,yBAAyB,IAAI;AAAA,QACrC,WAAW,mBAAmB,IAAI;AAAA;AAAA,IACnC;AAAA,IACD,oBAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAW,mBAAmB,IAAI,IAAI;AAAA,KAC/E,GACF;AAAA,GACF,IAEA,oBAAC,SAAI,OAAM,YAAW,QAAO,YAAW,SAAQ,WAAU,eAAY,QACpE,8BAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA;AACN,GACH,GACF;AAGG,MAAM,4BAA4B,SAAS,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
+
const DSChatBubbleName = "DSBubble";
|
|
4
|
+
const DSChatBubbleArrowName = "DSBubbleArrow";
|
|
5
|
+
const BUBBLE_TYPES = {
|
|
6
|
+
SENDER: "SENDER",
|
|
7
|
+
RECIPIENT: "RECIPIENT",
|
|
8
|
+
DELIMITER: "DELIMITER",
|
|
9
|
+
SYSTEM: "SYSTEM"
|
|
10
|
+
};
|
|
11
|
+
const CHAT_BUBBLE_SLOTS = {
|
|
12
|
+
WRAPPER: "wrapper",
|
|
13
|
+
HEADER: "header",
|
|
14
|
+
HEADER_LEFT: "header-left",
|
|
15
|
+
HEADER_RIGHT: "header-right",
|
|
16
|
+
BODY_WRAPPER: "body-wrapper",
|
|
17
|
+
ERROR_MESSAGE: "error-message",
|
|
18
|
+
HELP_MESSAGE: "help-message",
|
|
19
|
+
ARROW: "arrow",
|
|
20
|
+
COLORED_BUBBLE: "colored-bubble"
|
|
21
|
+
};
|
|
22
|
+
const CHAT_BUBBLE_DATA_TESTID = {
|
|
23
|
+
...slotObjectToDataTestIds(DSChatBubbleName, CHAT_BUBBLE_SLOTS),
|
|
24
|
+
WRAPPER: "ds-chat-bubble",
|
|
25
|
+
HEADER_LEFT: "chat-bubble-title",
|
|
26
|
+
BODY_WRAPPER: "chat-bubble-body",
|
|
27
|
+
HEADER_RIGHT: "chat-bubble-time",
|
|
28
|
+
ERROR_MESSAGE: "chat-bubble-error-message",
|
|
29
|
+
HELP_MESSAGE: "chat-bubble-help-message"
|
|
30
|
+
};
|
|
31
|
+
export {
|
|
32
|
+
BUBBLE_TYPES,
|
|
33
|
+
CHAT_BUBBLE_DATA_TESTID,
|
|
34
|
+
CHAT_BUBBLE_SLOTS,
|
|
35
|
+
DSChatBubbleArrowName,
|
|
36
|
+
DSChatBubbleName
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSChatBubbleName = 'DSBubble';\nexport const DSChatBubbleArrowName = 'DSBubbleArrow';\n\nexport const BUBBLE_TYPES = {\n SENDER: 'SENDER',\n RECIPIENT: 'RECIPIENT',\n DELIMITER: 'DELIMITER',\n SYSTEM: 'SYSTEM',\n} as const;\n\nexport const CHAT_BUBBLE_SLOTS = {\n WRAPPER: 'wrapper',\n HEADER: 'header',\n HEADER_LEFT: 'header-left',\n HEADER_RIGHT: 'header-right',\n BODY_WRAPPER: 'body-wrapper',\n ERROR_MESSAGE: 'error-message',\n HELP_MESSAGE: 'help-message',\n ARROW: 'arrow',\n COLORED_BUBBLE: 'colored-bubble',\n} as const;\n\nexport const CHAT_BUBBLE_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSChatBubbleName, CHAT_BUBBLE_SLOTS),\n WRAPPER: 'ds-chat-bubble',\n HEADER_LEFT: 'chat-bubble-title',\n BODY_WRAPPER: 'chat-bubble-body',\n HEADER_RIGHT: 'chat-bubble-time',\n ERROR_MESSAGE: 'chat-bubble-error-message',\n HELP_MESSAGE: 'chat-bubble-help-message',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AACzB,MAAM,wBAAwB;AAE9B,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AACV;AAEO,MAAM,oBAAoB;AAAA,EAC/B,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,OAAO;AAAA,EACP,gBAAgB;AAClB;AAEO,MAAM,0BAA0B;AAAA,EACrC,GAAG,wBAAwB,kBAAkB,iBAAiB;AAAA,EAC9D,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAChB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { ChatBubble, ChatBubbleWithSchema } from "./ChatBubble.js";
|
|
3
|
-
import {
|
|
4
|
-
|
|
3
|
+
import {
|
|
4
|
+
CHAT_BUBBLE_DATA_TESTID,
|
|
5
|
+
CHAT_BUBBLE_DATA_TESTID as CHAT_BUBBLE_DATA_TESTID2,
|
|
6
|
+
BUBBLE_TYPES,
|
|
7
|
+
DSChatBubbleName,
|
|
8
|
+
CHAT_BUBBLE_SLOTS
|
|
9
|
+
} from "./constants/index.js";
|
|
5
10
|
export * from "./styled.js";
|
|
6
11
|
export {
|
|
7
12
|
BUBBLE_TYPES,
|
|
13
|
+
CHAT_BUBBLE_DATA_TESTID2 as CHAT_BUBBLE_DATA_TESTID,
|
|
14
|
+
CHAT_BUBBLE_SLOTS,
|
|
8
15
|
ChatBubble,
|
|
9
|
-
ChatBubbleDataTestIds,
|
|
10
|
-
ChatBubbleWithSchema
|
|
16
|
+
CHAT_BUBBLE_DATA_TESTID as ChatBubbleDataTestIds,
|
|
17
|
+
ChatBubbleWithSchema,
|
|
18
|
+
DSChatBubbleName
|
|
11
19
|
};
|
|
12
20
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble.js';\nexport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,4BAA4B;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble.js';\nexport { type DSChatBubbleT } from './react-desc-prop-types.js';\nexport {\n CHAT_BUBBLE_DATA_TESTID as ChatBubbleDataTestIds, // LEGACY EXPORT\n CHAT_BUBBLE_DATA_TESTID,\n BUBBLE_TYPES,\n DSChatBubbleName,\n CHAT_BUBBLE_SLOTS,\n} from './constants/index.js';\nexport * from './styled.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,4BAA4B;AAEjD;AAAA,EAC6B;AAAA,EAC3B,2BAAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;",
|
|
6
|
+
"names": ["CHAT_BUBBLE_DATA_TESTID"]
|
|
7
7
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
};
|
|
2
|
+
import {
|
|
3
|
+
PropTypes,
|
|
4
|
+
getPropsPerSlotPropTypes,
|
|
5
|
+
globalAttributesPropTypes,
|
|
6
|
+
xstyledPropTypes
|
|
7
|
+
} from "@elliemae/ds-props-helpers";
|
|
8
|
+
import { BUBBLE_TYPES, DSChatBubbleName, CHAT_BUBBLE_SLOTS } from "./constants/index.js";
|
|
9
9
|
const defaultProps = {
|
|
10
10
|
type: BUBBLE_TYPES.SENDER,
|
|
11
11
|
title: "",
|
|
@@ -13,6 +13,9 @@ const defaultProps = {
|
|
|
13
13
|
time: ""
|
|
14
14
|
};
|
|
15
15
|
const BubblePropTypes = {
|
|
16
|
+
...getPropsPerSlotPropTypes(DSChatBubbleName, CHAT_BUBBLE_SLOTS),
|
|
17
|
+
...globalAttributesPropTypes,
|
|
18
|
+
...xstyledPropTypes,
|
|
16
19
|
dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Unique id for bubble").defaultValue("a randomly generated (on mount) uid"),
|
|
17
20
|
type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.description("Define bubble type ").defaultValue(defaultProps.type),
|
|
18
21
|
title: PropTypes.string.description("Title of the bubble"),
|
|
@@ -29,7 +32,6 @@ const propsArrowBubble = {
|
|
|
29
32
|
type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.defaultValue(defaultProps.type)
|
|
30
33
|
};
|
|
31
34
|
export {
|
|
32
|
-
BUBBLE_TYPES,
|
|
33
35
|
BubblePropTypes,
|
|
34
36
|
defaultProps,
|
|
35
37
|
propsArrowBubble
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type DSPropTypesSchema, type GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type React from 'react';\n\nimport { BUBBLE_TYPES, DSChatBubbleName, CHAT_BUBBLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSChatBubbleT {\n export type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;\n\n export type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];\n\n export interface DefaultProps {\n type: BubbleTypesValues;\n title: string;\n body: string | React.ReactNode;\n time: string;\n }\n\n export interface OptionalProps {\n errorMessage?: string | React.ReactNode;\n helpMessage?: string | React.ReactNode;\n }\n\n export interface RequiredProps {\n dsId: string | number;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n RequiredProps {}\n}\n\nexport const defaultProps: DSChatBubbleT.DefaultProps = {\n type: BUBBLE_TYPES.SENDER,\n title: '',\n body: '',\n time: '',\n};\n\nexport const BubblePropTypes: DSPropTypesSchema<DSChatBubbleT.Props> = {\n ...getPropsPerSlotPropTypes(DSChatBubbleName, CHAT_BUBBLE_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .description('Unique id for bubble')\n .defaultValue('a randomly generated (on mount) uid'),\n type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER])\n .isRequired.description('Define bubble type ')\n .defaultValue(defaultProps.type),\n title: PropTypes.string.description('Title of the bubble'),\n time: PropTypes.string.isRequired.description('Time of the bubble'),\n body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired.description('Bubble content'),\n errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n 'Error message to display at bottom of the bubble',\n ),\n helpMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n 'Help message to display at bottom of the bubble',\n ),\n};\n\nexport const propsArrowBubble = {\n type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.defaultValue(defaultProps.type),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,cAAc,kBAAkB,yBAAyB;AAoC3D,MAAM,eAA2C;AAAA,EACtD,MAAM,aAAa;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,kBAA0D;AAAA,EACrE,GAAG,yBAAyB,kBAAkB,iBAAiB;AAAA,EAC/D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,sBAAsB,EAClC,aAAa,qCAAqC;AAAA,EACrD,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,aAAa,MAAM,CAAC,EAChE,WAAW,YAAY,qBAAqB,EAC5C,aAAa,aAAa,IAAI;AAAA,EACjC,OAAO,UAAU,OAAO,YAAY,qBAAqB;AAAA,EACzD,MAAM,UAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAClE,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE,WAAW,YAAY,gBAAgB;AAAA,EACxG,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE;AAAA,IACvE;AAAA,EACF;AAAA,EACA,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AACF;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,aAAa,MAAM,CAAC,EAAE,WAAW,aAAa,aAAa,IAAI;AAChH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,41 +1,59 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled, css } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
import { BUBBLE_TYPES } from "./
|
|
4
|
+
import { BUBBLE_TYPES, CHAT_BUBBLE_SLOTS, DSChatBubbleName } from "./constants/index.js";
|
|
5
5
|
const wrapRules = css`
|
|
6
6
|
overflow-wrap: break-word;
|
|
7
7
|
white-space: pre-wrap;
|
|
8
8
|
`;
|
|
9
|
-
const StyledWrapper = styled
|
|
9
|
+
const StyledWrapper = styled("div", {
|
|
10
|
+
name: DSChatBubbleName,
|
|
11
|
+
slot: CHAT_BUBBLE_SLOTS.WRAPPER
|
|
12
|
+
})`
|
|
10
13
|
min-width: 224px;
|
|
11
14
|
border-radius: 10px;
|
|
12
15
|
${wrapRules}
|
|
13
16
|
`;
|
|
14
|
-
const StyledTitleBubble = styled(Grid
|
|
17
|
+
const StyledTitleBubble = styled(Grid, {
|
|
18
|
+
name: DSChatBubbleName,
|
|
19
|
+
slot: CHAT_BUBBLE_SLOTS.HEADER
|
|
20
|
+
})`
|
|
15
21
|
padding-top: 6px;
|
|
16
22
|
padding-left: 10px;
|
|
17
23
|
padding-right: 10px;
|
|
18
24
|
padding-bottom: 4px;
|
|
19
25
|
`;
|
|
20
|
-
const StyledTitleLeftBubble = styled("div"
|
|
26
|
+
const StyledTitleLeftBubble = styled("div", {
|
|
27
|
+
name: DSChatBubbleName,
|
|
28
|
+
slot: CHAT_BUBBLE_SLOTS.HEADER_LEFT
|
|
29
|
+
})`
|
|
21
30
|
font-size: 1rem;
|
|
22
31
|
font-weight: 600;
|
|
23
32
|
${wrapRules}
|
|
24
33
|
`;
|
|
25
|
-
const StyledTitleRightBubble = styled(Grid
|
|
34
|
+
const StyledTitleRightBubble = styled(Grid, {
|
|
35
|
+
name: DSChatBubbleName,
|
|
36
|
+
slot: CHAT_BUBBLE_SLOTS.HEADER_RIGHT
|
|
37
|
+
})`
|
|
26
38
|
font-size: 1rem;
|
|
27
39
|
font-weight: 400;
|
|
28
40
|
align-self: flex-start;
|
|
29
41
|
color: ${(props) => props.type === BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
|
|
30
42
|
`;
|
|
31
|
-
const StyleBodyWrapper = styled
|
|
43
|
+
const StyleBodyWrapper = styled("div", {
|
|
44
|
+
name: DSChatBubbleName,
|
|
45
|
+
slot: CHAT_BUBBLE_SLOTS.BODY_WRAPPER
|
|
46
|
+
})`
|
|
32
47
|
font-size: 1rem;
|
|
33
48
|
font-weight: 400;
|
|
34
49
|
line-height: 1.15;
|
|
35
50
|
min-height: 18px;
|
|
36
51
|
padding: 0px 10px 8px 10px;
|
|
37
52
|
`;
|
|
38
|
-
const StyleErrorMessage = styled
|
|
53
|
+
const StyleErrorMessage = styled("div", {
|
|
54
|
+
name: DSChatBubbleName,
|
|
55
|
+
slot: CHAT_BUBBLE_SLOTS.ERROR_MESSAGE
|
|
56
|
+
})`
|
|
39
57
|
font-size: 0.923rem;
|
|
40
58
|
font-weight: 400;
|
|
41
59
|
padding-top: ${(props) => props.theme.space.xxxs};
|
|
@@ -55,7 +73,10 @@ const StyleErrorMessage = styled.div`
|
|
|
55
73
|
margin-left: 8px;
|
|
56
74
|
}
|
|
57
75
|
`;
|
|
58
|
-
const StyleHelpMessage = styled(StyleErrorMessage
|
|
76
|
+
const StyleHelpMessage = styled(StyleErrorMessage, {
|
|
77
|
+
name: DSChatBubbleName,
|
|
78
|
+
slot: CHAT_BUBBLE_SLOTS.HELP_MESSAGE
|
|
79
|
+
})`
|
|
59
80
|
font-size: 0.923rem;
|
|
60
81
|
line-height: 1.15;
|
|
61
82
|
color: ${(props) => props.theme.colors.neutral[600]};
|
|
@@ -67,14 +88,20 @@ const StyleHelpMessage = styled(StyleErrorMessage)`
|
|
|
67
88
|
color: ${(props) => props.theme.colors.danger[900]};
|
|
68
89
|
}
|
|
69
90
|
`;
|
|
70
|
-
const StyledBubbleArrow = styled
|
|
91
|
+
const StyledBubbleArrow = styled("div", {
|
|
92
|
+
name: DSChatBubbleName,
|
|
93
|
+
slot: CHAT_BUBBLE_SLOTS.ARROW
|
|
94
|
+
})`
|
|
71
95
|
display: block;
|
|
72
96
|
content: '';
|
|
73
97
|
position: absolute;
|
|
74
98
|
bottom: 0.769rem;
|
|
75
99
|
height: 1.15rem;
|
|
76
100
|
`;
|
|
77
|
-
const StyledColoredBubble = styled
|
|
101
|
+
const StyledColoredBubble = styled("div", {
|
|
102
|
+
name: DSChatBubbleName,
|
|
103
|
+
slot: CHAT_BUBBLE_SLOTS.COLORED_BUBBLE
|
|
104
|
+
})`
|
|
78
105
|
min-width: 224px;
|
|
79
106
|
border-radius: 10px;
|
|
80
107
|
position: relative;
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES, CHAT_BUBBLE_SLOTS, DSChatBubbleName } from './constants/index.js';\n\nconst wrapRules = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n// Bubble WRAPPER\nexport const StyledWrapper = styled('div', {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.WRAPPER,\n})`\n min-width: 224px;\n border-radius: 10px;\n ${wrapRules}\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid, {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.HEADER,\n})`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled('div', {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.HEADER_LEFT,\n})`\n font-size: 1rem;\n font-weight: 600;\n ${wrapRules}\n`;\nexport const StyledTitleRightBubble = styled(Grid, {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.HEADER_RIGHT,\n})<{ type: string }>`\n font-size: 1rem;\n font-weight: 400;\n align-self: flex-start;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled('div', {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.BODY_WRAPPER,\n})`\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.15;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled('div', {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.ERROR_MESSAGE,\n})`\n font-size: 0.923rem;\n font-weight: 400;\n padding-top: ${(props) => props.theme.space.xxxs};\n color: ${(props) => props.theme.colors.danger[900]};\n align-items: flex-end;\n justify-content: center;\n text-align: right;\n line-height: 1.15;\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 0.923rem;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage, {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.HELP_MESSAGE,\n})`\n font-size: 0.923rem;\n line-height: 1.15;\n color: ${(props) => props.theme.colors.neutral[600]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled('div', {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.ARROW,\n})`\n display: block;\n content: '';\n position: absolute;\n bottom: 0.769rem;\n height: 1.15rem;\n`;\n\nexport const StyledColoredBubble = styled('div', {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.COLORED_BUBBLE,\n})<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -0.692rem;\n bottom: 0.461rem;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -0.846rem;\n bottom: 0.461rem;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,cAAc,mBAAmB,wBAAwB;AAElE,MAAM,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,gBAAgB,OAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAIN,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAEN,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,CAAC,UAAW,MAAM,SAAS,aAAa,SAAS,SAAS,SAAU;AAAA;AAGxE,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,iBAGgB,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,WACvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/C,MAAM,mBAAmB,OAAO,mBAAmB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,WAGU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,YAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAK/C,MAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG,CAAC,UACD,MAAM,SAAS,aAAa,SACxB;AAAA,4BACoB,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA,sBACrC,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,iBAClC,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,UACxC,iBAAiB;AAAA;AAAA;AAAA;AAAA,wBAIH,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAS7C;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,UAEtC,iBAAiB;AAAA;AAAA;AAAA;AAAA,wBAIH,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,KAIpD;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type DSChatBubbleT } from './react-desc-prop-types.js';
|
|
3
3
|
export declare const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type' | 'dsId'>>;
|
|
4
|
+
export declare const ChatBubbleArrowWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<Pick<DSChatBubbleT.Props, "type" | "dsId">>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export declare const DSChatBubbleName = "DSBubble";
|
|
2
|
+
export declare const DSChatBubbleArrowName = "DSBubbleArrow";
|
|
3
|
+
export declare const BUBBLE_TYPES: {
|
|
4
|
+
readonly SENDER: "SENDER";
|
|
5
|
+
readonly RECIPIENT: "RECIPIENT";
|
|
6
|
+
readonly DELIMITER: "DELIMITER";
|
|
7
|
+
readonly SYSTEM: "SYSTEM";
|
|
8
|
+
};
|
|
9
|
+
export declare const CHAT_BUBBLE_SLOTS: {
|
|
10
|
+
readonly WRAPPER: "wrapper";
|
|
11
|
+
readonly HEADER: "header";
|
|
12
|
+
readonly HEADER_LEFT: "header-left";
|
|
13
|
+
readonly HEADER_RIGHT: "header-right";
|
|
14
|
+
readonly BODY_WRAPPER: "body-wrapper";
|
|
15
|
+
readonly ERROR_MESSAGE: "error-message";
|
|
16
|
+
readonly HELP_MESSAGE: "help-message";
|
|
17
|
+
readonly ARROW: "arrow";
|
|
18
|
+
readonly COLORED_BUBBLE: "colored-bubble";
|
|
19
|
+
};
|
|
20
|
+
export declare const CHAT_BUBBLE_DATA_TESTID: {
|
|
21
|
+
WRAPPER: string;
|
|
22
|
+
HEADER_LEFT: string;
|
|
23
|
+
BODY_WRAPPER: string;
|
|
24
|
+
HEADER_RIGHT: string;
|
|
25
|
+
ERROR_MESSAGE: string;
|
|
26
|
+
HELP_MESSAGE: string;
|
|
27
|
+
HEADER: "ds-bubble-header";
|
|
28
|
+
ARROW: "ds-bubble-arrow";
|
|
29
|
+
COLORED_BUBBLE: "ds-bubble-colored-bubble";
|
|
30
|
+
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble.js';
|
|
2
|
-
export {
|
|
3
|
-
export { ChatBubbleDataTestIds
|
|
2
|
+
export { type DSChatBubbleT } from './react-desc-prop-types.js';
|
|
3
|
+
export { CHAT_BUBBLE_DATA_TESTID as ChatBubbleDataTestIds, // LEGACY EXPORT
|
|
4
|
+
CHAT_BUBBLE_DATA_TESTID, BUBBLE_TYPES, DSChatBubbleName, CHAT_BUBBLE_SLOTS, } from './constants/index.js';
|
|
4
5
|
export * from './styled.js';
|
|
@@ -1,12 +1,6 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import type { WeakValidationMap } from 'react';
|
|
1
|
+
import { type DSPropTypesSchema, type GlobalAttributesT } from '@elliemae/ds-props-helpers';
|
|
3
2
|
import type React from 'react';
|
|
4
|
-
|
|
5
|
-
SENDER: string;
|
|
6
|
-
RECIPIENT: string;
|
|
7
|
-
DELIMITER: string;
|
|
8
|
-
SYSTEM: string;
|
|
9
|
-
};
|
|
3
|
+
import { BUBBLE_TYPES } from './constants/index.js';
|
|
10
4
|
export declare namespace DSChatBubbleT {
|
|
11
5
|
type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;
|
|
12
6
|
type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];
|
|
@@ -29,5 +23,7 @@ export declare namespace DSChatBubbleT {
|
|
|
29
23
|
}
|
|
30
24
|
}
|
|
31
25
|
export declare const defaultProps: DSChatBubbleT.DefaultProps;
|
|
32
|
-
export declare const BubblePropTypes:
|
|
33
|
-
export declare const propsArrowBubble:
|
|
26
|
+
export declare const BubblePropTypes: DSPropTypesSchema<DSChatBubbleT.Props>;
|
|
27
|
+
export declare const propsArrowBubble: {
|
|
28
|
+
type: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
29
|
+
};
|