@elliemae/ds-chat-bubble 3.15.0 → 3.16.0-next.10
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 +9 -9
- package/dist/cjs/ChatBubble.js.map +2 -2
- package/dist/cjs/ChatBubbleArrow.js +4 -4
- package/dist/cjs/ChatBubbleArrow.js.map +2 -2
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/package.json +4 -0
- package/dist/cjs/react-desc-prop-types.js +10 -10
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +1 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/esm/ChatBubble.js +6 -6
- package/dist/esm/ChatBubble.js.map +1 -1
- package/dist/esm/ChatBubbleArrow.js +3 -3
- package/dist/esm/ChatBubbleArrow.js.map +1 -1
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +4 -0
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/styled.js +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/types/ChatBubble.d.ts +2 -2
- package/dist/types/ChatBubbleArrow.d.ts +1 -1
- package/dist/types/index.d.ts +4 -4
- package/dist/types/styled.d.ts +3 -3
- package/package.json +7 -6
package/dist/cjs/ChatBubble.js
CHANGED
|
@@ -31,16 +31,16 @@ module.exports = __toCommonJS(ChatBubble_exports);
|
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_react = __toESM(require("react"));
|
|
34
|
-
var
|
|
34
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
35
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
36
|
-
var import_styled = require("./styled");
|
|
37
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
38
|
-
var import_ChatBubbleArrow = require("./ChatBubbleArrow");
|
|
39
|
-
var import_ChatBubbleDataTestIds = require("./ChatBubbleDataTestIds");
|
|
40
|
-
var import_DSChatBubbleDefinitions = require("./DSChatBubbleDefinitions");
|
|
36
|
+
var import_styled = require("./styled.js");
|
|
37
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
38
|
+
var import_ChatBubbleArrow = require("./ChatBubbleArrow.js");
|
|
39
|
+
var import_ChatBubbleDataTestIds = require("./ChatBubbleDataTestIds.js");
|
|
40
|
+
var import_DSChatBubbleDefinitions = require("./DSChatBubbleDefinitions.js");
|
|
41
41
|
const ChatBubble = (props) => {
|
|
42
|
-
const propsWithDefault = (0,
|
|
43
|
-
(0,
|
|
42
|
+
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultBubbleProps);
|
|
43
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.BubblesPropTypes, import_DSChatBubbleDefinitions.DSChatBubbleName);
|
|
44
44
|
const { dsId, type, title, time, body, errorMessage, helpMessage } = propsWithDefault;
|
|
45
45
|
const bodyParts = import_react.default.useMemo(() => typeof body === "string" ? body.split("\n") : [body], [body]);
|
|
46
46
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapper, { "data-testid": `${import_ChatBubbleDataTestIds.ChatBubbleDataTestIds.BUBBLE}-${dsId}`, children: [
|
|
@@ -72,6 +72,6 @@ const ChatBubble = (props) => {
|
|
|
72
72
|
};
|
|
73
73
|
ChatBubble.propTypes = import_react_desc_prop_types.BubblesPropTypes;
|
|
74
74
|
ChatBubble.displayName = import_DSChatBubbleDefinitions.DSChatBubbleName;
|
|
75
|
-
const ChatBubbleWithSchema = (0,
|
|
75
|
+
const ChatBubbleWithSchema = (0, import_ds_props_helpers.describe)(ChatBubble);
|
|
76
76
|
ChatBubbleWithSchema.propTypes = import_react_desc_prop_types.BubblesPropTypes;
|
|
77
77
|
//# sourceMappingURL=ChatBubble.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ChatBubble.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Bf;AA3BR,mBAAkB;AAClB,
|
|
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, defaultBubbleProps);\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} />\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;AD2Bf;AA3BR,mBAAkB;AAClB,8BAAuF;AACvF,sBAAkC;AAClC,oBASO;AACP,mCAAyE;AACzE,6BAAgC;AAChC,mCAAsC;AACtC,qCAAiC;AAEjC,MAAM,aAAuD,CAAC,UAAU;AACtE,QAAM,uBAAmB,sDAA6B,OAAO,+CAAkB;AAC/E,8DAA+B,kBAAkB,+CAAkB,+CAAgB;AAEnF,QAAM,EAAE,MAAM,MAAM,OAAO,MAAM,MAAM,cAAc,YAAY,IAAI;AACrE,QAAM,YAAY,aAAAA,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;AAAA,OAC/B;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
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -29,9 +29,9 @@ __export(ChatBubbleArrow_exports, {
|
|
|
29
29
|
module.exports = __toCommonJS(ChatBubbleArrow_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
-
var import_styled = require("./styled");
|
|
33
|
-
var
|
|
34
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
32
|
+
var import_styled = require("./styled.js");
|
|
33
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
34
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
35
35
|
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: [
|
|
36
36
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
|
|
37
37
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -67,6 +67,6 @@ const ChatBubbleArrow = ({ type }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx
|
|
|
67
67
|
}
|
|
68
68
|
) }) }) });
|
|
69
69
|
ChatBubbleArrow.propTypes = import_react_desc_prop_types.propsArrowBubble;
|
|
70
|
-
const ChatBubbleArrowWithSchema = (0,
|
|
70
|
+
const ChatBubbleArrowWithSchema = (0, import_ds_props_helpers.describe)(ChatBubbleArrow);
|
|
71
71
|
ChatBubbleArrowWithSchema.propTypes = import_react_desc_prop_types.propsArrowBubble;
|
|
72
72
|
//# sourceMappingURL=ChatBubbleArrow.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ChatBubbleArrow.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { StyledBubbleArrow } from './styled';\nimport { describe } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUb;AATV,oBAAkC;AAClC,
|
|
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\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 id=\"path-chat-bubble\"\n ></path>\n <filter x=\"-55.6%\" y=\"-50.0%\" width=\"211.1%\" height=\"225.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\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 id=\"[DSK]-Visual-Design\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <g id=\"Path-Copy\" transform=\"translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) \">\n <use fill=\"black\" fillOpacity=\"1\" filter=\"url(#filter-2)\" xlinkHref=\"#path-chat-bubble\"></use>\n <use fill=\"#FFFFFF\" fillRule=\"evenodd\" xlinkHref=\"#path-chat-bubble\"></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 id=\"Path\"\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,kBAA0E,CAAC,EAAE,KAAK,MAC7F,4CAAC,mCACE,mBAAS,0CAAa,YACrB,6CAAC,SAAI,OAAM,QAAO,QAAO,QAAO,SAAQ,aACtC;AAAA,+CAAC,UACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,IAAG;AAAA;AAAA,IACJ;AAAA,IACD,6CAAC,YAAO,GAAE,UAAS,GAAE,UAAS,OAAM,UAAS,QAAO,UAAS,aAAY,qBAAoB,IAAG,YAC9F;AAAA,kDAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,MACzE,4CAAC,oBAAe,cAAa,OAAM,IAAG,sBAAqB,QAAO,oBAAmB;AAAA,MACrF;AAAA,QAAC;AAAA;AAAA,UACC,QAAO;AAAA,UAIP,MAAK;AAAA,UACL,IAAG;AAAA;AAAA,MACJ;AAAA,OACH;AAAA,KACF;AAAA,EACA,4CAAC,OAAE,IAAG,uBAAsB,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WAC7E,uDAAC,OAAE,IAAG,aAAY,WAAU,+EAC1B;AAAA,gDAAC,SAAI,MAAK,SAAQ,aAAY,KAAI,QAAO,kBAAiB,WAAU,qBAAoB;AAAA,IACxF,4CAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAU,qBAAoB;AAAA,KACvE,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,IAAG;AAAA,IACH,MAAK;AAAA;AACN,GACH,GACF,GAEJ;AAGF,gBAAgB,YAAY;AAC5B,MAAM,gCAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -32,8 +32,8 @@ __export(src_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(src_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
-
var import_ChatBubble = require("./ChatBubble");
|
|
36
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
37
|
-
var import_ChatBubbleDataTestIds = require("./ChatBubbleDataTestIds");
|
|
38
|
-
__reExport(src_exports, require("./styled"), module.exports);
|
|
35
|
+
var import_ChatBubble = require("./ChatBubble.js");
|
|
36
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
37
|
+
var import_ChatBubbleDataTestIds = require("./ChatBubbleDataTestIds.js");
|
|
38
|
+
__reExport(src_exports, require("./styled.js"), module.exports);
|
|
39
39
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble';\nexport { BUBBLE_TYPES, type DSChatBubbleT } from './react-desc-prop-types';\nexport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds';\nexport * from './styled';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;AACjD,mCAAiD;AACjD,mCAAsC;AACtC,wBAAc,
|
|
4
|
+
"sourcesContent": ["export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble.js';\nexport { BUBBLE_TYPES, type DSChatBubbleT } from './react-desc-prop-types.js';\nexport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nexport * from './styled.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;AACjD,mCAAiD;AACjD,mCAAsC;AACtC,wBAAc,wBAHd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,7 +31,7 @@ __export(react_desc_prop_types_exports, {
|
|
|
31
31
|
});
|
|
32
32
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
33
33
|
var React = __toESM(require("react"));
|
|
34
|
-
var
|
|
34
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
35
|
function noop(..._args) {
|
|
36
36
|
}
|
|
37
37
|
const BUBBLE_TYPES = {
|
|
@@ -50,16 +50,16 @@ const defaultBubbleProps = {
|
|
|
50
50
|
helpMessage: ""
|
|
51
51
|
};
|
|
52
52
|
const BubblesPropTypes = {
|
|
53
|
-
dsId:
|
|
54
|
-
type:
|
|
55
|
-
title:
|
|
56
|
-
time:
|
|
57
|
-
body:
|
|
58
|
-
onClick:
|
|
59
|
-
errorMessage:
|
|
60
|
-
helpMessage:
|
|
53
|
+
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(defaultBubbleProps.dsId),
|
|
54
|
+
type: import_ds_props_helpers.PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.description("Define bubble type ").defaultValue(defaultBubbleProps.type),
|
|
55
|
+
title: import_ds_props_helpers.PropTypes.string.description("Title of the bubble").defaultValue(defaultBubbleProps.title),
|
|
56
|
+
time: import_ds_props_helpers.PropTypes.string.isRequired.description("Time of the bubble").defaultValue(defaultBubbleProps.title),
|
|
57
|
+
body: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.element]).isRequired.description("Bubble content").defaultValue(defaultBubbleProps.body),
|
|
58
|
+
onClick: import_ds_props_helpers.PropTypes.func.description("Callback when the bubble is tapped").defaultValue(defaultBubbleProps.onClick),
|
|
59
|
+
errorMessage: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.element]).description("Error message to display at bottom of the bubble").defaultValue(defaultBubbleProps.onClick),
|
|
60
|
+
helpMessage: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.element]).description("Help message to display at bottom of the bubble").defaultValue(defaultBubbleProps.onClick)
|
|
61
61
|
};
|
|
62
62
|
const propsArrowBubble = {
|
|
63
|
-
type:
|
|
63
|
+
type: import_ds_props_helpers.PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.defaultValue(defaultBubbleProps.type)
|
|
64
64
|
};
|
|
65
65
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
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(defaultBubbleProps.dsId),\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,mBAAmB,IAAI;AAAA,EACvC,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/cjs/styled.js
CHANGED
|
@@ -38,7 +38,7 @@ module.exports = __toCommonJS(styled_exports);
|
|
|
38
38
|
var React = __toESM(require("react"));
|
|
39
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
40
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
41
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
41
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
42
42
|
const StyledWrapper = import_ds_system.styled.div`
|
|
43
43
|
min-width: 224px;
|
|
44
44
|
border-radius: 10px;
|
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 } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types';\n\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled(Grid)`\n font-size: 13px;\n font-weight: 600;\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n font-size: 13px;\n font-weight: 400;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n font-size: 13px;\n font-weight: 400;\n line-height: 15px;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n font-size: 12px;\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: 15px;\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 .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n font-size: 12px;\n line-height: 15px;\n color: ${(props) => props.theme.colors.neutral[500]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n display: block;\n content: '';\n position: absolute;\n bottom: 10px;\n height: 15px;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -9px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -11px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types.js';\n\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled(Grid)`\n font-size: 13px;\n font-weight: 600;\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n font-size: 13px;\n font-weight: 400;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n font-size: 13px;\n font-weight: 400;\n line-height: 15px;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n font-size: 12px;\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: 15px;\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 .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n font-size: 12px;\n line-height: 15px;\n color: ${(props) => props.theme.colors.neutral[500]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n display: block;\n content: '';\n position: absolute;\n bottom: 10px;\n height: 15px;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -9px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -11px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,mCAA6B;AAGtB,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7B,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAM,4BAAwB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAIzC,MAAM,6BAAyB,yBAAO,mBAAI;AAAA;AAAA;AAAA,WAGtC,CAAC,UAAW,MAAM,SAAS,0CAAa,SAAS,SAAS;AAAA;AAG9D,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhC,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA,iBAGvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WACnC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMpC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,aAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,uBAAmB,yBAAO,iBAAiB;AAAA;AAAA;AAAA,WAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,YAErC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,aAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAK3C,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtC,CAAC,UACD,MAAM,SAAS,0CAAa,SACxB;AAAA,4BACoB,MAAM,MAAM,OAAO,MAAM;AAAA,sBAC/B,MAAM,MAAM,OAAO,MAAM;AAAA,iBAC9B,MAAM,MAAM,OAAO,QAAQ;AAAA,UAClC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASzC;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,UAElC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/ChatBubble.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React2 from "react";
|
|
4
|
-
import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-
|
|
4
|
+
import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { WarningCircleFill } from "@elliemae/ds-icons";
|
|
6
6
|
import {
|
|
7
7
|
StyledWrapper,
|
|
@@ -12,11 +12,11 @@ import {
|
|
|
12
12
|
StyleBodyWrapper,
|
|
13
13
|
StyleErrorMessage,
|
|
14
14
|
StyleHelpMessage
|
|
15
|
-
} from "./styled";
|
|
16
|
-
import { BubblesPropTypes, defaultBubbleProps } from "./react-desc-prop-types";
|
|
17
|
-
import { ChatBubbleArrow } from "./ChatBubbleArrow";
|
|
18
|
-
import { ChatBubbleDataTestIds } from "./ChatBubbleDataTestIds";
|
|
19
|
-
import { DSChatBubbleName } from "./DSChatBubbleDefinitions";
|
|
15
|
+
} from "./styled.js";
|
|
16
|
+
import { BubblesPropTypes, defaultBubbleProps } from "./react-desc-prop-types.js";
|
|
17
|
+
import { ChatBubbleArrow } from "./ChatBubbleArrow.js";
|
|
18
|
+
import { ChatBubbleDataTestIds } from "./ChatBubbleDataTestIds.js";
|
|
19
|
+
import { DSChatBubbleName } from "./DSChatBubbleDefinitions.js";
|
|
20
20
|
const ChatBubble = (props) => {
|
|
21
21
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultBubbleProps);
|
|
22
22
|
useValidateTypescriptPropTypes(propsWithDefault, BubblesPropTypes, DSChatBubbleName);
|
|
@@ -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-
|
|
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, defaultBubbleProps);\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} />\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
5
|
"mappings": "AAAA,YAAY,WAAW;AC2Bf,SACE,KADF;AA3BR,OAAOA,YAAW;AAClB,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,yBAAyB;AAClC;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,mBAAmB,6BAA6B,OAAO,kBAAkB;AAC/E,iCAA+B,kBAAkB,kBAAkB,gBAAgB;AAEnF,QAAM,EAAE,MAAM,MAAM,OAAO,MAAM,MAAM,cAAc,YAAY,IAAI;AACrE,QAAM,YAAYA,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;AAAA,OAC/B;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
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { StyledBubbleArrow } from "./styled";
|
|
4
|
-
import { describe } from "@elliemae/ds-
|
|
5
|
-
import { BUBBLE_TYPES, propsArrowBubble } from "./react-desc-prop-types";
|
|
3
|
+
import { StyledBubbleArrow } from "./styled.js";
|
|
4
|
+
import { describe } from "@elliemae/ds-props-helpers";
|
|
5
|
+
import { BUBBLE_TYPES, propsArrowBubble } from "./react-desc-prop-types.js";
|
|
6
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: [
|
|
7
7
|
/* @__PURE__ */ jsxs("defs", { children: [
|
|
8
8
|
/* @__PURE__ */ jsx(
|
|
@@ -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';\nimport { describe } from '@elliemae/ds-
|
|
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\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 id=\"path-chat-bubble\"\n ></path>\n <filter x=\"-55.6%\" y=\"-50.0%\" width=\"211.1%\" height=\"225.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\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 id=\"[DSK]-Visual-Design\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n <g id=\"Path-Copy\" transform=\"translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) \">\n <use fill=\"black\" fillOpacity=\"1\" filter=\"url(#filter-2)\" xlinkHref=\"#path-chat-bubble\"></use>\n <use fill=\"#FFFFFF\" fillRule=\"evenodd\" xlinkHref=\"#path-chat-bubble\"></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 id=\"Path\"\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
5
|
"mappings": "AAAA,YAAY,WAAW;ACUb,cAIA,YAJA;AATV,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,cAAkC,wBAAwB;AAE5D,MAAM,kBAA0E,CAAC,EAAE,KAAK,MAC7F,oBAAC,qBACE,mBAAS,aAAa,YACrB,qBAAC,SAAI,OAAM,QAAO,QAAO,QAAO,SAAQ,aACtC;AAAA,uBAAC,UACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,IAAG;AAAA;AAAA,IACJ;AAAA,IACD,qBAAC,YAAO,GAAE,UAAS,GAAE,UAAS,OAAM,UAAS,QAAO,UAAS,aAAY,qBAAoB,IAAG,YAC9F;AAAA,0BAAC,cAAS,IAAG,OAAM,IAAG,OAAM,IAAG,eAAc,QAAO,sBAAqB;AAAA,MACzE,oBAAC,oBAAe,cAAa,OAAM,IAAG,sBAAqB,QAAO,oBAAmB;AAAA,MACrF;AAAA,QAAC;AAAA;AAAA,UACC,QAAO;AAAA,UAIP,MAAK;AAAA,UACL,IAAG;AAAA;AAAA,MACJ;AAAA,OACH;AAAA,KACF;AAAA,EACA,oBAAC,OAAE,IAAG,uBAAsB,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WAC7E,+BAAC,OAAE,IAAG,aAAY,WAAU,+EAC1B;AAAA,wBAAC,SAAI,MAAK,SAAQ,aAAY,KAAI,QAAO,kBAAiB,WAAU,qBAAoB;AAAA,IACxF,oBAAC,SAAI,MAAK,WAAU,UAAS,WAAU,WAAU,qBAAoB;AAAA,KACvE,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,IAAG;AAAA,IACH,MAAK;AAAA;AACN,GACH,GACF,GAEJ;AAGF,gBAAgB,YAAY;AAC5B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { ChatBubble, ChatBubbleWithSchema } from "./ChatBubble";
|
|
3
|
-
import { BUBBLE_TYPES } from "./react-desc-prop-types";
|
|
4
|
-
import { ChatBubbleDataTestIds } from "./ChatBubbleDataTestIds";
|
|
5
|
-
export * from "./styled";
|
|
2
|
+
import { ChatBubble, ChatBubbleWithSchema } from "./ChatBubble.js";
|
|
3
|
+
import { BUBBLE_TYPES } from "./react-desc-prop-types.js";
|
|
4
|
+
import { ChatBubbleDataTestIds } from "./ChatBubbleDataTestIds.js";
|
|
5
|
+
export * from "./styled.js";
|
|
6
6
|
export {
|
|
7
7
|
BUBBLE_TYPES,
|
|
8
8
|
ChatBubble,
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble';\nexport { BUBBLE_TYPES, type DSChatBubbleT } from './react-desc-prop-types';\nexport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds';\nexport * from './styled';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble.js';\nexport { BUBBLE_TYPES, type DSChatBubbleT } from './react-desc-prop-types.js';\nexport { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';\nexport * from './styled.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,4BAA4B;AACjD,SAAS,oBAAwC;AACjD,SAAS,6BAA6B;AACtC,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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-
|
|
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(defaultBubbleProps.dsId),\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
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,mBAAmB,IAAI;AAAA,EACvC,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
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
import { BUBBLE_TYPES } from "./react-desc-prop-types";
|
|
4
|
+
import { BUBBLE_TYPES } from "./react-desc-prop-types.js";
|
|
5
5
|
const StyledWrapper = styled.div`
|
|
6
6
|
min-width: 224px;
|
|
7
7
|
border-radius: 10px;
|
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 } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types';\n\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled(Grid)`\n font-size: 13px;\n font-weight: 600;\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n font-size: 13px;\n font-weight: 400;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n font-size: 13px;\n font-weight: 400;\n line-height: 15px;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n font-size: 12px;\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: 15px;\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 .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n font-size: 12px;\n line-height: 15px;\n color: ${(props) => props.theme.colors.neutral[500]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n display: block;\n content: '';\n position: absolute;\n bottom: 10px;\n height: 15px;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -9px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -11px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types.js';\n\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled(Grid)`\n font-size: 13px;\n font-weight: 600;\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n font-size: 13px;\n font-weight: 400;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n font-size: 13px;\n font-weight: 400;\n line-height: 15px;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n font-size: 12px;\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: 15px;\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 .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n font-size: 12px;\n line-height: 15px;\n color: ${(props) => props.theme.colors.neutral[500]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n display: block;\n content: '';\n position: absolute;\n bottom: 10px;\n height: 15px;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -9px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -11px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAGtB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7B,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAM,wBAAwB,OAAO,IAAI;AAAA;AAAA;AAAA;AAIzC,MAAM,yBAAyB,OAAO,IAAI;AAAA;AAAA;AAAA,WAGtC,CAAC,UAAW,MAAM,SAAS,aAAa,SAAS,SAAS;AAAA;AAG9D,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhC,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA,iBAGvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WACnC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMpC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,aAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,mBAAmB,OAAO,iBAAiB;AAAA;AAAA;AAAA,WAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,YAErC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,aAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA;AAK3C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtC,CAAC,UACD,MAAM,SAAS,aAAa,SACxB;AAAA,4BACoB,MAAM,MAAM,OAAO,MAAM;AAAA,sBAC/B,MAAM,MAAM,OAAO,MAAM;AAAA,iBAC9B,MAAM,MAAM,OAAO,QAAQ;AAAA,UAClC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASzC;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,UAElC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type DSChatBubbleT } from './react-desc-prop-types';
|
|
2
|
+
import { type DSChatBubbleT } from './react-desc-prop-types.js';
|
|
3
3
|
declare const ChatBubble: React.ComponentType<DSChatBubbleT.Props>;
|
|
4
|
-
declare const ChatBubbleWithSchema: import("@elliemae/ds-
|
|
4
|
+
declare const ChatBubbleWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSChatBubbleT.Props>;
|
|
5
5
|
export { ChatBubble, ChatBubbleWithSchema };
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble';
|
|
2
|
-
export { BUBBLE_TYPES, type DSChatBubbleT } from './react-desc-prop-types';
|
|
3
|
-
export { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds';
|
|
4
|
-
export * from './styled';
|
|
1
|
+
export { ChatBubble, ChatBubbleWithSchema } from './ChatBubble.js';
|
|
2
|
+
export { BUBBLE_TYPES, type DSChatBubbleT } from './react-desc-prop-types.js';
|
|
3
|
+
export { ChatBubbleDataTestIds } from './ChatBubbleDataTestIds.js';
|
|
4
|
+
export * from './styled.js';
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const StyledWrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
|
3
|
-
export declare const StyledTitleBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object, never>;
|
|
4
|
-
export declare const StyledTitleLeftBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object, never>;
|
|
5
|
-
export declare const StyledTitleRightBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
3
|
+
export declare const StyledTitleBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object, never>;
|
|
4
|
+
export declare const StyledTitleLeftBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object, never>;
|
|
5
|
+
export declare const StyledTitleRightBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
6
6
|
type: string;
|
|
7
7
|
}, never>;
|
|
8
8
|
export declare const StyleBodyWrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chat-bubble",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.16.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chat",
|
|
6
6
|
"files": [
|
|
@@ -51,10 +51,11 @@
|
|
|
51
51
|
"typeSafety": false
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@elliemae/ds-grid": "3.
|
|
55
|
-
"@elliemae/ds-
|
|
56
|
-
"@elliemae/ds-
|
|
57
|
-
"@elliemae/ds-
|
|
54
|
+
"@elliemae/ds-grid": "3.16.0-next.10",
|
|
55
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.10",
|
|
56
|
+
"@elliemae/ds-icons": "3.16.0-next.10",
|
|
57
|
+
"@elliemae/ds-system": "3.16.0-next.10",
|
|
58
|
+
"@elliemae/ds-utilities": "3.16.0-next.10"
|
|
58
59
|
},
|
|
59
60
|
"devDependencies": {
|
|
60
61
|
"@testing-library/dom": "~8.19.0",
|
|
@@ -76,7 +77,7 @@
|
|
|
76
77
|
"dts": "node ../../scripts/dts.mjs",
|
|
77
78
|
"dts:withdeps": "pnpm --filter {.}... dts",
|
|
78
79
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
79
|
-
"dev:build": "pnpm --filter {.}... build
|
|
80
|
+
"dev:build": "pnpm --filter {.}... build",
|
|
80
81
|
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
81
82
|
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
82
83
|
}
|