@elliemae/ds-chat 1.53.4-rc.3 → 1.53.5-rc.0

package/esm/parts/chat-card/config/useValidateProps.js

@@ -0,0 +1,8 @@
+import { useValidatePropTypes } from '@elliemae/ds-props-helpers';
+
+var useValidateProps = function useValidateProps(props, schema) {
+  useValidatePropTypes(props, schema);
+};
+
+export { useValidateProps };
+//# sourceMappingURL=useValidateProps.js.map

package/esm/parts/chat-card/config/useValidateProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidateProps.js","sources":["../../../../../src/parts/chat-card/config/useValidateProps.tsx"],"sourcesContent":["import { useValidatePropTypes } from '@elliemae/ds-props-helpers';\nimport { CardPropTypes } from '../props';\n\nexport const useValidateProps = (props: CardPropTypes, schema: unknown): void => {\n  useValidatePropTypes(props, schema);\n};\n"],"names":["useValidateProps","props","schema","useValidatePropTypes"],"mappings":";;IAGaA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAuBC,MAAvB,EAAiD;AAC/EC,EAAAA,oBAAoB,CAACF,KAAD,EAAQC,MAAR,CAApB;AACD;;;;"}

package/esm/parts/chat-card/index.js

@@ -1,8 +1,10 @@
 export { ChatCard, ChatCardWithSchema } from './ChatCard.js';
 import 'react';
 import 'react-desc';
-import './props.js';
 import '@elliemae/ds-truncated-tooltip-text';
+import './props.js';
+import './config/useValidateProps.js';
+import '@elliemae/ds-props-helpers';
 import './styled.js';
 import 'styled-components';
 import '@elliemae/ds-grid';

package/esm/parts/chat-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/esm/parts/chat-card/props.js

@@ -4,7 +4,7 @@ var propTypes = {
   title: PropTypes.string.isRequired.description("Card's title"),
   content: PropTypes.string.description("Card's content"),
   time: PropTypes.string.description('Time'),
-  rightAddon: PropTypes.node.description('Right addon, badge or icon')
+  rightAddon: PropTypes.element.description('Right addon, badge or icon')
 };
 
 export { propTypes };

