@elliemae/ds-comments 3.18.0-next.6 → 3.18.0-next.9

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.
Files changed (58) hide show
  1. package/dist/cjs/DSCommentCard.js +155 -0
  2. package/dist/cjs/DSCommentCard.js.map +7 -0
  3. package/dist/cjs/DeprecatedMenu.js +73 -0
  4. package/dist/cjs/DeprecatedMenu.js.map +7 -0
  5. package/dist/cjs/{components/DSComments.js → config/DSCommentCardDefinitions.js} +18 -9
  6. package/dist/cjs/config/DSCommentCardDefinitions.js.map +7 -0
  7. package/dist/cjs/config/useCommentCard.js +57 -0
  8. package/dist/cjs/config/useCommentCard.js.map +7 -0
  9. package/dist/cjs/{components/helper.js → helpers.js} +4 -4
  10. package/dist/cjs/helpers.js.map +7 -0
  11. package/dist/cjs/index.js +9 -5
  12. package/dist/cjs/index.js.map +3 -3
  13. package/dist/cjs/react-desc-prop-types.js +99 -0
  14. package/dist/cjs/react-desc-prop-types.js.map +7 -0
  15. package/dist/cjs/styled.js +122 -0
  16. package/dist/cjs/styled.js.map +7 -0
  17. package/dist/esm/DSCommentCard.js +133 -0
  18. package/dist/esm/DSCommentCard.js.map +7 -0
  19. package/dist/esm/DeprecatedMenu.js +43 -0
  20. package/dist/esm/DeprecatedMenu.js.map +7 -0
  21. package/dist/esm/config/DSCommentCardDefinitions.js +19 -0
  22. package/dist/esm/config/DSCommentCardDefinitions.js.map +7 -0
  23. package/dist/esm/config/useCommentCard.js +27 -0
  24. package/dist/esm/config/useCommentCard.js.map +7 -0
  25. package/dist/esm/{components/helper.js → helpers.js} +1 -1
  26. package/dist/esm/helpers.js.map +7 -0
  27. package/dist/esm/index.js +7 -3
  28. package/dist/esm/index.js.map +3 -3
  29. package/dist/esm/react-desc-prop-types.js +69 -0
  30. package/dist/esm/react-desc-prop-types.js.map +7 -0
  31. package/dist/esm/styled.js +92 -0
  32. package/dist/esm/styled.js.map +7 -0
  33. package/dist/types/DSCommentCard.d.ts +4 -0
  34. package/dist/types/DeprecatedMenu.d.ts +10 -0
  35. package/dist/types/config/DSCommentCardDefinitions.d.ts +11 -0
  36. package/dist/types/config/useCommentCard.d.ts +9 -0
  37. package/dist/types/helpers.d.ts +3 -0
  38. package/dist/types/index.d.ts +3 -39
  39. package/dist/types/react-desc-prop-types.d.ts +33 -0
  40. package/dist/types/styled.d.ts +11 -0
  41. package/package.json +9 -7
  42. package/dist/cjs/components/CommentCard.js +0 -163
  43. package/dist/cjs/components/CommentCard.js.map +0 -7
  44. package/dist/cjs/components/DSComments.js.map +0 -7
  45. package/dist/cjs/components/blocks.js +0 -80
  46. package/dist/cjs/components/blocks.js.map +0 -7
  47. package/dist/cjs/components/helper.js.map +0 -7
  48. package/dist/esm/components/CommentCard.js +0 -141
  49. package/dist/esm/components/CommentCard.js.map +0 -7
  50. package/dist/esm/components/DSComments.js +0 -10
  51. package/dist/esm/components/DSComments.js.map +0 -7
  52. package/dist/esm/components/blocks.js +0 -50
  53. package/dist/esm/components/blocks.js.map +0 -7
  54. package/dist/esm/components/helper.js.map +0 -7
  55. package/dist/types/components/CommentCard.d.ts +0 -73
  56. package/dist/types/components/DSComments.d.ts +0 -42
  57. package/dist/types/components/blocks.d.ts +0 -18
  58. package/dist/types/components/helper.d.ts +0 -3
