@elliemae/ds-chat 2.2.0 → 2.3.0-alpha.3

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/ChatContainerComposer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\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\n// eslint-disable-next-line complexity\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    onKeyDown,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    maxLengthMessage,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = props;\n\n  const COMPOSER_MIN_HEIGHT = 32;\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    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);\n    setHeight(newHeight);\n    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);\n  }, [inputValue, internalMaxHeight, height, onResize]);\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]);\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  return (\n    <StyledChatContainerContentComposer rows={['auto', '15px']} maxHeight={`${maxHeight}px`} data-testid={dataTestid}>\n      <Grid\n        cols={['1fr', '24px']}\n        style={{ height: heightProps.height }}\n        justifyContent=\"center\"\n        alignItems=\"flex-end\"\n        gutter=\"xxs\"\n      >\n        <StyledComposerInput\n          ref={input}\n          onChange={handleChange}\n          style={{ ...heightProps }}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid=\"chat-composer-textarea\"\n          name=\"chat-composer-textarea\"\n          id=\"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      />\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                {maxLengthMessage ||\n                  `You have entered ${inputLength} characters and have exceeded the limit by ${\n                    inputLength - inputMaxLength\n                  }. Please limit to less than ${inputMaxLength} characters. `}\n              </StyledCounterErrorA11y>\n              {maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `}\n            </>\n          ) : (\n            ''\n          )}\n          {inputMaxLength && !maxLengthMessage ? ` ${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"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -1,7 +1,9 @@
-import { useValidatePropTypes } from '@elliemae/ds-props-helpers';
-
+import * as React from "react";
+import { useValidatePropTypes } from "@elliemae/ds-props-helpers";
 const useValidateProps = (props, schema) => {
   useValidatePropTypes(props, schema);
 };
-
-export { useValidateProps };
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/chat-composer/config/useValidateProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AAGO,MAAM,mBAAmB,CAAC,OAA0B,WAA0B;AACnF,uBAAqB,OAAO;AAAA;",
+  "names": []
+}

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

@@ -1 +1,7 @@
-export { ChatComposer, ChatComposerWithSchema } from './ChatContainerComposer.js';
+import * as React from "react";
+import { ChatComposer, ChatComposerWithSchema } from "./ChatContainerComposer";
+export {
+  ChatComposer,
+  ChatComposerWithSchema
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatComposer, ChatComposerWithSchema } from './ChatContainerComposer';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

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