package/esm/parts/chat-card/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-card/props.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\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.node.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"],"names":["propTypes","title","PropTypes","string","isRequired","description","content","time","rightAddon","node"],"mappings":";;IAEaA,SAAS,GAAG;AACvBC,EAAAA,KAAK,EAAEC,SAAS,CAACC,MAAV,CAAiBC,UAAjB,CAA4BC,WAA5B,gBADgB;AAEvBC,EAAAA,OAAO,EAAEJ,SAAS,CAACC,MAAV,CAAiBE,WAAjB,kBAFc;AAGvBE,EAAAA,IAAI,EAAEL,SAAS,CAACC,MAAV,CAAiBE,WAAjB,CAA6B,MAA7B,CAHiB;AAIvBG,EAAAA,UAAU,EAAEN,SAAS,CAACO,IAAV,CAAeJ,WAAf,CAA2B,4BAA3B;AAJW;;;;"}
+{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-card/props.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\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"],"names":["propTypes","title","PropTypes","string","isRequired","description","content","time","rightAddon","element"],"mappings":";;IAEaA,SAAS,GAAG;AACvBC,EAAAA,KAAK,EAAEC,SAAS,CAACC,MAAV,CAAiBC,UAAjB,CAA4BC,WAA5B,gBADgB;AAEvBC,EAAAA,OAAO,EAAEJ,SAAS,CAACC,MAAV,CAAiBE,WAAjB,kBAFc;AAGvBE,EAAAA,IAAI,EAAEL,SAAS,CAACC,MAAV,CAAiBE,WAAjB,CAA6B,MAA7B,CAHiB;AAIvBG,EAAAA,UAAU,EAAEN,SAAS,CAACO,OAAV,CAAkBJ,WAAlB,CAA8B,4BAA9B;AAJW;;;;"}

package/esm/parts/chat-composer/ChatContainerComposer.js

@@ -5,9 +5,11 @@ import { Grid } from '@elliemae/ds-grid';
 import { describe } from 'react-desc';
 import PaperAirplane from '@elliemae/ds-icons/PaperAirplane';
 import { StyledChatContainerContentComposer, StyledComposerInput, StyledComposerButton, StyledCounterArea, StyledCounterErrorA11y } from './styled.js';
+import { useValidateProps } from './config/useValidateProps.js';
 import { composerProps, defaultComposerPros } from './props.js';
 import 'styled-components';
 import '@elliemae/ds-button';
+import '@elliemae/ds-props-helpers';
 import 'lodash';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -17,6 +19,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var ChatComposer = function ChatComposer(props) {
   var _input$current;
 
+  useValidateProps(props, ChatComposerWithSchema.toJSON());
   var inputValue = props.inputValue,
       onChange = props.onChange,
       onResize = props.onResize,
@@ -28,9 +31,11 @@ var ChatComposer = function ChatComposer(props) {
       placeholder = props.placeholder,
       inputMaxLength = props.inputMaxLength,
       buttonDisabled = props.buttonDisabled,
-      dataTestid = props.dataTestid;
+      dataTestid = props.dataTestid,
+      actionRef = props.actionRef;
   var input = React.useRef();
   var inputSize = React.useRef();
+  var inputSend = React.useRef();
 
   var _React$useState = React.useState(32),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -54,6 +59,17 @@ var ChatComposer = function ChatComposer(props) {
     setHeight(newHeight);
     setShowScroll(((_inputSize$current3 = inputSize.current) === null || _inputSize$current3 === void 0 ? void 0 : _inputSize$current3.scrollHeight) - ((_inputSize$current4 = inputSize.current) === null || _inputSize$current4 === void 0 ? void 0 : _inputSize$current4.clientHeight) > 5);
   }, [inputValue, internalMaxHeight]);
+  React.useEffect(function () {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusToComposer = function () {
+        input.current.focus();
+      };
+
+      actionRef.current.focusToSend = function () {
+        inputSend.current.focus();
+      };
+    }
+  }, [actionRef.current]);
   var handleChange = React.useCallback(function (e) {
     onChange(e.target.value);
   }, [onChange]);
@@ -97,7 +113,8 @@ var ChatComposer = function ChatComposer(props) {
     size: "s",
     disabled: !inputValue || buttonDisabled || hasError,
     "data-testid": "chat-composer-send-button",
-    "aria-label": "Send"
+    "aria-label": "Send",
+    innerRef: inputSend
   }))), /*#__PURE__*/React.createElement(StyledComposerInput, {
     ref: inputSize,
     style: {

package/esm/parts/chat-composer/ChatContainerComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContainerComposer.js","sources":["../../../../src/parts/chat-composer/ChatContainerComposer.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from 'react-desc';\nimport PaperAirplane from '@elliemae/ds-icons/PaperAirplane';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled';\nimport { defaultComposerPros, composerProps, ChatComposerProps } from './props';\n\nconst ChatComposer = (props: ChatComposerProps): JSX.Element => {\n  const {\n    inputValue,\n    onChange,\n    onResize,\n    onSend,\n    onFocus,\n    onBlur,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    buttonDisabled,\n    dataTestid,\n  } = props;\n\n  const input = React.useRef<HTMLTextAreaElement>();\n  const inputSize = React.useRef<HTMLTextAreaElement>();\n  const [height, setHeight] = React.useState(32);\n  const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n  const [showScroll, setShowScroll] = React.useState(true);\n\n  React.useEffect(() => {\n    const newHeight =\n      inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n    onResize(newHeight);\n    setHeight(newHeight);\n    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);\n  }, [inputValue, internalMaxHeight]);\n\n  const handleChange = React.useCallback(\n    (e) => {\n      onChange(e.target.value);\n    },\n    [onChange],\n  );\n  const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n  const inputLength = String(inputValue || '').length;\n  const hasError = React.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);\n\n  return (\n    <StyledChatContainerContentComposer rows={['auto', '15px']} maxHeight={`${maxHeight}px`} data-testid={dataTestid}>\n      <Grid cols={['1fr', '24px']} justifyContent=\"center\" alignItems=\"flex-end\" gutter=\"xxs\">\n        <StyledComposerInput\n          ref={input}\n          onChange={handleChange}\n          style={{ ...heightProps }}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid=\"chat-composer-textarea\"\n        />\n\n        <Grid height=\"32px\" alignItems=\"center\">\n          <StyledComposerButton\n            buttonType=\"text\"\n            icon={<PaperAirplane width={18} height={18} />}\n            onClick={onSend}\n            size=\"s\"\n            disabled={!inputValue || buttonDisabled || hasError}\n            data-testid=\"chat-composer-send-button\"\n            aria-label=\"Send\"\n          />\n        </Grid>\n      </Grid>\n      <StyledComposerInput\n        ref={inputSize}\n        style={{\n          height: 32,\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: 0,\n          width: input.current?.clientWidth,\n        }}\n        onChange={handleChange}\n        value={inputValue}\n        // maxLength={inputMaxLength}\n      />\n      <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n        <StyledCounterArea hasError={hasError} data-testid=\"composer-counter-area\">\n          {inputMaxLength && hasError ? (\n            <>\n              <StyledCounterErrorA11y role=\"alert\">\n                You have exceeded the character limit by {inputLength - inputMaxLength}\n              </StyledCounterErrorA11y>\n              Please limit to less than {inputMaxLength} characters.{' '}\n            </>\n          ) : (\n            ''\n          )}\n          {inputMaxLength ? `${inputLength} / ${inputMaxLength}` : ''}\n        </StyledCounterArea>\n        <Grid />\n      </Grid>\n    </StyledChatContainerContentComposer>\n  );\n};\n\nChatComposer.propTypes = composerProps;\nChatComposer.defaultProps = defaultComposerPros;\nconst ChatComposerWithSchema = describe(ChatComposer);\nChatComposerWithSchema.propTypes = composerProps;\n\nexport { ChatComposer, ChatComposerWithSchema };\n"],"names":["ChatComposer","props","inputValue","onChange","onResize","onSend","onFocus","onBlur","maxHeight","placeholder","inputMaxLength","buttonDisabled","dataTestid","input","React","useRef","inputSize","useState","height","setHeight","internalMaxHeight","useMemo","showScroll","setShowScroll","useEffect","newHeight","current","scrollHeight","clientHeight","handleChange","useCallback","e","target","value","heightProps","overflow","inputLength","String","length","hasError","visibility","pointerEvents","position","top","width","clientWidth","propTypes","composerProps","defaultProps","defaultComposerPros","ChatComposerWithSchema","describe"],"mappings":"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"}
+{"version":3,"file":"ChatContainerComposer.js","sources":["../../../../src/parts/chat-composer/ChatContainerComposer.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from 'react-desc';\nimport PaperAirplane from '@elliemae/ds-icons/PaperAirplane';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled';\nimport { useValidateProps } from './config/useValidateProps';\n\nimport { defaultComposerPros, composerProps, ChatComposerProps } from './props';\n\nconst ChatComposer = (props: ChatComposerProps): JSX.Element => {\n  useValidateProps(props, ChatComposerWithSchema.toJSON());\n\n  const {\n    inputValue,\n    onChange,\n    onResize,\n    onSend,\n    onFocus,\n    onBlur,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = props;\n\n  const input = React.useRef<HTMLTextAreaElement>();\n  const inputSize = React.useRef<HTMLTextAreaElement>();\n  const inputSend = React.useRef<HTMLButtonElement>();\n  const [height, setHeight] = React.useState(32);\n  const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n  const [showScroll, setShowScroll] = React.useState(true);\n\n  React.useEffect(() => {\n    const newHeight =\n      inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n    onResize(newHeight);\n    setHeight(newHeight);\n    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);\n  }, [inputValue, internalMaxHeight]);\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusToComposer = () => {\n        input.current.focus();\n      };\n      actionRef.current.focusToSend = () => {\n        inputSend.current.focus();\n      };\n    }\n  }, [actionRef.current]);\n\n  const handleChange = React.useCallback(\n    (e) => {\n      onChange(e.target.value);\n    },\n    [onChange],\n  );\n  const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n  const inputLength = String(inputValue || '').length;\n  const hasError = React.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);\n\n  return (\n    <StyledChatContainerContentComposer rows={['auto', '15px']} maxHeight={`${maxHeight}px`} data-testid={dataTestid}>\n      <Grid cols={['1fr', '24px']} justifyContent=\"center\" alignItems=\"flex-end\" gutter=\"xxs\">\n        <StyledComposerInput\n          ref={input}\n          onChange={handleChange}\n          style={{ ...heightProps }}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid=\"chat-composer-textarea\"\n        />\n\n        <Grid height=\"32px\" alignItems=\"center\">\n          <StyledComposerButton\n            buttonType=\"text\"\n            icon={<PaperAirplane width={18} height={18} />}\n            onClick={onSend}\n            size=\"s\"\n            disabled={!inputValue || buttonDisabled || hasError}\n            data-testid=\"chat-composer-send-button\"\n            aria-label=\"Send\"\n            innerRef={inputSend}\n          />\n        </Grid>\n      </Grid>\n      <StyledComposerInput\n        ref={inputSize}\n        style={{\n          height: 32,\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: 0,\n          width: input.current?.clientWidth,\n        }}\n        onChange={handleChange}\n        value={inputValue}\n        // maxLength={inputMaxLength}\n      />\n      <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n        <StyledCounterArea hasError={hasError} data-testid=\"composer-counter-area\">\n          {inputMaxLength && hasError ? (\n            <>\n              <StyledCounterErrorA11y role=\"alert\">\n                You have exceeded the character limit by {inputLength - inputMaxLength}\n              </StyledCounterErrorA11y>\n              Please limit to less than {inputMaxLength} characters.{' '}\n            </>\n          ) : (\n            ''\n          )}\n          {inputMaxLength ? `${inputLength} / ${inputMaxLength}` : ''}\n        </StyledCounterArea>\n        <Grid />\n      </Grid>\n    </StyledChatContainerContentComposer>\n  );\n};\n\nChatComposer.propTypes = composerProps;\nChatComposer.defaultProps = defaultComposerPros;\nconst ChatComposerWithSchema = describe(ChatComposer);\nChatComposerWithSchema.propTypes = composerProps;\n\nexport { ChatComposer, ChatComposerWithSchema };\n"],"names":["ChatComposer","props","useValidateProps","ChatComposerWithSchema","toJSON","inputValue","onChange","onResize","onSend","onFocus","onBlur","maxHeight","placeholder","inputMaxLength","buttonDisabled","dataTestid","actionRef","input","React","useRef","inputSize","inputSend","useState","height","setHeight","internalMaxHeight","useMemo","showScroll","setShowScroll","useEffect","newHeight","current","scrollHeight","clientHeight","focusToComposer","focus","focusToSend","handleChange","useCallback","e","target","value","heightProps","overflow","inputLength","String","length","hasError","visibility","pointerEvents","position","top","width","clientWidth","propTypes","composerProps","defaultProps","defaultComposerPros","describe"],"mappings":";;;;;;;;;;;;;;;;;;IAgBMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA2C;AAAA;;AAC9DC,EAAAA,gBAAgB,CAACD,KAAD,EAAQE,sBAAsB,CAACC,MAAvB,EAAR,CAAhB;AAEA,MACEC,UADF,GAaIJ,KAbJ,CACEI,UADF;AAAA,MAEEC,QAFF,GAaIL,KAbJ,CAEEK,QAFF;AAAA,MAGEC,QAHF,GAaIN,KAbJ,CAGEM,QAHF;AAAA,MAIEC,MAJF,GAaIP,KAbJ,CAIEO,MAJF;AAAA,MAKEC,OALF,GAaIR,KAbJ,CAKEQ,OALF;AAAA,MAMEC,MANF,GAaIT,KAbJ,CAMES,MANF;AAAA,yBAaIT,KAbJ,CAOEU,SAPF;AAAA,MAOEA,SAPF,iCAOc,GAPd;AAAA,MAQEC,WARF,GAaIX,KAbJ,CAQEW,WARF;AAAA,MASEC,cATF,GAaIZ,KAbJ,CASEY,cATF;AAAA,MAUEC,cAVF,GAaIb,KAbJ,CAUEa,cAVF;AAAA,MAWEC,UAXF,GAaId,KAbJ,CAWEc,UAXF;AAAA,MAYEC,SAZF,GAaIf,KAbJ,CAYEe,SAZF;AAeA,MAAMC,KAAK,GAAGC,KAAK,CAACC,MAAN,EAAd;AACA,MAAMC,SAAS,GAAGF,KAAK,CAACC,MAAN,EAAlB;AACA,MAAME,SAAS,GAAGH,KAAK,CAACC,MAAN,EAAlB;;AACA,wBAA4BD,KAAK,CAACI,QAAN,CAAe,EAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,iBAAiB,GAAGP,KAAK,CAACQ,OAAN,CAAc;AAAA,WAAMf,SAAS,GAAG,EAAlB;AAAA,GAAd,EAAoC,CAACA,SAAD,CAApC,CAA1B;;AACA,yBAAoCO,KAAK,CAACI,QAAN,CAAe,IAAf,CAApC;AAAA;AAAA,MAAOK,UAAP;AAAA,MAAmBC,aAAnB;;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAMC,SAAS,GACb,uBAAAV,SAAS,CAACW,OAAV,0EAAmBC,YAAnB,IAAkCP,iBAAlC,GAAsDA,iBAAtD,0BAA0EL,SAAS,CAACW,OAApF,wDAA0E,oBAAmBC,YAD/F;AAEAzB,IAAAA,QAAQ,CAACuB,SAAD,CAAR;AACAN,IAAAA,SAAS,CAACM,SAAD,CAAT;AACAF,IAAAA,aAAa,CAAC,wBAAAR,SAAS,CAACW,OAAV,4EAAmBC,YAAnB,4BAAkCZ,SAAS,CAACW,OAA5C,wDAAkC,oBAAmBE,YAArD,IAAoE,CAArE,CAAb;AACD,GAND,EAMG,CAAC5B,UAAD,EAAaoB,iBAAb,CANH;AAQAP,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAIb,SAAS,IAAIA,SAAS,CAACe,OAA3B,EAAoC;AAClCf,MAAAA,SAAS,CAACe,OAAV,CAAkBG,eAAlB,GAAoC,YAAM;AACxCjB,QAAAA,KAAK,CAACc,OAAN,CAAcI,KAAd;AACD,OAFD;;AAGAnB,MAAAA,SAAS,CAACe,OAAV,CAAkBK,WAAlB,GAAgC,YAAM;AACpCf,QAAAA,SAAS,CAACU,OAAV,CAAkBI,KAAlB;AACD,OAFD;AAGD;AACF,GATD,EASG,CAACnB,SAAS,CAACe,OAAX,CATH;AAWA,MAAMM,YAAY,GAAGnB,KAAK,CAACoB,WAAN,CACnB,UAACC,CAAD,EAAO;AACLjC,IAAAA,QAAQ,CAACiC,CAAC,CAACC,MAAF,CAASC,KAAV,CAAR;AACD,GAHkB,EAInB,CAACnC,QAAD,CAJmB,CAArB;AAMA,MAAMoC,WAAW,GAAG;AAAEnB,IAAAA,MAAM,EAANA,MAAF;AAAUoB,IAAAA,QAAQ,EAAEhB,UAAU,GAAG,MAAH,GAAY;AAA1C,GAApB;AAEA,MAAMiB,WAAW,GAAGC,MAAM,CAACxC,UAAU,IAAI,EAAf,CAAN,CAAyByC,MAA7C;AACA,MAAMC,QAAQ,GAAG7B,KAAK,CAACQ,OAAN,CAAc;AAAA,WAAMkB,WAAW,GAAG/B,cAApB;AAAA,GAAd,EAAkD,CAAC+B,WAAD,EAAc/B,cAAd,CAAlD,CAAjB;AAEA,sBACE,oBAAC,kCAAD;AAAoC,IAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CAA1C;AAA4D,IAAA,SAAS,YAAKF,SAAL,OAArE;AAAyF,mBAAaI;AAAtG,kBACE,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAC,KAAD,EAAQ,MAAR,CAAZ;AAA6B,IAAA,cAAc,EAAC,QAA5C;AAAqD,IAAA,UAAU,EAAC,UAAhE;AAA2E,IAAA,MAAM,EAAC;AAAlF,kBACE,oBAAC,mBAAD;AACE,IAAA,GAAG,EAAEE,KADP;AAEE,IAAA,QAAQ,EAAEoB,YAFZ;AAGE,IAAA,KAAK,oBAAOK,WAAP,CAHP;AAIE,IAAA,KAAK,EAAErC,UAJT;AAKE,IAAA,OAAO,EAAEI,OALX;AAME,IAAA,MAAM,EAAEC,MANV;AAOE,IAAA,WAAW,EAAEE,WAPf;AAQE,kBAAW,iBARb;AASE,mBAAY;AATd,IADF,eAaE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,MAAb;AAAoB,IAAA,UAAU,EAAC;AAA/B,kBACE,oBAAC,oBAAD;AACE,IAAA,UAAU,EAAC,MADb;AAEE,IAAA,IAAI,eAAE,oBAAC,aAAD;AAAe,MAAA,KAAK,EAAE,EAAtB;AAA0B,MAAA,MAAM,EAAE;AAAlC,MAFR;AAGE,IAAA,OAAO,EAAEJ,MAHX;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,QAAQ,EAAE,CAACH,UAAD,IAAeS,cAAf,IAAiCiC,QAL7C;AAME,mBAAY,2BANd;AAOE,kBAAW,MAPb;AAQE,IAAA,QAAQ,EAAE1B;AARZ,IADF,CAbF,CADF,eA2BE,oBAAC,mBAAD;AACE,IAAA,GAAG,EAAED,SADP;AAEE,IAAA,KAAK,EAAE;AACLG,MAAAA,MAAM,EAAE,EADH;AAELyB,MAAAA,UAAU,EAAE,QAFP;AAGLC,MAAAA,aAAa,EAAE,MAHV;AAILC,MAAAA,QAAQ,EAAE,UAJL;AAKLC,MAAAA,GAAG,EAAE,CALA;AAMLC,MAAAA,KAAK,oBAAEnC,KAAK,CAACc,OAAR,mDAAE,eAAesB;AANjB,KAFT;AAUE,IAAA,QAAQ,EAAEhB,YAVZ;AAWE,IAAA,KAAK,EAAEhC,UAXT;;AAAA,IA3BF,eAyCE,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAC,KAAD,EAAQ,MAAR,CAAZ;AAA6B,IAAA,cAAc,EAAC,UAA5C;AAAuD,IAAA,UAAU,EAAC,QAAlE;AAA2E,IAAA,MAAM,EAAC,KAAlF;AAAwF,IAAA,EAAE,EAAC;AAA3F,kBACE,oBAAC,iBAAD;AAAmB,IAAA,QAAQ,EAAE0C,QAA7B;AAAuC,mBAAY;AAAnD,KACGlC,cAAc,IAAIkC,QAAlB,gBACC,uDACE,oBAAC,sBAAD;AAAwB,IAAA,IAAI,EAAC;AAA7B,kDAC4CH,WAAW,GAAG/B,cAD1D,CADF,gCAI6BA,cAJ7B,kBAIyD,GAJzD,CADD,GAQC,EATJ,EAWGA,cAAc,aAAM+B,WAAN,gBAAuB/B,cAAvB,IAA0C,EAX3D,CADF,eAcE,oBAAC,IAAD,OAdF,CAzCF,CADF;AA4DD;;AAEDb,YAAY,CAACsD,SAAb,GAAyBC,aAAzB;AACAvD,YAAY,CAACwD,YAAb,GAA4BC,mBAA5B;IACMtD,sBAAsB,GAAGuD,QAAQ,CAAC1D,YAAD;AACvCG,sBAAsB,CAACmD,SAAvB,GAAmCC,aAAnC;;;;"}

package/esm/parts/chat-composer/config/useValidateProps.js

@@ -0,0 +1,8 @@
+import { useValidatePropTypes } from '@elliemae/ds-props-helpers';
+
+var useValidateProps = function useValidateProps(props, schema) {
+  useValidatePropTypes(props, schema);
+};
+
+export { useValidateProps };
+//# sourceMappingURL=useValidateProps.js.map

package/esm/parts/chat-composer/config/useValidateProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidateProps.js","sources":["../../../../../src/parts/chat-composer/config/useValidateProps.tsx"],"sourcesContent":["import { useValidatePropTypes } from '@elliemae/ds-props-helpers';\nimport { ChatComposerProps } from '../props';\n\nexport const useValidateProps = (props: ChatComposerProps, schema: unknown): void => {\n  useValidatePropTypes(props, schema);\n};\n"],"names":["useValidateProps","props","schema","useValidatePropTypes"],"mappings":";;IAGaA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAA2BC,MAA3B,EAAqD;AACnFC,EAAAA,oBAAoB,CAACF,KAAD,EAAQC,MAAR,CAApB;AACD;;;;"}

package/esm/parts/chat-composer/index.js

@@ -8,6 +8,8 @@ import '@elliemae/ds-icons/PaperAirplane';
 import './styled.js';
 import 'styled-components';
 import '@elliemae/ds-button';
+import './config/useValidateProps.js';
+import '@elliemae/ds-props-helpers';
 import './props.js';
 import 'lodash';
 //# sourceMappingURL=index.js.map

package/esm/parts/chat-composer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/esm/parts/chat-composer/props.js

@@ -12,7 +12,8 @@ var defaultComposerPros = {
   maxHeight: 0,
   inputMaxLength: undefined,
   buttonDisabled: false,
-  dataTestid: 'ds-chat-composer'
+  dataTestid: 'ds-chat-composer',
+  actionRef: noop
 };
 var composerProps = {
   placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),
@@ -21,11 +22,12 @@ var composerProps = {
   onResize: PropTypes.func.description('Called the input changes his height').defaultValue(defaultComposerPros.onResize),
   onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultComposerPros.onSend),
   onFocus: PropTypes.func.description('Input focus').defaultValue(defaultComposerPros.onFocus),
-  onBlur: PropTypes.string.description('Input blur').defaultValue(defaultComposerPros.onBlur),
+  onBlur: PropTypes.func.description('Input blur').defaultValue(defaultComposerPros.onBlur),
   maxHeight: PropTypes.number.description('Max height of the composer. Use 0 for no limit').defaultValue(defaultComposerPros.onBlur),
   inputMaxLength: PropTypes.number.description('Max length of the composer. `undefined` for no limit').defaultValue(defaultComposerPros.inputMaxLength),
-  buttonDisabled: PropTypes.number.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),
-  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder)
+  buttonDisabled: PropTypes.bool.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),
+  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),
+  actionRef: PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultComposerPros.actionRef)
 };
 
 export { composerProps, defaultComposerPros };