@@ -0,0 +1,122 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var styled_exports = {};
30
+ __export(styled_exports, {
31
+ CommentCardContent: () => CommentCardContent,
32
+ CommentCardData: () => CommentCardData,
33
+ CommentCardHeader: () => CommentCardHeader,
34
+ CommentCardLeft: () => CommentCardLeft,
35
+ CommentCardMenu: () => CommentCardMenu,
36
+ CommentCardName: () => CommentCardName,
37
+ CommentCardWrapper: () => CommentCardWrapper
38
+ });
39
+ module.exports = __toCommonJS(styled_exports);
40
+ var React = __toESM(require("react"));
41
+ var import_ds_system = require("@elliemae/ds-system");
42
+ var import_DSCommentCardDefinitions = require("./config/DSCommentCardDefinitions.js");
43
+ const CommentCardWrapper = (0, import_ds_system.styled)("div", { name: import_DSCommentCardDefinitions.DSCommentCardName, slot: import_DSCommentCardDefinitions.DSCommentCardSlots.ROOT })`
44
+ min-height: 5.80923rem;
45
+ min-width: 18.80615rem;
46
+ margin-left: 1.84615rem;
47
+ margin-right: 1.84615rem;
48
+ width: auto;
49
+ border-radius: 2px;
50
+ &:focus {
51
+ outline: none;
52
+ position: relative;
53
+
54
+ &:after {
55
+ content: '';
56
+ position: absolute;
57
+ top: 0;
58
+ left: 0;
59
+ width: 100%;
60
+ height: 100%;
61
+ pointer-events: none;
62
+ border-radius: 2px;
63
+ border: 2px solid brand-700;
64
+ }
65
+ }
66
+ ${({ borderBot, theme }) => {
67
+ if (borderBot) {
68
+ return `
69
+ border-top: solid 0 ${theme.colors.neutral[100]};
70
+ border-bottom: solid 1px ${theme.colors.neutral[100]};
71
+ margin-bottom: 1.23077rem;
72
+ `;
73
+ }
74
+ return ``;
75
+ }}
76
+ ${import_ds_system.xStyledCommonProps}
77
+ `;
78
+ const CommentCardHeader = (0, import_ds_system.styled)("div", { name: import_DSCommentCardDefinitions.DSCommentCardName, slot: import_DSCommentCardDefinitions.DSCommentCardSlots.HEADER })`
79
+ border-top: solid 1px neutral-100;
80
+ display: flex;
81
+ padding: 0.30769rem 0.30769rem 0.30769rem 0.61538rem;
82
+
83
+ ${({ borderBottom, theme }) => {
84
+ if (borderBottom) {
85
+ return `
86
+ border-top: solid 0 ${theme.colors.neutral[100]};
87
+ `;
88
+ }
89
+ return ``;
90
+ }}
91
+ `;
92
+ const CommentCardContent = (0, import_ds_system.styled)("div", { name: import_DSCommentCardDefinitions.DSCommentCardName, slot: import_DSCommentCardDefinitions.DSCommentCardSlots.CONTENT })`
93
+ padding: 0 0.61538rem 0.61538rem 0.61538rem;
94
+ font-size: 1rem;
95
+ line-height: ${() => "1.3"};
96
+ color: neutral-500;
97
+ button {
98
+ display: inline-block;
99
+ height: auto;
100
+ padding-left: 0.61538rem;
101
+ padding-right: 0.61538rem;
102
+ }
103
+ `;
104
+ const CommentCardLeft = (0, import_ds_system.styled)("div", { name: import_DSCommentCardDefinitions.DSCommentCardName, slot: import_DSCommentCardDefinitions.DSCommentCardSlots.LEFT })`
105
+ flex: 1;
106
+ `;
107
+ const CommentCardName = (0, import_ds_system.styled)("div", { name: import_DSCommentCardDefinitions.DSCommentCardName, slot: import_DSCommentCardDefinitions.DSCommentCardSlots.NAME })`
108
+ font-size: 1.0769rem;
109
+ font-weight: 600;
110
+ color: neutral-700;
111
+ padding-bottom: 0.15385rem;
112
+ `;
113
+ const CommentCardData = (0, import_ds_system.styled)("div", { name: import_DSCommentCardDefinitions.DSCommentCardName, slot: import_DSCommentCardDefinitions.DSCommentCardSlots.DATA })`
114
+ font-size: 0.923rem;
115
+ font-weight: 300;
116
+ color: neutral-500;
117
+ span {
118
+ padding: 0 0.30769rem;
119
+ }
120
+ `;
121
+ const CommentCardMenu = (0, import_ds_system.styled)("div", { name: import_DSCommentCardDefinitions.DSCommentCardName, slot: import_DSCommentCardDefinitions.DSCommentCardSlots.MENU })``;
122
+ //# sourceMappingURL=styled.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/styled.ts", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSCommentCardName, DSCommentCardSlots } from './config/DSCommentCardDefinitions.js';\n\nexport const CommentCardWrapper = styled('div', { name: DSCommentCardName, slot: DSCommentCardSlots.ROOT })<{\n borderBot: boolean;\n}>`\n min-height: 5.80923rem;\n min-width: 18.80615rem;\n margin-left: 1.84615rem;\n margin-right: 1.84615rem;\n width: auto;\n border-radius: 2px;\n &:focus {\n outline: none;\n position: relative;\n\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n border-radius: 2px;\n border: 2px solid brand-700;\n }\n }\n ${({ borderBot, theme }) => {\n if (borderBot) {\n return `\n border-top: solid 0 ${theme.colors.neutral[100]};\n border-bottom: solid 1px ${theme.colors.neutral[100]};\n margin-bottom: 1.23077rem;\n `;\n }\n return ``;\n }}\n ${xStyledCommonProps}\n`;\n\nexport const CommentCardHeader = styled('div', { name: DSCommentCardName, slot: DSCommentCardSlots.HEADER })<{\n borderBottom: boolean;\n}>`\n border-top: solid 1px neutral-100;\n display: flex;\n padding: 0.30769rem 0.30769rem 0.30769rem 0.61538rem;\n\n ${({ borderBottom, theme }) => {\n if (borderBottom) {\n return `\n border-top: solid 0 ${theme.colors.neutral[100]};\n `;\n }\n return ``;\n }}\n`;\n\nexport const CommentCardContent = styled('div', { name: DSCommentCardName, slot: DSCommentCardSlots.CONTENT })`\n padding: 0 0.61538rem 0.61538rem 0.61538rem;\n font-size: 1rem;\n line-height: ${() => '1.3'};\n color: neutral-500;\n button {\n display: inline-block;\n height: auto;\n padding-left: 0.61538rem;\n padding-right: 0.61538rem;\n }\n`;\n\nexport const CommentCardLeft = styled('div', { name: DSCommentCardName, slot: DSCommentCardSlots.LEFT })`\n flex: 1;\n`;\n\nexport const CommentCardName = styled('div', { name: DSCommentCardName, slot: DSCommentCardSlots.NAME })`\n font-size: 1.0769rem;\n font-weight: 600;\n color: neutral-700;\n padding-bottom: 0.15385rem;\n`;\n\nexport const CommentCardData = styled('div', { name: DSCommentCardName, slot: DSCommentCardSlots.DATA })`\n font-size: 0.923rem;\n font-weight: 300;\n color: neutral-500;\n span {\n padding: 0 0.30769rem;\n }\n`;\n\nexport const CommentCardMenu = styled('div', { name: DSCommentCardName, slot: DSCommentCardSlots.MENU })``;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,sCAAsD;AAE/C,MAAM,yBAAqB,yBAAO,OAAO,EAAE,MAAM,mDAAmB,MAAM,mDAAmB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAyBtG,CAAC,EAAE,WAAW,MAAM,MAAM;AAC1B,MAAI,WAAW;AACb,WAAO;AAAA,8BACiB,MAAM,OAAO,QAAQ,GAAG;AAAA,mCACnB,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,EAGvD;AACA,SAAO;AACT;AAAA,IACE;AAAA;AAGG,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,mDAAmB,MAAM,mDAAmB,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAOvG,CAAC,EAAE,cAAc,MAAM,MAAM;AAC7B,MAAI,cAAc;AAChB,WAAO;AAAA,8BACiB,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,EAElD;AACA,SAAO;AACT;AAAA;AAGK,MAAM,yBAAqB,yBAAO,OAAO,EAAE,MAAM,mDAAmB,MAAM,mDAAmB,QAAQ,CAAC;AAAA;AAAA;AAAA,iBAG5F,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhB,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,mDAAmB,MAAM,mDAAmB,KAAK,CAAC;AAAA;AAAA;AAIhG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,mDAAmB,MAAM,mDAAmB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,mDAAmB,MAAM,mDAAmB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,mDAAmB,MAAM,mDAAmB,KAAK,CAAC;",
6
+ "names": []
7
+ }
@@ -0,0 +1,133 @@
1
+ import * as React from "react";
2
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
+ import { describe } from "@elliemae/ds-props-helpers";
4
+ import { DSReadMore } from "@elliemae/ds-read-more";
5
+ import {
6
+ CommentCardWrapper,
7
+ CommentCardHeader,
8
+ CommentCardContent,
9
+ CommentCardName,
10
+ CommentCardData,
11
+ CommentCardMenu,
12
+ CommentCardLeft
13
+ } from "./styled.js";
14
+ import { DSCommentCardName } from "./config/DSCommentCardDefinitions.js";
15
+ import { useCommentCard } from "./config/useCommentCard.js";
16
+ import { DSCommentCardPropTypesSchema } from "./react-desc-prop-types.js";
17
+ import { DeprecatedMenu } from "./DeprecatedMenu.js";
18
+ const DSCommentCard = (props) => {
19
+ const {
20
+ propsWithDefault: {
21
+ containerProps,
22
+ name,
23
+ type,
24
+ content,
25
+ style,
26
+ borderBottom,
27
+ maxLines,
28
+ options,
29
+ selection,
30
+ customDropdownMenuProps,
31
+ Menu,
32
+ menuProps
33
+ },
34
+ xstyledProps,
35
+ getOwnerProps,
36
+ getOwnerPropsArguments,
37
+ displayDate,
38
+ displayTime
39
+ } = useCommentCard(props);
40
+ return /* @__PURE__ */ jsxs(
41
+ CommentCardWrapper,
42
+ {
43
+ className: `em-ds-comments__comment-card-wrapper em-ds-comments__comment-card-wrapper--default${borderBottom ? "em-ds-comments__comment-card-wrapper--borderBottom" : ""}`,
44
+ borderBot: borderBottom,
45
+ tabIndex: 0,
46
+ role: "listitem",
47
+ ...containerProps,
48
+ ...xstyledProps,
49
+ style: { ...style, ...containerProps.style || {} },
50
+ getOwnerProps,
51
+ getOwnerPropsArguments,
52
+ children: [
53
+ /* @__PURE__ */ jsxs(
54
+ CommentCardHeader,
55
+ {
56
+ className: `em-ds-comments__comment-card-header em-ds-comments__comment-card-header--default${borderBottom ? "em-ds-comments__comment-card-header--borderBottom" : ""}`,
57
+ borderBottom,
58
+ getOwnerProps,
59
+ getOwnerPropsArguments,
60
+ children: [
61
+ /* @__PURE__ */ jsxs(
62
+ CommentCardLeft,
63
+ {
64
+ className: "em-ds-comments__comment-card-left",
65
+ getOwnerProps,
66
+ getOwnerPropsArguments,
67
+ children: [
68
+ /* @__PURE__ */ jsx(
69
+ CommentCardName,
70
+ {
71
+ className: "em-ds-comments__comment-card-name",
72
+ getOwnerProps,
73
+ getOwnerPropsArguments,
74
+ children: name
75
+ }
76
+ ),
77
+ /* @__PURE__ */ jsxs(
78
+ CommentCardData,
79
+ {
80
+ className: "em-ds-comments__comment-card-data",
81
+ getOwnerProps,
82
+ getOwnerPropsArguments,
83
+ children: [
84
+ displayDate,
85
+ displayTime && /* @__PURE__ */ jsxs(Fragment, { children: [
86
+ /* @__PURE__ */ jsx("span", { children: "\u2022" }),
87
+ displayTime
88
+ ] }),
89
+ type && /* @__PURE__ */ jsxs(Fragment, { children: [
90
+ /* @__PURE__ */ jsx("span", { children: "\u2022" }),
91
+ type
92
+ ] })
93
+ ]
94
+ }
95
+ )
96
+ ]
97
+ }
98
+ ),
99
+ options && options.length > 0 && /* @__PURE__ */ jsx(
100
+ DeprecatedMenu,
101
+ {
102
+ getOwnerProps,
103
+ getOwnerPropsArguments,
104
+ options,
105
+ selection,
106
+ customDropdownMenuProps
107
+ }
108
+ ),
109
+ Menu && /* @__PURE__ */ jsx(CommentCardMenu, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(Menu, { ...menuProps }) })
110
+ ]
111
+ }
112
+ ),
113
+ /* @__PURE__ */ jsx(
114
+ CommentCardContent,
115
+ {
116
+ className: "em-ds-comments__comment-card-content",
117
+ getOwnerProps,
118
+ getOwnerPropsArguments,
119
+ children: /* @__PURE__ */ jsx(DSReadMore, { lines: maxLines, content: `${content} `, more: "MORE", less: "LESS", ellipsis: "... " })
120
+ }
121
+ )
122
+ ]
123
+ }
124
+ );
125
+ };
126
+ DSCommentCard.displayName = DSCommentCardName;
127
+ const DSCommentCardWithSchema = describe(DSCommentCard);
128
+ DSCommentCardWithSchema.propTypes = DSCommentCardPropTypesSchema;
129
+ export {
130
+ DSCommentCard,
131
+ DSCommentCardWithSchema
132
+ };
133
+ //# sourceMappingURL=DSCommentCard.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCommentCard.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSReadMore } from '@elliemae/ds-read-more';\nimport {\n CommentCardWrapper,\n CommentCardHeader,\n CommentCardContent,\n CommentCardName,\n CommentCardData,\n CommentCardMenu,\n CommentCardLeft,\n} from './styled.js';\nimport { DSCommentCardName } from './config/DSCommentCardDefinitions.js';\nimport { useCommentCard } from './config/useCommentCard.js';\nimport { DSCommentCardPropTypesSchema, type DSCommentCardT } from './react-desc-prop-types.js';\nimport { DeprecatedMenu } from './DeprecatedMenu.js';\n\nexport const DSCommentCard: React.ComponentType<DSCommentCardT.Props> = (props) => {\n const {\n propsWithDefault: {\n containerProps,\n name,\n type,\n content,\n style,\n borderBottom,\n maxLines,\n options,\n selection,\n customDropdownMenuProps,\n Menu,\n menuProps,\n },\n xstyledProps,\n getOwnerProps,\n getOwnerPropsArguments,\n displayDate,\n displayTime,\n } = useCommentCard(props);\n\n return (\n <CommentCardWrapper\n className={`em-ds-comments__comment-card-wrapper em-ds-comments__comment-card-wrapper--default${\n borderBottom ? 'em-ds-comments__comment-card-wrapper--borderBottom' : ''\n }`}\n borderBot={borderBottom}\n tabIndex={0}\n role=\"listitem\"\n {...containerProps}\n {...xstyledProps}\n style={{ ...style, ...(containerProps.style || {}) }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <CommentCardHeader\n className={`em-ds-comments__comment-card-header em-ds-comments__comment-card-header--default${\n borderBottom ? 'em-ds-comments__comment-card-header--borderBottom' : ''\n }`}\n borderBottom={borderBottom}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <CommentCardLeft\n className=\"em-ds-comments__comment-card-left\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <CommentCardName\n className=\"em-ds-comments__comment-card-name\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {name}\n </CommentCardName>\n <CommentCardData\n className=\"em-ds-comments__comment-card-data\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {displayDate}\n {displayTime && (\n <>\n <span>\u2022</span>\n {displayTime}\n </>\n )}\n {type && (\n <>\n <span>\u2022</span>\n {type}\n </>\n )}\n </CommentCardData>\n </CommentCardLeft>\n {options && options.length > 0 && (\n <DeprecatedMenu\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n options={options}\n selection={selection}\n customDropdownMenuProps={customDropdownMenuProps}\n />\n )}\n {Menu && (\n <CommentCardMenu getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <Menu {...menuProps} />\n </CommentCardMenu>\n )}\n </CommentCardHeader>\n <CommentCardContent\n className=\"em-ds-comments__comment-card-content\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSReadMore lines={maxLines} content={`${content} `} more=\"MORE\" less=\"LESS\" ellipsis=\"... \" />\n </CommentCardContent>\n </CommentCardWrapper>\n );\n};\n\nDSCommentCard.displayName = DSCommentCardName;\nexport const DSCommentCardWithSchema = describe(DSCommentCard);\nDSCommentCardWithSchema.propTypes = DSCommentCardPropTypesSchema;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACoEb,SAcI,UAdJ,KAcI,YAdJ;AAlEV,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,oCAAyD;AAClE,SAAS,sBAAsB;AAExB,MAAM,gBAA2D,CAAC,UAAU;AACjF,QAAM;AAAA,IACJ,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,eAAe,KAAK;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qFACT,eAAe,uDAAuD;AAAA,MAExE,WAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,OAAO,EAAE,GAAG,OAAO,GAAI,eAAe,SAAS,CAAC,EAAG;AAAA,MACnD;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,mFACT,eAAe,sDAAsD;AAAA,YAEvE;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV;AAAA,kBACA;AAAA,kBAEA;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV;AAAA,wBACA;AAAA,wBAEC;AAAA;AAAA,oBACH;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV;AAAA,wBACA;AAAA,wBAEC;AAAA;AAAA,0BACA,eACC,iCACE;AAAA,gDAAC,UAAK,oBAAC;AAAA,4BACN;AAAA,6BACH;AAAA,0BAED,QACC,iCACE;AAAA,gDAAC,UAAK,oBAAC;AAAA,4BACN;AAAA,6BACH;AAAA;AAAA;AAAA,oBAEJ;AAAA;AAAA;AAAA,cACF;AAAA,cACC,WAAW,QAAQ,SAAS,KAC3B;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cAED,QACC,oBAAC,mBAAgB,eAA8B,wBAC7C,8BAAC,QAAM,GAAG,WAAW,GACvB;AAAA;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YAEA,8BAAC,cAAW,OAAO,UAAU,SAAS,GAAG,YAAY,MAAK,QAAO,MAAK,QAAO,UAAS,QAAO;AAAA;AAAA,QAC/F;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,cAAc,cAAc;AACrB,MAAM,0BAA0B,SAAS,aAAa;AAC7D,wBAAwB,YAAY;",
6
+ "names": []
7
+ }
@@ -0,0 +1,43 @@
1
+ import * as React from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { useCallback, useRef } from "react";
4
+ import { DSButtonV2 } from "@elliemae/ds-button-v2";
5
+ import DSDropdownMenu from "@elliemae/ds-dropdownmenu";
6
+ import { MoreOptionsVert } from "@elliemae/ds-icons";
7
+ import { CommentCardMenu } from "./styled.js";
8
+ const DeprecatedMenu = ({
9
+ getOwnerProps,
10
+ getOwnerPropsArguments,
11
+ customDropdownMenuProps,
12
+ options,
13
+ selection
14
+ }) => {
15
+ const ref = useRef(null);
16
+ const handleCloseMenu = useCallback(() => {
17
+ ref.current?.focus();
18
+ return null;
19
+ }, []);
20
+ return /* @__PURE__ */ jsx(
21
+ CommentCardMenu,
22
+ {
23
+ className: "em-ds-comments__comment-card-menu",
24
+ getOwnerProps,
25
+ getOwnerPropsArguments,
26
+ children: /* @__PURE__ */ jsx(
27
+ DSDropdownMenu,
28
+ {
29
+ ...customDropdownMenuProps,
30
+ onClose: handleCloseMenu,
31
+ options,
32
+ selection,
33
+ triggerComponent: /* @__PURE__ */ jsx(DSButtonV2, { buttonType: "icon", innerRef: ref, "aria-label": "More options", "aria-haspopup": "menu", children: /* @__PURE__ */ jsx(MoreOptionsVert, {}) }),
34
+ zIndex: 11
35
+ }
36
+ )
37
+ }
38
+ );
39
+ };
40
+ export {
41
+ DeprecatedMenu
42
+ };
43
+ //# sourceMappingURL=DeprecatedMenu.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DeprecatedMenu.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport { useCallback, useRef } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport DSDropdownMenu from '@elliemae/ds-dropdownmenu';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { CommentCardMenu } from './styled.js';\n\ninterface DeprecatedMenuProps {\n getOwnerProps: () => object;\n getOwnerPropsArguments: () => object;\n options: unknown[];\n selection: unknown;\n customDropdownMenuProps: Record<string, unknown>;\n}\n\nexport const DeprecatedMenu: React.ComponentType<DeprecatedMenuProps> = ({\n getOwnerProps,\n getOwnerPropsArguments,\n customDropdownMenuProps,\n options,\n selection,\n}) => {\n const ref = useRef<HTMLButtonElement | null>(null);\n\n const handleCloseMenu = useCallback(() => {\n ref.current?.focus();\n return null;\n }, []);\n\n return (\n <CommentCardMenu\n className=\"em-ds-comments__comment-card-menu\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSDropdownMenu\n {...customDropdownMenuProps}\n onClose={handleCloseMenu}\n options={options}\n selection={selection}\n triggerComponent={\n <DSButtonV2 buttonType=\"icon\" innerRef={ref} aria-label=\"More options\" aria-haspopup=\"menu\">\n <MoreOptionsVert />\n </DSButtonV2>\n }\n zIndex={11} // https://jira.elliemae.io/browse/PUI-1664\n />\n </CommentCardMenu>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC2CX;AAzCZ,SAAS,aAAa,cAAc;AACpC,SAAS,kBAAkB;AAC3B,OAAO,oBAAoB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAUzB,MAAM,iBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,MAAM,OAAiC,IAAI;AAEjD,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,SAAS,MAAM;AACnB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA,kBACE,oBAAC,cAAW,YAAW,QAAO,UAAU,KAAK,cAAW,gBAAe,iBAAc,QACnF,8BAAC,mBAAgB,GACnB;AAAA,UAEF,QAAQ;AAAA;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;",
6
+ "names": []
7
+ }
@@ -0,0 +1,19 @@
1
+ import * as React from "react";
2
+ import { slotObjectToDataTestIds } from "@elliemae/ds-system";
3
+ const DSCommentCardName = "DSCommentCard";
4
+ const DSCommentCardSlots = {
5
+ ROOT: "root",
6
+ HEADER: "header",
7
+ CONTENT: "content",
8
+ LEFT: "left",
9
+ NAME: "name",
10
+ DATA: "data",
11
+ MENU: "menu"
12
+ };
13
+ const DSCommentCardDataTestIds = slotObjectToDataTestIds(DSCommentCardName, DSCommentCardSlots);
14
+ export {
15
+ DSCommentCardDataTestIds,
16
+ DSCommentCardName,
17
+ DSCommentCardSlots
18
+ };
19
+ //# sourceMappingURL=DSCommentCardDefinitions.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/DSCommentCardDefinitions.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCommentCardName = 'DSCommentCard';\n\nexport const DSCommentCardSlots = {\n ROOT: 'root',\n HEADER: 'header',\n CONTENT: 'content',\n LEFT: 'left',\n NAME: 'name',\n DATA: 'data',\n MENU: 'menu',\n};\n\nexport const DSCommentCardDataTestIds = slotObjectToDataTestIds(DSCommentCardName, DSCommentCardSlots);\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,2BAA2B,wBAAwB,mBAAmB,kBAAkB;",
6
+ "names": []
7
+ }
@@ -0,0 +1,27 @@
1
+ import * as React from "react";
2
+ import { useCallback } from "react";
3
+ import { omit } from "lodash";
4
+ import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
5
+ import { getTime, getDisplayDate } from "../helpers.js";
6
+ import { defaultProps } from "../react-desc-prop-types.js";
7
+ const useCommentCard = (props) => {
8
+ const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
9
+ const { date, dateFormat, timeFormat } = propsWithDefault;
10
+ const xstyledProps = useGetXstyledProps(omit(propsWithDefault, "borderBottom"));
11
+ const displayDate = date ? getDisplayDate(date, dateFormat) : null;
12
+ const displayTime = date ? getTime(date, timeFormat) : null;
13
+ const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
14
+ const getOwnerPropsArguments = useCallback(() => ({}), []);
15
+ return {
16
+ propsWithDefault,
17
+ xstyledProps,
18
+ getOwnerProps,
19
+ getOwnerPropsArguments,
20
+ displayDate,
21
+ displayTime
22
+ };
23
+ };
24
+ export {
25
+ useCommentCard
26
+ };
27
+ //# sourceMappingURL=useCommentCard.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCommentCard.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { getTime, getDisplayDate } from '../helpers.js';\nimport { type DSCommentCardT, defaultProps } from '../react-desc-prop-types.js';\n\nexport const useCommentCard = (props: DSCommentCardT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSCommentCardT.InternalProps>(props, defaultProps);\n const { date, dateFormat, timeFormat } = propsWithDefault;\n\n const xstyledProps = useGetXstyledProps(omit(propsWithDefault, 'borderBottom'));\n\n const displayDate = date ? getDisplayDate(date, dateFormat) : null;\n const displayTime = date ? getTime(date, timeFormat) : null;\n\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n return {\n propsWithDefault,\n xstyledProps,\n getOwnerProps,\n getOwnerPropsArguments,\n displayDate,\n displayTime,\n };\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,SAAS,sBAAsB;AACxC,SAA8B,oBAAoB;AAE3C,MAAM,iBAAiB,CAAC,UAAgC;AAC7D,QAAM,mBAAmB,6BAA2D,OAAO,YAAY;AACvG,QAAM,EAAE,MAAM,YAAY,WAAW,IAAI;AAEzC,QAAM,eAAe,mBAAmB,KAAK,kBAAkB,cAAc,CAAC;AAE9E,QAAM,cAAc,OAAO,eAAe,MAAM,UAAU,IAAI;AAC9D,QAAM,cAAc,OAAO,QAAQ,MAAM,UAAU,IAAI;AAEvD,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
6
+ "names": []
7
+ }
@@ -14,4 +14,4 @@ export {
14
14
  getMaxSize,
15
15
  getTime
16
16
  };
