@elliemae/ds-chat 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/esm/{parts → exported-related}/bubble/props.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import propTypes from "prop-types";
-import { PropTypes } from "react-desc";
-import { noop } from "lodash";
+import { PropTypes } from "@elliemae/ds-props-helpers";
+function noop(..._args) {
+}
 const BUBBLE_TYPES = {
   SENDER: "SENDER",
   RECIPIENT: "RECIPIENT",
@@ -9,32 +9,32 @@ const BUBBLE_TYPES = {
   SYSTEM: "SYSTEM"
 };
 const defaultBubbleProps = {
-  dsId: void 0,
+  dsId: "",
   type: BUBBLE_TYPES.SENDER,
-  title: void 0,
-  time: void 0,
-  body: void 0,
+  title: "",
+  time: "",
+  body: "",
   onClick: noop,
-  errorMessage: void 0,
-  helpMessage: void 0
+  errorMessage: "",
+  helpMessage: ""
 };
-const propsBubbles = {
+const BubblesPropTypes = {
   dsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Unique id for bubble").defaultValue(defaultBubbleProps.dsId),
   type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.description("Define bubble type ").defaultValue(defaultBubbleProps.type),
   title: PropTypes.string.isRequired.description("Title of the bubble").defaultValue(defaultBubbleProps.title),
   time: PropTypes.string.isRequired.description("Time of the bubble").defaultValue(defaultBubbleProps.title),
   body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired.description("Bubble content").defaultValue(defaultBubbleProps.body),
-  onClick: PropTypes.string.description("Callback when the bubble is tapped").defaultValue(defaultBubbleProps.onClick),
+  onClick: PropTypes.func.description("Callback when the bubble is tapped").defaultValue(defaultBubbleProps.onClick),
   errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description("Error message to display at bottom of the bubble").defaultValue(defaultBubbleProps.onClick),
   helpMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description("Help message to display at bottom of the bubble").defaultValue(defaultBubbleProps.onClick)
 };
 const propsArrowBubble = {
-  type: propTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER])
+  type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER])
 };
 export {
   BUBBLE_TYPES,
+  BubblesPropTypes,
   defaultBubbleProps,
-  propsArrowBubble,
-  propsBubbles
+  propsArrowBubble
 };
 //# sourceMappingURL=props.js.map

package/dist/esm/exported-related/bubble/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/bubble/props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport React from 'react';\n// eslint-disable-next-line @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 type BubbleTypesKeys = keyof typeof BUBBLE_TYPES;\nexport type BubbleTypesValues = typeof BUBBLE_TYPES[BubbleTypesKeys];\n\nexport interface BubblePropsT {\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\nexport const defaultBubbleProps: BubblePropsT = {\n  dsId: '',\n  type: BUBBLE_TYPES.SENDER,\n  title: '',\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.isRequired.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};\n\nexport const propsArrowBubble = {\n  type: PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]),\n};\n"],
+  "mappings": "AAAA;ACAA;AAGA,iBAAsC,OAAgB;AAAA;AAC/C,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AAAA;AAiBH,MAAM,qBAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA;AAGR,MAAM,mBAAmB;AAAA,EAC9B,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SACpD,YAAY,wBACZ,aAAa,mBAAmB;AAAA,EACnC,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,aAAa,SACzD,WAAW,YAAY,uBACvB,aAAa,mBAAmB;AAAA,EACnC,OAAO,UAAU,OAAO,WAAW,YAAY,uBAAuB,aAAa,mBAAmB;AAAA,EACtG,MAAM,UAAU,OAAO,WAAW,YAAY,sBAAsB,aAAa,mBAAmB;AAAA,EACpG,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,UACpD,WAAW,YAAY,kBACvB,aAAa,mBAAmB;AAAA,EACnC,SAAS,UAAU,KAAK,YAAY,sCAAsC,aAAa,mBAAmB;AAAA,EAC1G,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,UAC5D,YAAY,oDACZ,aAAa,mBAAmB;AAAA,EACnC,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,UAC3D,YAAY,mDACZ,aAAa,mBAAmB;AAAA;AAG9B,MAAM,mBAAmB;AAAA,EAC9B,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,aAAa;AAAA;",
+  "names": []
+}

package/dist/esm/exported-related/bubble/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/bubble/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './props';\n\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n  min-width: 224px;\n  border-radius: 10px;\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[500]};\n  }\n  a {\n    font-size: 12px;\n    color: ${(props) => props.theme.colors.danger[500]};\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"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAGO,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAIrC,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA,WAGlC,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;AAAA;AAAA;AAAA,WAG5B,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;",
+  "names": []
+}

package/dist/esm/{parts → exported-related}/chat-card/ChatCard.js

@@ -1,12 +1,12 @@
 import * as React from "react";
 import React2 from "react";