package/esm/parts/chat-composer/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-composer/props.tsx"],"sourcesContent":["import React from 'react';\nimport { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\n\nexport interface TextAreaProps {\n  height: string | number;\n  style: React.CSSProperties;\n}\n\nexport const defaultComposerPros: ChatComposerProps = {\n  placeholder: 'Type your message',\n  inputValue: '',\n  onChange: noop,\n  onResize: noop,\n  onSend: noop,\n  onFocus: noop,\n  onBlur: noop,\n  maxHeight: 0,\n  inputMaxLength: undefined,\n  buttonDisabled: false,\n  dataTestid: 'ds-chat-composer',\n};\n\nexport interface ChatComposerProps {\n  placeholder: 'Type your message';\n  inputValue: '';\n  onChange: (value: string) => void;\n  onResize: (value: number) => void;\n  onSend: (value: string) => void;\n  onFocus: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n  onBlur: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n  maxHeight: number;\n  inputMaxLength: number | undefined;\n  buttonDisabled: boolean;\n  dataTestid?: string;\n}\n\nexport const composerProps = {\n  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),\n  inputValue: PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),\n  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),\n  onResize: PropTypes.func\n    .description('Called the input changes his height')\n    .defaultValue(defaultComposerPros.onResize),\n  onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultComposerPros.onSend),\n  onFocus: PropTypes.func.description('Input focus').defaultValue(defaultComposerPros.onFocus),\n  onBlur: PropTypes.string.description('Input blur').defaultValue(defaultComposerPros.onBlur),\n  maxHeight: PropTypes.number\n    .description('Max height of the composer. Use 0 for no limit')\n    .defaultValue(defaultComposerPros.onBlur),\n  inputMaxLength: PropTypes.number\n    .description('Max length of the composer. `undefined` for no limit')\n    .defaultValue(defaultComposerPros.inputMaxLength),\n  buttonDisabled: PropTypes.number\n    .description('Control the disabled for the send button')\n    .defaultValue(defaultComposerPros.buttonDisabled),\n  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),\n};\n"],"names":["defaultComposerPros","placeholder","inputValue","onChange","noop","onResize","onSend","onFocus","onBlur","maxHeight","inputMaxLength","undefined","buttonDisabled","dataTestid","composerProps","PropTypes","string","description","defaultValue","func","number"],"mappings":";;;IASaA,mBAAsC,GAAG;AACpDC,EAAAA,WAAW,EAAE,mBADuC;AAEpDC,EAAAA,UAAU,EAAE,EAFwC;AAGpDC,EAAAA,QAAQ,EAAEC,IAH0C;AAIpDC,EAAAA,QAAQ,EAAED,IAJ0C;AAKpDE,EAAAA,MAAM,EAAEF,IAL4C;AAMpDG,EAAAA,OAAO,EAAEH,IAN2C;AAOpDI,EAAAA,MAAM,EAAEJ,IAP4C;AAQpDK,EAAAA,SAAS,EAAE,CARyC;AASpDC,EAAAA,cAAc,EAAEC,SAToC;AAUpDC,EAAAA,cAAc,EAAE,KAVoC;AAWpDC,EAAAA,UAAU,EAAE;AAXwC;IA4BzCC,aAAa,GAAG;AAC3Bb,EAAAA,WAAW,EAAEc,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,mBAA7B,EAAkDC,YAAlD,CAA+DlB,mBAAmB,CAACC,WAAnF,CADc;AAE3BC,EAAAA,UAAU,EAAEa,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,aAA7B,EAA4CC,YAA5C,CAAyDlB,mBAAmB,CAACE,UAA7E,CAFe;AAG3BC,EAAAA,QAAQ,EAAEY,SAAS,CAACI,IAAV,CAAeF,WAAf,CAA2B,4BAA3B,EAAyDC,YAAzD,CAAsElB,mBAAmB,CAACG,QAA1F,CAHiB;AAI3BE,EAAAA,QAAQ,EAAEU,SAAS,CAACI,IAAV,CACPF,WADO,CACK,qCADL,EAEPC,YAFO,CAEMlB,mBAAmB,CAACK,QAF1B,CAJiB;AAO3BC,EAAAA,MAAM,EAAES,SAAS,CAACI,IAAV,CAAeF,WAAf,CAA2B,4BAA3B,EAAyDC,YAAzD,CAAsElB,mBAAmB,CAACM,MAA1F,CAPmB;AAQ3BC,EAAAA,OAAO,EAAEQ,SAAS,CAACI,IAAV,CAAeF,WAAf,CAA2B,aAA3B,EAA0CC,YAA1C,CAAuDlB,mBAAmB,CAACO,OAA3E,CARkB;AAS3BC,EAAAA,MAAM,EAAEO,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,YAA7B,EAA2CC,YAA3C,CAAwDlB,mBAAmB,CAACQ,MAA5E,CATmB;AAU3BC,EAAAA,SAAS,EAAEM,SAAS,CAACK,MAAV,CACRH,WADQ,CACI,gDADJ,EAERC,YAFQ,CAEKlB,mBAAmB,CAACQ,MAFzB,CAVgB;AAa3BE,EAAAA,cAAc,EAAEK,SAAS,CAACK,MAAV,CACbH,WADa,CACD,sDADC,EAEbC,YAFa,CAEAlB,mBAAmB,CAACU,cAFpB,CAbW;AAgB3BE,EAAAA,cAAc,EAAEG,SAAS,CAACK,MAAV,CACbH,WADa,CACD,0CADC,EAEbC,YAFa,CAEAlB,mBAAmB,CAACY,cAFpB,CAhBW;AAmB3BC,EAAAA,UAAU,EAAEE,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,aAA7B,EAA4CC,YAA5C,CAAyDlB,mBAAmB,CAACC,WAA7E;AAnBe;;;;"}
+{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-composer/props.tsx"],"sourcesContent":["import React from 'react';\nimport { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\n\nexport interface TextAreaProps {\n  height: string | number;\n  style: React.CSSProperties;\n}\n\nexport const defaultComposerPros: ChatComposerProps = {\n  placeholder: 'Type your message',\n  inputValue: '',\n  onChange: noop,\n  onResize: noop,\n  onSend: noop,\n  onFocus: noop,\n  onBlur: noop,\n  maxHeight: 0,\n  inputMaxLength: undefined,\n  buttonDisabled: false,\n  dataTestid: 'ds-chat-composer',\n  actionRef: noop,\n};\n\nexport interface ChatComposerProps {\n  placeholder: 'Type your message';\n  inputValue: '';\n  onChange: (value: string) => void;\n  onResize: (value: number) => void;\n  onSend: (value: string) => void;\n  onFocus: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n  onBlur: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n  maxHeight: number;\n  inputMaxLength: number | undefined;\n  buttonDisabled: boolean;\n  dataTestid?: string;\n  actionRef: PropTypes.func;\n}\n\nexport const composerProps = {\n  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),\n  inputValue: PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),\n  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),\n  onResize: PropTypes.func\n    .description('Called the input changes his height')\n    .defaultValue(defaultComposerPros.onResize),\n  onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultComposerPros.onSend),\n  onFocus: PropTypes.func.description('Input focus').defaultValue(defaultComposerPros.onFocus),\n  onBlur: PropTypes.func.description('Input blur').defaultValue(defaultComposerPros.onBlur),\n  maxHeight: PropTypes.number\n    .description('Max height of the composer. Use 0 for no limit')\n    .defaultValue(defaultComposerPros.onBlur),\n  inputMaxLength: PropTypes.number\n    .description('Max length of the composer. `undefined` for no limit')\n    .defaultValue(defaultComposerPros.inputMaxLength),\n  buttonDisabled: PropTypes.bool\n    .description('Control the disabled for the send button')\n    .defaultValue(defaultComposerPros.buttonDisabled),\n  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultComposerPros.actionRef),\n};\n"],"names":["defaultComposerPros","placeholder","inputValue","onChange","noop","onResize","onSend","onFocus","onBlur","maxHeight","inputMaxLength","undefined","buttonDisabled","dataTestid","actionRef","composerProps","PropTypes","string","description","defaultValue","func","number","bool","object"],"mappings":";;;IASaA,mBAAsC,GAAG;AACpDC,EAAAA,WAAW,EAAE,mBADuC;AAEpDC,EAAAA,UAAU,EAAE,EAFwC;AAGpDC,EAAAA,QAAQ,EAAEC,IAH0C;AAIpDC,EAAAA,QAAQ,EAAED,IAJ0C;AAKpDE,EAAAA,MAAM,EAAEF,IAL4C;AAMpDG,EAAAA,OAAO,EAAEH,IAN2C;AAOpDI,EAAAA,MAAM,EAAEJ,IAP4C;AAQpDK,EAAAA,SAAS,EAAE,CARyC;AASpDC,EAAAA,cAAc,EAAEC,SAToC;AAUpDC,EAAAA,cAAc,EAAE,KAVoC;AAWpDC,EAAAA,UAAU,EAAE,kBAXwC;AAYpDC,EAAAA,SAAS,EAAEV;AAZyC;IA8BzCW,aAAa,GAAG;AAC3Bd,EAAAA,WAAW,EAAEe,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,mBAA7B,EAAkDC,YAAlD,CAA+DnB,mBAAmB,CAACC,WAAnF,CADc;AAE3BC,EAAAA,UAAU,EAAEc,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,aAA7B,EAA4CC,YAA5C,CAAyDnB,mBAAmB,CAACE,UAA7E,CAFe;AAG3BC,EAAAA,QAAQ,EAAEa,SAAS,CAACI,IAAV,CAAeF,WAAf,CAA2B,4BAA3B,EAAyDC,YAAzD,CAAsEnB,mBAAmB,CAACG,QAA1F,CAHiB;AAI3BE,EAAAA,QAAQ,EAAEW,SAAS,CAACI,IAAV,CACPF,WADO,CACK,qCADL,EAEPC,YAFO,CAEMnB,mBAAmB,CAACK,QAF1B,CAJiB;AAO3BC,EAAAA,MAAM,EAAEU,SAAS,CAACI,IAAV,CAAeF,WAAf,CAA2B,4BAA3B,EAAyDC,YAAzD,CAAsEnB,mBAAmB,CAACM,MAA1F,CAPmB;AAQ3BC,EAAAA,OAAO,EAAES,SAAS,CAACI,IAAV,CAAeF,WAAf,CAA2B,aAA3B,EAA0CC,YAA1C,CAAuDnB,mBAAmB,CAACO,OAA3E,CARkB;AAS3BC,EAAAA,MAAM,EAAEQ,SAAS,CAACI,IAAV,CAAeF,WAAf,CAA2B,YAA3B,EAAyCC,YAAzC,CAAsDnB,mBAAmB,CAACQ,MAA1E,CATmB;AAU3BC,EAAAA,SAAS,EAAEO,SAAS,CAACK,MAAV,CACRH,WADQ,CACI,gDADJ,EAERC,YAFQ,CAEKnB,mBAAmB,CAACQ,MAFzB,CAVgB;AAa3BE,EAAAA,cAAc,EAAEM,SAAS,CAACK,MAAV,CACbH,WADa,CACD,sDADC,EAEbC,YAFa,CAEAnB,mBAAmB,CAACU,cAFpB,CAbW;AAgB3BE,EAAAA,cAAc,EAAEI,SAAS,CAACM,IAAV,CACbJ,WADa,CACD,0CADC,EAEbC,YAFa,CAEAnB,mBAAmB,CAACY,cAFpB,CAhBW;AAmB3BC,EAAAA,UAAU,EAAEG,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,aAA7B,EAA4CC,YAA5C,CAAyDnB,mBAAmB,CAACC,WAA7E,CAnBe;AAoB3Ba,EAAAA,SAAS,EAAEE,SAAS,CAACO,MAAV,CACRL,WADQ,oTAcRC,YAdQ,CAcKnB,mBAAmB,CAACc,SAdzB;AApBgB;;;;"}

