@elliemae/ds-comments 3.21.2 → 3.22.0-next.1

package/dist/cjs/DSCommentCard.js

@@ -41,6 +41,7 @@ var import_DSCommentCardDefinitions = require("./config/DSCommentCardDefinitions
 var import_useCommentCard = require("./config/useCommentCard.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_DeprecatedMenu = require("./DeprecatedMenu.js");
+var import_utils = require("./utils.js");
 const DSCommentCard = (props) => {
   const {
     propsWithDefault: {
@@ -87,6 +88,14 @@ const DSCommentCard = (props) => {
                 import_styled.CommentCardLeft,
                 {
                   tabIndex: 0,
+                  "aria-label": (0, import_utils.buildAriaLabel)({
+                    name,
+                    displayDate,
+                    displayTime,
+                    type,
+                    withMenu: options && options.length > 0 || Boolean(Menu),
+                    content
+                  }),
                   className: "em-ds-comments__comment-card-left",
                   getOwnerProps,
                   getOwnerPropsArguments,

package/dist/cjs/DSCommentCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSCommentCard.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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      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          tabIndex={0}\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEb;AAlEV,8BAAyB;AACzB,0BAA2B;AAC3B,oBAQO;AACP,sCAAkC;AAClC,4BAA+B;AAC/B,mCAAkE;AAClE,4BAA+B;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,QAAI,sCAAe,KAAK;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qFACT,eAAe,uDAAuD;AAAA,MAExE,WAAW;AAAA,MACX,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,UAAU;AAAA,kBACV,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,4EACE;AAAA,wEAAC,UAAK,oBAAC;AAAA,4BACN;AAAA,6BACH;AAAA,0BAED,QACC,4EACE;AAAA,wEAAC,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,4CAAC,iCAAgB,eAA8B,wBAC7C,sDAAC,QAAM,GAAG,WAAW,GACvB;AAAA;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YAEA,sDAAC,kCAAW,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,8BAA0B,kCAAS,aAAa;AAC7D,wBAAwB,YAAY;",
+  "sourcesContent": ["/* 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';\nimport { buildAriaLabel } from './utils.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      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          tabIndex={0}\n          aria-label={buildAriaLabel({\n            name,\n            displayDate,\n            displayTime,\n            type,\n            withMenu: (options && options.length > 0) || Boolean(Menu),\n            content,\n          })}\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6Eb;AA3EV,8BAAyB;AACzB,0BAA2B;AAC3B,oBAQO;AACP,sCAAkC;AAClC,4BAA+B;AAC/B,mCAAkE;AAClE,4BAA+B;AAC/B,mBAA+B;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,QAAI,sCAAe,KAAK;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qFACT,eAAe,uDAAuD;AAAA,MAExE,WAAW;AAAA,MACX,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,UAAU;AAAA,kBACV,kBAAY,6BAAe;AAAA,oBACzB;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,UAAW,WAAW,QAAQ,SAAS,KAAM,QAAQ,IAAI;AAAA,oBACzD;AAAA,kBACF,CAAC;AAAA,kBACD,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,4EACE;AAAA,wEAAC,UAAK,oBAAC;AAAA,4BACN;AAAA,6BACH;AAAA,0BAED,QACC,4EACE;AAAA,wEAAC,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,4CAAC,iCAAgB,eAA8B,wBAC7C,sDAAC,QAAM,GAAG,WAAW,GACvB;AAAA;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YAEA,sDAAC,kCAAW,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,8BAA0B,kCAAS,aAAa;AAC7D,wBAAwB,YAAY;",
   "names": []
 }

package/dist/cjs/utils.js

@@ -0,0 +1,59 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  buildAriaLabel: () => buildAriaLabel
+});
+module.exports = __toCommonJS(utils_exports);
+var React = __toESM(require("react"));
+const buildAriaLabel = ({
+  name,
+  displayDate,
+  displayTime,
+  type,
+  withMenu,
+  content
+}) => {
+  let label = name;
+  if (displayDate) {
+    label += `, ${displayDate}`;
+  }
+  if (displayTime) {
+    label += `, ${displayTime}`;
+  }
+  if (type) {
+    label += `, ${type}`;
+  }
+  if (withMenu) {
+    label += ", with action menu";
+  }
+  label += `, ${content}`;
+  return label;
+};
+//# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const buildAriaLabel = ({\n  name,\n  displayDate,\n  displayTime,\n  type,\n  withMenu,\n  content,\n}: {\n  name: string;\n  displayDate: string | null;\n  displayTime: string | null;\n  type: string;\n  withMenu: boolean;\n  content: string;\n}) => {\n  let label = name;\n\n  if (displayDate) {\n    label += `, ${displayDate}`;\n  }\n\n  if (displayTime) {\n    label += `, ${displayTime}`;\n  }\n\n  if (type) {\n    label += `, ${type}`;\n  }\n\n  if (withMenu) {\n    label += ', with action menu';\n  }\n\n  label += `, ${content}`;\n\n  return label;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAOM;AACJ,MAAI,QAAQ;AAEZ,MAAI,aAAa;AACf,aAAS,KAAK;AAAA,EAChB;AAEA,MAAI,aAAa;AACf,aAAS,KAAK;AAAA,EAChB;AAEA,MAAI,MAAM;AACR,aAAS,KAAK;AAAA,EAChB;AAEA,MAAI,UAAU;AACZ,aAAS;AAAA,EACX;AAEA,WAAS,KAAK;AAEd,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/DSCommentCard.js

@@ -15,6 +15,7 @@ import { DSCommentCardName } from "./config/DSCommentCardDefinitions.js";
 import { useCommentCard } from "./config/useCommentCard.js";
 import { DSCommentCardPropTypesSchema } from "./react-desc-prop-types.js";
 import { DeprecatedMenu } from "./DeprecatedMenu.js";
+import { buildAriaLabel } from "./utils.js";
 const DSCommentCard = (props) => {
   const {
     propsWithDefault: {
@@ -61,6 +62,14 @@ const DSCommentCard = (props) => {
                 CommentCardLeft,
                 {
                   tabIndex: 0,
+                  "aria-label": buildAriaLabel({
+                    name,
+                    displayDate,
+                    displayTime,
+                    type,
+                    withMenu: options && options.length > 0 || Boolean(Menu),
+                    content
+                  }),
                   className: "em-ds-comments__comment-card-left",
                   getOwnerProps,
                   getOwnerPropsArguments,

package/dist/esm/DSCommentCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCommentCard.tsx"],
-  "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      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          tabIndex={0}\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"],
-  "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,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,UAAU;AAAA,kBACV,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;",
+  "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';\nimport { buildAriaLabel } from './utils.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      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          tabIndex={0}\n          aria-label={buildAriaLabel({\n            name,\n            displayDate,\n            displayTime,\n            type,\n            withMenu: (options && options.length > 0) || Boolean(Menu),\n            content,\n          })}\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"],
+  "mappings": "AAAA,YAAY,WAAW;AC6Eb,SAcI,UAdJ,KAcI,YAdJ;AA3EV,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;AAC/B,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,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,UAAU;AAAA,kBACV,cAAY,eAAe;AAAA,oBACzB;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,UAAW,WAAW,QAAQ,SAAS,KAAM,QAAQ,IAAI;AAAA,oBACzD;AAAA,kBACF,CAAC;AAAA,kBACD,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;",
   "names": []
 }

package/dist/esm/utils.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+const buildAriaLabel = ({
+  name,
+  displayDate,
+  displayTime,
+  type,
+  withMenu,
+  content
+}) => {
+  let label = name;
+  if (displayDate) {
+    label += `, ${displayDate}`;
+  }
+  if (displayTime) {
+    label += `, ${displayTime}`;
+  }
+  if (type) {
+    label += `, ${type}`;
+  }
+  if (withMenu) {
+    label += ", with action menu";
+  }
+  label += `, ${content}`;
+  return label;
+};
+export {
+  buildAriaLabel
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const buildAriaLabel = ({\n  name,\n  displayDate,\n  displayTime,\n  type,\n  withMenu,\n  content,\n}: {\n  name: string;\n  displayDate: string | null;\n  displayTime: string | null;\n  type: string;\n  withMenu: boolean;\n  content: string;\n}) => {\n  let label = name;\n\n  if (displayDate) {\n    label += `, ${displayDate}`;\n  }\n\n  if (displayTime) {\n    label += `, ${displayTime}`;\n  }\n\n  if (type) {\n    label += `, ${type}`;\n  }\n\n  if (withMenu) {\n    label += ', with action menu';\n  }\n\n  label += `, ${content}`;\n\n  return label;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAOM;AACJ,MAAI,QAAQ;AAEZ,MAAI,aAAa;AACf,aAAS,KAAK;AAAA,EAChB;AAEA,MAAI,aAAa;AACf,aAAS,KAAK;AAAA,EAChB;AAEA,MAAI,MAAM;AACR,aAAS,KAAK;AAAA,EAChB;AAEA,MAAI,UAAU;AACZ,aAAS;AAAA,EACX;AAEA,WAAS,KAAK;AAEd,SAAO;AACT;",
+  "names": []
+}

package/dist/types/utils.d.ts

@@ -0,0 +1,8 @@
+export declare const buildAriaLabel: ({ name, displayDate, displayTime, type, withMenu, content, }: {
+    name: string;
+    displayDate: string | null;
+    displayTime: string | null;
+    type: string;
+    withMenu: boolean;
+    content: string;
+}) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-comments",
-  "version": "3.21.2",
+  "version": "3.22.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Comments",
   "files": [
@@ -52,12 +52,12 @@
   },
   "dependencies": {
     "moment": "~2.29.4",
-    "@elliemae/ds-icons": "3.21.2",
-    "@elliemae/ds-props-helpers": "3.21.2",
-    "@elliemae/ds-read-more": "3.21.2",
-    "@elliemae/ds-button-v2": "3.21.2",
-    "@elliemae/ds-system": "3.21.2",
-    "@elliemae/ds-dropdownmenu": "3.21.2"
+    "@elliemae/ds-dropdownmenu": "3.22.0-next.1",
+    "@elliemae/ds-props-helpers": "3.22.0-next.1",
+    "@elliemae/ds-button-v2": "3.22.0-next.1",
+    "@elliemae/ds-icons": "3.22.0-next.1",
+    "@elliemae/ds-system": "3.22.0-next.1",
+    "@elliemae/ds-read-more": "3.22.0-next.1"
   },
   "devDependencies": {
     "styled-components": "~5.3.9"