@@ -1,10 +1,9 @@
-import { PropTypes } from 'react-desc';
-import { noop } from 'lodash';
-
+import * as React from "react";
+import { PropTypes } from "react-desc";
+import { noop } from "lodash";
 const defaultComposerPros = {
-  placeholder: 'Type your message',
-  inputValue: '',
-  ariaMaxLengthMessage: '',
+  placeholder: "Type your message",
+  inputValue: "",
   onChange: noop,
   onResize: noop,
   onSend: noop,
@@ -12,28 +11,40 @@ const defaultComposerPros = {
   onBlur: noop,
   onKeyDown: noop,
   maxHeight: 0,
-  inputMaxLength: undefined,
-  maxLengthMessage: undefined,
+  inputMaxLength: void 0,
+  maxLengthMessage: void 0,
   buttonDisabled: false,
-  dataTestid: 'ds-chat-composer',
+  dataTestid: "ds-chat-composer",
   actionRef: noop
 };
 const composerProps = {
-  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),
-  inputValue: PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),
-  ariaMaxLengthMessage: PropTypes.string.description('Aria message for Max length message when exceeded').defaultValue(defaultComposerPros.maxLengthMessage),
-  maxLengthMessage: PropTypes.string.description('Max length message').defaultValue(defaultComposerPros.maxLengthMessage),
-  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),
-  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.func.description('Input blur').defaultValue(defaultComposerPros.onBlur),
-  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultComposerPros.onKeyDown),
-  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.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)
+  placeholder: PropTypes.string.description("Input Placeholder").defaultValue(defaultComposerPros.placeholder),
+  inputValue: PropTypes.string.description("Input value").defaultValue(defaultComposerPros.inputValue),
+  maxLengthMessage: PropTypes.string.description("Max length message").defaultValue(defaultComposerPros.maxLengthMessage),
+  onChange: PropTypes.func.description("Called when the user types").defaultValue(defaultComposerPros.onChange),
+  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.func.description("Input blur").defaultValue(defaultComposerPros.onBlur),
+  onKeyDown: PropTypes.func.description("Input on key down").defaultValue(defaultComposerPros.onKeyDown),
+  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.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: 
+        { 
+          scrollToIndex: (n: number) => void,
+          getMessagesInView: () => number[],
+          focusToIndex: (n: number) => void,
+          focusToList: () => void,
+          focusToComposer: () => void,
+          focusToSend: () => void,
+        }
+        
+      `).defaultValue(defaultComposerPros.actionRef)
 };
-
-export { composerProps, defaultComposerPros };
+export {
+  composerProps,
+  defaultComposerPros
+};
+//# sourceMappingURL=props.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/props.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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  onKeyDown: noop,\n  maxHeight: 0,\n  inputMaxLength: undefined,\n  maxLengthMessage: undefined,\n  buttonDisabled: false,\n  dataTestid: 'ds-chat-composer',\n  actionRef: noop,\n};\n\nexport interface ChatComposerProps {\n  placeholder?: string;\n  inputValue?: string;\n  maxLengthMessage?: string;\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  onKeyDown?: (e: React.ChangeEvent<HTMLTextAreaElement>) => 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  maxLengthMessage: PropTypes.string\n    .description('Max length message')\n    .defaultValue(defaultComposerPros.maxLengthMessage),\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  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultComposerPros.onKeyDown),\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"],
+  "mappings": "AAAA;ACCA;AACA;AAOO,MAAM,sBAAyC;AAAA,EACpD,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,WAAW;AAAA;AAoBN,MAAM,gBAAgB;AAAA,EAC3B,aAAa,UAAU,OAAO,YAAY,qBAAqB,aAAa,oBAAoB;AAAA,EAChG,YAAY,UAAU,OAAO,YAAY,eAAe,aAAa,oBAAoB;AAAA,EACzF,kBAAkB,UAAU,OACzB,YAAY,sBACZ,aAAa,oBAAoB;AAAA,EACpC,UAAU,UAAU,KAAK,YAAY,8BAA8B,aAAa,oBAAoB;AAAA,EACpG,UAAU,UAAU,KACjB,YAAY,uCACZ,aAAa,oBAAoB;AAAA,EACpC,QAAQ,UAAU,KAAK,YAAY,8BAA8B,aAAa,oBAAoB;AAAA,EAClG,SAAS,UAAU,KAAK,YAAY,eAAe,aAAa,oBAAoB;AAAA,EACpF,QAAQ,UAAU,KAAK,YAAY,cAAc,aAAa,oBAAoB;AAAA,EAClF,WAAW,UAAU,KAAK,YAAY,qBAAqB,aAAa,oBAAoB;AAAA,EAC5F,WAAW,UAAU,OAClB,YAAY,kDACZ,aAAa,oBAAoB;AAAA,EACpC,gBAAgB,UAAU,OACvB,YAAY,wDACZ,aAAa,oBAAoB;AAAA,EACpC,gBAAgB,UAAU,KACvB,YAAY,4CACZ,aAAa,oBAAoB;AAAA,EACpC,YAAY,UAAU,OAAO,YAAY,eAAe,aAAa,oBAAoB;AAAA,EACzF,WAAW,UAAU,OAClB,YACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAYD,aAAa,oBAAoB;AAAA;",
+  "names": []
+}

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

@@ -1,22 +1,73 @@
-import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-grid';
-import { DSButton } from '@elliemae/ds-button';
-
-// Composer
-const StyledChatContainerContentComposer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1ahwpce-0"
-})(["width:100%;min-height:56px;background:", ";padding:", ";padding-bottom:3px;padding-top:6px;padding-left:", ";max-height:", ";border-top:1px solid #cbcfd7;"], props => props.theme.colors.neutral['050'], props => props.theme.space.xxs, props => props.theme.space.xs, props => props.maxHeight);
-const 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:13px;font-weight:400;line-height:1;transition:height 0.05s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
-const StyledComposerButton = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-1ahwpce-2"
-})(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
-const StyledCounterArea = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1ahwpce-3"
-})(["text-align:right;font-size:11px;height:15px;align-items:center;font-style:italic;", " position:relative;"], props => props.hasError ? "color:".concat(props.theme.colors.danger[900], ";") : '');
-const StyledCounterErrorA11y = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-1ahwpce-4"
-})(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
-
-export { StyledChatContainerContentComposer, StyledComposerButton, StyledComposerInput, StyledCounterArea, StyledCounterErrorA11y };
+import * as React from "react";
+import styled from "styled-components";
+import { Grid } from "@elliemae/ds-grid";
+import { DSButton } from "@elliemae/ds-button";
+const StyledChatContainerContentComposer = styled(Grid)`
+  width: 100%;
+  min-height: 56px;
+  background: ${(props) => props.theme.colors.neutral["050"]};
+  padding: ${(props) => props.theme.space.xxs};
+  padding-bottom: 3px;
+  padding-top: 6px;
+  padding-left: ${(props) => props.theme.space.xs};
+  max-height: ${(props) => props.maxHeight};
+  border-top: 1px solid #cbcfd7;
+`;
+const StyledComposerInput = styled.textarea`
+  padding: ${(props) => props.theme.space.xxs};
+  resize: none;
+  min-height: 32px;
+  border-radius: 2px;
+  border: solid 1px #cbcfd7;
+  color: #25292f;
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height};
+  min-width: 244px;
+  overflow-y: auto;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1;
+  transition: height 0.05s;
+  &:focus {
+    outline: none;
+    border: 1px solid ${(props) => props.theme.colors.brand[600]};
+    box-shadow: inset 0 0 0 1px #8cc2ed;
+    border-radius: 2px;
+  }
+`;
+const StyledComposerButton = styled(DSButton)`
+  &:disabled {
+    background: none;
+    svg {
+      fill: #5d6775;
+    }
+  }
+  svg {
+    fill: ${(props) => props.theme.colors.brand[600]};
+  }
+  &:focus {
+    background: ${(props) => props.theme.colors.brand[200]};
+  }
+`;
+const StyledCounterArea = styled(Grid)`
+  text-align: right;
+  font-size: 11px;
+  height: 15px;
+  align-items: center;
+  font-style: italic;
+  ${(props) => props.hasError ? `color:${props.theme.colors.danger[900]};` : ""}
+  position:relative;
+`;
+const StyledCounterErrorA11y = styled.span`
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+export {
+  StyledChatContainerContentComposer,
+  StyledComposerButton,
+  StyledComposerInput,
+  StyledCounterArea,
+  StyledCounterErrorA11y
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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.05s;\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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAIO,MAAM,qCAAqC,OAAO;AAAA;AAAA;AAAA,gBAGzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,kBAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAC/B,CAAC,UAAU,MAAM;AAAA;AAAA;AAI1B,MAAM,sBAAsB,OAAO;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,CAAC,UAA0B,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAS9E,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKrD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,kBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpC,CAAC,UAAW,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,OAAO,UAAU;AAAA;AAAA;AAIvE,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -1,31 +1,15 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import React from 'react';
-import { noop } from 'lodash';
-import { describe } from 'react-desc';
-import DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';
-import DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';
-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 { jsxs, jsx } from 'react/jsx-runtime';
-
-var _DSIndeterminateProgr;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const ChatContainer = props => {
-  var _messagesListProps$me2, _containerRef$current;
-
+import * as React from "react";
+import React2 from "react";
+import { noop } from "lodash";
+import { describe } from "react-desc";
+import DSIndeterminateProgressIndicator from "@elliemae/ds-indeterminate-progress-indicator";
+import DSBanner, { BANNER_TYPES } from "@elliemae/ds-banner";
+import { ChatComposer } from "../chat-composer";
+import { ChatContainerMessagesList } from "../chat-container-messages-list";
+import { defaultProps, containerProps } from "./props";
+import { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from "./styled";
+import { useValidateProps } from "./config/useValidateProps";
+const ChatContainer = (props) => {
   useValidateProps(props, containerProps);
   const {
     sendingText,
@@ -34,10 +18,7 @@ const ChatContainer = props => {
     bannerProps,
     messagesListProps,
     composerProps,
-    composerProps: {
-      onResize: onComposerResize,
-      onKeyDown: onComposerKeyDown
-    },
+    composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },
     actionRef,
     device,
     isLoading,
@@ -45,118 +26,103 @@ const ChatContainer = props => {
     getMoreMessages,
     ariaLabel
   } = props;
-  const bannerRef = React.useRef({
-    focusOnWrapper: noop,
-    focusOnLink: noop
-  });
-  const containerRef = React.useRef();
-  const listRef = React.useRef({
-    scrollToIndex: noop
-  });
-  const onResize = React.useCallback(height => {
-    if (onComposerResize) onComposerResize(height);
-    /*
-       setTimeout is used to equal the animation duration from the 
-       composer text area when increase its size
-      */
-
+  const bannerRef = React2.useRef({ focusOnWrapper: noop, focusOnLink: noop });
+  const containerRef = React2.useRef();
+  const listRef = React2.useRef({ scrollToIndex: noop });
+  const onResize = React2.useCallback((height) => {
+    if (onComposerResize)
+      onComposerResize(height);
     setTimeout(() => {
       actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
-        align: 'start'
+        align: "start"
       });
     }, 50);
   }, [onComposerResize, messagesListProps.messages, actionRef]);
-  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
-  const handleTabs = React.useCallback(e => {
-    if (onComposerKeyDown) onComposerKeyDown(e);else {
+  const Container = device === "desktop" ? StyledChatContainerContent : MobileStyledChatContainerContent;
+  const handleTabs = React2.useCallback((e) => {
+    if (onComposerKeyDown)
+      onComposerKeyDown(e);
+    else {
       const ref = actionRef || listRef;
-
-      if (e.shiftKey && e.key === 'Tab') {
-        var _messagesListProps$me;
-
-        if (((_messagesListProps$me = messagesListProps.messages) === null || _messagesListProps$me === void 0 ? void 0 : _messagesListProps$me.length) > 0) {
+      if (e.shiftKey && e.key === "Tab") {
+        if (messagesListProps.messages?.length > 0) {
           e.preventDefault();
-
-          if (['top', 'bottom'].includes(bannerPosition)) {
+          if (["top", "bottom"].includes(bannerPosition)) {
             bannerRef.current.focusOnWrapper();
           } else {
-            var _ref$current;
-
             const last = ref.current.getMessagesInView().pop();
-            (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focusToIndexWithoutScroll(last);
+            ref.current?.focusToIndexWithoutScroll(last);
           }
         }
       }
     }
-  }, [actionRef, onComposerKeyDown, bannerPosition, (_messagesListProps$me2 = messagesListProps.messages) === null || _messagesListProps$me2 === void 0 ? void 0 : _messagesListProps$me2.length]); // Map actions
-
-  React.useEffect(() => {
+  }, [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length]);
+  React2.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;
       actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
     }
   }, [actionRef]);
-  return /*#__PURE__*/jsxs(Container, {
-    rows: ['minmax(0, 1fr)', 'auto'],
+  return /* @__PURE__ */ React2.createElement(Container, {
+    rows: ["minmax(0, 1fr)", "auto"],
     ref: containerRef,
     role: "region",
-    "aria-label": ariaLabel,
-    children: [/*#__PURE__*/_jsx("div", {
-      style: {
-        position: 'relative',
-        overflow: 'hidden'
-      }
-    }, void 0, /*#__PURE__*/jsx(ChatContainerMessagesList, _objectSpread(_objectSpread({}, messagesListProps), {}, {
-      actionRef: actionRef || listRef,
-      isLoading: isLoading,
-      hasMoreItems: hasMoreItems,
-      getMoreMessages: getMoreMessages,
-      sendingMessages: sendingMessages,
-      sendingText: sendingText,
-      bannerPosition: bannerPosition,
-      bannerRef: bannerRef
-    })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
-      isLoading: isLoading,
-      "data-testid": "ds-chat-loading-indicator"
-    }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
-      processing: true,
-      title: "Loading"
-    }))) : null, /*#__PURE__*/_jsx(StyledIndicatorContainer, {
-      linear: true,
-      isLoading: bannerPosition
-    }, void 0, /*#__PURE__*/_jsx(DSBanner, {
-      showCloseButton: true,
-      label: bannerProps.label || 'Unread messages',
-      containerProps: {
-        id: 'ds-chat-banner'
-      },
-      actionLink: {
-        label: bannerProps.viewLabel || 'View',
-        onClick: bannerProps.onView
-      },
-      onClose: bannerProps.onClose,
-      isOpen: true,
-      type: bannerProps.type || BANNER_TYPES.INFO,
-      actionRef: bannerRef
-    })), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
-      isLoading: "bottom",
-      linear: true,
-      "data-testid": "ds-chat-loading-indicator"
-    }, void 0, /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
-      processing: true,
-      title: sendingText,
-      lineOnly: true
-    })) : null), /*#__PURE__*/jsx(ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
-      onKeyDown: handleTabs,
-      onResize: onResize,
-      maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
-      actionRef: actionRef || listRef
-    }))]
-  });
+    "aria-label": ariaLabel
+  }, /* @__PURE__ */ React2.createElement("div", {
+    style: { position: "relative", overflow: "hidden" }
+  }, /* @__PURE__ */ React2.createElement(ChatContainerMessagesList, {
+    ...messagesListProps,
+    actionRef: actionRef || listRef,
+    isLoading,
+    hasMoreItems,
+    getMoreMessages,
+    sendingMessages,
+    sendingText,
+    bannerPosition,
+    bannerRef
+  }), ["top", "bottom"].includes(isLoading) ? /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
+    isLoading,
+    "data-testid": "ds-chat-loading-indicator"
+  }, /* @__PURE__ */ React2.createElement(DSIndeterminateProgressIndicator, {
+    processing: true,
+    title: "Loading"
+  })) : null, /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
+    linear: true,
+    isLoading: bannerPosition
+  }, /* @__PURE__ */ React2.createElement(DSBanner, {
+    showCloseButton: true,
+    label: bannerProps.label || "Unread messages",
+    containerProps: { id: "ds-chat-banner" },
+    actionLink: {
+      label: bannerProps.viewLabel || "View",
+      onClick: bannerProps.onView
+    },
+    onClose: bannerProps.onClose,
+    isOpen: true,
+    type: bannerProps.type || BANNER_TYPES.INFO,
+    actionRef: bannerRef
+  })), sendingMessages && sendingMessages.length > 0 ? /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
+    isLoading: "bottom",
+    linear: true,
+    "data-testid": "ds-chat-loading-indicator"
+  }, /* @__PURE__ */ React2.createElement(DSIndeterminateProgressIndicator, {
+    processing: true,
+    title: sendingText,
+    lineOnly: true
+  })) : null), /* @__PURE__ */ React2.createElement(ChatComposer, {
+    ...composerProps,
+    onKeyDown: handleTabs,
+    onResize,
+    maxHeight: (containerRef.current?.clientHeight || 0) / 2,
+    actionRef: actionRef || listRef
+  }));
 };