package/esm/parts/chat-composer/styled.js

@@ -16,7 +16,7 @@ var StyledChatContainerContentComposer = /*#__PURE__*/styled(Grid).withConfig({
 });
 var StyledComposerInput = /*#__PURE__*/styled.textarea.withConfig({
   componentId: "sc-1ahwpce-1"
-})(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:1rem;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], function (props) {
+})(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], function (props) {
   return props.theme.space.xxs;
 }, function (props) {
   return typeof props.height === 'number' ? "".concat(props.height, "px") : props.height;
@@ -25,7 +25,7 @@ var StyledComposerInput = /*#__PURE__*/styled.textarea.withConfig({
 });
 var StyledComposerButton = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-1ahwpce-2"
-})(["background:none;&:disabled{svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], function (props) {
+})(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], function (props) {
   return props.theme.colors.brand[600];
 }, function (props) {
   return props.theme.colors.brand[200];

package/esm/parts/chat-composer/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/parts/chat-composer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButton } from '@elliemae/ds-button';\nimport { TextAreaProps } from './props';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)`\n  width: 100%;\n  min-height: 56px;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  padding: ${(props) => props.theme.space.xxs};\n  padding-bottom: 3px;\n  padding-top: 6px;\n  padding-left: ${(props) => props.theme.space.xs};\n  max-height: ${(props) => props.maxHeight};\n  border-top: 1px solid #cbcfd7;\n`;\n\nexport const StyledComposerInput = styled.textarea<any>`\n  padding: ${(props) => props.theme.space.xxs};\n  resize: none;\n  min-height: 32px;\n  border-radius: 2px;\n  border: solid 1px #cbcfd7;\n  color: #25292f;\n  height: ${(props: TextAreaProps) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};\n  min-width: 244px;\n  overflow-y: auto;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1;\n  transition: height 0.3s;\n  &:focus {\n    outline: none;\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    box-shadow: inset 0 0 0 1px #8cc2ed;\n    border-radius: 2px;\n  }\n`;\nexport const StyledComposerButton = styled(DSButton)`\n  background: none;\n  &:disabled {\n    svg {\n      fill: #5d6775;\n    }\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand[600]};\n  }\n  &:focus {\n    background: ${(props) => props.theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledCounterArea = styled(Grid)`\n  text-align: right;\n  font-size: 11px;\n  height: 15px;\n  align-items: center;\n  font-style: italic;\n  ${(props) => (props.hasError ? `color:${props.theme.colors.danger[900]};` : '')}\n  position:relative;\n`;\n\nexport const StyledCounterErrorA11y = styled.span`\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n`;\n"],"names":["StyledChatContainerContentComposer","styled","Grid","props","theme","colors","neutral","space","xxs","xs","maxHeight","StyledComposerInput","textarea","height","brand","StyledComposerButton","DSButton","StyledCounterArea","hasError","danger","StyledCounterErrorA11y","span"],"mappings":";;;;AAKA;IACaA,kCAAkC,gBAAGC,MAAM,CAACC,IAAD,CAAT;AAAA;AAAA,mKAG/B,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CAH+B,EAIlC,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBC,GAA7B;AAAA,CAJkC,EAO7B,UAACL,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBE,EAA7B;AAAA,CAP6B,EAQ/B,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACO,SAAjB;AAAA,CAR+B;IAYlCC,mBAAmB,gBAAGV,MAAM,CAACW,QAAV;AAAA;AAAA,4TACnB,UAACT,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBC,GAA7B;AAAA,CADmB,EAOpB,UAACL,KAAD;AAAA,SAA2B,OAAOA,KAAK,CAACU,MAAb,KAAwB,QAAxB,aAAsCV,KAAK,CAACU,MAA5C,UAAyDV,KAAK,CAACU,MAA1F;AAAA,CAPoB,EAgBR,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CAhBQ;IAqBnBC,oBAAoB,gBAAGd,MAAM,CAACe,QAAD,CAAT;AAAA;AAAA,+FAQrB,UAACb,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CARqB,EAWf,UAACX,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CAXe;IAepBG,iBAAiB,gBAAGhB,MAAM,CAACC,IAAD,CAAT;AAAA;AAAA,iHAM1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACe,QAAN,mBAA0Bf,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBc,MAAnB,CAA0B,GAA1B,CAA1B,SAA8D,EAA1E;AAAA,CAN0B;IAUjBC,sBAAsB,gBAAGnB,MAAM,CAACoB,IAAV;AAAA;AAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/parts/chat-composer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButton } from '@elliemae/ds-button';\nimport { TextAreaProps } from './props';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)`\n  width: 100%;\n  min-height: 56px;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  padding: ${(props) => props.theme.space.xxs};\n  padding-bottom: 3px;\n  padding-top: 6px;\n  padding-left: ${(props) => props.theme.space.xs};\n  max-height: ${(props) => props.maxHeight};\n  border-top: 1px solid #cbcfd7;\n`;\n\nexport const StyledComposerInput = styled.textarea<any>`\n  padding: ${(props) => props.theme.space.xxs};\n  resize: none;\n  min-height: 32px;\n  border-radius: 2px;\n  border: solid 1px #cbcfd7;\n  color: #25292f;\n  height: ${(props: TextAreaProps) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};\n  min-width: 244px;\n  overflow-y: auto;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1;\n  transition: height 0.3s;\n  &:focus {\n    outline: none;\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    box-shadow: inset 0 0 0 1px #8cc2ed;\n    border-radius: 2px;\n  }\n`;\nexport const StyledComposerButton = styled(DSButton)`\n  &:disabled {\n    background: none;\n    svg {\n      fill: #5d6775;\n    }\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand[600]};\n  }\n  &:focus {\n    background: ${(props) => props.theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledCounterArea = styled(Grid)`\n  text-align: right;\n  font-size: 11px;\n  height: 15px;\n  align-items: center;\n  font-style: italic;\n  ${(props) => (props.hasError ? `color:${props.theme.colors.danger[900]};` : '')}\n  position:relative;\n`;\n\nexport const StyledCounterErrorA11y = styled.span`\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n`;\n"],"names":["StyledChatContainerContentComposer","styled","Grid","props","theme","colors","neutral","space","xxs","xs","maxHeight","StyledComposerInput","textarea","height","brand","StyledComposerButton","DSButton","StyledCounterArea","hasError","danger","StyledCounterErrorA11y","span"],"mappings":";;;;AAKA;IACaA,kCAAkC,gBAAGC,MAAM,CAACC,IAAD,CAAT;AAAA;AAAA,mKAG/B,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CAH+B,EAIlC,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBC,GAA7B;AAAA,CAJkC,EAO7B,UAACL,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBE,EAA7B;AAAA,CAP6B,EAQ/B,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACO,SAAjB;AAAA,CAR+B;IAYlCC,mBAAmB,gBAAGV,MAAM,CAACW,QAAV;AAAA;AAAA,4TACnB,UAACT,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBC,GAA7B;AAAA,CADmB,EAOpB,UAACL,KAAD;AAAA,SAA2B,OAAOA,KAAK,CAACU,MAAb,KAAwB,QAAxB,aAAsCV,KAAK,CAACU,MAA5C,UAAyDV,KAAK,CAACU,MAA1F;AAAA,CAPoB,EAgBR,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CAhBQ;IAqBnBC,oBAAoB,gBAAGd,MAAM,CAACe,QAAD,CAAT;AAAA;AAAA,+FAQrB,UAACb,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CARqB,EAWf,UAACX,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CAXe;IAepBG,iBAAiB,gBAAGhB,MAAM,CAACC,IAAD,CAAT;AAAA;AAAA,iHAM1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACe,QAAN,mBAA0Bf,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBc,MAAnB,CAA0B,GAA1B,CAA1B,SAA8D,EAA1E;AAAA,CAN0B;IAUjBC,sBAAsB,gBAAGnB,MAAM,CAACoB,IAAV;AAAA;AAAA;;;;"}