-import { describe } from "react-desc";
+import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { propTypes } from "./props";
-import { useValidateProps } from "./config/useValidateProps";
+import { propTypes, defaultProps } from "./props";
 import { Wrapper, MainContent, Title, Content, Time, RightAddon } from "./styled";
 const ChatCard = (props) => {
-  useValidateProps(props, ChatCardWithSchema.toJSON());
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
   const { title, content, time, rightAddon } = props;
   return /* @__PURE__ */ React2.createElement(Wrapper, {
     cols: ["1fr", "auto"],

package/dist/esm/exported-related/chat-card/ChatCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-card/ChatCard.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { propTypes, CardPropTypes, defaultProps } from './props';\nimport { Wrapper, MainContent, Title, Content, Time, RightAddon } from './styled';\n\nconst ChatCard: React.ComponentType<CardPropTypes> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n\n  const { title, content, time, rightAddon } = props;\n  return (\n    <Wrapper cols={['1fr', 'auto']} data-testid=\"chat-card-wrapper\">\n      <MainContent>\n        <Title data-testid=\"chat-card-title\">{title}</Title>\n        <Content data-testid=\"chat-card-content\">\n          <SimpleTruncatedTooltipText value={content} />\n        </Content>\n        {time && <Time data-testid=\"chat-card-time\">{time}</Time>}\n      </MainContent>\n      {rightAddon && <RightAddon data-testid=\"chat-card-right-addon\">{rightAddon}</RightAddon>}\n    </Wrapper>\n  );\n};\n\nChatCard.propTypes = propTypes as WeakValidationMap<unknown>;\nconst ChatCardWithSchema = describe(ChatCard);\nChatCardWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { ChatCard, ChatCardWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;AACA;AACA;AAEA,MAAM,WAA+C,CAAC,UAAU;AAC9D,QAAM,mBAAmB,6BAA6B,OAAO;AAC7D,iCAA+B,kBAAkB;AAEjD,QAAM,EAAE,OAAO,SAAS,MAAM,eAAe;AAC7C,SACE,qCAAC,SAAD;AAAA,IAAS,MAAM,CAAC,OAAO;AAAA,IAAS,eAAY;AAAA,KAC1C,qCAAC,aAAD,MACE,qCAAC,OAAD;AAAA,IAAO,eAAY;AAAA,KAAmB,QACtC,qCAAC,SAAD;AAAA,IAAS,eAAY;AAAA,KACnB,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OAEpC,QAAQ,qCAAC,MAAD;AAAA,IAAM,eAAY;AAAA,KAAkB,QAE9C,cAAc,qCAAC,YAAD;AAAA,IAAY,eAAY;AAAA,KAAyB;AAAA;AAKtE,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS;AACpC,mBAAmB,YAAY;",
+  "names": []
+}

package/dist/esm/{parts → exported-related}/chat-card/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-card/index.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-card/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatCard, ChatCardWithSchema } from './ChatCard';\n"],
   "mappings": "AAAA;ACAA;",
   "names": []

package/dist/esm/{parts → exported-related}/chat-card/props.js

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from "@elliemae/ds-props-helpers";
+const defaultProps = {
+  title: "",
+  content: "",
+  time: "",
+  rightAddon: /* @__PURE__ */ React.createElement(React.Fragment, null)
+};
 const propTypes = {
   title: PropTypes.string.isRequired.description(`Card's title`),
   content: PropTypes.string.description(`Card's content`),
@@ -7,6 +13,7 @@ const propTypes = {
   rightAddon: PropTypes.element.description("Right addon, badge or icon")
 };
 export {
+  defaultProps,
   propTypes
 };
 //# sourceMappingURL=props.js.map

package/dist/esm/exported-related/chat-card/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-card/props.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport const defaultProps: CardPropTypes = {\n  title: '',\n  content: '',\n  time: '',\n  rightAddon: <></>,\n};\n\nexport const propTypes = {\n  title: PropTypes.string.isRequired.description(`Card's title`),\n  content: PropTypes.string.description(`Card's content`),\n  time: PropTypes.string.description('Time'),\n  rightAddon: PropTypes.element.description('Right addon, badge or icon'),\n};\n\nexport interface CardPropTypes {\n  title: string;\n  content: string;\n  time: string;\n  rightAddon: JSX.Element;\n}\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,eAA8B;AAAA,EACzC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY;AAAA;AAGP,MAAM,YAAY;AAAA,EACvB,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAC/C,SAAS,UAAU,OAAO,YAAY;AAAA,EACtC,MAAM,UAAU,OAAO,YAAY;AAAA,EACnC,YAAY,UAAU,QAAQ,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/{parts → exported-related}/chat-card/styled.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-card/styled.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-card/styled.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const Wrapper = styled(Grid)`\n  min-width: 248px;\n  border: 1px;\n  border-bottom: 1px solid #ccc;\n  padding: 12px 12px;\n`;\n\nexport const MainContent = styled.div``;\n\nexport const Title = styled.p`\n  font-size: 16px;\n  font-weight: 600;\n  margin: 0;\n`;\n\nexport const Content = styled.p`\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1;\n  margin: 0;\n`;\n\nexport const Time = styled.p`\n  font-size: 12px;\n  font-weight: 100;\n  margin: 0;\n  margin-top: 8px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['500']};\n`;\n\nexport const RightAddon = styled.div`\n  height: fit-content;\n  margin-left: 12px;\n`;\n"],
   "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,cAAc,OAAO;AAE3B,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;",
   "names": []

package/dist/esm/{parts → exported-related}/chat-container-header/ChatContainerHeader.js

@@ -1,18 +1,20 @@
 import * as React from "react";
 import React2 from "react";
+import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
 import {
   StyledChatContainerContentHeader,
   StyledChatContainerContentHeaderLabel,
   StyledChatContainerContentHeaderActions
 } from "./styled";
-import { validHeaderChilds } from "./helpers";
+import { defaultProps, propTypes } from "./props";
 const ChatContainerHeader = (props) => {
-  const { title, floating, children } = props;
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
+  const { title, children } = propsWithDefault;
   return /* @__PURE__ */ React2.createElement(StyledChatContainerContentHeader, {
     alignItems: "center",
     cols: ["minmax(calc(100% - 64px), 1fr)", children ? "auto" : "0px"],
-    floating,
     role: "heading"
   }, /* @__PURE__ */ React2.createElement(StyledChatContainerContentHeaderLabel, {
     "data-testid": "chat-container-header-title",
@@ -21,12 +23,16 @@ const ChatContainerHeader = (props) => {
   }, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
     value: title
   })), /* @__PURE__ */ React2.createElement(StyledChatContainerContentHeaderActions, {
-    cols: validHeaderChilds(children),
+    cols: React2.Children.toArray(children).filter(Boolean).map(() => "32px"),
     justifyContent: "flex-end",
     "data-testid": "chat-container-header-children"
   }, children));
 };
+ChatContainerHeader.propTypes = propTypes;
+const ChatContainerHeaderWithSchema = describe(ChatContainerHeader);
+ChatContainerHeaderWithSchema.propTypes = propTypes;
 export {
-  ChatContainerHeader
+  ChatContainerHeader,
+  ChatContainerHeaderWithSchema
 };
 //# sourceMappingURL=ChatContainerHeader.js.map

package/dist/esm/exported-related/chat-container-header/ChatContainerHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-container-header/ChatContainerHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n  StyledChatContainerContentHeader,\n  StyledChatContainerContentHeaderLabel,\n  StyledChatContainerContentHeaderActions,\n} from './styled';\nimport { defaultProps, propTypes, HeaderProps } from './props';\n\nconst ChatContainerHeader: React.ComponentType<HeaderProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n\n  const { title, children } = propsWithDefault;\n\n  return (\n    <StyledChatContainerContentHeader\n      alignItems=\"center\"\n      cols={['minmax(calc(100% - 64px), 1fr)', children ? 'auto' : '0px']}\n      role=\"heading\"\n    >\n      <StyledChatContainerContentHeaderLabel data-testid=\"chat-container-header-title\" pl=\"xxs\" pr=\"xxs\">\n        <SimpleTruncatedTooltipText value={title} />\n      </StyledChatContainerContentHeaderLabel>\n      <StyledChatContainerContentHeaderActions\n        cols={React.Children.toArray(children)\n          .filter(Boolean)\n          .map(() => '32px')}\n        justifyContent=\"flex-end\"\n        data-testid=\"chat-container-header-children\"\n      >\n        {children}\n      </StyledChatContainerContentHeaderActions>\n    </StyledChatContainerContentHeader>\n  );\n};\n\nChatContainerHeader.propTypes = propTypes as WeakValidationMap<unknown>;\nconst ChatContainerHeaderWithSchema = describe(ChatContainerHeader);\nChatContainerHeaderWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainerHeader, ChatContainerHeaderWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAKA;AAEA,MAAM,sBAAwD,CAAC,UAAU;AACvE,QAAM,mBAAmB,6BAA6B,OAAO;AAC7D,iCAA+B,kBAAkB;AAEjD,QAAM,EAAE,OAAO,aAAa;AAE5B,SACE,qCAAC,kCAAD;AAAA,IACE,YAAW;AAAA,IACX,MAAM,CAAC,kCAAkC,WAAW,SAAS;AAAA,IAC7D,MAAK;AAAA,KAEL,qCAAC,uCAAD;AAAA,IAAuC,eAAY;AAAA,IAA8B,IAAG;AAAA,IAAM,IAAG;AAAA,KAC3F,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OAErC,qCAAC,yCAAD;AAAA,IACE,MAAM,OAAM,SAAS,QAAQ,UAC1B,OAAO,SACP,IAAI,MAAM;AAAA,IACb,gBAAe;AAAA,IACf,eAAY;AAAA,KAEX;AAAA;AAMT,oBAAoB,YAAY;AAChC,MAAM,gCAAgC,SAAS;AAC/C,8BAA8B,YAAY;",
+  "names": []
+}

package/dist/esm/{parts → exported-related}/chat-container-header/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-header/helpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\ninterface validParamT {\n  childs: React.ReactChild | React.ReactFragment | React.ReactPortal;\n}\n\nexport const validHeaderChilds = (children: validParamT): any =>\n  React.Children.toArray(children)\n    .filter((e) => {\n      if (Array.isArray(e.props.children)) {\n        return false;\n      }\n      if (e.props.children === undefined && e.$$typeof.toString() === 'Symbol(react.element)') {\n        return true;\n      }\n      return !!e.props.children;\n    })\n    .map(() => '32px');\n"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-container-header/helpers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\ninterface ValidParamT {\n  childs: React.ReactChild | React.ReactFragment | React.ReactPortal;\n}\n\nexport const validHeaderChilds = (children: ValidParamT): any =>\n  React.Children.toArray(children)\n    .filter((e) => {\n      if (Array.isArray(e.props.children)) {\n        return false;\n      }\n      if (e.props.children === undefined && e.$$typeof.toString() === 'Symbol(react.element)') {\n        return true;\n      }\n      return !!e.props.children;\n    })\n    .map(() => '32px');\n"],
   "mappings": "AAAA;ACAA;AAMO,MAAM,oBAAoB,CAAC,aAChC,OAAM,SAAS,QAAQ,UACpB,OAAO,CAAC,MAAM;AACb,MAAI,MAAM,QAAQ,EAAE,MAAM,WAAW;AACnC,WAAO;AAAA;AAET,MAAI,EAAE,MAAM,aAAa,UAAa,EAAE,SAAS,eAAe,yBAAyB;AACvF,WAAO;AAAA;AAET,SAAO,CAAC,CAAC,EAAE,MAAM;AAAA,GAElB,IAAI,MAAM;",
   "names": []
 }

