@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/cjs/ChatBubble.js
CHANGED
|
@@ -42,8 +42,7 @@ var import_uid = require("uid");
|
|
|
42
42
|
var import_styled = require("./styled.js");
|
|
43
43
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
44
44
|
var import_ChatBubbleArrow = require("./ChatBubbleArrow.js");
|
|
45
|
-
var
|
|
46
|
-
var import_DSChatBubbleDefinitions = require("./DSChatBubbleDefinitions.js");
|
|
45
|
+
var import_constants = require("./constants/index.js");
|
|
47
46
|
const ChatBubble = (props) => {
|
|
48
47
|
const defaultPropsIncludingInstanciatedValues = import_react.default.useMemo(() => {
|
|
49
48
|
const dsId2 = props.dsId || `ds-chat-bubble-${(0, import_uid.uid)(9)}`;
|
|
@@ -53,40 +52,92 @@ const ChatBubble = (props) => {
|
|
|
53
52
|
props,
|
|
54
53
|
defaultPropsIncludingInstanciatedValues
|
|
55
54
|
);
|
|
56
|
-
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.BubblePropTypes,
|
|
55
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.BubblePropTypes, import_constants.DSChatBubbleName);
|
|
57
56
|
const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;
|
|
58
57
|
const bodyParts = import_react.default.useMemo(() => typeof body === "string" ? body.split("\n") : [body], [body]);
|
|
59
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
59
|
+
import_styled.StyledWrapper,
|
|
60
|
+
{
|
|
61
|
+
"data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.WRAPPER}-${dsId}`,
|
|
62
|
+
getOwnerProps: () => propsWithDefault,
|
|
63
|
+
getOwnerPropsArguments: () => ({}),
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledColoredBubble, { type, getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), children: [
|
|
66
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
67
|
+
import_styled.StyledTitleBubble,
|
|
68
|
+
{
|
|
69
|
+
cols: ["1fr", "auto"],
|
|
70
|
+
gutter: "xs",
|
|
71
|
+
alignItems: "flex-end",
|
|
72
|
+
className: "sr-only",
|
|
73
|
+
getOwnerProps: () => propsWithDefault,
|
|
74
|
+
getOwnerPropsArguments: () => ({}),
|
|
75
|
+
children: [
|
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
|
+
import_styled.StyledTitleLeftBubble,
|
|
78
|
+
{
|
|
79
|
+
"data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`,
|
|
80
|
+
getOwnerProps: () => propsWithDefault,
|
|
81
|
+
getOwnerPropsArguments: () => ({}),
|
|
82
|
+
children: title
|
|
83
|
+
}
|
|
84
|
+
),
|
|
85
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
+
import_styled.StyledTitleRightBubble,
|
|
87
|
+
{
|
|
88
|
+
alignItems: "center",
|
|
89
|
+
type,
|
|
90
|
+
"data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`,
|
|
91
|
+
getOwnerProps: () => propsWithDefault,
|
|
92
|
+
getOwnerPropsArguments: () => ({}),
|
|
93
|
+
children: time
|
|
94
|
+
}
|
|
95
|
+
)
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
),
|
|
99
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
100
|
+
import_styled.StyleBodyWrapper,
|
|
101
|
+
{
|
|
102
|
+
"data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`,
|
|
103
|
+
getOwnerProps: () => propsWithDefault,
|
|
104
|
+
getOwnerPropsArguments: () => ({}),
|
|
105
|
+
children: bodyParts.map((item, index) => (
|
|
106
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
107
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
|
|
108
|
+
item,
|
|
109
|
+
index < bodyParts.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}) : null
|
|
110
|
+
] }, `body-fragment-${index}-${dsId}`)
|
|
111
|
+
))
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBubbleArrow, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChatBubbleArrow.ChatBubbleArrow, { type, dsId }) })
|
|
115
|
+
] }),
|
|
116
|
+
errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
117
|
+
import_styled.StyleErrorMessage,
|
|
65
118
|
{
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
children:
|
|
119
|
+
"data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.ERROR_MESSAGE}-${dsId}`,
|
|
120
|
+
getOwnerProps: () => propsWithDefault,
|
|
121
|
+
getOwnerPropsArguments: () => ({}),
|
|
122
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["1fr", "auto"], children: [
|
|
123
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: errorMessage }),
|
|
124
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.WarningCircleFill, {})
|
|
125
|
+
] })
|
|
70
126
|
}
|
|
71
|
-
)
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.WarningCircleFill, {})
|
|
85
|
-
] }) }) : null,
|
|
86
|
-
helpMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleHelpMessage, { "data-testid": `chat-bubble-help-message-${dsId}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: helpMessage }) }) : null
|
|
87
|
-
] });
|
|
127
|
+
) : null,
|
|
128
|
+
helpMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
129
|
+
import_styled.StyleHelpMessage,
|
|
130
|
+
{
|
|
131
|
+
"data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.HELP_MESSAGE}-${dsId}`,
|
|
132
|
+
getOwnerProps: () => propsWithDefault,
|
|
133
|
+
getOwnerPropsArguments: () => ({}),
|
|
134
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: helpMessage })
|
|
135
|
+
}
|
|
136
|
+
) : null
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
);
|
|
88
140
|
};
|
|
89
|
-
ChatBubble.displayName =
|
|
141
|
+
ChatBubble.displayName = import_constants.DSChatBubbleName;
|
|
90
142
|
const ChatBubbleWithSchema = (0, import_ds_props_helpers.describe)(ChatBubble);
|
|
91
|
-
ChatBubbleWithSchema.propTypes = import_react_desc_prop_types.BubblePropTypes;
|
|
92
143
|
//# sourceMappingURL=ChatBubble.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ChatBubble.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "dsId"]
|
|
7
7
|
}
|
|
@@ -28,15 +28,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var ChatBubbleArrow_exports = {};
|
|
30
30
|
__export(ChatBubbleArrow_exports, {
|
|
31
|
-
ChatBubbleArrow: () => ChatBubbleArrow
|
|
31
|
+
ChatBubbleArrow: () => ChatBubbleArrow,
|
|
32
|
+
ChatBubbleArrowWithSchema: () => ChatBubbleArrowWithSchema
|
|
32
33
|
});
|
|
33
34
|
module.exports = __toCommonJS(ChatBubbleArrow_exports);
|
|
34
35
|
var React = __toESM(require("react"));
|
|
35
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBubbleArrow, { children: type === import_react_desc_prop_types.BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
|
|
38
|
+
var import_constants = require("./constants/index.js");
|
|
39
|
+
const ChatBubbleArrow = ({ type, dsId }) => type === import_constants.BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
|
|
40
40
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
|
|
41
41
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
42
42
|
"path",
|
|
@@ -87,7 +87,6 @@ const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ (0, import_jsx_runti
|
|
|
87
87
|
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",
|
|
88
88
|
fill: "#1E79C2"
|
|
89
89
|
}
|
|
90
|
-
) }) })
|
|
90
|
+
) }) });
|
|
91
91
|
const ChatBubbleArrowWithSchema = (0, import_ds_props_helpers.describe)(ChatBubbleArrow);
|
|
92
|
-
ChatBubbleArrowWithSchema.propTypes = import_react_desc_prop_types.propsArrowBubble;
|
|
93
92
|
//# sourceMappingURL=ChatBubbleArrow.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ChatBubbleArrow.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSf;AARR,8BAAyB;AACzB,uBAA6B;AAGtB,MAAM,kBAAmF,CAAC,EAAE,MAAM,KAAK,MAC5G,SAAS,8BAAa,YACpB,6CAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,+CAAC,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,sDAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,UACzE,4CAAC,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,4CAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD,uDAAC,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,4CAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAW,mBAAmB,IAAI,IAAI;AAAA,KAC/E,GACF;AAAA,GACF,IAEA,4CAAC,SAAI,OAAM,YAAW,QAAO,YAAW,SAAQ,WAAU,eAAY,QACpE,sDAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA;AACN,GACH,GACF;AAGG,MAAM,gCAA4B,kCAAS,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,11 +26,43 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
mod
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var
|
|
30
|
-
__export(
|
|
29
|
+
var constants_exports = {};
|
|
30
|
+
__export(constants_exports, {
|
|
31
|
+
BUBBLE_TYPES: () => BUBBLE_TYPES,
|
|
32
|
+
CHAT_BUBBLE_DATA_TESTID: () => CHAT_BUBBLE_DATA_TESTID,
|
|
33
|
+
CHAT_BUBBLE_SLOTS: () => CHAT_BUBBLE_SLOTS,
|
|
34
|
+
DSChatBubbleArrowName: () => DSChatBubbleArrowName,
|
|
31
35
|
DSChatBubbleName: () => DSChatBubbleName
|
|
32
36
|
});
|
|
33
|
-
module.exports = __toCommonJS(
|
|
37
|
+
module.exports = __toCommonJS(constants_exports);
|
|
34
38
|
var React = __toESM(require("react"));
|
|
39
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
35
40
|
const DSChatBubbleName = "DSBubble";
|
|
36
|
-
|
|
41
|
+
const DSChatBubbleArrowName = "DSBubbleArrow";
|
|
42
|
+
const BUBBLE_TYPES = {
|
|
43
|
+
SENDER: "SENDER",
|
|
44
|
+
RECIPIENT: "RECIPIENT",
|
|
45
|
+
DELIMITER: "DELIMITER",
|
|
46
|
+
SYSTEM: "SYSTEM"
|
|
47
|
+
};
|
|
48
|
+
const CHAT_BUBBLE_SLOTS = {
|
|
49
|
+
WRAPPER: "wrapper",
|
|
50
|
+
HEADER: "header",
|
|
51
|
+
HEADER_LEFT: "header-left",
|
|
52
|
+
HEADER_RIGHT: "header-right",
|
|
53
|
+
BODY_WRAPPER: "body-wrapper",
|
|
54
|
+
ERROR_MESSAGE: "error-message",
|
|
55
|
+
HELP_MESSAGE: "help-message",
|
|
56
|
+
ARROW: "arrow",
|
|
57
|
+
COLORED_BUBBLE: "colored-bubble"
|
|
58
|
+
};
|
|
59
|
+
const CHAT_BUBBLE_DATA_TESTID = {
|
|
60
|
+
...(0, import_ds_system.slotObjectToDataTestIds)(DSChatBubbleName, CHAT_BUBBLE_SLOTS),
|
|
61
|
+
WRAPPER: "ds-chat-bubble",
|
|
62
|
+
HEADER_LEFT: "chat-bubble-title",
|
|
63
|
+
BODY_WRAPPER: "chat-bubble-body",
|
|
64
|
+
HEADER_RIGHT: "chat-bubble-time",
|
|
65
|
+
ERROR_MESSAGE: "chat-bubble-error-message",
|
|
66
|
+
HELP_MESSAGE: "chat-bubble-help-message"
|
|
67
|
+
};
|
|
68
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;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,OAAG,0CAAwB,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/cjs/index.js
CHANGED
|
@@ -29,15 +29,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
29
29
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
30
|
var index_exports = {};
|
|
31
31
|
__export(index_exports, {
|
|
32
|
-
BUBBLE_TYPES: () =>
|
|
32
|
+
BUBBLE_TYPES: () => import_constants.BUBBLE_TYPES,
|
|
33
|
+
CHAT_BUBBLE_DATA_TESTID: () => import_constants.CHAT_BUBBLE_DATA_TESTID,
|
|
34
|
+
CHAT_BUBBLE_SLOTS: () => import_constants.CHAT_BUBBLE_SLOTS,
|
|
33
35
|
ChatBubble: () => import_ChatBubble.ChatBubble,
|
|
34
|
-
ChatBubbleDataTestIds: () =>
|
|
35
|
-
ChatBubbleWithSchema: () => import_ChatBubble.ChatBubbleWithSchema
|
|
36
|
+
ChatBubbleDataTestIds: () => import_constants.CHAT_BUBBLE_DATA_TESTID,
|
|
37
|
+
ChatBubbleWithSchema: () => import_ChatBubble.ChatBubbleWithSchema,
|
|
38
|
+
DSChatBubbleName: () => import_constants.DSChatBubbleName
|
|
36
39
|
});
|
|
37
40
|
module.exports = __toCommonJS(index_exports);
|
|
38
41
|
var React = __toESM(require("react"));
|
|
39
42
|
var import_ChatBubble = require("./ChatBubble.js");
|
|
40
|
-
var
|
|
41
|
-
var import_ChatBubbleDataTestIds = require("./ChatBubbleDataTestIds.js");
|
|
43
|
+
var import_constants = require("./constants/index.js");
|
|
42
44
|
__reExport(index_exports, require("./styled.js"), module.exports);
|
|
43
45
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble.js';\nexport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;AAEjD,uBAMO;AACP,0BAAc,wBATd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,40 +28,37 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var react_desc_prop_types_exports = {};
|
|
30
30
|
__export(react_desc_prop_types_exports, {
|
|
31
|
-
BUBBLE_TYPES: () => BUBBLE_TYPES,
|
|
32
31
|
BubblePropTypes: () => BubblePropTypes,
|
|
33
32
|
defaultProps: () => defaultProps,
|
|
34
33
|
propsArrowBubble: () => propsArrowBubble
|
|
35
34
|
});
|
|
36
35
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
37
36
|
var React = __toESM(require("react"));
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
SENDER: "SENDER",
|
|
41
|
-
RECIPIENT: "RECIPIENT",
|
|
42
|
-
DELIMITER: "DELIMITER",
|
|
43
|
-
SYSTEM: "SYSTEM"
|
|
44
|
-
};
|
|
37
|
+
var import_ds_props_helpers2 = require("@elliemae/ds-props-helpers");
|
|
38
|
+
var import_constants = require("./constants/index.js");
|
|
45
39
|
const defaultProps = {
|
|
46
|
-
type: BUBBLE_TYPES.SENDER,
|
|
40
|
+
type: import_constants.BUBBLE_TYPES.SENDER,
|
|
47
41
|
title: "",
|
|
48
42
|
body: "",
|
|
49
43
|
time: ""
|
|
50
44
|
};
|
|
51
45
|
const BubblePropTypes = {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
46
|
+
...(0, import_ds_props_helpers2.getPropsPerSlotPropTypes)(import_constants.DSChatBubbleName, import_constants.CHAT_BUBBLE_SLOTS),
|
|
47
|
+
...import_ds_props_helpers2.globalAttributesPropTypes,
|
|
48
|
+
...import_ds_props_helpers2.xstyledPropTypes,
|
|
49
|
+
dsId: import_ds_props_helpers2.PropTypes.oneOfType([import_ds_props_helpers2.PropTypes.string, import_ds_props_helpers2.PropTypes.number]).description("Unique id for bubble").defaultValue("a randomly generated (on mount) uid"),
|
|
50
|
+
type: import_ds_props_helpers2.PropTypes.oneOf([import_constants.BUBBLE_TYPES.RECIPIENT, import_constants.BUBBLE_TYPES.SENDER]).isRequired.description("Define bubble type ").defaultValue(defaultProps.type),
|
|
51
|
+
title: import_ds_props_helpers2.PropTypes.string.description("Title of the bubble"),
|
|
52
|
+
time: import_ds_props_helpers2.PropTypes.string.isRequired.description("Time of the bubble"),
|
|
53
|
+
body: import_ds_props_helpers2.PropTypes.oneOfType([import_ds_props_helpers2.PropTypes.string, import_ds_props_helpers2.PropTypes.element]).isRequired.description("Bubble content"),
|
|
54
|
+
errorMessage: import_ds_props_helpers2.PropTypes.oneOfType([import_ds_props_helpers2.PropTypes.string, import_ds_props_helpers2.PropTypes.element]).description(
|
|
58
55
|
"Error message to display at bottom of the bubble"
|
|
59
56
|
),
|
|
60
|
-
helpMessage:
|
|
57
|
+
helpMessage: import_ds_props_helpers2.PropTypes.oneOfType([import_ds_props_helpers2.PropTypes.string, import_ds_props_helpers2.PropTypes.element]).description(
|
|
61
58
|
"Help message to display at bottom of the bubble"
|
|
62
59
|
)
|
|
63
60
|
};
|
|
64
61
|
const propsArrowBubble = {
|
|
65
|
-
type:
|
|
62
|
+
type: import_ds_props_helpers2.PropTypes.oneOf([import_constants.BUBBLE_TYPES.RECIPIENT, import_constants.BUBBLE_TYPES.SENDER]).isRequired.defaultValue(defaultProps.type)
|
|
66
63
|
};
|
|
67
64
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,IAAAA,2BAKO;AAGP,uBAAkE;AAoC3D,MAAM,eAA2C;AAAA,EACtD,MAAM,8BAAa;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,kBAA0D;AAAA,EACrE,OAAG,mDAAyB,mCAAkB,kCAAiB;AAAA,EAC/D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,MAAM,CAAC,EAC3D,YAAY,sBAAsB,EAClC,aAAa,qCAAqC;AAAA,EACrD,MAAM,mCAAU,MAAM,CAAC,8BAAa,WAAW,8BAAa,MAAM,CAAC,EAChE,WAAW,YAAY,qBAAqB,EAC5C,aAAa,aAAa,IAAI;AAAA,EACjC,OAAO,mCAAU,OAAO,YAAY,qBAAqB;AAAA,EACzD,MAAM,mCAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAClE,MAAM,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,OAAO,CAAC,EAAE,WAAW,YAAY,gBAAgB;AAAA,EACxG,cAAc,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,OAAO,CAAC,EAAE;AAAA,IACvE;AAAA,EACF;AAAA,EACA,aAAa,mCAAU,UAAU,CAAC,mCAAU,QAAQ,mCAAU,OAAO,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AACF;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,mCAAU,MAAM,CAAC,8BAAa,WAAW,8BAAa,MAAM,CAAC,EAAE,WAAW,aAAa,aAAa,IAAI;AAChH;",
|
|
6
|
+
"names": ["import_ds_props_helpers"]
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -42,41 +42,59 @@ module.exports = __toCommonJS(styled_exports);
|
|
|
42
42
|
var React = __toESM(require("react"));
|
|
43
43
|
var import_ds_system = require("@elliemae/ds-system");
|
|
44
44
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
45
|
-
var
|
|
45
|
+
var import_constants = require("./constants/index.js");
|
|
46
46
|
const wrapRules = import_ds_system.css`
|
|
47
47
|
overflow-wrap: break-word;
|
|
48
48
|
white-space: pre-wrap;
|
|
49
49
|
`;
|
|
50
|
-
const StyledWrapper = import_ds_system.styled
|
|
50
|
+
const StyledWrapper = (0, import_ds_system.styled)("div", {
|
|
51
|
+
name: import_constants.DSChatBubbleName,
|
|
52
|
+
slot: import_constants.CHAT_BUBBLE_SLOTS.WRAPPER
|
|
53
|
+
})`
|
|
51
54
|
min-width: 224px;
|
|
52
55
|
border-radius: 10px;
|
|
53
56
|
${wrapRules}
|
|
54
57
|
`;
|
|
55
|
-
const StyledTitleBubble = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
58
|
+
const StyledTitleBubble = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
59
|
+
name: import_constants.DSChatBubbleName,
|
|
60
|
+
slot: import_constants.CHAT_BUBBLE_SLOTS.HEADER
|
|
61
|
+
})`
|
|
56
62
|
padding-top: 6px;
|
|
57
63
|
padding-left: 10px;
|
|
58
64
|
padding-right: 10px;
|
|
59
65
|
padding-bottom: 4px;
|
|
60
66
|
`;
|
|
61
|
-
const StyledTitleLeftBubble = (0, import_ds_system.styled)("div"
|
|
67
|
+
const StyledTitleLeftBubble = (0, import_ds_system.styled)("div", {
|
|
68
|
+
name: import_constants.DSChatBubbleName,
|
|
69
|
+
slot: import_constants.CHAT_BUBBLE_SLOTS.HEADER_LEFT
|
|
70
|
+
})`
|
|
62
71
|
font-size: 1rem;
|
|
63
72
|
font-weight: 600;
|
|
64
73
|
${wrapRules}
|
|
65
74
|
`;
|
|
66
|
-
const StyledTitleRightBubble = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
75
|
+
const StyledTitleRightBubble = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
76
|
+
name: import_constants.DSChatBubbleName,
|
|
77
|
+
slot: import_constants.CHAT_BUBBLE_SLOTS.HEADER_RIGHT
|
|
78
|
+
})`
|
|
67
79
|
font-size: 1rem;
|
|
68
80
|
font-weight: 400;
|
|
69
81
|
align-self: flex-start;
|
|
70
|
-
color: ${(props) => props.type ===
|
|
82
|
+
color: ${(props) => props.type === import_constants.BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
|
|
71
83
|
`;
|
|
72
|
-
const StyleBodyWrapper = import_ds_system.styled
|
|
84
|
+
const StyleBodyWrapper = (0, import_ds_system.styled)("div", {
|
|
85
|
+
name: import_constants.DSChatBubbleName,
|
|
86
|
+
slot: import_constants.CHAT_BUBBLE_SLOTS.BODY_WRAPPER
|
|
87
|
+
})`
|
|
73
88
|
font-size: 1rem;
|
|
74
89
|
font-weight: 400;
|
|
75
90
|
line-height: 1.15;
|
|
76
91
|
min-height: 18px;
|
|
77
92
|
padding: 0px 10px 8px 10px;
|
|
78
93
|
`;
|
|
79
|
-
const StyleErrorMessage = import_ds_system.styled
|
|
94
|
+
const StyleErrorMessage = (0, import_ds_system.styled)("div", {
|
|
95
|
+
name: import_constants.DSChatBubbleName,
|
|
96
|
+
slot: import_constants.CHAT_BUBBLE_SLOTS.ERROR_MESSAGE
|
|
97
|
+
})`
|
|
80
98
|
font-size: 0.923rem;
|
|
81
99
|
font-weight: 400;
|
|
82
100
|
padding-top: ${(props) => props.theme.space.xxxs};
|
|
@@ -96,7 +114,10 @@ const StyleErrorMessage = import_ds_system.styled.div`
|
|
|
96
114
|
margin-left: 8px;
|
|
97
115
|
}
|
|
98
116
|
`;
|
|
99
|
-
const StyleHelpMessage = (0, import_ds_system.styled)(StyleErrorMessage
|
|
117
|
+
const StyleHelpMessage = (0, import_ds_system.styled)(StyleErrorMessage, {
|
|
118
|
+
name: import_constants.DSChatBubbleName,
|
|
119
|
+
slot: import_constants.CHAT_BUBBLE_SLOTS.HELP_MESSAGE
|
|
120
|
+
})`
|
|
100
121
|
font-size: 0.923rem;
|
|
101
122
|
line-height: 1.15;
|
|
102
123
|
color: ${(props) => props.theme.colors.neutral[600]};
|
|
@@ -108,19 +129,25 @@ const StyleHelpMessage = (0, import_ds_system.styled)(StyleErrorMessage)`
|
|
|
108
129
|
color: ${(props) => props.theme.colors.danger[900]};
|
|
109
130
|
}
|
|
110
131
|
`;
|
|
111
|
-
const StyledBubbleArrow = import_ds_system.styled
|
|
132
|
+
const StyledBubbleArrow = (0, import_ds_system.styled)("div", {
|
|
133
|
+
name: import_constants.DSChatBubbleName,
|
|
134
|
+
slot: import_constants.CHAT_BUBBLE_SLOTS.ARROW
|
|
135
|
+
})`
|
|
112
136
|
display: block;
|
|
113
137
|
content: '';
|
|
114
138
|
position: absolute;
|
|
115
139
|
bottom: 0.769rem;
|
|
116
140
|
height: 1.15rem;
|
|
117
141
|
`;
|
|
118
|
-
const StyledColoredBubble = import_ds_system.styled
|
|
142
|
+
const StyledColoredBubble = (0, import_ds_system.styled)("div", {
|
|
143
|
+
name: import_constants.DSChatBubbleName,
|
|
144
|
+
slot: import_constants.CHAT_BUBBLE_SLOTS.COLORED_BUBBLE
|
|
145
|
+
})`
|
|
119
146
|
min-width: 224px;
|
|
120
147
|
border-radius: 10px;
|
|
121
148
|
position: relative;
|
|
122
149
|
|
|
123
|
-
${(props) => props.type ===
|
|
150
|
+
${(props) => props.type === import_constants.BUBBLE_TYPES.SENDER ? `
|
|
124
151
|
border: 1px solid ${props.theme.colors.brand["700"]};
|
|
125
152
|
background: ${props.theme.colors.brand[600]};
|
|
126
153
|
color: ${props.theme.colors.neutral["000"]};
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA4B;AAC5B,qBAAqB;AACrB,
|
|
4
|
+
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA4B;AAC5B,qBAAqB;AACrB,uBAAkE;AAElE,MAAM,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,oBAAgB,yBAAO,OAAO;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAIN,MAAM,wBAAoB,yBAAO,qBAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG,SAAS;AAAA;AAEN,MAAM,6BAAyB,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,CAAC,UAAW,MAAM,SAAS,8BAAa,SAAS,SAAS,SAAU;AAAA;AAGxE,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,mCAAkB;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,uBAAmB,yBAAO,mBAAmB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,mCAAkB;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,wBAAoB,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG,CAAC,UACD,MAAM,SAAS,8BAAa,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
|
}
|