package/esm/parts/chat-container/ChatContainer.js

@@ -8,6 +8,7 @@ import { ChatComposer } from '../chat-composer/ChatContainerComposer.js';
 import { ChatContainerMessagesList } from '../chat-container-messages-list/ChatContainerMessagesList.js';
 import { containerProps, defaultProps } from './props.js';
 import { StyledIndicatorContainer, StyledChatContainerContent, MobileStyledChatContainerContent } from './styled.js';
+import { useValidateProps } from './config/useValidateProps.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import '@elliemae/ds-grid';
@@ -15,6 +16,8 @@ import '@elliemae/ds-icons/PaperAirplane';
 import '../chat-composer/styled.js';
 import 'styled-components';
 import '@elliemae/ds-button';
+import '../chat-composer/config/useValidateProps.js';
+import '@elliemae/ds-props-helpers';
 import '../chat-composer/props.js';
 import 'react-virtual';
 import '@elliemae/ds-basic/Button';
@@ -23,19 +26,24 @@ import '@elliemae/ds-icons/WarningCircleFill';
 import '../bubble/styled.js';
 import '../bubble/props.js';
 import 'prop-types';
+import '../bubble/config/useValidateProps.js';
 import '../bubble/ChatBubbleArrow.js';
 import '../message-delimiter/MessageDelimiter.js';
 import '../message-delimiter/styled.js';
 import '../message-delimiter/props.js';
+import '../message-delimiter/config/useValidateProps.js';
 import '../system-message/SystemMessage.js';
 import '../system-message/style.js';
 import '../system-message/props.js';
+import '../system-message/config/useValidateProps.js';
 import '../chat-container-messages-list/styled.js';
 import '../chat-container-messages-list/props.js';
+import '../chat-container-messages-list/config/useValidateProps.js';
 
 var ChatContainer = function ChatContainer(props) {
   var _containerRef$current;
 
+  useValidateProps(props, ChatContainerWithSchema.toJSON());
   var sendingText = props.sendingText,
       sendingMessages = props.sendingMessages,
       bannerPosition = props.bannerPosition,
@@ -108,7 +116,8 @@ var ChatContainer = function ChatContainer(props) {
     lineOnly: true
   })) : null), /*#__PURE__*/React.createElement(ChatComposer, _extends({}, composerProps, {
     onResize: onResize,
-    maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2
+    maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
+    actionRef: actionRef || listRef
   })));
 };
 