17
- //# sourceMappingURL=helper.js.map
17
+ //# sourceMappingURL=helpers.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/helpers.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import moment from 'moment';\n\nexport function getMaxSize() {\n return 113;\n}\nexport function getTime(date: Date, formatString = 'hh:mm a') {\n return moment(date).format(formatString);\n}\nexport function getDisplayDate(date: Date, formatString = 'MM/DD/YYYY') {\n return moment(date).format(formatString);\n}\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAO,YAAY;AAEZ,SAAS,aAAa;AAC3B,SAAO;AACT;AACO,SAAS,QAAQ,MAAY,eAAe,WAAW;AAC5D,SAAO,OAAO,IAAI,EAAE,OAAO,YAAY;AACzC;AACO,SAAS,eAAe,MAAY,eAAe,cAAc;AACtE,SAAO,OAAO,IAAI,EAAE,OAAO,YAAY;AACzC;",
6
+ "names": []
7
+ }
package/dist/esm/index.js CHANGED
@@ -1,9 +1,13 @@
1
1
  import * as React from "react";
2
- import DSComments, { DSCommentCardWithSchema } from "./components/DSComments.js";
3
- const { DSCommentCard } = DSComments;
2
+ import { DSCommentCard } from "./DSCommentCard.js";
3
+ import { DSCommentCard as DSCommentCard2, DSCommentCardWithSchema } from "./DSCommentCard.js";
4
+ import { DSCommentCardName, DSCommentCardSlots, DSCommentCardDataTestIds } from "./config/DSCommentCardDefinitions.js";
4
5
  var src_default = DSCommentCard;
