@elliemae/ds-chat-bubble 3.18.0-rc.2 → 3.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ChatBubble.js +7 -2
- package/dist/cjs/ChatBubble.js.map +3 -3
- package/dist/cjs/ChatBubbleArrow.js +41 -16
- package/dist/cjs/ChatBubbleArrow.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +1 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/ChatBubble.js +7 -2
- package/dist/esm/ChatBubble.js.map +3 -3
- package/dist/esm/ChatBubbleArrow.js +41 -16
- package/dist/esm/ChatBubbleArrow.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/ChatBubbleArrow.d.ts +1 -1
- package/package.json +5 -5
package/dist/cjs/ChatBubble.js
CHANGED
|
@@ -37,13 +37,18 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
37
37
|
var import_react = __toESM(require("react"));
|
|
38
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
39
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
40
|
+
var import_uid = require("uid");
|
|
40
41
|
var import_styled = require("./styled.js");
|
|
41
42
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
42
43
|
var import_ChatBubbleArrow = require("./ChatBubbleArrow.js");
|
|
43
44
|
var import_ChatBubbleDataTestIds = require("./ChatBubbleDataTestIds.js");
|
|
44
45
|
var import_DSChatBubbleDefinitions = require("./DSChatBubbleDefinitions.js");
|
|
45
46
|
const ChatBubble = (props) => {
|
|
46
|
-
const
|
|
47
|
+
const defaultPropsIncludingInstanciatedValues = import_react.default.useMemo(() => {
|
|
48
|
+
const dsId2 = props.dsId || `ds-chat-bubble-${(0, import_uid.uid)(9)}`;
|
|
49
|
+
return { ...import_react_desc_prop_types.defaultBubbleProps, dsId: dsId2 };
|
|
50
|
+
}, [props.dsId]);
|
|
51
|
+
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, defaultPropsIncludingInstanciatedValues);
|
|
47
52
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.BubblesPropTypes, import_DSChatBubbleDefinitions.DSChatBubbleName);
|
|
48
53
|
const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;
|
|
49
54
|
const bodyParts = import_react.default.useMemo(() => typeof body === "string" ? body.split("\n") : [body], [body]);
|
|
@@ -65,7 +70,7 @@ const ChatBubble = (props) => {
|
|
|
65
70
|
item,
|
|
66
71
|
index < bodyParts.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}) : null
|
|
67
72
|
] }, `${item}-${dsId}`)) }),
|
|
68
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChatBubbleArrow.ChatBubbleArrow, { type })
|
|
73
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChatBubbleArrow.ChatBubbleArrow, { type, dsId })
|
|
69
74
|
] }),
|
|
70
75
|
errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyleErrorMessage, { "data-testid": `chat-bubble-error-message-${dsId}`, p: "xxs", gutter: "xxs", cols: [1, "auto"], children: [
|
|
71
76
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: errorMessage }),
|
|
@@ -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 {\n StyledWrapper,\n StyledColoredBubble,\n StyledTitleBubble,\n StyledTitleLeftBubble,\n StyledTitleRightBubble,\n StyleBodyWrapper,\n StyleErrorMessage,\n StyleHelpMessage,\n} from './styled.js';\nimport { BubblesPropTypes, type DSChatBubbleT, defaultBubbleProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nimport { DSChatBubbleName } from './DSChatBubbleDefinitions.js';\n\nconst ChatBubble: React.ComponentType<DSChatBubbleT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": ["React"]
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { WarningCircleFill } from '@elliemae/ds-icons';\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 { BubblesPropTypes, type DSChatBubbleT, defaultBubbleProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nimport { DSChatBubbleName } from './DSChatBubbleDefinitions.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 { ...defaultBubbleProps, dsId };\n }, [props.dsId]);\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsIncludingInstanciatedValues);\n useValidateTypescriptPropTypes(propsWithDefault, BubblesPropTypes, 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 data-testid={`${ChatBubbleDataTestIds.BUBBLE}-${dsId}`}>\n <StyledColoredBubble type={type}>\n <StyledTitleBubble cols={['1fr', 'auto']} gutter=\"xs\" alignItems=\"flex-end\" className=\"sr-only\">\n <StyledTitleLeftBubble alignItems=\"center\" data-testid={`${ChatBubbleDataTestIds.BUBBLE_TITLE}-${dsId}`}>\n {title}\n </StyledTitleLeftBubble>\n <StyledTitleRightBubble\n alignItems=\"center\"\n type={type}\n data-testid={`${ChatBubbleDataTestIds.BUBBLE_TIME}-${dsId}`}\n >\n {time}\n </StyledTitleRightBubble>\n </StyledTitleBubble>\n <StyleBodyWrapper data-testid={`chat-bubble-body-${dsId}`}>\n {bodyParts.map((item, index) => (\n <React.Fragment key={`${item}-${dsId}`}>\n {item}\n {index < bodyParts.length - 1 ? <br /> : null}\n </React.Fragment>\n ))}\n </StyleBodyWrapper>\n <ChatBubbleArrow type={type} dsId={dsId} />\n </StyledColoredBubble>\n {errorMessage ? (\n <StyleErrorMessage data-testid={`chat-bubble-error-message-${dsId}`} p=\"xxs\" gutter=\"xxs\" cols={[1, 'auto']}>\n <span>{errorMessage}</span>\n <WarningCircleFill />\n </StyleErrorMessage>\n ) : null}\n {helpMessage ? (\n <StyleHelpMessage data-testid={`chat-bubble-help-message-${dsId}`} p=\"xxs\" gutter=\"xxs\" cols={[1, 'auto']}>\n <span>{helpMessage}</span>\n </StyleHelpMessage>\n ) : null}\n </StyledWrapper>\n );\n};\n\nChatBubble.propTypes = BubblesPropTypes;\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\nChatBubbleWithSchema.propTypes = BubblesPropTypes;\n\nexport { ChatBubble, ChatBubbleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCf;AAhCR,mBAAkB;AAClB,8BAAuF;AACvF,sBAAkC;AAClC,iBAAoB;AACpB,oBASO;AACP,mCAAyE;AACzE,6BAAgC;AAChC,mCAAsC;AACtC,qCAAiC;AAEjC,MAAM,aAAuD,CAAC,UAAU;AACtE,QAAM,0CAA0C,aAAAA,QAAM,QAAQ,MAAM;AAClE,UAAMC,QAAO,MAAM,QAAQ,sBAAkB,gBAAI,CAAC;AAClD,WAAO,EAAE,GAAG,iDAAoB,MAAAA,MAAK;AAAA,EACvC,GAAG,CAAC,MAAM,IAAI,CAAC;AACf,QAAM,uBAAmB,sDAA6B,OAAO,uCAAuC;AACpG,8DAA+B,kBAAkB,+CAAkB,+CAAgB;AAEnF,QAAM,EAAE,MAAM,MAAM,OAAO,MAAM,MAAM,cAAc,YAAY,IAAI;AACrE,QAAM,YAAY,aAAAD,QAAM,QAAQ,MAAO,OAAO,SAAS,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,GAAI,CAAC,IAAI,CAAC;AACpG,SACE,6CAAC,+BAAc,eAAa,GAAG,mDAAsB,UAAU,QAC7D;AAAA,iDAAC,qCAAoB,MACnB;AAAA,mDAAC,mCAAkB,MAAM,CAAC,OAAO,MAAM,GAAG,QAAO,MAAK,YAAW,YAAW,WAAU,WACpF;AAAA,oDAAC,uCAAsB,YAAW,UAAS,eAAa,GAAG,mDAAsB,gBAAgB,QAC9F,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX;AAAA,YACA,eAAa,GAAG,mDAAsB,eAAe;AAAA,YAEpD;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MACA,4CAAC,kCAAiB,eAAa,oBAAoB,QAChD,oBAAU,IAAI,CAAC,MAAM,UACpB,6CAAC,aAAAA,QAAM,UAAN,EACE;AAAA;AAAA,QACA,QAAQ,UAAU,SAAS,IAAI,4CAAC,QAAG,IAAK;AAAA,WAFtB,GAAG,QAAQ,MAGhC,CACD,GACH;AAAA,MACA,4CAAC,0CAAgB,MAAY,MAAY;AAAA,OAC3C;AAAA,IACC,eACC,6CAAC,mCAAkB,eAAa,6BAA6B,QAAQ,GAAE,OAAM,QAAO,OAAM,MAAM,CAAC,GAAG,MAAM,GACxG;AAAA,kDAAC,UAAM,wBAAa;AAAA,MACpB,4CAAC,qCAAkB;AAAA,OACrB,IACE;AAAA,IACH,cACC,4CAAC,kCAAiB,eAAa,4BAA4B,QAAQ,GAAE,OAAM,QAAO,OAAM,MAAM,CAAC,GAAG,MAAM,GACtG,sDAAC,UAAM,uBAAY,GACrB,IACE;AAAA,KACN;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
|
|
6
|
+
"names": ["React", "dsId"]
|
|
7
7
|
}
|
|
@@ -36,25 +36,50 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
36
36
|
var import_styled = require("./styled.js");
|
|
37
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
38
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
39
|
-
const ChatBubbleArrow = ({ type }) => /* @__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: "15px", height: "14px", viewBox: "0 0 15 14", children: [
|
|
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: "15px", height: "14px", viewBox: "0 0 15 14", children: [
|
|
40
40
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
|
|
41
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
41
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
42
|
+
"path",
|
|
43
|
+
{
|
|
44
|
+
id: `arrow-svg-path-${dsId}`,
|
|
45
|
+
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"
|
|
46
|
+
}
|
|
47
|
+
),
|
|
48
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
49
|
+
"filter",
|
|
50
|
+
{
|
|
51
|
+
id: `arrow-svg-filter-${dsId}`,
|
|
52
|
+
x: "-55.6%",
|
|
53
|
+
y: "-50.0%",
|
|
54
|
+
width: "211.1%",
|
|
55
|
+
height: "225.0%",
|
|
56
|
+
filterUnits: "objectBoundingBox",
|
|
57
|
+
children: [
|
|
58
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feOffset", { dx: "2.3", dy: "1.2", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
|
|
59
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { stdDeviation: "1.5", in: "shadowOffsetOuter1", result: "shadowBlurOuter1" }),
|
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
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
|
+
)
|
|
54
71
|
] }),
|
|
55
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: [
|
|
56
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
57
|
-
|
|
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}` })
|
|
58
83
|
] }) })
|
|
59
84
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "9px", height: "8px", viewBox: "0 0 9 8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
60
85
|
"path",
|
|
@@ -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 { StyledBubbleArrow } from './styled.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUBBLE_TYPES, type DSChatBubbleT, propsArrowBubble } from './react-desc-prop-types.js';\n\nexport const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type'>> = ({ type }) => (\n <StyledBubbleArrow>\n {type === BUBBLE_TYPES.RECIPIENT ? (\n <svg width=\"15px\" height=\"14px\" viewBox=\"0 0 15 14\">\n <defs>\n <path
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUb;AATV,oBAAkC;AAClC,8BAAyB;AACzB,mCAAmE;AAE5D,MAAM,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { StyledBubbleArrow } from './styled.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUBBLE_TYPES, type DSChatBubbleT, propsArrowBubble } from './react-desc-prop-types.js';\n\nexport const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type' | 'dsId'>> = ({ type, dsId }) => (\n <StyledBubbleArrow>\n {type === BUBBLE_TYPES.RECIPIENT ? (\n <svg width=\"15px\" height=\"14px\" viewBox=\"0 0 15 14\">\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=\"9px\" height=\"8px\" viewBox=\"0 0 9 8\">\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 </StyledBubbleArrow>\n);\n\nChatBubbleArrow.propTypes = propsArrowBubble;\nconst ChatBubbleArrowWithSchema = describe(ChatBubbleArrow);\nChatBubbleArrowWithSchema.propTypes = propsArrowBubble;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUb;AATV,oBAAkC;AAClC,8BAAyB;AACzB,mCAAmE;AAE5D,MAAM,kBAAmF,CAAC,EAAE,MAAM,KAAK,MAC5G,4CAAC,mCACE,mBAAS,0CAAa,YACrB,6CAAC,SAAI,OAAM,QAAO,QAAO,QAAO,SAAQ,aACtC;AAAA,+CAAC,UACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,kBAAkB;AAAA,QACtB,GAAE;AAAA;AAAA,IACH;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,oBAAoB;AAAA,QACxB,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;AAAA,QACjC,WAAW,mBAAmB;AAAA;AAAA,IAC/B;AAAA,IACD,4CAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAW,mBAAmB,QAAQ;AAAA,KAC/E,GACF;AAAA,GACF,IAEA,4CAAC,SAAI,OAAM,OAAM,QAAO,OAAM,SAAQ,WACpC,sDAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA;AACN,GACH,GACF,GAEJ;AAGF,gBAAgB,YAAY;AAC5B,MAAM,gCAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -54,7 +54,7 @@ const defaultBubbleProps = {
|
|
|
54
54
|
helpMessage: ""
|
|
55
55
|
};
|
|
56
56
|
const BubblesPropTypes = {
|
|
57
|
-
dsId: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number]).description("Unique id for bubble").defaultValue(
|
|
57
|
+
dsId: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number]).description("Unique id for bubble").defaultValue("a randomly generated (on mount) uid"),
|
|
58
58
|
type: import_ds_props_helpers.PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.description("Define bubble type ").defaultValue(defaultBubbleProps.type),
|
|
59
59
|
title: import_ds_props_helpers.PropTypes.string.description("Title of the bubble").defaultValue(defaultBubbleProps.title),
|
|
60
60
|
time: import_ds_props_helpers.PropTypes.string.isRequired.description("Time of the bubble").defaultValue(defaultBubbleProps.title),
|
|
@@ -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 { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport const BUBBLE_TYPES = {\n SENDER: 'SENDER',\n RECIPIENT: 'RECIPIENT',\n DELIMITER: 'DELIMITER',\n SYSTEM: 'SYSTEM',\n};\n\nexport declare namespace DSChatBubbleT {\n export interface Props {\n dsId: string | number;\n type: BubbleTypesValues;\n title?: string;\n body: string;\n time: string;\n errorMessage: string | React.ReactChild;\n helpMessage: string | React.ReactChild;\n onClick: (id: string | number) => void;\n }\n\n export type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;\n export type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];\n}\n\nexport const defaultBubbleProps: DSChatBubbleT.Props = {\n dsId: '',\n type: BUBBLE_TYPES.SENDER,\n time: '',\n body: '',\n onClick: noop,\n errorMessage: '',\n helpMessage: '',\n};\n\nexport const BubblesPropTypes = {\n dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .description('Unique id for bubble')\n .defaultValue(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAK1B,SAAS,QAA6B,OAAgB;AAAC;AAChD,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AACV;AAkBO,MAAM,qBAA0C;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AACf;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAC3D,YAAY,sBAAsB,EAClC,aAAa,
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport const BUBBLE_TYPES = {\n SENDER: 'SENDER',\n RECIPIENT: 'RECIPIENT',\n DELIMITER: 'DELIMITER',\n SYSTEM: 'SYSTEM',\n};\n\nexport declare namespace DSChatBubbleT {\n export interface Props {\n dsId: string | number;\n type: BubbleTypesValues;\n title?: string;\n body: string;\n time: string;\n errorMessage: string | React.ReactChild;\n helpMessage: string | React.ReactChild;\n onClick: (id: string | number) => void;\n }\n\n export type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;\n export type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];\n}\n\nexport const defaultBubbleProps: DSChatBubbleT.Props = {\n dsId: '',\n type: BUBBLE_TYPES.SENDER,\n time: '',\n body: '',\n onClick: noop,\n errorMessage: '',\n helpMessage: '',\n};\n\nexport const BubblesPropTypes = {\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(defaultBubbleProps.type),\n title: PropTypes.string.description('Title of the bubble').defaultValue(defaultBubbleProps.title),\n time: PropTypes.string.isRequired.description('Time of the bubble').defaultValue(defaultBubbleProps.title),\n body: PropTypes.oneOfType([PropTypes.string, PropTypes.element])\n .isRequired.description('Bubble content')\n .defaultValue(defaultBubbleProps.body),\n onClick: PropTypes.func.description('Callback when the bubble is tapped').defaultValue(defaultBubbleProps.onClick),\n errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element])\n .description('Error message to display at bottom of the bubble')\n .defaultValue(defaultBubbleProps.onClick),\n helpMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element])\n .description('Help message to display at bottom of the bubble')\n .defaultValue(defaultBubbleProps.onClick),\n} as WeakValidationMap<unknown>;\n\nexport const propsArrowBubble = {\n type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.defaultValue(defaultBubbleProps.type),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAK1B,SAAS,QAA6B,OAAgB;AAAC;AAChD,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AACV;AAkBO,MAAM,qBAA0C;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AACf;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAC3D,YAAY,sBAAsB,EAClC,aAAa,qCAAqC;AAAA,EACrD,MAAM,kCAAU,MAAM,CAAC,aAAa,WAAW,aAAa,MAAM,CAAC,EAChE,WAAW,YAAY,qBAAqB,EAC5C,aAAa,mBAAmB,IAAI;AAAA,EACvC,OAAO,kCAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,mBAAmB,KAAK;AAAA,EAChG,MAAM,kCAAU,OAAO,WAAW,YAAY,oBAAoB,EAAE,aAAa,mBAAmB,KAAK;AAAA,EACzG,MAAM,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,OAAO,CAAC,EAC5D,WAAW,YAAY,gBAAgB,EACvC,aAAa,mBAAmB,IAAI;AAAA,EACvC,SAAS,kCAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,mBAAmB,OAAO;AAAA,EACjH,cAAc,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,OAAO,CAAC,EACpE,YAAY,kDAAkD,EAC9D,aAAa,mBAAmB,OAAO;AAAA,EAC1C,aAAa,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,OAAO,CAAC,EACnE,YAAY,iDAAiD,EAC7D,aAAa,mBAAmB,OAAO;AAC5C;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,kCAAU,MAAM,CAAC,aAAa,WAAW,aAAa,MAAM,CAAC,EAAE,WAAW,aAAa,mBAAmB,IAAI;AACtH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/ChatBubble.js
CHANGED
|
@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import React2 from "react";
|
|
4
4
|
import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { WarningCircleFill } from "@elliemae/ds-icons";
|
|
6
|
+
import { uid } from "uid";
|
|
6
7
|
import {
|
|
7
8
|
StyledWrapper,
|
|
8
9
|
StyledColoredBubble,
|
|
@@ -18,7 +19,11 @@ import { ChatBubbleArrow } from "./ChatBubbleArrow.js";
|
|
|
18
19
|
import { ChatBubbleDataTestIds } from "./ChatBubbleDataTestIds.js";
|
|
19
20
|
import { DSChatBubbleName } from "./DSChatBubbleDefinitions.js";
|
|
20
21
|
const ChatBubble = (props) => {
|
|
21
|
-
const
|
|
22
|
+
const defaultPropsIncludingInstanciatedValues = React2.useMemo(() => {
|
|
23
|
+
const dsId2 = props.dsId || `ds-chat-bubble-${uid(9)}`;
|
|
24
|
+
return { ...defaultBubbleProps, dsId: dsId2 };
|
|
25
|
+
}, [props.dsId]);
|
|
26
|
+
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsIncludingInstanciatedValues);
|
|
22
27
|
useValidateTypescriptPropTypes(propsWithDefault, BubblesPropTypes, DSChatBubbleName);
|
|
23
28
|
const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;
|
|
24
29
|
const bodyParts = React2.useMemo(() => typeof body === "string" ? body.split("\n") : [body], [body]);
|
|
@@ -40,7 +45,7 @@ const ChatBubble = (props) => {
|
|
|
40
45
|
item,
|
|
41
46
|
index < bodyParts.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
|
|
42
47
|
] }, `${item}-${dsId}`)) }),
|
|
43
|
-
/* @__PURE__ */ jsx(ChatBubbleArrow, { type })
|
|
48
|
+
/* @__PURE__ */ jsx(ChatBubbleArrow, { type, dsId })
|
|
44
49
|
] }),
|
|
45
50
|
errorMessage ? /* @__PURE__ */ jsxs(StyleErrorMessage, { "data-testid": `chat-bubble-error-message-${dsId}`, p: "xxs", gutter: "xxs", cols: [1, "auto"], children: [
|
|
46
51
|
/* @__PURE__ */ jsx("span", { children: errorMessage }),
|
|
@@ -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 {\n StyledWrapper,\n StyledColoredBubble,\n StyledTitleBubble,\n StyledTitleLeftBubble,\n StyledTitleRightBubble,\n StyleBodyWrapper,\n StyleErrorMessage,\n StyleHelpMessage,\n} from './styled.js';\nimport { BubblesPropTypes, type DSChatBubbleT, defaultBubbleProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nimport { DSChatBubbleName } from './DSChatBubbleDefinitions.js';\n\nconst ChatBubble: React.ComponentType<DSChatBubbleT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
6
|
-
"names": ["React"]
|
|
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 { 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 { BubblesPropTypes, type DSChatBubbleT, defaultBubbleProps } from './react-desc-prop-types.js';\nimport { ChatBubbleArrow } from './ChatBubbleArrow.js';\nimport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nimport { DSChatBubbleName } from './DSChatBubbleDefinitions.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 { ...defaultBubbleProps, dsId };\n }, [props.dsId]);\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsIncludingInstanciatedValues);\n useValidateTypescriptPropTypes(propsWithDefault, BubblesPropTypes, 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 data-testid={`${ChatBubbleDataTestIds.BUBBLE}-${dsId}`}>\n <StyledColoredBubble type={type}>\n <StyledTitleBubble cols={['1fr', 'auto']} gutter=\"xs\" alignItems=\"flex-end\" className=\"sr-only\">\n <StyledTitleLeftBubble alignItems=\"center\" data-testid={`${ChatBubbleDataTestIds.BUBBLE_TITLE}-${dsId}`}>\n {title}\n </StyledTitleLeftBubble>\n <StyledTitleRightBubble\n alignItems=\"center\"\n type={type}\n data-testid={`${ChatBubbleDataTestIds.BUBBLE_TIME}-${dsId}`}\n >\n {time}\n </StyledTitleRightBubble>\n </StyledTitleBubble>\n <StyleBodyWrapper data-testid={`chat-bubble-body-${dsId}`}>\n {bodyParts.map((item, index) => (\n <React.Fragment key={`${item}-${dsId}`}>\n {item}\n {index < bodyParts.length - 1 ? <br /> : null}\n </React.Fragment>\n ))}\n </StyleBodyWrapper>\n <ChatBubbleArrow type={type} dsId={dsId} />\n </StyledColoredBubble>\n {errorMessage ? (\n <StyleErrorMessage data-testid={`chat-bubble-error-message-${dsId}`} p=\"xxs\" gutter=\"xxs\" cols={[1, 'auto']}>\n <span>{errorMessage}</span>\n <WarningCircleFill />\n </StyleErrorMessage>\n ) : null}\n {helpMessage ? (\n <StyleHelpMessage data-testid={`chat-bubble-help-message-${dsId}`} p=\"xxs\" gutter=\"xxs\" cols={[1, 'auto']}>\n <span>{helpMessage}</span>\n </StyleHelpMessage>\n ) : null}\n </StyledWrapper>\n );\n};\n\nChatBubble.propTypes = BubblesPropTypes;\nChatBubble.displayName = DSChatBubbleName;\nconst ChatBubbleWithSchema = describe(ChatBubble);\nChatBubbleWithSchema.propTypes = BubblesPropTypes;\n\nexport { ChatBubble, ChatBubbleWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgCf,SACE,KADF;AAhCR,OAAOA,YAAW;AAClB,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,yBAAyB;AAClC,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAsC,0BAA0B;AACzE,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AAEjC,MAAM,aAAuD,CAAC,UAAU;AACtE,QAAM,0CAA0CA,OAAM,QAAQ,MAAM;AAClE,UAAMC,QAAO,MAAM,QAAQ,kBAAkB,IAAI,CAAC;AAClD,WAAO,EAAE,GAAG,oBAAoB,MAAAA,MAAK;AAAA,EACvC,GAAG,CAAC,MAAM,IAAI,CAAC;AACf,QAAM,mBAAmB,6BAA6B,OAAO,uCAAuC;AACpG,iCAA+B,kBAAkB,kBAAkB,gBAAgB;AAEnF,QAAM,EAAE,MAAM,MAAM,OAAO,MAAM,MAAM,cAAc,YAAY,IAAI;AACrE,QAAM,YAAYD,OAAM,QAAQ,MAAO,OAAO,SAAS,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,GAAI,CAAC,IAAI,CAAC;AACpG,SACE,qBAAC,iBAAc,eAAa,GAAG,sBAAsB,UAAU,QAC7D;AAAA,yBAAC,uBAAoB,MACnB;AAAA,2BAAC,qBAAkB,MAAM,CAAC,OAAO,MAAM,GAAG,QAAO,MAAK,YAAW,YAAW,WAAU,WACpF;AAAA,4BAAC,yBAAsB,YAAW,UAAS,eAAa,GAAG,sBAAsB,gBAAgB,QAC9F,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX;AAAA,YACA,eAAa,GAAG,sBAAsB,eAAe;AAAA,YAEpD;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MACA,oBAAC,oBAAiB,eAAa,oBAAoB,QAChD,oBAAU,IAAI,CAAC,MAAM,UACpB,qBAACA,OAAM,UAAN,EACE;AAAA;AAAA,QACA,QAAQ,UAAU,SAAS,IAAI,oBAAC,QAAG,IAAK;AAAA,WAFtB,GAAG,QAAQ,MAGhC,CACD,GACH;AAAA,MACA,oBAAC,mBAAgB,MAAY,MAAY;AAAA,OAC3C;AAAA,IACC,eACC,qBAAC,qBAAkB,eAAa,6BAA6B,QAAQ,GAAE,OAAM,QAAO,OAAM,MAAM,CAAC,GAAG,MAAM,GACxG;AAAA,0BAAC,UAAM,wBAAa;AAAA,MACpB,oBAAC,qBAAkB;AAAA,OACrB,IACE;AAAA,IACH,cACC,oBAAC,oBAAiB,eAAa,4BAA4B,QAAQ,GAAE,OAAM,QAAO,OAAM,MAAM,CAAC,GAAG,MAAM,GACtG,8BAAC,UAAM,uBAAY,GACrB,IACE;AAAA,KACN;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
|
|
6
|
+
"names": ["React", "dsId"]
|
|
7
7
|
}
|
|
@@ -3,25 +3,50 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { StyledBubbleArrow } from "./styled.js";
|
|
4
4
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { BUBBLE_TYPES, propsArrowBubble } from "./react-desc-prop-types.js";
|
|
6
|
-
const ChatBubbleArrow = ({ type }) => /* @__PURE__ */ jsx(StyledBubbleArrow, { children: type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsxs("svg", { width: "15px", height: "14px", viewBox: "0 0 15 14", children: [
|
|
6
|
+
const ChatBubbleArrow = ({ type, dsId }) => /* @__PURE__ */ jsx(StyledBubbleArrow, { children: type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsxs("svg", { width: "15px", height: "14px", viewBox: "0 0 15 14", children: [
|
|
7
7
|
/* @__PURE__ */ jsxs("defs", { children: [
|
|
8
|
-
/* @__PURE__ */ jsx(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
|
|
8
|
+
/* @__PURE__ */ jsx(
|
|
9
|
+
"path",
|
|
10
|
+
{
|
|
11
|
+
id: `arrow-svg-path-${dsId}`,
|
|
12
|
+
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"
|
|
13
|
+
}
|
|
14
|
+
),
|
|
15
|
+
/* @__PURE__ */ jsxs(
|
|
16
|
+
"filter",
|
|
17
|
+
{
|
|
18
|
+
id: `arrow-svg-filter-${dsId}`,
|
|
19
|
+
x: "-55.6%",
|
|
20
|
+
y: "-50.0%",
|
|
21
|
+
width: "211.1%",
|
|
22
|
+
height: "225.0%",
|
|
23
|
+
filterUnits: "objectBoundingBox",
|
|
24
|
+
children: [
|
|
25
|
+
/* @__PURE__ */ jsx("feOffset", { dx: "2.3", dy: "1.2", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
|
|
26
|
+
/* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "1.5", in: "shadowOffsetOuter1", result: "shadowBlurOuter1" }),
|
|
27
|
+
/* @__PURE__ */ jsx(
|
|
28
|
+
"feColorMatrix",
|
|
29
|
+
{
|
|
30
|
+
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",
|
|
31
|
+
type: "matrix",
|
|
32
|
+
in: "shadowBlurOuter1"
|
|
33
|
+
}
|
|
34
|
+
)
|
|
35
|
+
]
|
|
36
|
+
}
|
|
37
|
+
)
|
|
21
38
|
] }),
|
|
22
39
|
/* @__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: [
|
|
23
|
-
/* @__PURE__ */ jsx(
|
|
24
|
-
|
|
40
|
+
/* @__PURE__ */ jsx(
|
|
41
|
+
"use",
|
|
42
|
+
{
|
|
43
|
+
fill: "black",
|
|
44
|
+
fillOpacity: "1",
|
|
45
|
+
filter: `url(#arrow-svg-filter-${dsId})`,
|
|
46
|
+
xlinkHref: `#arrow-svg-path-${dsId}`
|
|
47
|
+
}
|
|
48
|
+
),
|
|
49
|
+
/* @__PURE__ */ jsx("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: `#arrow-svg-path-${dsId}` })
|
|
25
50
|
] }) })
|
|
26
51
|
] }) : /* @__PURE__ */ jsx("svg", { width: "9px", height: "8px", viewBox: "0 0 9 8", children: /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx(
|
|
27
52
|
"path",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ChatBubbleArrow.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledBubbleArrow } from './styled.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUBBLE_TYPES, type DSChatBubbleT, propsArrowBubble } from './react-desc-prop-types.js';\n\nexport const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type'>> = ({ type }) => (\n <StyledBubbleArrow>\n {type === BUBBLE_TYPES.RECIPIENT ? (\n <svg width=\"15px\" height=\"14px\" viewBox=\"0 0 15 14\">\n <defs>\n <path
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACUb,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledBubbleArrow } from './styled.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { BUBBLE_TYPES, type DSChatBubbleT, propsArrowBubble } from './react-desc-prop-types.js';\n\nexport const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type' | 'dsId'>> = ({ type, dsId }) => (\n <StyledBubbleArrow>\n {type === BUBBLE_TYPES.RECIPIENT ? (\n <svg width=\"15px\" height=\"14px\" viewBox=\"0 0 15 14\">\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=\"9px\" height=\"8px\" viewBox=\"0 0 9 8\">\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 </StyledBubbleArrow>\n);\n\nChatBubbleArrow.propTypes = propsArrowBubble;\nconst ChatBubbleArrowWithSchema = describe(ChatBubbleArrow);\nChatBubbleArrowWithSchema.propTypes = propsArrowBubble;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACUb,cAIA,YAJA;AATV,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,cAAkC,wBAAwB;AAE5D,MAAM,kBAAmF,CAAC,EAAE,MAAM,KAAK,MAC5G,oBAAC,qBACE,mBAAS,aAAa,YACrB,qBAAC,SAAI,OAAM,QAAO,QAAO,QAAO,SAAQ,aACtC;AAAA,uBAAC,UACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,kBAAkB;AAAA,QACtB,GAAE;AAAA;AAAA,IACH;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,oBAAoB;AAAA,QACxB,GAAE;AAAA,QACF,GAAE;AAAA,QACF,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAY;AAAA,QAEZ;AAAA,8BAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,UACzE,oBAAC,oBAAe,cAAa,OAAM,IAAG,sBAAqB,QAAO,oBAAmB;AAAA,UACrF;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cAIP,MAAK;AAAA,cACL,IAAG;AAAA;AAAA,UACJ;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAAA,EACA,oBAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD,+BAAC,OAAE,WAAU,+EACX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,QAAQ,yBAAyB;AAAA,QACjC,WAAW,mBAAmB;AAAA;AAAA,IAC/B;AAAA,IACD,oBAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAW,mBAAmB,QAAQ;AAAA,KAC/E,GACF;AAAA,GACF,IAEA,oBAAC,SAAI,OAAM,OAAM,QAAO,OAAM,SAAQ,WACpC,8BAAC,OAAE,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WACpD;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA;AACN,GACH,GACF,GAEJ;AAGF,gBAAgB,YAAY;AAC5B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,7 +18,7 @@ const defaultBubbleProps = {
|
|
|
18
18
|
helpMessage: ""
|
|
19
19
|
};
|
|
20
20
|
const BubblesPropTypes = {
|
|
21
|
-
dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Unique id for bubble").defaultValue(
|
|
21
|
+
dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Unique id for bubble").defaultValue("a randomly generated (on mount) uid"),
|
|
22
22
|
type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.description("Define bubble type ").defaultValue(defaultBubbleProps.type),
|
|
23
23
|
title: PropTypes.string.description("Title of the bubble").defaultValue(defaultBubbleProps.title),
|
|
24
24
|
time: PropTypes.string.isRequired.description("Time of the bubble").defaultValue(defaultBubbleProps.title),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport const BUBBLE_TYPES = {\n SENDER: 'SENDER',\n RECIPIENT: 'RECIPIENT',\n DELIMITER: 'DELIMITER',\n SYSTEM: 'SYSTEM',\n};\n\nexport declare namespace DSChatBubbleT {\n export interface Props {\n dsId: string | number;\n type: BubbleTypesValues;\n title?: string;\n body: string;\n time: string;\n errorMessage: string | React.ReactChild;\n helpMessage: string | React.ReactChild;\n onClick: (id: string | number) => void;\n }\n\n export type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;\n export type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];\n}\n\nexport const defaultBubbleProps: DSChatBubbleT.Props = {\n dsId: '',\n type: BUBBLE_TYPES.SENDER,\n time: '',\n body: '',\n onClick: noop,\n errorMessage: '',\n helpMessage: '',\n};\n\nexport const BubblesPropTypes = {\n dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .description('Unique id for bubble')\n .defaultValue(
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAK1B,SAAS,QAA6B,OAAgB;AAAC;AAChD,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AACV;AAkBO,MAAM,qBAA0C;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AACf;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,sBAAsB,EAClC,aAAa,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport const BUBBLE_TYPES = {\n SENDER: 'SENDER',\n RECIPIENT: 'RECIPIENT',\n DELIMITER: 'DELIMITER',\n SYSTEM: 'SYSTEM',\n};\n\nexport declare namespace DSChatBubbleT {\n export interface Props {\n dsId: string | number;\n type: BubbleTypesValues;\n title?: string;\n body: string;\n time: string;\n errorMessage: string | React.ReactChild;\n helpMessage: string | React.ReactChild;\n onClick: (id: string | number) => void;\n }\n\n export type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;\n export type BubbleTypesValues = (typeof BUBBLE_TYPES)[BubbleTypesKeys];\n}\n\nexport const defaultBubbleProps: DSChatBubbleT.Props = {\n dsId: '',\n type: BUBBLE_TYPES.SENDER,\n time: '',\n body: '',\n onClick: noop,\n errorMessage: '',\n helpMessage: '',\n};\n\nexport const BubblesPropTypes = {\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(defaultBubbleProps.type),\n title: PropTypes.string.description('Title of the bubble').defaultValue(defaultBubbleProps.title),\n time: PropTypes.string.isRequired.description('Time of the bubble').defaultValue(defaultBubbleProps.title),\n body: PropTypes.oneOfType([PropTypes.string, PropTypes.element])\n .isRequired.description('Bubble content')\n .defaultValue(defaultBubbleProps.body),\n onClick: PropTypes.func.description('Callback when the bubble is tapped').defaultValue(defaultBubbleProps.onClick),\n errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element])\n .description('Error message to display at bottom of the bubble')\n .defaultValue(defaultBubbleProps.onClick),\n helpMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element])\n .description('Help message to display at bottom of the bubble')\n .defaultValue(defaultBubbleProps.onClick),\n} as WeakValidationMap<unknown>;\n\nexport const propsArrowBubble = {\n type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.defaultValue(defaultBubbleProps.type),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAK1B,SAAS,QAA6B,OAAgB;AAAC;AAChD,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AACV;AAkBO,MAAM,qBAA0C;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AACf;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,sBAAsB,EAClC,aAAa,qCAAqC;AAAA,EACrD,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,aAAa,MAAM,CAAC,EAChE,WAAW,YAAY,qBAAqB,EAC5C,aAAa,mBAAmB,IAAI;AAAA,EACvC,OAAO,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,mBAAmB,KAAK;AAAA,EAChG,MAAM,UAAU,OAAO,WAAW,YAAY,oBAAoB,EAAE,aAAa,mBAAmB,KAAK;AAAA,EACzG,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAC5D,WAAW,YAAY,gBAAgB,EACvC,aAAa,mBAAmB,IAAI;AAAA,EACvC,SAAS,UAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,mBAAmB,OAAO;AAAA,EACjH,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EACpE,YAAY,kDAAkD,EAC9D,aAAa,mBAAmB,OAAO;AAAA,EAC1C,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EACnE,YAAY,iDAAiD,EAC7D,aAAa,mBAAmB,OAAO;AAC5C;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,aAAa,MAAM,CAAC,EAAE,WAAW,aAAa,mBAAmB,IAAI;AACtH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +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<Pick<DSChatBubbleT.Props, 'type'>>;
|
|
3
|
+
export declare const ChatBubbleArrow: React.ComponentType<Pick<DSChatBubbleT.Props, 'type' | 'dsId'>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chat-bubble",
|
|
3
|
-
"version": "3.18.0
|
|
3
|
+
"version": "3.18.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chat",
|
|
6
6
|
"files": [
|
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
"typeSafety": false
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@elliemae/ds-grid": "3.18.0
|
|
55
|
-
"@elliemae/ds-
|
|
56
|
-
"@elliemae/ds-
|
|
57
|
-
"@elliemae/ds-
|
|
54
|
+
"@elliemae/ds-grid": "3.18.0",
|
|
55
|
+
"@elliemae/ds-props-helpers": "3.18.0",
|
|
56
|
+
"@elliemae/ds-system": "3.18.0",
|
|
57
|
+
"@elliemae/ds-icons": "3.18.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@testing-library/jest-dom": "~5.16.5",
|