package/esm/parts/chat-container/ChatContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContainer.js","sources":["../../../../src/parts/chat-container/ChatContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { noop } from 'lodash';\nimport { describe } from 'react-desc';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-basic/IndeterminateProgressIndicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from '../chat-composer';\nimport { ChatContainerMessagesList } from '../chat-container-messages-list';\nimport { ChatContainerProps, defaultProps, containerProps } from './props';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\n\nconst ChatContainer = (props: ChatContainerProps): JSX.Element => {\n  const {\n    sendingText,\n    sendingMessages,\n    bannerPosition,\n    bannerProps,\n    messagesListProps,\n    composerProps,\n    composerProps: { onResize: onComposerResize },\n    actionRef,\n    autoScroll,\n    device,\n    isLoading,\n    hasMoreItems,\n    getMoreMessages,\n  } = props;\n\n  const containerRef = React.useRef<HTMLElement>();\n  const listRef = React.useRef({ scrollToIndex: noop });\n  const onResize = React.useCallback(\n    (height: number) => {\n      if (onComposerResize) onComposerResize(height);\n      if (autoScroll) {\n        listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {\n          align: 'end',\n        });\n      }\n    },\n    [onComposerResize, messagesListProps.messages, autoScroll],\n  );\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n\n  return (\n    <Container rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\" aria-label=\"chat window\">\n      <div style={{ position: 'relative' }}>\n        <ChatContainerMessagesList\n          {...messagesListProps}\n          actionRef={actionRef || listRef}\n          isLoading={isLoading}\n          hasMoreItems={hasMoreItems}\n          getMoreMessages={getMoreMessages}\n          sendingMessages={sendingMessages}\n          sendingText={sendingText}\n        />\n        {['top', 'bottom'].includes(isLoading) ? (\n          <StyledIndicatorContainer isLoading={isLoading}>\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n          </StyledIndicatorContainer>\n        ) : null}\n        {['top', 'bottom'].includes(bannerPosition) ? (\n          <StyledIndicatorContainer isLoading={bannerPosition}>\n            <DSBanner\n              showCloseButton\n              label={bannerProps.label || 'Unread messages'}\n              containerProps={{ id: 'ds-chat-banner' }}\n              actionLink={{\n                label: bannerProps.viewLabel || 'View',\n                onClick: bannerProps.onView,\n              }}\n              onClose={bannerProps.onClose}\n              isOpen\n              type={BANNER_TYPES.INFO}\n            />\n          </StyledIndicatorContainer>\n        ) : null}\n        {sendingMessages && sendingMessages.length > 0 ? (\n          <StyledIndicatorContainer isLoading=\"bottom\" linear>\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer {...composerProps} onResize={onResize} maxHeight={(containerRef.current?.clientHeight || 0) / 2} />\n    </Container>\n  );\n};\n\nChatContainer.propTypes = containerProps;\nChatContainer.defaultProps = defaultProps;\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = containerProps;\n\nexport { ChatContainer, ChatContainerWithSchema };\n"],"names":["ChatContainer","props","sendingText","sendingMessages","bannerPosition","bannerProps","messagesListProps","composerProps","onComposerResize","onResize","actionRef","autoScroll","device","isLoading","hasMoreItems","getMoreMessages","containerRef","React","useRef","listRef","scrollToIndex","noop","useCallback","height","current","messages","length","align","Container","StyledChatContainerContent","MobileStyledChatContainerContent","position","includes","label","id","viewLabel","onClick","onView","onClose","BANNER_TYPES","INFO","clientHeight","propTypes","containerProps","defaultProps","ChatContainerWithSchema","describe"],"mappings":"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"}
+{"version":3,"file":"ChatContainer.js","sources":["../../../../src/parts/chat-container/ChatContainer.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React from 'react';\nimport { noop } from 'lodash';\nimport { describe } from 'react-desc';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-basic/IndeterminateProgressIndicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from '../chat-composer';\nimport { ChatContainerMessagesList } from '../chat-container-messages-list';\nimport { ChatContainerProps, defaultProps, containerProps } from './props';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst ChatContainer = (props: ChatContainerProps): JSX.Element => {\n  useValidateProps(props, ChatContainerWithSchema.toJSON());\n\n  const {\n    sendingText,\n    sendingMessages,\n    bannerPosition,\n    bannerProps,\n    messagesListProps,\n    composerProps,\n    composerProps: { onResize: onComposerResize },\n    actionRef,\n    autoScroll,\n    device,\n    isLoading,\n    hasMoreItems,\n    getMoreMessages,\n  } = props;\n\n  const containerRef = React.useRef<HTMLElement>();\n  const listRef = React.useRef({ scrollToIndex: noop });\n  const onResize = React.useCallback(\n    (height: number) => {\n      if (onComposerResize) onComposerResize(height);\n      if (autoScroll) {\n        listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {\n          align: 'end',\n        });\n      }\n    },\n    [onComposerResize, messagesListProps.messages, autoScroll],\n  );\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n\n  return (\n    <Container rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\" aria-label=\"chat window\">\n      <div style={{ position: 'relative' }}>\n        <ChatContainerMessagesList\n          {...messagesListProps}\n          actionRef={actionRef || listRef}\n          isLoading={isLoading}\n          hasMoreItems={hasMoreItems}\n          getMoreMessages={getMoreMessages}\n          sendingMessages={sendingMessages}\n          sendingText={sendingText}\n        />\n        {['top', 'bottom'].includes(isLoading) ? (\n          <StyledIndicatorContainer isLoading={isLoading}>\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n          </StyledIndicatorContainer>\n        ) : null}\n        {['top', 'bottom'].includes(bannerPosition) ? (\n          <StyledIndicatorContainer isLoading={bannerPosition}>\n            <DSBanner\n              showCloseButton\n              label={bannerProps.label || 'Unread messages'}\n              containerProps={{ id: 'ds-chat-banner' }}\n              actionLink={{\n                label: bannerProps.viewLabel || 'View',\n                onClick: bannerProps.onView,\n              }}\n              onClose={bannerProps.onClose}\n              isOpen\n              type={BANNER_TYPES.INFO}\n            />\n          </StyledIndicatorContainer>\n        ) : null}\n        {sendingMessages && sendingMessages.length > 0 ? (\n          <StyledIndicatorContainer isLoading=\"bottom\" linear>\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer\n        {...composerProps}\n        onResize={onResize}\n        maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n        actionRef={actionRef || listRef}\n      />\n    </Container>\n  );\n};\n\nChatContainer.propTypes = containerProps;\nChatContainer.defaultProps = defaultProps;\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = containerProps;\n\nexport { ChatContainer, ChatContainerWithSchema };\n"],"names":["ChatContainer","props","useValidateProps","ChatContainerWithSchema","toJSON","sendingText","sendingMessages","bannerPosition","bannerProps","messagesListProps","composerProps","onComposerResize","onResize","actionRef","autoScroll","device","isLoading","hasMoreItems","getMoreMessages","containerRef","React","useRef","listRef","scrollToIndex","noop","useCallback","height","current","messages","length","align","Container","StyledChatContainerContent","MobileStyledChatContainerContent","position","includes","label","id","viewLabel","onClick","onView","onClose","BANNER_TYPES","INFO","clientHeight","propTypes","containerProps","defaultProps","describe"],"mappings":"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"}

package/esm/parts/chat-container/config/useValidateProps.js

@@ -0,0 +1,8 @@
+import { useValidatePropTypes } from '@elliemae/ds-props-helpers';
+
+var useValidateProps = function useValidateProps(props, schema) {
+  useValidatePropTypes(props, schema);
+};
+
+export { useValidateProps };
+//# sourceMappingURL=useValidateProps.js.map

package/esm/parts/chat-container/config/useValidateProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidateProps.js","sources":["../../../../../src/parts/chat-container/config/useValidateProps.tsx"],"sourcesContent":["import { useValidatePropTypes } from '@elliemae/ds-props-helpers';\nimport { ChatContainerProps } from '../props';\n\nexport const useValidateProps = (props: ChatContainerProps, schema: unknown): void => {\n  useValidatePropTypes(props, schema);\n};\n"],"names":["useValidateProps","props","schema","useValidatePropTypes"],"mappings":";;IAGaA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAA4BC,MAA5B,EAAsD;AACpFC,EAAAA,oBAAoB,CAACF,KAAD,EAAQC,MAAR,CAApB;AACD;;;;"}

package/esm/parts/chat-container/index.js

@@ -13,6 +13,8 @@ import '@elliemae/ds-icons/PaperAirplane';
 import '../chat-composer/styled.js';
 import 'styled-components';
 import '@elliemae/ds-button';
+import '../chat-composer/config/useValidateProps.js';
+import '@elliemae/ds-props-helpers';
 import '../chat-composer/props.js';
 import '../chat-container-messages-list/ChatContainerMessagesList.js';
 import 'react-virtual';
@@ -22,15 +24,20 @@ import '@elliemae/ds-icons/WarningCircleFill';
 import '../bubble/styled.js';
 import '../bubble/props.js';
 import 'prop-types';
+import '../bubble/config/useValidateProps.js';
 import '../bubble/ChatBubbleArrow.js';
 import '../message-delimiter/MessageDelimiter.js';
 import '../message-delimiter/styled.js';
 import '../message-delimiter/props.js';
+import '../message-delimiter/config/useValidateProps.js';
 import '../system-message/SystemMessage.js';
 import '../system-message/style.js';
 import '../system-message/props.js';
+import '../system-message/config/useValidateProps.js';
 import '../chat-container-messages-list/styled.js';
 import '../chat-container-messages-list/props.js';
+import '../chat-container-messages-list/config/useValidateProps.js';
 import './props.js';
 import './styled.js';
+import './config/useValidateProps.js';
 //# sourceMappingURL=index.js.map

package/esm/parts/chat-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/parts/chat-container/props.js

@@ -6,7 +6,7 @@ import { defaultComposerPros } from '../chat-composer/props.js';
 var defaultProps = {
   messagesListProps: defaultProps$1,
   composerProps: defaultComposerPros,
-  actionRef: noop,
+  actionRef: undefined,
   autoScroll: false,
   device: 'desktop',
   isLoading: undefined,
@@ -33,7 +33,8 @@ var containerProps = {
   bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
   bannerProps: PropTypes.arrayOf(PropTypes.object).description('Banner configuration').defaultValue(defaultProps.bannerProps),
   sendingMessages: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
-  sendingText: PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText)
+  sendingText: PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText),
+  actionRef: PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef)
 };
 
 export { containerProps, defaultProps };