5
6
  export {
6
- DSCommentCard,
7
+ DSCommentCard2 as DSCommentCard,
8
+ DSCommentCardDataTestIds,
9
+ DSCommentCardName,
10
+ DSCommentCardSlots,
7
11
  DSCommentCardWithSchema,
8
12
  src_default as default
9
13
  };
@@ -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", "import DSComments, { DSCommentCardWithSchema } from './components/DSComments.js';\n\nexport const { DSCommentCard } = DSComments;\nexport default DSCommentCard;\nexport { DSCommentCardWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAO,cAAc,+BAA+B;AAE7C,MAAM,EAAE,cAAc,IAAI;AACjC,IAAO,cAAQ;",
6
- "names": []
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// Workaround for TS2742\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nimport { DSCommentCard } from './DSCommentCard.js';\n\nexport { DSCommentCard, DSCommentCardWithSchema } from './DSCommentCard.js';\nexport { DSCommentCardName, DSCommentCardSlots, DSCommentCardDataTestIds } from './config/DSCommentCardDefinitions.js';\nexport default DSCommentCard;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,qBAAqB;AAE9B,SAAS,iBAAAA,gBAAe,+BAA+B;AACvD,SAAS,mBAAmB,oBAAoB,gCAAgC;AAChF,IAAO,cAAQ;",
6
+ "names": ["DSCommentCard"]
7
7
  }