-
+ChatContainer.propTypes = containerProps;
 ChatContainer.defaultProps = defaultProps;
 const ChatContainerWithSchema = describe(ChatContainer);
 ChatContainerWithSchema.propTypes = containerProps;
-
-export { ChatContainer, ChatContainerWithSchema };
+export {
+  ChatContainer,
+  ChatContainerWithSchema
+};
+//# sourceMappingURL=ChatContainer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container/ChatContainer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { noop } from 'lodash';\nimport { describe } from 'react-desc';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\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, containerProps);\n\n  const {\n    sendingText,\n    sendingMessages,\n    bannerPosition,\n    bannerProps,\n    messagesListProps,\n    composerProps,\n    composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },\n    actionRef,\n    device,\n    isLoading,\n    hasMoreItems,\n    getMoreMessages,\n    ariaLabel,\n  } = props;\n  const bannerRef = React.useRef({ focusOnWrapper: noop, focusOnLink: noop });\n  const containerRef = React.useRef<HTMLElement>();\n  const listRef = React.useRef({ scrollToIndex: noop });\n\n  const onResize = React.useCallback(\n    (height: number) => {\n      if (onComposerResize) onComposerResize(height);\n      /*\n         setTimeout is used to equal the animation duration from the \n         composer text area when increase its size\n        */\n      setTimeout(() => {\n        actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {\n          align: 'start',\n        });\n      }, 50);\n    },\n    [onComposerResize, messagesListProps.messages, actionRef],\n  );\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n  const handleTabs = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (onComposerKeyDown) onComposerKeyDown(e);\n      else {\n        const ref = actionRef || listRef;\n        if (e.shiftKey && e.key === 'Tab') {\n          if (messagesListProps.messages?.length > 0) {\n            e.preventDefault();\n            if (['top', 'bottom'].includes(bannerPosition)) {\n              bannerRef.current.focusOnWrapper();\n            } else {\n              const last = ref.current.getMessagesInView().pop();\n              ref.current?.focusToIndexWithoutScroll(last);\n            }\n          }\n        }\n      }\n    },\n    [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length],\n  );\n\n  // Map actions\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;\n      actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;\n    }\n  }, [actionRef]);\n\n  return (\n    <Container rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\" aria-label={ariaLabel}>\n      <div style={{ position: 'relative', overflow: 'hidden' }}>\n        <ChatContainerMessagesList\n          {...messagesListProps}\n          actionRef={actionRef || listRef}\n          isLoading={isLoading}\n          hasMoreItems={hasMoreItems}\n          getMoreMessages={getMoreMessages}\n          sendingMessages={sendingMessages}\n          sendingText={sendingText}\n          bannerPosition={bannerPosition}\n          bannerRef={bannerRef}\n        />\n        {['top', 'bottom'].includes(isLoading) ? (\n          <StyledIndicatorContainer isLoading={isLoading} data-testid=\"ds-chat-loading-indicator\">\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n          </StyledIndicatorContainer>\n        ) : null}\n        <StyledIndicatorContainer linear 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={bannerProps.type || BANNER_TYPES.INFO}\n            actionRef={bannerRef}\n          />\n        </StyledIndicatorContainer>\n        {sendingMessages && sendingMessages.length > 0 ? (\n          <StyledIndicatorContainer isLoading=\"bottom\" linear data-testid=\"ds-chat-loading-indicator\">\n            <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer\n        {...composerProps}\n        onKeyDown={handleTabs}\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"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -1,7 +1,9 @@
-import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
-
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
 const useValidateProps = (props, propTypes) => {
   useValidateTypescriptPropTypes(props, propTypes);
 };
-
-export { useValidateProps };
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/chat-container/config/useValidateProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { ChatContainerProps } from '../props';\n\nexport const useValidateProps = (props: ChatContainerProps, propTypes: unknown): void => {\n  useValidateTypescriptPropTypes(props, propTypes);\n};\n"],
+  "mappings": "AAAA;ACAA;AAGO,MAAM,mBAAmB,CAAC,OAA2B,cAA6B;AACvF,iCAA+B,OAAO;AAAA;",
+  "names": []
+}

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

@@ -1 +1,7 @@
-export { ChatContainer, ChatContainerWithSchema } from './ChatContainer.js';
+import * as React from "react";
+import { ChatContainer, ChatContainerWithSchema } from "./ChatContainer";
+export {
+  ChatContainer,
+  ChatContainerWithSchema
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatContainer, ChatContainerWithSchema } from './ChatContainer';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}