@elliemae/ds-chat-bubble 3.60.0-next.23 → 3.60.0-next.25
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 +59 -51
- package/dist/cjs/ChatBubble.js.map +2 -2
- package/dist/cjs/ChatBubbleArrow.js +76 -54
- package/dist/cjs/ChatBubbleArrow.js.map +2 -2
- package/dist/cjs/styled.js +2 -31
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/ChatBubble.js +60 -53
- package/dist/esm/ChatBubble.js.map +2 -2
- package/dist/esm/ChatBubbleArrow.js +77 -55
- package/dist/esm/ChatBubbleArrow.js.map +2 -2
- package/dist/esm/styled.js +2 -31
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/ChatBubbleArrow.d.ts +1 -2
- package/dist/types/styled.d.ts +2 -3
- package/package.json +7 -7
package/dist/cjs/ChatBubble.js
CHANGED
|
@@ -62,57 +62,65 @@ const ChatBubble = (props) => {
|
|
|
62
62
|
getOwnerProps: () => propsWithDefault,
|
|
63
63
|
getOwnerPropsArguments: () => ({}),
|
|
64
64
|
children: [
|
|
65
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
65
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
66
|
+
import_styled.StyledColoredBubble,
|
|
67
|
+
{
|
|
68
|
+
"data-theming-type": type,
|
|
69
|
+
getOwnerProps: () => propsWithDefault,
|
|
70
|
+
getOwnerPropsArguments: () => ({}),
|
|
71
|
+
children: [
|
|
72
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
73
|
+
import_styled.StyledTitleBubble,
|
|
74
|
+
{
|
|
75
|
+
cols: ["1fr", "auto"],
|
|
76
|
+
gutter: "xs",
|
|
77
|
+
alignItems: "flex-end",
|
|
78
|
+
className: "sr-only",
|
|
79
|
+
getOwnerProps: () => propsWithDefault,
|
|
80
|
+
getOwnerPropsArguments: () => ({}),
|
|
81
|
+
children: [
|
|
82
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
83
|
+
import_styled.StyledTitleLeftBubble,
|
|
84
|
+
{
|
|
85
|
+
"data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`,
|
|
86
|
+
getOwnerProps: () => propsWithDefault,
|
|
87
|
+
getOwnerPropsArguments: () => ({}),
|
|
88
|
+
children: title
|
|
89
|
+
}
|
|
90
|
+
),
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
import_styled.StyledTitleRightBubble,
|
|
93
|
+
{
|
|
94
|
+
alignItems: "center",
|
|
95
|
+
"data-theming-type": type,
|
|
96
|
+
"data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`,
|
|
97
|
+
getOwnerProps: () => propsWithDefault,
|
|
98
|
+
getOwnerPropsArguments: () => ({}),
|
|
99
|
+
children: time
|
|
100
|
+
}
|
|
101
|
+
)
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
),
|
|
105
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
|
+
import_styled.StyleBodyWrapper,
|
|
107
|
+
{
|
|
108
|
+
"data-testid": `${import_constants.CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`,
|
|
109
|
+
getOwnerProps: () => propsWithDefault,
|
|
110
|
+
getOwnerPropsArguments: () => ({}),
|
|
111
|
+
children: bodyParts.map((item, index) => (
|
|
112
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
113
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
|
|
114
|
+
item,
|
|
115
|
+
index < bodyParts.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}) : null
|
|
116
|
+
] }, `body-fragment-${index}-${dsId}`)
|
|
117
|
+
))
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChatBubbleArrow.ChatBubbleArrow, { ...propsWithDefault })
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
),
|
|
116
124
|
errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
117
125
|
import_styled.StyleErrorMessage,
|
|
118
126
|
{
|
|
@@ -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
|
|
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} 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\n data-theming-type={type}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({})}\n >\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 data-theming-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 <ChatBubbleArrow {...propsWithDefault} />\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,65 +28,87 @@ 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
|
|
32
|
-
ChatBubbleArrowWithSchema: () => ChatBubbleArrowWithSchema
|
|
31
|
+
ChatBubbleArrow: () => ChatBubbleArrow
|
|
33
32
|
});
|
|
34
33
|
module.exports = __toCommonJS(ChatBubbleArrow_exports);
|
|
35
34
|
var React = __toESM(require("react"));
|
|
36
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
-
var
|
|
36
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
38
37
|
var import_constants = require("./constants/index.js");
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
"feColorMatrix",
|
|
62
|
-
{
|
|
63
|
-
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",
|
|
64
|
-
type: "matrix",
|
|
65
|
-
in: "shadowBlurOuter1"
|
|
66
|
-
}
|
|
67
|
-
)
|
|
68
|
-
]
|
|
69
|
-
}
|
|
70
|
-
)
|
|
71
|
-
] }),
|
|
72
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) ", children: [
|
|
73
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
|
-
"use",
|
|
75
|
-
{
|
|
76
|
-
fill: "black",
|
|
77
|
-
fillOpacity: "1",
|
|
78
|
-
filter: `url(#arrow-svg-filter-${dsId})`,
|
|
79
|
-
xlinkHref: `#arrow-svg-path-${dsId}`
|
|
80
|
-
}
|
|
81
|
-
),
|
|
82
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: `#arrow-svg-path-${dsId}` })
|
|
83
|
-
] }) })
|
|
84
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "0.692rem", height: "0.615rem", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
-
"path",
|
|
38
|
+
const senderArrowPositionStyles = import_ds_system.css`
|
|
39
|
+
right: -0.692rem;
|
|
40
|
+
height: 1.15rem;
|
|
41
|
+
bottom: 0.461rem;
|
|
42
|
+
`;
|
|
43
|
+
const recipientArrowPositionStyles = import_ds_system.css`
|
|
44
|
+
left: -0.846rem;
|
|
45
|
+
bottom: 0.461rem;
|
|
46
|
+
`;
|
|
47
|
+
const StyledBubbleArrow = (0, import_ds_system.styled)("div", {
|
|
48
|
+
name: import_constants.DSChatBubbleName,
|
|
49
|
+
slot: import_constants.CHAT_BUBBLE_SLOTS.ARROW
|
|
50
|
+
})`
|
|
51
|
+
position: absolute;
|
|
52
|
+
fill: ${(props) => props["data-theming-type"] === import_constants.BUBBLE_TYPES.RECIPIENT ? props.theme.colors.neutral["000"] : props.theme.colors.brand["600"]};
|
|
53
|
+
${(props) => {
|
|
54
|
+
if (props["data-theming-type"] === import_constants.BUBBLE_TYPES.RECIPIENT) return recipientArrowPositionStyles;
|
|
55
|
+
return senderArrowPositionStyles;
|
|
56
|
+
}}
|
|
57
|
+
`;
|
|
58
|
+
const BubbleArrowRecipient = (propsWithDefault) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
+
StyledBubbleArrow,
|
|
86
60
|
{
|
|
87
|
-
|
|
88
|
-
|
|
61
|
+
"data-theming-type": import_constants.BUBBLE_TYPES.RECIPIENT,
|
|
62
|
+
getOwnerProps: () => propsWithDefault,
|
|
63
|
+
getOwnerPropsArguments: () => ({ isRecipientArrow: true }),
|
|
64
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
|
|
65
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
66
|
+
"filter",
|
|
67
|
+
{
|
|
68
|
+
id: `filter-${propsWithDefault.dsId}`,
|
|
69
|
+
width: "211.1%",
|
|
70
|
+
height: "225%",
|
|
71
|
+
x: "-55.6%",
|
|
72
|
+
y: "-50%",
|
|
73
|
+
filterUnits: "objectBoundingBox",
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feOffset", { dx: "2.3", dy: "1.2", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
|
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { in: "shadowOffsetOuter1", result: "shadowBlurOuter1", stdDeviation: "1.5" }),
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
78
|
+
"feColorMatrix",
|
|
79
|
+
{
|
|
80
|
+
in: "shadowBlurOuter1",
|
|
81
|
+
values: "0 0 0 0 0.207843137 0 0 0 0 0.235294118 0 0 0 0 0.274509804 0 0 0 0.8 0"
|
|
82
|
+
}
|
|
83
|
+
)
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
) }),
|
|
87
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "matrix(-1 0 0 1 15 0)", children: [
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("use", { filter: `url(#filter-${propsWithDefault.dsId})`, href: `#path-${propsWithDefault.dsId}` }),
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
"path",
|
|
91
|
+
{
|
|
92
|
+
id: `path-${propsWithDefault.dsId}`,
|
|
93
|
+
d: "M12 8.5c0-.563-.322-1.014-.772-1.304L3 2v8h7.563l.003-.007A1.497 1.497 0 0 0 12 8.5"
|
|
94
|
+
}
|
|
95
|
+
)
|
|
96
|
+
] })
|
|
97
|
+
] })
|
|
89
98
|
}
|
|
90
|
-
)
|
|
91
|
-
const
|
|
99
|
+
);
|
|
100
|
+
const BubbleArrowSender = (propsWithDefault) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
101
|
+
StyledBubbleArrow,
|
|
102
|
+
{
|
|
103
|
+
"data-theming-type": import_constants.BUBBLE_TYPES.SENDER,
|
|
104
|
+
getOwnerProps: () => propsWithDefault,
|
|
105
|
+
getOwnerPropsArguments: () => ({ isRecipientArrow: false }),
|
|
106
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "0.692rem", height: "0.615rem", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { 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" }) }) })
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
const ChatBubbleArrow = (propsWithDefault) => {
|
|
110
|
+
const { type } = propsWithDefault;
|
|
111
|
+
if (type === import_constants.BUBBLE_TYPES.RECIPIENT) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BubbleArrowRecipient, { ...propsWithDefault });
|
|
112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BubbleArrowSender, { ...propsWithDefault });
|
|
113
|
+
};
|
|
92
114
|
//# 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport React from 'react';\nimport { BUBBLE_TYPES, CHAT_BUBBLE_SLOTS, DSChatBubbleName } from './constants/index.js';\nimport { type DSChatBubbleT } from './react-desc-prop-types.js';\n\nconst senderArrowPositionStyles = css`\n right: -0.692rem;\n height: 1.15rem;\n bottom: 0.461rem;\n`;\nconst recipientArrowPositionStyles = css`\n left: -0.846rem;\n bottom: 0.461rem;\n`;\n\nconst StyledBubbleArrow = styled('div', {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.ARROW,\n})<{ 'data-theming-type': typeof BUBBLE_TYPES.RECIPIENT | typeof BUBBLE_TYPES.SENDER }>`\n position: absolute;\n fill: ${(props) =>\n props['data-theming-type'] === BUBBLE_TYPES.RECIPIENT\n ? props.theme.colors.neutral['000']\n : props.theme.colors.brand['600']};\n ${(props) => {\n if (props['data-theming-type'] === BUBBLE_TYPES.RECIPIENT) return recipientArrowPositionStyles;\n return senderArrowPositionStyles;\n }}\n`;\n\nconst BubbleArrowRecipient: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => (\n <StyledBubbleArrow\n data-theming-type={BUBBLE_TYPES.RECIPIENT}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({ isRecipientArrow: true })}\n >\n <svg width=\"1.15rem\" height=\"1.07rem\" viewBox=\"0 0 15 14\" aria-hidden=\"true\">\n <defs>\n <filter\n id={`filter-${propsWithDefault.dsId}`}\n width=\"211.1%\"\n height=\"225%\"\n x=\"-55.6%\"\n y=\"-50%\"\n filterUnits=\"objectBoundingBox\"\n >\n <feOffset dx=\"2.3\" dy=\"1.2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n <feGaussianBlur in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\" stdDeviation=\"1.5\" />\n <feColorMatrix\n in=\"shadowBlurOuter1\"\n values=\"0 0 0 0 0.207843137 0 0 0 0 0.235294118 0 0 0 0 0.274509804 0 0 0 0.8 0\"\n />\n </filter>\n </defs>\n <g transform=\"matrix(-1 0 0 1 15 0)\">\n <use filter={`url(#filter-${propsWithDefault.dsId})`} href={`#path-${propsWithDefault.dsId}`} />\n <path\n id={`path-${propsWithDefault.dsId}`}\n d=\"M12 8.5c0-.563-.322-1.014-.772-1.304L3 2v8h7.563l.003-.007A1.497 1.497 0 0 0 12 8.5\"\n />\n </g>\n </svg>\n </StyledBubbleArrow>\n);\n\nconst BubbleArrowSender: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => (\n <StyledBubbleArrow\n data-theming-type={BUBBLE_TYPES.SENDER}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({ isRecipientArrow: false })}\n >\n <svg width=\"0.692rem\" height=\"0.615rem\" viewBox=\"0 0 9 8\" aria-hidden=\"true\">\n <g stroke=\"none\" strokeWidth=\"1\" fillRule=\"evenodd\">\n <path 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\"></path>\n </g>\n </svg>\n </StyledBubbleArrow>\n);\n\nexport const ChatBubbleArrow: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => {\n const { type } = propsWithDefault;\n if (type === BUBBLE_TYPES.RECIPIENT) return <BubbleArrowRecipient {...propsWithDefault} />;\n return <BubbleArrowSender {...propsWithDefault} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCf;AAtCR,uBAA4B;AAE5B,uBAAkE;AAGlE,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAKlC,MAAM,+BAA+B;AAAA;AAAA;AAAA;AAKrC,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA,UAES,CAAC,UACP,MAAM,mBAAmB,MAAM,8BAAa,YACxC,MAAM,MAAM,OAAO,QAAQ,KAAK,IAChC,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA,IACnC,CAAC,UAAU;AACX,MAAI,MAAM,mBAAmB,MAAM,8BAAa,UAAW,QAAO;AAClE,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,uBAAyE,CAAC,qBAC9E;AAAA,EAAC;AAAA;AAAA,IACC,qBAAmB,8BAAa;AAAA,IAChC,eAAe,MAAM;AAAA,IACrB,wBAAwB,OAAO,EAAE,kBAAkB,KAAK;AAAA,IAExD,uDAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,kDAAC,UACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,UAAU,iBAAiB,IAAI;AAAA,UACnC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,GAAE;AAAA,UACF,GAAE;AAAA,UACF,aAAY;AAAA,UAEZ;AAAA,wDAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,YACzE,4CAAC,oBAAe,IAAG,sBAAqB,QAAO,oBAAmB,cAAa,OAAM;AAAA,YACrF;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,QAAO;AAAA;AAAA,YACT;AAAA;AAAA;AAAA,MACF,GACF;AAAA,MACA,6CAAC,OAAE,WAAU,yBACX;AAAA,oDAAC,SAAI,QAAQ,eAAe,iBAAiB,IAAI,KAAK,MAAM,SAAS,iBAAiB,IAAI,IAAI;AAAA,QAC9F;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,QAAQ,iBAAiB,IAAI;AAAA,YACjC,GAAE;AAAA;AAAA,QACJ;AAAA,SACF;AAAA,OACF;AAAA;AACF;AAGF,MAAM,oBAAsE,CAAC,qBAC3E;AAAA,EAAC;AAAA;AAAA,IACC,qBAAmB,8BAAa;AAAA,IAChC,eAAe,MAAM;AAAA,IACrB,wBAAwB,OAAO,EAAE,kBAAkB,MAAM;AAAA,IAEzD,sDAAC,SAAI,OAAM,YAAW,QAAO,YAAW,SAAQ,WAAU,eAAY,QACpE,sDAAC,OAAE,QAAO,QAAO,aAAY,KAAI,UAAS,WACxC,sDAAC,UAAK,GAAE,2KAA0K,GACpL,GACF;AAAA;AACF;AAGK,MAAM,kBAAoE,CAAC,qBAAqB;AACrG,QAAM,EAAE,KAAK,IAAI;AACjB,MAAI,SAAS,8BAAa,UAAW,QAAO,4CAAC,wBAAsB,GAAG,kBAAkB;AACxF,SAAO,4CAAC,qBAAmB,GAAG,kBAAkB;AAClD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -31,7 +31,6 @@ __export(styled_exports, {
|
|
|
31
31
|
StyleBodyWrapper: () => StyleBodyWrapper,
|
|
32
32
|
StyleErrorMessage: () => StyleErrorMessage,
|
|
33
33
|
StyleHelpMessage: () => StyleHelpMessage,
|
|
34
|
-
StyledBubbleArrow: () => StyledBubbleArrow,
|
|
35
34
|
StyledColoredBubble: () => StyledColoredBubble,
|
|
36
35
|
StyledTitleBubble: () => StyledTitleBubble,
|
|
37
36
|
StyledTitleLeftBubble: () => StyledTitleLeftBubble,
|
|
@@ -79,7 +78,7 @@ const StyledTitleRightBubble = (0, import_ds_system.styled)(import_ds_grid.Grid,
|
|
|
79
78
|
font-size: 1rem;
|
|
80
79
|
font-weight: 400;
|
|
81
80
|
align-self: flex-start;
|
|
82
|
-
color: ${(props) => props
|
|
81
|
+
color: ${(props) => props["data-theming-type"] === import_constants.BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
|
|
83
82
|
`;
|
|
84
83
|
const StyleBodyWrapper = (0, import_ds_system.styled)("div", {
|
|
85
84
|
name: import_constants.DSChatBubbleName,
|
|
@@ -129,16 +128,6 @@ const StyleHelpMessage = (0, import_ds_system.styled)(StyleErrorMessage, {
|
|
|
129
128
|
color: ${(props) => props.theme.colors.danger[900]};
|
|
130
129
|
}
|
|
131
130
|
`;
|
|
132
|
-
const StyledBubbleArrow = (0, import_ds_system.styled)("div", {
|
|
133
|
-
name: import_constants.DSChatBubbleName,
|
|
134
|
-
slot: import_constants.CHAT_BUBBLE_SLOTS.ARROW
|
|
135
|
-
})`
|
|
136
|
-
display: block;
|
|
137
|
-
content: '';
|
|
138
|
-
position: absolute;
|
|
139
|
-
bottom: 0.769rem;
|
|
140
|
-
height: 1.15rem;
|
|
141
|
-
`;
|
|
142
131
|
const StyledColoredBubble = (0, import_ds_system.styled)("div", {
|
|
143
132
|
name: import_constants.DSChatBubbleName,
|
|
144
133
|
slot: import_constants.CHAT_BUBBLE_SLOTS.COLORED_BUBBLE
|
|
@@ -147,35 +136,17 @@ const StyledColoredBubble = (0, import_ds_system.styled)("div", {
|
|
|
147
136
|
border-radius: 10px;
|
|
148
137
|
position: relative;
|
|
149
138
|
|
|
150
|
-
${(props) => props
|
|
139
|
+
${(props) => props["data-theming-type"] === import_constants.BUBBLE_TYPES.SENDER ? `
|
|
151
140
|
border: 1px solid ${props.theme.colors.brand["700"]};
|
|
152
141
|
background: ${props.theme.colors.brand[600]};
|
|
153
142
|
color: ${props.theme.colors.neutral["000"]};
|
|
154
|
-
${StyledBubbleArrow}{
|
|
155
|
-
right: -0.692rem;
|
|
156
|
-
bottom: 0.461rem;
|
|
157
|
-
svg{
|
|
158
|
-
fill: ${props.theme.colors.brand[600]};
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
|
|
162
143
|
a {
|
|
163
144
|
color: #FFF;
|
|
164
145
|
}
|
|
165
|
-
|
|
166
146
|
` : `
|
|
167
147
|
box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);
|
|
168
148
|
background: ${props.theme.colors.neutral["000"]};
|
|
169
149
|
color: ${props.theme.colors.neutral[700]};
|
|
170
|
-
|
|
171
|
-
${StyledBubbleArrow}{
|
|
172
|
-
left: -0.846rem;
|
|
173
|
-
bottom: 0.461rem;
|
|
174
|
-
svg{
|
|
175
|
-
fill: ${props.theme.colors.neutral["000"]};
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
150
|
`}
|
|
180
151
|
`;
|
|
181
152
|
//# sourceMappingURL=styled.js.map
|
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, 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
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})<{ 'data-theming-type': string }>`\n font-size: 1rem;\n font-weight: 400;\n align-self: flex-start;\n color: ${(props) => (props['data-theming-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\nexport const StyledColoredBubble = styled('div', {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.COLORED_BUBBLE,\n})<{ 'data-theming-type': string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props['data-theming-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 a {\n color: #FFF;\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`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;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,mBAAmB,MAAM,8BAAa,SAAS,SAAS,SAAU;AAAA;AAGxF,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;AAI/C,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG,CAAC,UACD,MAAM,mBAAmB,MAAM,8BAAa,SACxC;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;AAAA;AAAA;AAAA,QAK1C;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAC3C;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/ChatBubble.js
CHANGED
|
@@ -13,8 +13,7 @@ import {
|
|
|
13
13
|
StyledTitleRightBubble,
|
|
14
14
|
StyleBodyWrapper,
|
|
15
15
|
StyleErrorMessage,
|
|
16
|
-
StyleHelpMessage
|
|
17
|
-
StyledBubbleArrow
|
|
16
|
+
StyleHelpMessage
|
|
18
17
|
} from "./styled.js";
|
|
19
18
|
import { BubblePropTypes, defaultProps } from "./react-desc-prop-types.js";
|
|
20
19
|
import { ChatBubbleArrow } from "./ChatBubbleArrow.js";
|
|
@@ -38,57 +37,65 @@ const ChatBubble = (props) => {
|
|
|
38
37
|
getOwnerProps: () => propsWithDefault,
|
|
39
38
|
getOwnerPropsArguments: () => ({}),
|
|
40
39
|
children: [
|
|
41
|
-
/* @__PURE__ */ jsxs(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
40
|
+
/* @__PURE__ */ jsxs(
|
|
41
|
+
StyledColoredBubble,
|
|
42
|
+
{
|
|
43
|
+
"data-theming-type": type,
|
|
44
|
+
getOwnerProps: () => propsWithDefault,
|
|
45
|
+
getOwnerPropsArguments: () => ({}),
|
|
46
|
+
children: [
|
|
47
|
+
/* @__PURE__ */ jsxs(
|
|
48
|
+
StyledTitleBubble,
|
|
49
|
+
{
|
|
50
|
+
cols: ["1fr", "auto"],
|
|
51
|
+
gutter: "xs",
|
|
52
|
+
alignItems: "flex-end",
|
|
53
|
+
className: "sr-only",
|
|
54
|
+
getOwnerProps: () => propsWithDefault,
|
|
55
|
+
getOwnerPropsArguments: () => ({}),
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ jsx(
|
|
58
|
+
StyledTitleLeftBubble,
|
|
59
|
+
{
|
|
60
|
+
"data-testid": `${CHAT_BUBBLE_DATA_TESTID.HEADER_LEFT}-${dsId}`,
|
|
61
|
+
getOwnerProps: () => propsWithDefault,
|
|
62
|
+
getOwnerPropsArguments: () => ({}),
|
|
63
|
+
children: title
|
|
64
|
+
}
|
|
65
|
+
),
|
|
66
|
+
/* @__PURE__ */ jsx(
|
|
67
|
+
StyledTitleRightBubble,
|
|
68
|
+
{
|
|
69
|
+
alignItems: "center",
|
|
70
|
+
"data-theming-type": type,
|
|
71
|
+
"data-testid": `${CHAT_BUBBLE_DATA_TESTID.HEADER_RIGHT}-${dsId}`,
|
|
72
|
+
getOwnerProps: () => propsWithDefault,
|
|
73
|
+
getOwnerPropsArguments: () => ({}),
|
|
74
|
+
children: time
|
|
75
|
+
}
|
|
76
|
+
)
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
),
|
|
80
|
+
/* @__PURE__ */ jsx(
|
|
81
|
+
StyleBodyWrapper,
|
|
82
|
+
{
|
|
83
|
+
"data-testid": `${CHAT_BUBBLE_DATA_TESTID.BODY_WRAPPER}-${dsId}`,
|
|
84
|
+
getOwnerProps: () => propsWithDefault,
|
|
85
|
+
getOwnerPropsArguments: () => ({}),
|
|
86
|
+
children: bodyParts.map((item, index) => (
|
|
87
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
88
|
+
/* @__PURE__ */ jsxs(React2.Fragment, { children: [
|
|
89
|
+
item,
|
|
90
|
+
index < bodyParts.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
|
|
91
|
+
] }, `body-fragment-${index}-${dsId}`)
|
|
92
|
+
))
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
/* @__PURE__ */ jsx(ChatBubbleArrow, { ...propsWithDefault })
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
),
|
|
92
99
|
errorMessage ? /* @__PURE__ */ jsx(
|
|
93
100
|
StyleErrorMessage,
|
|
94
101
|
{
|
|
@@ -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
|
|
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} 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\n data-theming-type={type}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({})}\n >\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 data-theming-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 <ChatBubbleArrow {...propsWithDefault} />\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,62 +1,84 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import { BUBBLE_TYPES } from "./constants/index.js";
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"feColorMatrix",
|
|
28
|
-
{
|
|
29
|
-
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",
|
|
30
|
-
type: "matrix",
|
|
31
|
-
in: "shadowBlurOuter1"
|
|
32
|
-
}
|
|
33
|
-
)
|
|
34
|
-
]
|
|
35
|
-
}
|
|
36
|
-
)
|
|
37
|
-
] }),
|
|
38
|
-
/* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs("g", { transform: "translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) ", children: [
|
|
39
|
-
/* @__PURE__ */ jsx(
|
|
40
|
-
"use",
|
|
41
|
-
{
|
|
42
|
-
fill: "black",
|
|
43
|
-
fillOpacity: "1",
|
|
44
|
-
filter: `url(#arrow-svg-filter-${dsId})`,
|
|
45
|
-
xlinkHref: `#arrow-svg-path-${dsId}`
|
|
46
|
-
}
|
|
47
|
-
),
|
|
48
|
-
/* @__PURE__ */ jsx("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: `#arrow-svg-path-${dsId}` })
|
|
49
|
-
] }) })
|
|
50
|
-
] }) : /* @__PURE__ */ jsx("svg", { width: "0.692rem", height: "0.615rem", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx(
|
|
51
|
-
"path",
|
|
3
|
+
import { styled, css } from "@elliemae/ds-system";
|
|
4
|
+
import { BUBBLE_TYPES, CHAT_BUBBLE_SLOTS, DSChatBubbleName } from "./constants/index.js";
|
|
5
|
+
const senderArrowPositionStyles = css`
|
|
6
|
+
right: -0.692rem;
|
|
7
|
+
height: 1.15rem;
|
|
8
|
+
bottom: 0.461rem;
|
|
9
|
+
`;
|
|
10
|
+
const recipientArrowPositionStyles = css`
|
|
11
|
+
left: -0.846rem;
|
|
12
|
+
bottom: 0.461rem;
|
|
13
|
+
`;
|
|
14
|
+
const StyledBubbleArrow = styled("div", {
|
|
15
|
+
name: DSChatBubbleName,
|
|
16
|
+
slot: CHAT_BUBBLE_SLOTS.ARROW
|
|
17
|
+
})`
|
|
18
|
+
position: absolute;
|
|
19
|
+
fill: ${(props) => props["data-theming-type"] === BUBBLE_TYPES.RECIPIENT ? props.theme.colors.neutral["000"] : props.theme.colors.brand["600"]};
|
|
20
|
+
${(props) => {
|
|
21
|
+
if (props["data-theming-type"] === BUBBLE_TYPES.RECIPIENT) return recipientArrowPositionStyles;
|
|
22
|
+
return senderArrowPositionStyles;
|
|
23
|
+
}}
|
|
24
|
+
`;
|
|
25
|
+
const BubbleArrowRecipient = (propsWithDefault) => /* @__PURE__ */ jsx(
|
|
26
|
+
StyledBubbleArrow,
|
|
52
27
|
{
|
|
53
|
-
|
|
54
|
-
|
|
28
|
+
"data-theming-type": BUBBLE_TYPES.RECIPIENT,
|
|
29
|
+
getOwnerProps: () => propsWithDefault,
|
|
30
|
+
getOwnerPropsArguments: () => ({ isRecipientArrow: true }),
|
|
31
|
+
children: /* @__PURE__ */ jsxs("svg", { width: "1.15rem", height: "1.07rem", viewBox: "0 0 15 14", "aria-hidden": "true", children: [
|
|
32
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
|
|
33
|
+
"filter",
|
|
34
|
+
{
|
|
35
|
+
id: `filter-${propsWithDefault.dsId}`,
|
|
36
|
+
width: "211.1%",
|
|
37
|
+
height: "225%",
|
|
38
|
+
x: "-55.6%",
|
|
39
|
+
y: "-50%",
|
|
40
|
+
filterUnits: "objectBoundingBox",
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ jsx("feOffset", { dx: "2.3", dy: "1.2", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
|
|
43
|
+
/* @__PURE__ */ jsx("feGaussianBlur", { in: "shadowOffsetOuter1", result: "shadowBlurOuter1", stdDeviation: "1.5" }),
|
|
44
|
+
/* @__PURE__ */ jsx(
|
|
45
|
+
"feColorMatrix",
|
|
46
|
+
{
|
|
47
|
+
in: "shadowBlurOuter1",
|
|
48
|
+
values: "0 0 0 0 0.207843137 0 0 0 0 0.235294118 0 0 0 0 0.274509804 0 0 0 0.8 0"
|
|
49
|
+
}
|
|
50
|
+
)
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
) }),
|
|
54
|
+
/* @__PURE__ */ jsxs("g", { transform: "matrix(-1 0 0 1 15 0)", children: [
|
|
55
|
+
/* @__PURE__ */ jsx("use", { filter: `url(#filter-${propsWithDefault.dsId})`, href: `#path-${propsWithDefault.dsId}` }),
|
|
56
|
+
/* @__PURE__ */ jsx(
|
|
57
|
+
"path",
|
|
58
|
+
{
|
|
59
|
+
id: `path-${propsWithDefault.dsId}`,
|
|
60
|
+
d: "M12 8.5c0-.563-.322-1.014-.772-1.304L3 2v8h7.563l.003-.007A1.497 1.497 0 0 0 12 8.5"
|
|
61
|
+
}
|
|
62
|
+
)
|
|
63
|
+
] })
|
|
64
|
+
] })
|
|
55
65
|
}
|
|
56
|
-
)
|
|
57
|
-
const
|
|
66
|
+
);
|
|
67
|
+
const BubbleArrowSender = (propsWithDefault) => /* @__PURE__ */ jsx(
|
|
68
|
+
StyledBubbleArrow,
|
|
69
|
+
{
|
|
70
|
+
"data-theming-type": BUBBLE_TYPES.SENDER,
|
|
71
|
+
getOwnerProps: () => propsWithDefault,
|
|
72
|
+
getOwnerPropsArguments: () => ({ isRecipientArrow: false }),
|
|
73
|
+
children: /* @__PURE__ */ jsx("svg", { width: "0.692rem", height: "0.615rem", viewBox: "0 0 9 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ jsx("path", { 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" }) }) })
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
const ChatBubbleArrow = (propsWithDefault) => {
|
|
77
|
+
const { type } = propsWithDefault;
|
|
78
|
+
if (type === BUBBLE_TYPES.RECIPIENT) return /* @__PURE__ */ jsx(BubbleArrowRecipient, { ...propsWithDefault });
|
|
79
|
+
return /* @__PURE__ */ jsx(BubbleArrowSender, { ...propsWithDefault });
|
|
80
|
+
};
|
|
58
81
|
export {
|
|
59
|
-
ChatBubbleArrow
|
|
60
|
-
ChatBubbleArrowWithSchema
|
|
82
|
+
ChatBubbleArrow
|
|
61
83
|
};
|
|
62
84
|
//# 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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport React from 'react';\nimport { BUBBLE_TYPES, CHAT_BUBBLE_SLOTS, DSChatBubbleName } from './constants/index.js';\nimport { type DSChatBubbleT } from './react-desc-prop-types.js';\n\nconst senderArrowPositionStyles = css`\n right: -0.692rem;\n height: 1.15rem;\n bottom: 0.461rem;\n`;\nconst recipientArrowPositionStyles = css`\n left: -0.846rem;\n bottom: 0.461rem;\n`;\n\nconst StyledBubbleArrow = styled('div', {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.ARROW,\n})<{ 'data-theming-type': typeof BUBBLE_TYPES.RECIPIENT | typeof BUBBLE_TYPES.SENDER }>`\n position: absolute;\n fill: ${(props) =>\n props['data-theming-type'] === BUBBLE_TYPES.RECIPIENT\n ? props.theme.colors.neutral['000']\n : props.theme.colors.brand['600']};\n ${(props) => {\n if (props['data-theming-type'] === BUBBLE_TYPES.RECIPIENT) return recipientArrowPositionStyles;\n return senderArrowPositionStyles;\n }}\n`;\n\nconst BubbleArrowRecipient: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => (\n <StyledBubbleArrow\n data-theming-type={BUBBLE_TYPES.RECIPIENT}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({ isRecipientArrow: true })}\n >\n <svg width=\"1.15rem\" height=\"1.07rem\" viewBox=\"0 0 15 14\" aria-hidden=\"true\">\n <defs>\n <filter\n id={`filter-${propsWithDefault.dsId}`}\n width=\"211.1%\"\n height=\"225%\"\n x=\"-55.6%\"\n y=\"-50%\"\n filterUnits=\"objectBoundingBox\"\n >\n <feOffset dx=\"2.3\" dy=\"1.2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n <feGaussianBlur in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\" stdDeviation=\"1.5\" />\n <feColorMatrix\n in=\"shadowBlurOuter1\"\n values=\"0 0 0 0 0.207843137 0 0 0 0 0.235294118 0 0 0 0 0.274509804 0 0 0 0.8 0\"\n />\n </filter>\n </defs>\n <g transform=\"matrix(-1 0 0 1 15 0)\">\n <use filter={`url(#filter-${propsWithDefault.dsId})`} href={`#path-${propsWithDefault.dsId}`} />\n <path\n id={`path-${propsWithDefault.dsId}`}\n d=\"M12 8.5c0-.563-.322-1.014-.772-1.304L3 2v8h7.563l.003-.007A1.497 1.497 0 0 0 12 8.5\"\n />\n </g>\n </svg>\n </StyledBubbleArrow>\n);\n\nconst BubbleArrowSender: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => (\n <StyledBubbleArrow\n data-theming-type={BUBBLE_TYPES.SENDER}\n getOwnerProps={() => propsWithDefault}\n getOwnerPropsArguments={() => ({ isRecipientArrow: false })}\n >\n <svg width=\"0.692rem\" height=\"0.615rem\" viewBox=\"0 0 9 8\" aria-hidden=\"true\">\n <g stroke=\"none\" strokeWidth=\"1\" fillRule=\"evenodd\">\n <path 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\"></path>\n </g>\n </svg>\n </StyledBubbleArrow>\n);\n\nexport const ChatBubbleArrow: React.ComponentType<DSChatBubbleT.InternalProps> = (propsWithDefault) => {\n const { type } = propsWithDefault;\n if (type === BUBBLE_TYPES.RECIPIENT) return <BubbleArrowRecipient {...propsWithDefault} />;\n return <BubbleArrowSender {...propsWithDefault} />;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsCf,SAQE,KARF;AAtCR,SAAS,QAAQ,WAAW;AAE5B,SAAS,cAAc,mBAAmB,wBAAwB;AAGlE,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAKlC,MAAM,+BAA+B;AAAA;AAAA;AAAA;AAKrC,MAAM,oBAAoB,OAAO,OAAO;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA,UAES,CAAC,UACP,MAAM,mBAAmB,MAAM,aAAa,YACxC,MAAM,MAAM,OAAO,QAAQ,KAAK,IAChC,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA,IACnC,CAAC,UAAU;AACX,MAAI,MAAM,mBAAmB,MAAM,aAAa,UAAW,QAAO;AAClE,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,uBAAyE,CAAC,qBAC9E;AAAA,EAAC;AAAA;AAAA,IACC,qBAAmB,aAAa;AAAA,IAChC,eAAe,MAAM;AAAA,IACrB,wBAAwB,OAAO,EAAE,kBAAkB,KAAK;AAAA,IAExD,+BAAC,SAAI,OAAM,WAAU,QAAO,WAAU,SAAQ,aAAY,eAAY,QACpE;AAAA,0BAAC,UACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,UAAU,iBAAiB,IAAI;AAAA,UACnC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,GAAE;AAAA,UACF,GAAE;AAAA,UACF,aAAY;AAAA,UAEZ;AAAA,gCAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,YACzE,oBAAC,oBAAe,IAAG,sBAAqB,QAAO,oBAAmB,cAAa,OAAM;AAAA,YACrF;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,QAAO;AAAA;AAAA,YACT;AAAA;AAAA;AAAA,MACF,GACF;AAAA,MACA,qBAAC,OAAE,WAAU,yBACX;AAAA,4BAAC,SAAI,QAAQ,eAAe,iBAAiB,IAAI,KAAK,MAAM,SAAS,iBAAiB,IAAI,IAAI;AAAA,QAC9F;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,QAAQ,iBAAiB,IAAI;AAAA,YACjC,GAAE;AAAA;AAAA,QACJ;AAAA,SACF;AAAA,OACF;AAAA;AACF;AAGF,MAAM,oBAAsE,CAAC,qBAC3E;AAAA,EAAC;AAAA;AAAA,IACC,qBAAmB,aAAa;AAAA,IAChC,eAAe,MAAM;AAAA,IACrB,wBAAwB,OAAO,EAAE,kBAAkB,MAAM;AAAA,IAEzD,8BAAC,SAAI,OAAM,YAAW,QAAO,YAAW,SAAQ,WAAU,eAAY,QACpE,8BAAC,OAAE,QAAO,QAAO,aAAY,KAAI,UAAS,WACxC,8BAAC,UAAK,GAAE,2KAA0K,GACpL,GACF;AAAA;AACF;AAGK,MAAM,kBAAoE,CAAC,qBAAqB;AACrG,QAAM,EAAE,KAAK,IAAI;AACjB,MAAI,SAAS,aAAa,UAAW,QAAO,oBAAC,wBAAsB,GAAG,kBAAkB;AACxF,SAAO,oBAAC,qBAAmB,GAAG,kBAAkB;AAClD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -38,7 +38,7 @@ const StyledTitleRightBubble = styled(Grid, {
|
|
|
38
38
|
font-size: 1rem;
|
|
39
39
|
font-weight: 400;
|
|
40
40
|
align-self: flex-start;
|
|
41
|
-
color: ${(props) => props
|
|
41
|
+
color: ${(props) => props["data-theming-type"] === BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
|
|
42
42
|
`;
|
|
43
43
|
const StyleBodyWrapper = styled("div", {
|
|
44
44
|
name: DSChatBubbleName,
|
|
@@ -88,16 +88,6 @@ const StyleHelpMessage = styled(StyleErrorMessage, {
|
|
|
88
88
|
color: ${(props) => props.theme.colors.danger[900]};
|
|
89
89
|
}
|
|
90
90
|
`;
|
|
91
|
-
const StyledBubbleArrow = styled("div", {
|
|
92
|
-
name: DSChatBubbleName,
|
|
93
|
-
slot: CHAT_BUBBLE_SLOTS.ARROW
|
|
94
|
-
})`
|
|
95
|
-
display: block;
|
|
96
|
-
content: '';
|
|
97
|
-
position: absolute;
|
|
98
|
-
bottom: 0.769rem;
|
|
99
|
-
height: 1.15rem;
|
|
100
|
-
`;
|
|
101
91
|
const StyledColoredBubble = styled("div", {
|
|
102
92
|
name: DSChatBubbleName,
|
|
103
93
|
slot: CHAT_BUBBLE_SLOTS.COLORED_BUBBLE
|
|
@@ -106,42 +96,23 @@ const StyledColoredBubble = styled("div", {
|
|
|
106
96
|
border-radius: 10px;
|
|
107
97
|
position: relative;
|
|
108
98
|
|
|
109
|
-
${(props) => props
|
|
99
|
+
${(props) => props["data-theming-type"] === BUBBLE_TYPES.SENDER ? `
|
|
110
100
|
border: 1px solid ${props.theme.colors.brand["700"]};
|
|
111
101
|
background: ${props.theme.colors.brand[600]};
|
|
112
102
|
color: ${props.theme.colors.neutral["000"]};
|
|
113
|
-
${StyledBubbleArrow}{
|
|
114
|
-
right: -0.692rem;
|
|
115
|
-
bottom: 0.461rem;
|
|
116
|
-
svg{
|
|
117
|
-
fill: ${props.theme.colors.brand[600]};
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
103
|
a {
|
|
122
104
|
color: #FFF;
|
|
123
105
|
}
|
|
124
|
-
|
|
125
106
|
` : `
|
|
126
107
|
box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);
|
|
127
108
|
background: ${props.theme.colors.neutral["000"]};
|
|
128
109
|
color: ${props.theme.colors.neutral[700]};
|
|
129
|
-
|
|
130
|
-
${StyledBubbleArrow}{
|
|
131
|
-
left: -0.846rem;
|
|
132
|
-
bottom: 0.461rem;
|
|
133
|
-
svg{
|
|
134
|
-
fill: ${props.theme.colors.neutral["000"]};
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
|
|
138
110
|
`}
|
|
139
111
|
`;
|
|
140
112
|
export {
|
|
141
113
|
StyleBodyWrapper,
|
|
142
114
|
StyleErrorMessage,
|
|
143
115
|
StyleHelpMessage,
|
|
144
|
-
StyledBubbleArrow,
|
|
145
116
|
StyledColoredBubble,
|
|
146
117
|
StyledTitleBubble,
|
|
147
118
|
StyledTitleLeftBubble,
|
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, 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
|
|
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,
|
|
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})<{ 'data-theming-type': string }>`\n font-size: 1rem;\n font-weight: 400;\n align-self: flex-start;\n color: ${(props) => (props['data-theming-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\nexport const StyledColoredBubble = styled('div', {\n name: DSChatBubbleName,\n slot: CHAT_BUBBLE_SLOTS.COLORED_BUBBLE,\n})<{ 'data-theming-type': string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props['data-theming-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 a {\n color: #FFF;\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`;\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,mBAAmB,MAAM,aAAa,SAAS,SAAS,SAAU;AAAA;AAGxF,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;AAI/C,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKG,CAAC,UACD,MAAM,mBAAmB,MAAM,aAAa,SACxC;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;AAAA;AAAA;AAAA,QAK1C;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAC3C;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type DSChatBubbleT } from './react-desc-prop-types.js';
|
|
3
|
-
export declare const ChatBubbleArrow: React.ComponentType<
|
|
4
|
-
export declare const ChatBubbleArrowWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<Pick<DSChatBubbleT.Props, "type" | "dsId">>;
|
|
3
|
+
export declare const ChatBubbleArrow: React.ComponentType<DSChatBubbleT.InternalProps>;
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -2,12 +2,11 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
|
|
|
2
2
|
export declare const StyledTitleBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
3
3
|
export declare const StyledTitleLeftBubble: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
4
4
|
export declare const StyledTitleRightBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
5
|
-
type: string;
|
|
5
|
+
'data-theming-type': string;
|
|
6
6
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
7
7
|
export declare const StyleBodyWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
8
8
|
export declare const StyleErrorMessage: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
9
9
|
export declare const StyleHelpMessage: import("styled-components").StyledComponent<import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>>, never>;
|
|
10
|
-
export declare const StyledBubbleArrow: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
11
10
|
export declare const StyledColoredBubble: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
|
|
12
|
-
type: string;
|
|
11
|
+
'data-theming-type': string;
|
|
13
12
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chat-bubble",
|
|
3
|
-
"version": "3.60.0-next.
|
|
3
|
+
"version": "3.60.0-next.25",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chat",
|
|
6
6
|
"files": [
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-grid": "3.60.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-grid": "3.60.0-next.25",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.60.0-next.25",
|
|
42
|
+
"@elliemae/ds-system": "3.60.0-next.25",
|
|
43
|
+
"@elliemae/ds-icons": "3.60.0-next.25"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"jest": "^30.0.0",
|
|
47
47
|
"styled-components": "~5.3.9",
|
|
48
|
-
"@elliemae/ds-monorepo-devops": "3.60.0-next.
|
|
49
|
-
"@elliemae/ds-test-utils": "3.60.0-next.
|
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.60.0-next.25",
|
|
49
|
+
"@elliemae/ds-test-utils": "3.60.0-next.25"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"lodash-es": "^4.17.21",
|