@@ -0,0 +1,69 @@
1
+ import * as React from "react";
2
+ import { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
3
+ const defaultProps = {
4
+ containerProps: {},
5
+ name: "",
6
+ date: /* @__PURE__ */ new Date(),
7
+ type: "",
8
+ content: "",
9
+ style: {},
10
+ options: [],
11
+ selection: { "single-selection-internal-external": ["set-as-internal"] },
12
+ customDropdownMenuProps: {
13
+ focusOnOpen: true
14
+ },
15
+ borderBottom: false,
16
+ dateFormat: "MM/DD/YYYY",
17
+ timeFormat: "hh:mm a",
18
+ maxLines: 2
19
+ };
20
+ const DSCommentCardPropTypes = {
21
+ ...globalAttributesPropTypes,
22
+ ...xstyledPropTypes,
23
+ /** props to inject to comment card wrapper */
24
+ containerProps: PropTypes.shape({
25
+ id: PropTypes.string,
26
+ "data-testid": PropTypes.string
27
+ }).description("props to inject to comment card wrapper"),
28
+ /** form name */
29
+ name: PropTypes.string.description("form name"),
30
+ /** style object */
31
+ style: PropTypes.object.description(" style object "),
32
+ /** date object */
33
+ date: PropTypes.instanceOf(Date).description("date object"),
34
+ /** comment type string */
35
+ type: PropTypes.string.description("comment type string"),
36
+ /** comment content */
37
+ content: PropTypes.string.description("comment content"),
38
+ /** dropdown menu options */
39
+ options: PropTypes.arrayOf(PropTypes.object).description("dropdown menu options").deprecated({ version: "4.x", message: "use Menu and menuProps instead" }),
40
+ /** dropdown selection */
41
+ selection: PropTypes.object.description("dropdown selection").deprecated({ version: "4.x", message: "use Menu and menuProps instead" }),
42
+ /** pass down props to dropdown */
43
+ customDropdownMenuProps: PropTypes.shape({
44
+ focusOnOpen: PropTypes.bool
45
+ }).description("pass down props to dropdown").deprecated({ version: "4.x", message: "use Menu and menuProps instead" }),
46
+ /** toggle border bottom for card */
47
+ borderBottom: PropTypes.bool.description("toggle border bottom for card"),
48
+ /** moment Year, month, and day tokens https://momentjs.com/docs/#/parsing/string-format/ */
49
+ dateFormat: PropTypes.oneOf(["MM/DD/YYYY", "MM DD YYYY"]).description(
50
+ "moment Year, month, and day tokens https://momentjs.com/docs/#/parsing/string-format/"
51
+ ),
52
+ /** moment Hour, minute, second, millisecond, and offset tokens https://momentjs.com/docs/#/parsing/string-format/ */
53
+ timeFormat: PropTypes.oneOf(["hh:mm a", "HH:mm"]).description(
54
+ "moment Hour, minute, second, millisecond, and offset tokens https://momentjs.com/docs/#/parsing/string-format/"
55
+ ),
56
+ /**
57
+ * Max lines
58
+ */
59
+ maxLines: PropTypes.number.description("Max lines"),
60
+ Menu: PropTypes.func.description("Menu component"),
61
+ menuProps: PropTypes.object.description("Props that will be received by the Menu component")
62
+ };
63
+ const DSCommentCardPropTypesSchema = DSCommentCardPropTypes;
64
+ export {
65
+ DSCommentCardPropTypes,
66
+ DSCommentCardPropTypesSchema,
67
+ defaultProps
68
+ };
69
+ //# sourceMappingURL=react-desc-prop-types.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\n\nexport namespace DSCommentCardT {\n type PropsT<D, R, O, E> = Partial<D> &\n R &\n O &\n Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> &\n Omit<XstyledProps, keyof D | keyof R | keyof O>;\n type InternalPropsT<D, R, O, E> = D &\n R &\n O &\n Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> &\n Omit<XstyledProps, keyof D | keyof R | keyof O>;\n\n export interface DefaultProps {\n containerProps: React.HTMLAttributes<HTMLDivElement>;\n name: string;\n date: Date;\n type: string;\n content: string;\n style: React.CSSProperties;\n options: unknown[];\n selection: unknown;\n customDropdownMenuProps: Record<string, unknown>;\n borderBottom: boolean;\n dateFormat: string;\n timeFormat: string;\n maxLines: number;\n }\n\n export interface OptionalProps {\n Menu?: React.ComponentType;\n menuProps?: object;\n }\n\n export interface RequiredProps {}\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n}\n\nexport const defaultProps: DSCommentCardT.DefaultProps = {\n containerProps: {},\n name: '',\n date: new Date(),\n type: '',\n content: '',\n style: {},\n options: [],\n selection: { 'single-selection-internal-external': ['set-as-internal'] },\n customDropdownMenuProps: {\n focusOnOpen: true,\n },\n borderBottom: false,\n dateFormat: 'MM/DD/YYYY',\n timeFormat: 'hh:mm a',\n maxLines: 2,\n};\n\nexport const DSCommentCardPropTypes: DSPropTypesSchema<DSCommentCardT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n /** props to inject to comment card wrapper */\n containerProps: PropTypes.shape({\n id: PropTypes.string,\n 'data-testid': PropTypes.string,\n }).description('props to inject to comment card wrapper'),\n /** form name */\n name: PropTypes.string.description('form name'),\n /** style object */\n style: PropTypes.object.description(' style object '),\n /** date object */\n date: PropTypes.instanceOf(Date).description('date object'),\n /** comment type string */\n type: PropTypes.string.description('comment type string'),\n /** comment content */\n content: PropTypes.string.description('comment content'),\n /** dropdown menu options */\n options: PropTypes.arrayOf(PropTypes.object)\n .description('dropdown menu options')\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n /** dropdown selection */\n selection: PropTypes.object\n .description('dropdown selection')\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n /** pass down props to dropdown */\n customDropdownMenuProps: PropTypes.shape({\n focusOnOpen: PropTypes.bool,\n })\n .description('pass down props to dropdown')\n .deprecated({ version: '4.x', message: 'use Menu and menuProps instead' }),\n /** toggle border bottom for card */\n borderBottom: PropTypes.bool.description('toggle border bottom for card'),\n /** moment Year, month, and day tokens https://momentjs.com/docs/#/parsing/string-format/ */\n dateFormat: PropTypes.oneOf(['MM/DD/YYYY', 'MM DD YYYY']).description(\n 'moment Year, month, and day tokens https://momentjs.com/docs/#/parsing/string-format/',\n ),\n /** moment Hour, minute, second, millisecond, and offset tokens https://momentjs.com/docs/#/parsing/string-format/ */\n timeFormat: PropTypes.oneOf(['hh:mm a', 'HH:mm']).description(\n 'moment Hour, minute, second, millisecond, and offset tokens https://momentjs.com/docs/#/parsing/string-format/',\n ),\n /**\n * Max lines\n */\n maxLines: PropTypes.number.description('Max lines'),\n Menu: PropTypes.func.description('Menu component'),\n menuProps: PropTypes.object.description('Props that will be received by the Menu component'),\n};\n\nexport const DSCommentCardPropTypesSchema =\n DSCommentCardPropTypes as unknown as WeakValidationMap<DSCommentCardT.Props>;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,2BAA2B,WAAW,wBAAwB;AA4ChE,MAAM,eAA4C;AAAA,EACvD,gBAAgB,CAAC;AAAA,EACjB,MAAM;AAAA,EACN,MAAM,oBAAI,KAAK;AAAA,EACf,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO,CAAC;AAAA,EACR,SAAS,CAAC;AAAA,EACV,WAAW,EAAE,sCAAsC,CAAC,iBAAiB,EAAE;AAAA,EACvE,yBAAyB;AAAA,IACvB,aAAa;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AACZ;AAEO,MAAM,yBAAkE;AAAA,EAC7E,GAAG;AAAA,EACH,GAAG;AAAA;AAAA,EAEH,gBAAgB,UAAU,MAAM;AAAA,IAC9B,IAAI,UAAU;AAAA,IACd,eAAe,UAAU;AAAA,EAC3B,CAAC,EAAE,YAAY,yCAAyC;AAAA;AAAA,EAExD,MAAM,UAAU,OAAO,YAAY,WAAW;AAAA;AAAA,EAE9C,OAAO,UAAU,OAAO,YAAY,gBAAgB;AAAA;AAAA,EAEpD,MAAM,UAAU,WAAW,IAAI,EAAE,YAAY,aAAa;AAAA;AAAA,EAE1D,MAAM,UAAU,OAAO,YAAY,qBAAqB;AAAA;AAAA,EAExD,SAAS,UAAU,OAAO,YAAY,iBAAiB;AAAA;AAAA,EAEvD,SAAS,UAAU,QAAQ,UAAU,MAAM,EACxC,YAAY,uBAAuB,EACnC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA;AAAA,EAE3E,WAAW,UAAU,OAClB,YAAY,oBAAoB,EAChC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA;AAAA,EAE3E,yBAAyB,UAAU,MAAM;AAAA,IACvC,aAAa,UAAU;AAAA,EACzB,CAAC,EACE,YAAY,6BAA6B,EACzC,WAAW,EAAE,SAAS,OAAO,SAAS,iCAAiC,CAAC;AAAA;AAAA,EAE3E,cAAc,UAAU,KAAK,YAAY,+BAA+B;AAAA;AAAA,EAExE,YAAY,UAAU,MAAM,CAAC,cAAc,YAAY,CAAC,EAAE;AAAA,IACxD;AAAA,EACF;AAAA;AAAA,EAEA,YAAY,UAAU,MAAM,CAAC,WAAW,OAAO,CAAC,EAAE;AAAA,IAChD;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAIA,UAAU,UAAU,OAAO,YAAY,WAAW;AAAA,EAClD,MAAM,UAAU,KAAK,YAAY,gBAAgB;AAAA,EACjD,WAAW,UAAU,OAAO,YAAY,mDAAmD;AAC7F;AAEO,MAAM,+BACX;",
6
+ "names": []
7
+ }
@@ -0,0 +1,92 @@
1
+ import * as React from "react";
2
+ import { styled, xStyledCommonProps } from "@elliemae/ds-system";
3
+ import { DSCommentCardName, DSCommentCardSlots } from "./config/DSCommentCardDefinitions.js";
4
+ const CommentCardWrapper = styled("div", { name: DSCommentCardName, slot: DSCommentCardSlots.ROOT })`
5
+ min-height: 5.80923rem;
6
+ min-width: 18.80615rem;
7
+ margin-left: 1.84615rem;
8
+ margin-right: 1.84615rem;
9
+ width: auto;
10
+ border-radius: 2px;
11
+ &:focus {
12
+ outline: none;
13
+ position: relative;
14
+
15
+ &:after {
16
+ content: '';
17
+ position: absolute;
18
+ top: 0;
19
+ left: 0;
20
+ width: 100%;
21
+ height: 100%;
22
+ pointer-events: none;
23
+ border-radius: 2px;
24
+ border: 2px solid brand-700;
25
+ }
26
+ }
27
+ ${({ borderBot, theme }) => {
28
+ if (borderBot) {
29
+ return `
30
+ border-top: solid 0 ${theme.colors.neutral[100]};
31
+ border-bottom: solid 1px ${theme.colors.neutral[100]};
32
+ margin-bottom: 1.23077rem;
33
+ `;
34
+ }
35
+ return ``;
36
+ }}
37
+ ${xStyledCommonProps}
38
+ `;
39
+ const CommentCardHeader = styled("div", { name: DSCommentCardName, slot: DSCommentCardSlots.HEADER })`
40
+ border-top: solid 1px neutral-100;
41
+ display: flex;
42
+ padding: 0.30769rem 0.30769rem 0.30769rem 0.61538rem;
43
+
44
+ ${({ borderBottom, theme }) => {
45
+ if (borderBottom) {
46
+ return `
47
+ border-top: solid 0 ${theme.colors.neutral[100]};
48
+ `;
49
+ }
50
+ return ``;
51
+ }}
52
+ `;
53
+ const CommentCardContent = styled("div", { name: DSCommentCardName, slot: DSCommentCardSlots.CONTENT })`
54
+ padding: 0 0.61538rem 0.61538rem 0.61538rem;
55
+ font-size: 1rem;
56
+ line-height: ${() => "1.3"};
57
+ color: neutral-500;
58
+ button {
59
+ display: inline-block;
60
+ height: auto;
61
+ padding-left: 0.61538rem;
62
+ padding-right: 0.61538rem;
63
+ }
64
+ `;
65
+ const CommentCardLeft = styled("div", { name: DSCommentCardName, slot: DSCommentCardSlots.LEFT })`
66
+ flex: 1;
67
+ `;
68
+ const CommentCardName = styled("div", { name: DSCommentCardName, slot: DSCommentCardSlots.NAME })`
69
+ font-size: 1.0769rem;
70
+ font-weight: 600;
71
+ color: neutral-700;
72
+ padding-bottom: 0.15385rem;
73
+ `;
74
+ const CommentCardData = styled("div", { name: DSCommentCardName, slot: DSCommentCardSlots.DATA })`
75
+ font-size: 0.923rem;
76
+ font-weight: 300;
77
+ color: neutral-500;
78
+ span {
79
+ padding: 0 0.30769rem;
80
+ }
81
+ `;
82
+ const CommentCardMenu = styled("div", { name: DSCommentCardName, slot: DSCommentCardSlots.MENU })``;
83
+ export {
84
+ CommentCardContent,
85
+ CommentCardData,
86
+ CommentCardHeader,
87
+ CommentCardLeft,
88
+ CommentCardMenu,
89
+ CommentCardName,
90
+ CommentCardWrapper
91
+ };
92
+ //# sourceMappingURL=styled.js.map