package/dist/esm/exported-related/chat-container-header/props.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { PropTypes } from "@elliemae/ds-props-helpers";
+const defaultProps = {
+  title: ""
+};
+const propTypes = {
+  title: PropTypes.string.isRequired.description(`Card's title`),
+  children: PropTypes.node.description("Childrens")
+};
+export {
+  defaultProps,
+  propTypes
+};
+//# sourceMappingURL=props.js.map

package/dist/esm/exported-related/chat-container-header/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-container-header/props.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport const defaultProps: HeaderProps = {\n  title: '',\n};\n\nexport const propTypes = {\n  title: PropTypes.string.isRequired.description(`Card's title`),\n  children: PropTypes.node.description('Childrens'),\n};\n\nexport interface HeaderProps {\n  title: string;\n  children?: React.ReactChild;\n}\n"],
+  "mappings": "AAAA;ACCA;AAEO,MAAM,eAA4B;AAAA,EACvC,OAAO;AAAA;AAGF,MAAM,YAAY;AAAA,EACvB,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAC/C,UAAU,UAAU,KAAK,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/{parts → exported-related}/chat-container-header/styled.js

@@ -21,6 +21,7 @@ const StyledChatContainerContentHeaderLabel = styled(Grid)`
   font-weight: bold;
   font-size: 18px;
   color: ${(props) => props.theme.colors.neutral["700"]};
+  line-height: 1.6;
 `;
 export {
   StyledChatContainerContentHeader,

package/dist/esm/{parts → exported-related}/chat-container-header/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-header/styled.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const StyledChatContainerContentHeaderActions = styled(Grid)`\n  max-width: 80px;\n`;\n\nexport const StyledChatContainerContentHeader = styled(Grid)`\n  width: 100%;\n  min-height: 48px;\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['200']};\n  background: ${(props) => props.theme.colors.neutral['050']};\n  ${StyledChatContainerContentHeaderActions} {\n    & button {\n      background: transparent;\n    }\n  }\n`;\n\nexport const StyledChatContainerContentHeaderLabel = styled(Grid)`\n  justify-content: center;\n  align-items: center;\n  font-weight: bold;\n  font-size: 18px;\n  color: ${(props) => props.theme.colors.neutral['700']};\n`;\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,0CAA0C,OAAO;AAAA;AAAA;AAIvD,MAAM,mCAAmC,OAAO;AAAA;AAAA;AAAA,6BAG1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAClD;AAAA;AAAA;AAAA;AAAA;AAAA;AAOG,MAAM,wCAAwC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKjD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;",
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-container-header/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const StyledChatContainerContentHeaderActions = styled(Grid)`\n  max-width: 80px;\n`;\n\nexport const StyledChatContainerContentHeader = styled(Grid)`\n  width: 100%;\n  min-height: 48px;\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['200']};\n  background: ${(props) => props.theme.colors.neutral['050']};\n  ${StyledChatContainerContentHeaderActions} {\n    & button {\n      background: transparent;\n    }\n  }\n`;\n\nexport const StyledChatContainerContentHeaderLabel = styled(Grid)`\n  justify-content: center;\n  align-items: center;\n  font-weight: bold;\n  font-size: 18px;\n  color: ${(props) => props.theme.colors.neutral['700']};\n  line-height: 1.6;\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,0CAA0C,OAAO;AAAA;AAAA;AAIvD,MAAM,mCAAmC,OAAO;AAAA;AAAA;AAAA,6BAG1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAClD;AAAA;AAAA;AAAA;AAAA;AAAA;AAOG,MAAM,wCAAwC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKjD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/{parts → exported-related}/chat-empty-state/ChatEmptyState.js

@@ -1,14 +1,14 @@
 import * as React from "react";
 import React2, { useMemo } from "react";
-import { describe } from "react-desc";
+import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { Grid } from "@elliemae/ds-grid";
 import { Communications } from "@elliemae/ds-icons";
 import { emptyStateProps, defaultProps } from "./props";
 import { ChatEmptyStateWrapper, MessageWrapper } from "./styled";
-import { useValidateProps } from "./config/useValidateProps";
 const ChatEmptyState = (props) => {
-  useValidateProps(props, ChatEmptyStateListWithSchema.toJSON());
-  const { label, action } = props;
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, emptyStateProps);
+  const { label, action } = propsWithDefault;
   const MainContent = useMemo(() => /* @__PURE__ */ React2.createElement(Grid, {
     alignItems: "center",
     justifyContent: "center"
@@ -31,11 +31,10 @@ const ChatEmptyState = (props) => {
   }, MainContent);
 };
 ChatEmptyState.propTypes = emptyStateProps;
-ChatEmptyState.defaultProps = defaultProps;
-const ChatEmptyStateListWithSchema = describe(ChatEmptyState);
-ChatEmptyStateListWithSchema.propTypes = emptyStateProps;
+const ChatEmptyStateWithSchema = describe(ChatEmptyState);
+ChatEmptyStateWithSchema.propTypes = emptyStateProps;
 export {
   ChatEmptyState,
-  ChatEmptyStateListWithSchema
+  ChatEmptyStateWithSchema
 };
 //# sourceMappingURL=ChatEmptyState.js.map

package/dist/esm/exported-related/chat-empty-state/ChatEmptyState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-empty-state/ChatEmptyState.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, WeakValidationMap } from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Communications } from '@elliemae/ds-icons';\nimport { ChatEmptyStateProps, emptyStateProps, defaultProps } from './props';\nimport { ChatEmptyStateWrapper, MessageWrapper } from './styled';\n\nconst ChatEmptyState: React.ComponentType<ChatEmptyStateProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, emptyStateProps);\n\n  const { label, action } = propsWithDefault;\n  const MainContent = useMemo(\n    () => (\n      <Grid alignItems=\"center\" justifyContent=\"center\">\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          <Communications size=\"xxl\" color={['neutral', 400]} />\n        </Grid>\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          <MessageWrapper>{label}</MessageWrapper>\n        </Grid>\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {action}\n        </Grid>\n      </Grid>\n    ),\n    [label, action],\n  );\n  return (\n    <ChatEmptyStateWrapper alignItems=\"center\" justifyContent=\"center\">\n      {MainContent}\n    </ChatEmptyStateWrapper>\n  );\n};\n\nChatEmptyState.propTypes = emptyStateProps as WeakValidationMap<unknown>;\nconst ChatEmptyStateWithSchema = describe(ChatEmptyState);\nChatEmptyStateWithSchema.propTypes = emptyStateProps as WeakValidationMap<unknown>;\n\nexport { ChatEmptyState, ChatEmptyStateWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,iBAA2D,CAAC,UAAU;AAC1E,QAAM,mBAAmB,6BAA6B,OAAO;AAC7D,iCAA+B,kBAAkB;AAEjD,QAAM,EAAE,OAAO,WAAW;AAC1B,QAAM,cAAc,QAClB,MACE,qCAAC,MAAD;AAAA,IAAM,YAAW;AAAA,IAAS,gBAAe;AAAA,KACvC,qCAAC,MAAD;AAAA,IAAM,YAAW;AAAA,IAAS,gBAAe;AAAA,KACvC,qCAAC,gBAAD;AAAA,IAAgB,MAAK;AAAA,IAAM,OAAO,CAAC,WAAW;AAAA,OAEhD,qCAAC,MAAD;AAAA,IAAM,YAAW;AAAA,IAAS,gBAAe;AAAA,KACvC,qCAAC,gBAAD,MAAiB,SAEnB,qCAAC,MAAD;AAAA,IAAM,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,UAIP,CAAC,OAAO;AAEV,SACE,qCAAC,uBAAD;AAAA,IAAuB,YAAW;AAAA,IAAS,gBAAe;AAAA,KACvD;AAAA;AAKP,eAAe,YAAY;AAC3B,MAAM,2BAA2B,SAAS;AAC1C,yBAAyB,YAAY;",
+  "names": []
+}

package/dist/esm/{parts → exported-related}/chat-empty-state/props.js

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from "@elliemae/ds-props-helpers";
 const defaultProps = {
   label: "No Messages Yet",
-  action: null
+  action: /* @__PURE__ */ React.createElement(React.Fragment, null)
 };
 const emptyStateProps = {
-  label: PropTypes.arrayOf(PropTypes.string).description("No Message to show text helper").defaultValue(defaultProps.label),
+  label: PropTypes.string.description("No Message to show text helper").defaultValue(defaultProps.label),
   action: PropTypes.node.description("action element").defaultValue(defaultProps.action)
 };
 export {

package/dist/esm/exported-related/chat-empty-state/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-empty-state/props.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport interface ChatEmptyStateProps {\n  label: string;\n  action: JSX.Element;\n}\n\nexport const defaultProps: ChatEmptyStateProps = {\n  label: 'No Messages Yet',\n  action: <></>,\n};\n\nexport const emptyStateProps = {\n  label: PropTypes.string.description('No Message to show text helper').defaultValue(defaultProps.label),\n  action: PropTypes.node.description('action element').defaultValue(defaultProps.action),\n};\n"],
+  "mappings": "AAAA;ACAA;AAOO,MAAM,eAAoC;AAAA,EAC/C,OAAO;AAAA,EACP,QAAQ;AAAA;AAGH,MAAM,kBAAkB;AAAA,EAC7B,OAAO,UAAU,OAAO,YAAY,kCAAkC,aAAa,aAAa;AAAA,EAChG,QAAQ,UAAU,KAAK,YAAY,kBAAkB,aAAa,aAAa;AAAA;",
+  "names": []
+}

package/dist/esm/{parts → exported-related}/chat-empty-state/styled.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-empty-state/styled.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-empty-state/styled.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const CONTAINER_WIDTH = 300;\n\nexport const ChatEmptyStateWrapper = styled(Grid)`\n  height: 100%;\n  min-width: ${CONTAINER_WIDTH}px;\n  overflow: hidden;\n  background: ${(props) => props.theme.colors.neutral['050']};\n`;\n\nexport const MessageWrapper = styled.p`\n  font-size: 18px;\n`;\n"],
   "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,kBAAkB;AAExB,MAAM,wBAAwB,OAAO;AAAA;AAAA,eAE7B;AAAA;AAAA,gBAEC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG/C,MAAM,iBAAiB,OAAO;AAAA;AAAA;",
   "names": []

package/dist/esm/{parts → exported-related}/chat-sidebar/SideBarChat.js

@@ -1,12 +1,30 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2 from "react";
-import { describe } from "react-desc";
+import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { MenuCollapse, MenuExpand } from "@elliemae/ds-icons";
 import { StyledSideBarContainer, StyledSideBarButtonsContainer } from "./styled";
 import { TileButton } from "../tile-button";
-import { SidebarButton } from "../sidebar-button/SidebarButton";
+import { SidebarButton } from "./sidebar-button/SidebarButton";
 import { defaultProps, chatSidebarProps } from "./props";
-import { useValidateProps } from "./config/useValidateProps";
 const FooterChat = ({
   expanded,
   onFooterClose,
@@ -14,14 +32,14 @@ const FooterChat = ({
   footerButtonExtraProps
 }) => /* @__PURE__ */ React2.createElement(SidebarButton, {
   dsId: "sidebar_footer",
-  label: null,
   Icon: !expanded ? MenuCollapse : MenuExpand,
   onClick: expanded ? onFooterClose : onFooterExpand,
   "aria-pressed": expanded,
   "aria-label": footerButtonExtraProps["aria-label"]
 });
 const SideBarChat = (props) => {
-  useValidateProps(props, SideBarChatWithSchema.toJSON());
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, chatSidebarProps);
   const {
     sidebarItems,
     expanded,
@@ -32,28 +50,28 @@ const SideBarChat = (props) => {
     tooltipPlacement,
     enableTooltipWhenIsClosed,
     actionRef
-  } = props;
+  } = propsWithDefault;
   const { current: listRef } = React2.useRef({});
   const registerReference = React2.useCallback((ref) => {
     if (ref)
       listRef[ref.dataset.key] = ref;
   }, [listRef]);
   React2.useEffect(() => {
-    if (actionRef.current.listRef) {
+    if (actionRef.current?.listRef) {
       actionRef.current.listRef = listRef;
     }
   }, [sidebarItems, expanded, actionRef, listRef]);
   return /* @__PURE__ */ React2.createElement(StyledSideBarContainer, {
     rows: [1, "auto"],
     ref: listRef
-  }, /* @__PURE__ */ React2.createElement(StyledSideBarButtonsContainer, null, sidebarItems.map((p) => /* @__PURE__ */ React2.createElement(TileButton, {
+  }, /* @__PURE__ */ React2.createElement(StyledSideBarButtonsContainer, null, sidebarItems.map((p) => /* @__PURE__ */ React2.createElement(TileButton, __spreadProps(__spreadValues({
     key: p.dsId,
-    innerRef: registerReference,
-    ...p,
+    innerRef: registerReference
+  }, p), {
     selected: selectedItem === p.dsId,
     tooltipPlacement,
     disableTooltip: enableTooltipWhenIsClosed ? false : !expanded
-  }))), /* @__PURE__ */ React2.createElement(FooterChat, {
+  })))), /* @__PURE__ */ React2.createElement(FooterChat, {
     expanded,
     onFooterClose,
     onFooterExpand,
@@ -61,7 +79,6 @@ const SideBarChat = (props) => {
   }));
 };
 SideBarChat.propTypes = chatSidebarProps;
-SideBarChat.defaultProps = defaultProps;
 const SideBarChatWithSchema = describe(SideBarChat);
 SideBarChatWithSchema.propTypes = chatSidebarProps;
 export {

package/dist/esm/exported-related/chat-sidebar/SideBarChat.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-sidebar/SideBarChat.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { StyledSideBarContainer, StyledSideBarButtonsContainer } from './styled';\nimport { TileButton } from '../tile-button';\nimport { SidebarButton } from './sidebar-button/SidebarButton';\nimport { ChatSidebarProps, defaultProps, chatSidebarProps } from './props';\n\nconst FooterChat = ({\n  expanded,\n  onFooterClose,\n  onFooterExpand,\n  footerButtonExtraProps,\n}: Pick<ChatSidebarProps, 'expanded' | 'onFooterClose' | 'onFooterExpand' | 'footerButtonExtraProps'>) => (\n  <SidebarButton\n    dsId=\"sidebar_footer\"\n    Icon={!expanded ? MenuCollapse : MenuExpand}\n    onClick={expanded ? onFooterClose : onFooterExpand}\n    aria-pressed={expanded}\n    aria-label={footerButtonExtraProps['aria-label']}\n  />\n);\n\nconst SideBarChat: React.ComponentType<ChatSidebarProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, chatSidebarProps);\n\n  const {\n    sidebarItems,\n    expanded,\n    onFooterClose,\n    onFooterExpand,\n    selectedItem,\n    footerButtonExtraProps,\n    tooltipPlacement,\n    enableTooltipWhenIsClosed,\n    actionRef,\n  } = propsWithDefault;\n  const { current: listRef } = React.useRef({});\n  const registerReference = React.useCallback(\n    (ref: HTMLElement) => {\n      if (ref) listRef[ref.dataset.key] = ref;\n    },\n    [listRef],\n  );\n  React.useEffect(() => {\n    if (actionRef.current?.listRef) {\n      actionRef.current.listRef = listRef;\n    }\n  }, [sidebarItems, expanded, actionRef, listRef]);\n\n  return (\n    <StyledSideBarContainer rows={[1, 'auto']} ref={listRef}>\n      <StyledSideBarButtonsContainer>\n        {sidebarItems.map((p) => (\n          <TileButton\n            key={p.dsId}\n            innerRef={registerReference}\n            {...p}\n            selected={selectedItem === p.dsId}\n            tooltipPlacement={tooltipPlacement}\n            disableTooltip={enableTooltipWhenIsClosed ? false : !expanded}\n          />\n        ))}\n      </StyledSideBarButtonsContainer>\n      <FooterChat\n        expanded={expanded}\n        onFooterClose={onFooterClose}\n        onFooterExpand={onFooterExpand}\n        footerButtonExtraProps={footerButtonExtraProps}\n      />\n    </StyledSideBarContainer>\n  );\n};\n\nSideBarChat.propTypes = chatSidebarProps as WeakValidationMap<unknown>;\nconst SideBarChatWithSchema = describe(SideBarChat);\nSideBarChatWithSchema.propTypes = chatSidebarProps as WeakValidationMap<unknown>;\n\nexport { SideBarChat, SideBarChatWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,qCAAC,eAAD;AAAA,EACE,MAAK;AAAA,EACL,MAAM,CAAC,WAAW,eAAe;AAAA,EACjC,SAAS,WAAW,gBAAgB;AAAA,EACpC,gBAAc;AAAA,EACd,cAAY,uBAAuB;AAAA;AAIvC,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,mBAAmB,6BAA6B,OAAO;AAC7D,iCAA+B,kBAAkB;AAEjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,EAAE,SAAS,YAAY,OAAM,OAAO;AAC1C,QAAM,oBAAoB,OAAM,YAC9B,CAAC,QAAqB;AACpB,QAAI;AAAK,cAAQ,IAAI,QAAQ,OAAO;AAAA,KAEtC,CAAC;AAEH,SAAM,UAAU,MAAM;AACpB,QAAI,UAAU,SAAS,SAAS;AAC9B,gBAAU,QAAQ,UAAU;AAAA;AAAA,KAE7B,CAAC,cAAc,UAAU,WAAW;AAEvC,SACE,qCAAC,wBAAD;AAAA,IAAwB,MAAM,CAAC,GAAG;AAAA,IAAS,KAAK;AAAA,KAC9C,qCAAC,+BAAD,MACG,aAAa,IAAI,CAAC,MACjB,qCAAC,YAAD;AAAA,IACE,KAAK,EAAE;AAAA,IACP,UAAU;AAAA,KACN,IAHN;AAAA,IAIE,UAAU,iBAAiB,EAAE;AAAA,IAC7B;AAAA,IACA,gBAAgB,4BAA4B,QAAQ,CAAC;AAAA,SAI3D,qCAAC,YAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAMR,YAAY,YAAY;AACxB,MAAM,wBAAwB,SAAS;AACvC,sBAAsB,YAAY;",
+  "names": []
+}

package/dist/esm/{parts → exported-related}/chat-sidebar/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-sidebar/index.ts"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-sidebar/index.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { SideBarChat, SideBarChatWithSchema } from './SideBarChat';\n"],
   "mappings": "AAAA;ACAA;",
   "names": []

package/dist/esm/{parts → exported-related}/chat-sidebar/props.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { createRef } from "react";
 import { PropTypes } from "react-desc";
 import { noop } from "lodash";
 const defaultProps = {
@@ -12,11 +13,7 @@ const defaultProps = {
   footerButtonExtraProps: { "aria-label": "expand or collapse button" },
   tooltipPlacement: "right",
   enableTooltipWhenIsClosed: false,
-  actionRef: {
-    current: {
-      listRef: []
-    }
-  }
+  actionRef: createRef()
 };
 const chatSidebarProps = {
   sidebarItems: PropTypes.arrayOf(PropTypes.object).description("The array of out-of-the-box items you want to render inside the sidebar nav of the chat").defaultValue(defaultProps.sidebarItems),

package/dist/esm/exported-related/chat-sidebar/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/chat-sidebar/props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createRef } from 'react';\nimport { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\nimport { TileButtonProps } from '../tile-button/props';\n\nexport interface ChatSidebarProps {\n  sidebarItems: TileButtonProps[];\n  expanded: boolean;\n  selectedItem: undefined;\n  onFooterClose: () => void;\n  onFooterExpand: () => void;\n  onHeaderExpand: () => void;\n  onHeaderClose: () => void;\n  footerButtonExtraProps: Record<string, string>;\n  tooltipPlacement:\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'bottom-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'left-end'\n    | 'left'\n    | 'left-start';\n  enableTooltipWhenIsClosed: boolean;\n  actionRef: React.RefObject<HTMLElement>;\n}\n\nexport const defaultProps: ChatSidebarProps = {\n  expanded: false,\n  selectedItem: undefined,\n  sidebarItems: [],\n  onFooterExpand: noop,\n  onFooterClose: noop,\n  onHeaderExpand: noop,\n  onHeaderClose: noop,\n  footerButtonExtraProps: { 'aria-label': 'expand or collapse button' },\n  tooltipPlacement: 'right',\n  enableTooltipWhenIsClosed: false,\n  actionRef: createRef(),\n};\n\nexport const chatSidebarProps = {\n  sidebarItems: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of out-of-the-box items you want to render inside the sidebar nav of the chat')\n    .defaultValue(defaultProps.sidebarItems),\n  expanded: PropTypes.bool\n    .description('Whether to show the chat expanded or collapsed')\n    .defaultValue(defaultProps.expanded),\n  selectedItem: PropTypes.string\n    .description('The id of the chat item you want to be opened')\n    .defaultValue(defaultProps.selectedItem),\n  tooltipPlacement: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preferences, as per popperjs placement option')\n    .defaultValue(\"'right'\"),\n  enableTooltipWhenIsClosed: PropTypes.bool\n    .description('Enable tooltip when is closed')\n    .defaultValue(defaultProps.onFooterExpand),\n  onFooterExpand: PropTypes.func\n    .description('The function to call when the chat is opened via the footer')\n    .defaultValue(defaultProps.onFooterExpand),\n  onFooterClose: PropTypes.func\n    .description('The function to call when the chat is closed via the footer')\n    .defaultValue(defaultProps.onFooterClose),\n  onHeaderExpand: PropTypes.func\n    .description('The function to call when the chat is opened via the header')\n    .defaultValue(defaultProps.onHeaderExpand),\n  onHeaderClose: PropTypes.func\n    .description('The function to call when the chat is closed via the header')\n    .defaultValue(defaultProps.onHeaderClose),\n  footerButtonExtraProps: PropTypes.object\n    .description('Expand/collapse footer button extra props')\n    .defaultValue(defaultProps.footerButtonExtraProps),\n  actionRef: PropTypes.object\n    .description(\n      `Action ref for sidebar\n  {\n    listRef: references to Tiles\n  }\n  `,\n    )\n    .defaultValue(defaultProps.actionRef),\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AA6BO,MAAM,eAAiC;AAAA,EAC5C,UAAU;AAAA,EACV,cAAc;AAAA,EACd,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,wBAAwB,EAAE,cAAc;AAAA,EACxC,kBAAkB;AAAA,EAClB,2BAA2B;AAAA,EAC3B,WAAW;AAAA;AAGN,MAAM,mBAAmB;AAAA,EAC9B,cAAc,UAAU,QAAQ,UAAU,QACvC,YAAY,2FACZ,aAAa,aAAa;AAAA,EAC7B,UAAU,UAAU,KACjB,YAAY,kDACZ,aAAa,aAAa;AAAA,EAC7B,cAAc,UAAU,OACrB,YAAY,iDACZ,aAAa,aAAa;AAAA,EAC7B,kBAAkB,UAAU,MAAM;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,YAAY,iEACZ,aAAa;AAAA,EAChB,2BAA2B,UAAU,KAClC,YAAY,iCACZ,aAAa,aAAa;AAAA,EAC7B,gBAAgB,UAAU,KACvB,YAAY,+DACZ,aAAa,aAAa;AAAA,EAC7B,eAAe,UAAU,KACtB,YAAY,+DACZ,aAAa,aAAa;AAAA,EAC7B,gBAAgB,UAAU,KACvB,YAAY,+DACZ,aAAa,aAAa;AAAA,EAC7B,eAAe,UAAU,KACtB,YAAY,+DACZ,aAAa,aAAa;AAAA,EAC7B,wBAAwB,UAAU,OAC/B,YAAY,6CACZ,aAAa,aAAa;AAAA,EAC7B,WAAW,UAAU,OAClB,YACC;AAAA;AAAA;AAAA;AAAA,KAMD,aAAa,aAAa;AAAA;",
+  "names": []
+}

package/dist/esm/exported-related/chat-sidebar/sidebar-button/SidebarButton.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React2 from "react";
+import { StyledSidebarButton, StyledSidebarButtonLabel, StyledSidebarButtonIcon } from "./styled";
+import { propsSidebarButton, defaultSidebarButton } from "./props";
+const SidebarButton = (_a) => {
+  var _b = _a, { label, dsId, onClick, Icon } = _b, rest = __objRest(_b, ["label", "dsId", "onClick", "Icon"]);
+  const handleClick = React2.useCallback(() => {
+    if (dsId)
+      onClick(dsId);
+  }, [onClick, dsId]);
+  return /* @__PURE__ */ React2.createElement(StyledSidebarButton, __spreadValues({
+    key: dsId,
+    "data-testid": `sidebar-button-${dsId}`,
+    onClick: handleClick
+  }, rest), /* @__PURE__ */ React2.createElement(StyledSidebarButtonIcon, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    size: "m"
+  })), label && /* @__PURE__ */ React2.createElement(StyledSidebarButtonLabel, null, label));
+};
+SidebarButton.propTypes = propsSidebarButton;
+SidebarButton.defaultProps = defaultSidebarButton;
+export {
+  SidebarButton
+};
+//# sourceMappingURL=SidebarButton.js.map