package/esm/parts/chat-container/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-container/props.ts"],"sourcesContent":["import { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\nimport {\n  ChatContainerMessagesListProps,\n  defaultProps as defaultListProps,\n} from '../chat-container-messages-list/props';\nimport { defaultComposerPros, ChatComposerProps } from '../chat-composer/props';\n\ninterface ChatBannerProps {\n  label: string;\n  viewLabel: string;\n  onView: () => void;\n  onClose: () => void;\n}\nexport interface ChatContainerProps {\n  messagesListProps: Pick<ChatContainerMessagesListProps, 'messages' | 'onScrollEnds'>;\n  composerProps: ChatComposerProps;\n  actionRef: PropTypes.func;\n  autoScroll: boolean;\n  device: 'desktop' | 'mobile';\n  isLoading?: 'top' | 'bottom';\n  hasMoreItems?: 'top' | 'bottom';\n  getMoreMessages: PropTypes.func;\n  bannerPosition?: 'top' | 'bottom';\n  bannerProps?: ChatBannerProps;\n  sendingMessages?: string[] | number[];\n  sendingText: string;\n}\n\nexport const defaultProps: ChatContainerProps = {\n  messagesListProps: defaultListProps,\n  composerProps: defaultComposerPros,\n  actionRef: noop,\n  autoScroll: false,\n  device: 'desktop',\n  isLoading: undefined,\n  hasMoreItems: undefined,\n  getMoreMessages: noop,\n  bannerPosition: undefined,\n  bannerProps: {\n    label: 'Unread Messages',\n    viewLabel: 'View',\n    onView: noop,\n    onClose: noop,\n  },\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const containerProps = {\n  messagesListProps: PropTypes.arrayOf(PropTypes.object)\n    .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n    .defaultValue(defaultProps.messagesListProps),\n  composerProps: PropTypes.arrayOf(PropTypes.object)\n    .description('Composer configuration')\n    .defaultValue(defaultProps.composerProps),\n  autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n  device: PropTypes.string\n    .description('Option to render mobile or desktop style composer')\n    .defaultValue(defaultProps.device),\n  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Load More button at the `top` or `bottom` of the container',\n  ),\n  getMoreMessages: PropTypes.func\n    .description('Called when the user clicks on load more')\n    .defaultValue(defaultProps.getMoreMessages),\n  bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  bannerProps: PropTypes.arrayOf(PropTypes.object)\n    .description('Banner configuration')\n    .defaultValue(defaultProps.bannerProps),\n  sendingMessages: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultProps.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultProps.sendingText),\n};\n"],"names":["defaultProps","messagesListProps","defaultListProps","composerProps","defaultComposerPros","actionRef","noop","autoScroll","device","isLoading","undefined","hasMoreItems","getMoreMessages","bannerPosition","bannerProps","label","viewLabel","onView","onClose","sendingMessages","sendingText","containerProps","PropTypes","arrayOf","object","description","defaultValue","bool","string","oneOf","func","oneOfType","number"],"mappings":";;;;;IA6BaA,YAAgC,GAAG;AAC9CC,EAAAA,iBAAiB,EAAEC,cAD2B;AAE9CC,EAAAA,aAAa,EAAEC,mBAF+B;AAG9CC,EAAAA,SAAS,EAAEC,IAHmC;AAI9CC,EAAAA,UAAU,EAAE,KAJkC;AAK9CC,EAAAA,MAAM,EAAE,SALsC;AAM9CC,EAAAA,SAAS,EAAEC,SANmC;AAO9CC,EAAAA,YAAY,EAAED,SAPgC;AAQ9CE,EAAAA,eAAe,EAAEN,IAR6B;AAS9CO,EAAAA,cAAc,EAAEH,SAT8B;AAU9CI,EAAAA,WAAW,EAAE;AACXC,IAAAA,KAAK,EAAE,iBADI;AAEXC,IAAAA,SAAS,EAAE,MAFA;AAGXC,IAAAA,MAAM,EAAEX,IAHG;AAIXY,IAAAA,OAAO,EAAEZ;AAJE,GAViC;AAgB9Ca,EAAAA,eAAe,EAAET,SAhB6B;AAiB9CU,EAAAA,WAAW,EAAE;AAjBiC;IAoBnCC,cAAc,GAAG;AAC5BpB,EAAAA,iBAAiB,EAAEqB,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EAChBC,WADgB,CACJ,mDADI,EAEhBC,YAFgB,CAEH1B,YAAY,CAACC,iBAFV,CADS;AAI5BE,EAAAA,aAAa,EAAEmB,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACZC,WADY,CACA,wBADA,EAEZC,YAFY,CAEC1B,YAAY,CAACG,aAFd,CAJa;AAO5BI,EAAAA,UAAU,EAAEe,SAAS,CAACK,IAAV,CAAeF,WAAf,CAA2B,iCAA3B,EAA8DC,YAA9D,CAA2E1B,YAAY,CAACO,UAAxF,CAPgB;AAQ5BC,EAAAA,MAAM,EAAEc,SAAS,CAACM,MAAV,CACLH,WADK,CACO,mDADP,EAELC,YAFK,CAEQ1B,YAAY,CAACQ,MAFrB,CARoB;AAW5BC,EAAAA,SAAS,EAAEa,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBnB,SAAlB,CAAhB,EAA8Ce,WAA9C,CACT,2EADS,CAXiB;AAc5Bd,EAAAA,YAAY,EAAEW,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBnB,SAAlB,CAAhB,EAA8Ce,WAA9C,CACZ,iEADY,CAdc;AAiB5Bb,EAAAA,eAAe,EAAEU,SAAS,CAACQ,IAAV,CACdL,WADc,CACF,0CADE,EAEdC,YAFc,CAED1B,YAAY,CAACY,eAFZ,CAjBW;AAoB5BC,EAAAA,cAAc,EAAES,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBnB,SAAlB,CAAhB,EAA8Ce,WAA9C,CACd,2EADc,CApBY;AAuB5BX,EAAAA,WAAW,EAAEQ,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACVC,WADU,CACE,sBADF,EAEVC,YAFU,CAEG1B,YAAY,CAACc,WAFhB,CAvBe;AA0B5BK,EAAAA,eAAe,EAAEG,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACS,SAAV,CAAoB,CAACT,SAAS,CAACM,MAAX,EAAmBN,SAAS,CAACU,MAA7B,CAApB,CAAlB,EACdP,WADc,CACF,kCADE,EAEdC,YAFc,CAED1B,YAAY,CAACmB,eAFZ,CA1BW;AA6B5BC,EAAAA,WAAW,EAAEE,SAAS,CAACM,MAAV,CACVH,WADU,CACE,kDADF,EAEVC,YAFU,CAEG1B,YAAY,CAACoB,WAFhB;AA7Be;;;;"}
+{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-container/props.ts"],"sourcesContent":["import { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\nimport {\n  ChatContainerMessagesListProps,\n  defaultProps as defaultListProps,\n} from '../chat-container-messages-list/props';\nimport { defaultComposerPros, ChatComposerProps } from '../chat-composer/props';\n\ninterface ChatBannerProps {\n  label: string;\n  viewLabel: string;\n  onView: () => void;\n  onClose: () => void;\n}\nexport interface ChatContainerProps {\n  messagesListProps: Pick<ChatContainerMessagesListProps, 'messages' | 'onScrollEnds'>;\n  composerProps: ChatComposerProps;\n  actionRef: PropTypes.func;\n  autoScroll: boolean;\n  device: 'desktop' | 'mobile';\n  isLoading?: 'top' | 'bottom';\n  hasMoreItems?: 'top' | 'bottom';\n  getMoreMessages: PropTypes.func;\n  bannerPosition?: 'top' | 'bottom';\n  bannerProps?: ChatBannerProps;\n  sendingMessages?: string[] | number[];\n  sendingText: string;\n}\n\nexport const defaultProps: ChatContainerProps = {\n  messagesListProps: defaultListProps,\n  composerProps: defaultComposerPros,\n  actionRef: undefined,\n  autoScroll: false,\n  device: 'desktop',\n  isLoading: undefined,\n  hasMoreItems: undefined,\n  getMoreMessages: noop,\n  bannerPosition: undefined,\n  bannerProps: {\n    label: 'Unread Messages',\n    viewLabel: 'View',\n    onView: noop,\n    onClose: noop,\n  },\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const containerProps = {\n  messagesListProps: PropTypes.arrayOf(PropTypes.object)\n    .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n    .defaultValue(defaultProps.messagesListProps),\n  composerProps: PropTypes.arrayOf(PropTypes.object)\n    .description('Composer configuration')\n    .defaultValue(defaultProps.composerProps),\n  autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n  device: PropTypes.string\n    .description('Option to render mobile or desktop style composer')\n    .defaultValue(defaultProps.device),\n  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Load More button at the `top` or `bottom` of the container',\n  ),\n  getMoreMessages: PropTypes.func\n    .description('Called when the user clicks on load more')\n    .defaultValue(defaultProps.getMoreMessages),\n  bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  bannerProps: PropTypes.arrayOf(PropTypes.object)\n    .description('Banner configuration')\n    .defaultValue(defaultProps.bannerProps),\n  sendingMessages: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultProps.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultProps.sendingText),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultProps.actionRef),\n};\n"],"names":["defaultProps","messagesListProps","defaultListProps","composerProps","defaultComposerPros","actionRef","undefined","autoScroll","device","isLoading","hasMoreItems","getMoreMessages","noop","bannerPosition","bannerProps","label","viewLabel","onView","onClose","sendingMessages","sendingText","containerProps","PropTypes","arrayOf","object","description","defaultValue","bool","string","oneOf","func","oneOfType","number"],"mappings":";;;;;IA6BaA,YAAgC,GAAG;AAC9CC,EAAAA,iBAAiB,EAAEC,cAD2B;AAE9CC,EAAAA,aAAa,EAAEC,mBAF+B;AAG9CC,EAAAA,SAAS,EAAEC,SAHmC;AAI9CC,EAAAA,UAAU,EAAE,KAJkC;AAK9CC,EAAAA,MAAM,EAAE,SALsC;AAM9CC,EAAAA,SAAS,EAAEH,SANmC;AAO9CI,EAAAA,YAAY,EAAEJ,SAPgC;AAQ9CK,EAAAA,eAAe,EAAEC,IAR6B;AAS9CC,EAAAA,cAAc,EAAEP,SAT8B;AAU9CQ,EAAAA,WAAW,EAAE;AACXC,IAAAA,KAAK,EAAE,iBADI;AAEXC,IAAAA,SAAS,EAAE,MAFA;AAGXC,IAAAA,MAAM,EAAEL,IAHG;AAIXM,IAAAA,OAAO,EAAEN;AAJE,GAViC;AAgB9CO,EAAAA,eAAe,EAAEb,SAhB6B;AAiB9Cc,EAAAA,WAAW,EAAE;AAjBiC;IAoBnCC,cAAc,GAAG;AAC5BpB,EAAAA,iBAAiB,EAAEqB,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EAChBC,WADgB,CACJ,mDADI,EAEhBC,YAFgB,CAEH1B,YAAY,CAACC,iBAFV,CADS;AAI5BE,EAAAA,aAAa,EAAEmB,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACZC,WADY,CACA,wBADA,EAEZC,YAFY,CAEC1B,YAAY,CAACG,aAFd,CAJa;AAO5BI,EAAAA,UAAU,EAAEe,SAAS,CAACK,IAAV,CAAeF,WAAf,CAA2B,iCAA3B,EAA8DC,YAA9D,CAA2E1B,YAAY,CAACO,UAAxF,CAPgB;AAQ5BC,EAAAA,MAAM,EAAEc,SAAS,CAACM,MAAV,CACLH,WADK,CACO,mDADP,EAELC,YAFK,CAEQ1B,YAAY,CAACQ,MAFrB,CARoB;AAW5BC,EAAAA,SAAS,EAAEa,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBvB,SAAlB,CAAhB,EAA8CmB,WAA9C,CACT,2EADS,CAXiB;AAc5Bf,EAAAA,YAAY,EAAEY,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBvB,SAAlB,CAAhB,EAA8CmB,WAA9C,CACZ,iEADY,CAdc;AAiB5Bd,EAAAA,eAAe,EAAEW,SAAS,CAACQ,IAAV,CACdL,WADc,CACF,0CADE,EAEdC,YAFc,CAED1B,YAAY,CAACW,eAFZ,CAjBW;AAoB5BE,EAAAA,cAAc,EAAES,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBvB,SAAlB,CAAhB,EAA8CmB,WAA9C,CACd,2EADc,CApBY;AAuB5BX,EAAAA,WAAW,EAAEQ,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACVC,WADU,CACE,sBADF,EAEVC,YAFU,CAEG1B,YAAY,CAACc,WAFhB,CAvBe;AA0B5BK,EAAAA,eAAe,EAAEG,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACS,SAAV,CAAoB,CAACT,SAAS,CAACM,MAAX,EAAmBN,SAAS,CAACU,MAA7B,CAApB,CAAlB,EACdP,WADc,CACF,kCADE,EAEdC,YAFc,CAED1B,YAAY,CAACmB,eAFZ,CA1BW;AA6B5BC,EAAAA,WAAW,EAAEE,SAAS,CAACM,MAAV,CACVH,WADU,CACE,kDADF,EAEVC,YAFU,CAEG1B,YAAY,CAACoB,WAFhB,CA7Be;AAgC5Bf,EAAAA,SAAS,EAAEiB,SAAS,CAACE,MAAV,CACRC,WADQ,oTAcRC,YAdQ,CAcK1B,YAAY,CAACK,SAdlB;AAhCiB;;;;"}

package/esm/parts/chat-container/styled.js

@@ -1,11 +1,13 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
 import { StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble } from '../bubble/styled.js';
+import { StyledComposerInput } from '../chat-composer/styled.js';
 import { Wrapper, Title, Message, Time } from '../system-message/style.js';
 import '../bubble/props.js';
 import 'prop-types';
 import 'react-desc';
 import 'lodash';
+import '@elliemae/ds-button';
 
 var CONTAINER_WIDTH = 300;
 var StyledChatContainerContent = /*#__PURE__*/styled(Grid).withConfig({
@@ -32,7 +34,7 @@ var StyledIndicatorContainer = /*#__PURE__*/styled.div.withConfig({
 });
 var MobileStyledChatContainerContent = /*#__PURE__*/styled(StyledChatContainerContent).withConfig({
   componentId: "sc-d732wo-2"
-})(["", ",", "{font-size:16px;}", "{font-size:13px;}", "{background-color:#fff;box-shadow:-0 1px 3px rgba(53,60,70,0.8);}", ",", "{font-size:16px;text-align:left;}", "{font-size:13px;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, Time);
+})(["", ",", "{font-size:16px;}", "{font-size:13px;}", "{background-color:#fff;box-shadow:-0 1px 3px rgba(53,60,70,0.8);}", ",", "{font-size:16px;text-align:left;}", "{font-size:13px;}", "{font-size:16px;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, Time, StyledComposerInput);
 
 export { CONTAINER_WIDTH, MobileStyledChatContainerContent, StyledChatContainerContent, StyledIndicatorContainer };
 //# sourceMappingURL=styled.js.map

package/esm/parts/chat-container/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/parts/chat-container/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '../bubble/styled';\nimport { Wrapper, Title, Time, Message } from '../system-message/style';\nexport const CONTAINER_WIDTH = 300;\n\nexport const StyledChatContainerContent = styled(Grid)`\n  height: 100%;\n  min-width: ${CONTAINER_WIDTH}px;\n  overflow: hidden;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  position: relative;\n`;\nexport const StyledIndicatorContainer = styled.div<{\n  isLoading?: 'top' | 'bottom';\n  linear?: boolean;\n}>`\n  position: absolute;\n  width: calc(100% + ${(props) => props.theme.space.xxs});\n  padding: ${(props) => (!props.linear ? props.theme.space.xxs : 0)};\n  left: -${(props) => props.theme.space.xxs};\n  right: -${(props) => props.theme.space.xxs};\n  background: ${(props) => props.theme.colors.neutral['000']};\n  ${(props) => (props.isLoading === 'top' ? 'top: 0;' : '')}\n  ${(props) => (props.isLoading === 'bottom' ? 'bottom: 0;' : '')}\n`;\n\nexport const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`\n  ${StyledTitleLeftBubble},\n  ${StyleBodyWrapper} {\n    font-size: 16px;\n  }\n\n  ${StyledTitleRightBubble} {\n    font-size: 13px;\n  }\n\n  ${Wrapper} {\n    background-color: #fff;\n    box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);\n  }\n\n  ${Title},\n  ${Message} {\n    font-size: 16px;\n    text-align: left;\n  }\n\n  ${Time} {\n    font-size: 13px;\n  }\n`;\n"],"names":["CONTAINER_WIDTH","StyledChatContainerContent","styled","Grid","props","theme","colors","neutral","StyledIndicatorContainer","div","space","xxs","linear","isLoading","MobileStyledChatContainerContent","StyledTitleLeftBubble","StyleBodyWrapper","StyledTitleRightBubble","Wrapper","Title","Message","Time"],"mappings":";;;;;;;;;IAIaA,eAAe,GAAG;IAElBC,0BAA0B,gBAAGC,MAAM,CAACC,IAAD,CAAT;AAAA;AAAA,wFAExBH,eAFwB,EAIvB,UAACI,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CAJuB;IAO1BC,wBAAwB,gBAAGN,MAAM,CAACO,GAAV;AAAA;AAAA,gHAKd,UAACL,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CALc,EAMxB,UAACP,KAAD;AAAA,SAAY,CAACA,KAAK,CAACQ,MAAP,GAAgBR,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAAlC,GAAwC,CAApD;AAAA,CANwB,EAO1B,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CAP0B,EAQzB,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CARyB,EASrB,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CATqB,EAUjC,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACS,SAAN,KAAoB,KAApB,GAA4B,SAA5B,GAAwC,EAApD;AAAA,CAViC,EAWjC,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACS,SAAN,KAAoB,QAApB,GAA+B,YAA/B,GAA8C,EAA1D;AAAA,CAXiC;IAcxBC,gCAAgC,gBAAGZ,MAAM,CAACD,0BAAD,CAAT;AAAA;AAAA,4LACzCc,qBADyC,EAEzCC,gBAFyC,EAMzCC,sBANyC,EAUzCC,OAVyC,EAezCC,KAfyC,EAgBzCC,OAhByC,EAqBzCC,IArByC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/parts/chat-container/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '../bubble/styled';\nimport { StyledComposerInput } from '../chat-composer/styled';\nimport { Wrapper, Title, Time, Message } from '../system-message/style';\nexport const CONTAINER_WIDTH = 300;\n\nexport const StyledChatContainerContent = styled(Grid)`\n  height: 100%;\n  min-width: ${CONTAINER_WIDTH}px;\n  overflow: hidden;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  position: relative;\n`;\nexport const StyledIndicatorContainer = styled.div<{\n  isLoading?: 'top' | 'bottom';\n  linear?: boolean;\n}>`\n  position: absolute;\n  width: calc(100% + ${(props) => props.theme.space.xxs});\n  padding: ${(props) => (!props.linear ? props.theme.space.xxs : 0)};\n  left: -${(props) => props.theme.space.xxs};\n  right: -${(props) => props.theme.space.xxs};\n  background: ${(props) => props.theme.colors.neutral['000']};\n  ${(props) => (props.isLoading === 'top' ? 'top: 0;' : '')}\n  ${(props) => (props.isLoading === 'bottom' ? 'bottom: 0;' : '')}\n`;\n\nexport const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`\n  ${StyledTitleLeftBubble},\n  ${StyleBodyWrapper} {\n    font-size: 16px;\n  }\n\n  ${StyledTitleRightBubble} {\n    font-size: 13px;\n  }\n\n  ${Wrapper} {\n    background-color: #fff;\n    box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);\n  }\n\n  ${Title},\n  ${Message} {\n    font-size: 16px;\n    text-align: left;\n  }\n\n  ${Time} {\n    font-size: 13px;\n  }\n\n  ${StyledComposerInput} {\n    font-size: 16px;\n  }\n`;\n"],"names":["CONTAINER_WIDTH","StyledChatContainerContent","styled","Grid","props","theme","colors","neutral","StyledIndicatorContainer","div","space","xxs","linear","isLoading","MobileStyledChatContainerContent","StyledTitleLeftBubble","StyleBodyWrapper","StyledTitleRightBubble","Wrapper","Title","Message","Time","StyledComposerInput"],"mappings":";;;;;;;;;;;IAKaA,eAAe,GAAG;IAElBC,0BAA0B,gBAAGC,MAAM,CAACC,IAAD,CAAT;AAAA;AAAA,wFAExBH,eAFwB,EAIvB,UAACI,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CAJuB;IAO1BC,wBAAwB,gBAAGN,MAAM,CAACO,GAAV;AAAA;AAAA,gHAKd,UAACL,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CALc,EAMxB,UAACP,KAAD;AAAA,SAAY,CAACA,KAAK,CAACQ,MAAP,GAAgBR,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAAlC,GAAwC,CAApD;AAAA,CANwB,EAO1B,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CAP0B,EAQzB,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CARyB,EASrB,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CATqB,EAUjC,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACS,SAAN,KAAoB,KAApB,GAA4B,SAA5B,GAAwC,EAApD;AAAA,CAViC,EAWjC,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACS,SAAN,KAAoB,QAApB,GAA+B,YAA/B,GAA8C,EAA1D;AAAA,CAXiC;IAcxBC,gCAAgC,gBAAGZ,MAAM,CAACD,0BAAD,CAAT;AAAA;AAAA,iNACzCc,qBADyC,EAEzCC,gBAFyC,EAMzCC,sBANyC,EAUzCC,OAVyC,EAezCC,KAfyC,EAgBzCC,OAhByC,EAqBzCC,IArByC,EAyBzCC,mBAzByC;;;;"}