@elliemae/ds-chat 3.5.1-next.0 → 3.6.0-next.1

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

@@ -1,163 +0,0 @@
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React2 from "react";
-import { Grid } from "@elliemae/ds-grid";
-import { PaperAirplane } from "@elliemae/ds-icons";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from "@elliemae/ds-utilities";
-import {
-  StyledChatContainerContentComposer,
-  StyledComposerInput,
-  StyledComposerButton,
-  StyledCounterArea,
-  StyledCounterErrorA11y
-} from "./styled";
-import { ChatComposerPropTypes, defaultPropsComposer } from "../../react-desc-prop-types";
-const ChatComposer = (props) => {
-  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsComposer);
-  useValidateTypescriptPropTypes(propsWithDefault, ChatComposerPropTypes);
-  const {
-    inputValue,
-    onChange,
-    onResize,
-    onSend,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    maxHeight = 300,
-    placeholder,
-    inputMaxLength,
-    maxLengthMessage,
-    ariaMaxLengthMessage,
-    buttonDisabled,
-    dataTestid,
-    actionRef
-  } = propsWithDefault;
-  const COMPOSER_MIN_HEIGHT = 32;
-  const input = React2.useRef();
-  const inputSize = React2.useRef();
-  const inputSend = React2.useRef();
-  const [height, setHeight] = React2.useState(32);
-  const internalMaxHeight = React2.useMemo(() => maxHeight - 24, [maxHeight]);
-  const [showScroll, setShowScroll] = React2.useState(true);
-  React2.useEffect(() => {
-    const newHeight = inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;
-    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT)
-      onResize(newHeight);
-    setHeight(newHeight);
-    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);
-  }, [inputValue, internalMaxHeight, height, onResize]);
-  React2.useEffect(() => {
-    if (actionRef && actionRef.current) {
-      actionRef.current.focusToComposer = () => {
-        input.current.focus();
-      };
-      actionRef.current.focusToSend = () => {
-        inputSend.current.focus();
-      };
-    }
-  }, [actionRef]);
-  const handleChange = React2.useCallback(
-    (e) => {
-      onChange(e.target.value);
-    },
-    [onChange]
-  );
-  const heightProps = { height, overflow: showScroll ? "auto" : "hidden" };
-  const inputLength = String(inputValue || "").length;
-  const hasError = React2.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
-  return /* @__PURE__ */ jsxs(StyledChatContainerContentComposer, {
-    rows: ["auto", "15px"],
-    maxHeight: `${maxHeight}px`,
-    "data-testid": dataTestid,
-    children: [
-      /* @__PURE__ */ jsxs(Grid, {
-        cols: ["1fr", "24px"],
-        style: { height: heightProps.height },
-        justifyContent: "center",
-        alignItems: "flex-end",
-        gutter: "xxs",
-        children: [
-          /* @__PURE__ */ jsx(StyledComposerInput, {
-            ref: input,
-            onChange: handleChange,
-            style: { ...heightProps },
-            value: inputValue,
-            onFocus,
-            onBlur,
-            onKeyDown,
-            placeholder,
-            "aria-label": "Message to send",
-            "data-testid": "chat-composer-textarea",
-            name: "chat-composer-textarea",
-            id: "chat-composer-textarea"
-          }),
-          /* @__PURE__ */ jsx(Grid, {
-            height: "32px",
-            alignItems: "center",
-            children: /* @__PURE__ */ jsx(StyledComposerButton, {
-              buttonType: "text",
-              icon: /* @__PURE__ */ jsx(PaperAirplane, {
-                width: 18,
-                height: 18
-              }),
-              onClick: onSend,
-              size: "s",
-              disabled: !inputValue || buttonDisabled || hasError,
-              "data-testid": "chat-composer-send-button",
-              "aria-label": "Send",
-              innerRef: inputSend
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx(StyledComposerInput, {
-        ref: inputSize,
-        style: {
-          height: 32,
-          visibility: "hidden",
-          pointerEvents: "none",
-          position: "absolute",
-          top: 0,
-          width: input.current?.clientWidth
-        },
-        onChange: handleChange,
-        value: inputValue
-      }),
-      /* @__PURE__ */ jsxs(Grid, {
-        cols: ["1fr", "24px"],
-        justifyContent: "flex-end",
-        alignItems: "center",
-        gutter: "xxs",
-        pb: "xxs",
-        children: [
-          /* @__PURE__ */ jsxs(StyledCounterArea, {
-            hasError,
-            "data-testid": "composer-counter-area",
-            children: [
-              inputMaxLength && hasError ? /* @__PURE__ */ jsxs(Fragment, {
-                children: [
-                  /* @__PURE__ */ jsx(StyledCounterErrorA11y, {
-                    role: "alert",
-                    children: ariaMaxLengthMessage || `You have entered ${inputLength} characters and have exceeded the limit by ${inputLength - inputMaxLength}. Please limit to less than ${inputMaxLength} characters. `
-                  }),
-                  maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `
-                ]
-              }) : "",
-              inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ""
-            ]
-          }),
-          /* @__PURE__ */ jsx(Grid, {})
-        ]
-      })
-    ]
-  });
-};
-ChatComposer.propTypes = ChatComposerPropTypes;
-ChatComposer.displayName = "ChatComposer";
-const ChatComposerWithSchema = describe(ChatComposer);
-ChatComposerWithSchema.propTypes = ChatComposerPropTypes;
-export {
-  ChatComposer,
-  ChatComposerWithSchema
-};
-//# sourceMappingURL=ChatContainerComposer.js.map

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

@@ -1,7 +0,0 @@
-{
-  "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, { WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-utilities';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled';\n\nimport { DSChatT, ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types';\n// eslint-disable-next-line complexity\nconst ChatComposer: React.ComponentType<DSChatT.ComposerProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ComposerProps>(props, defaultPropsComposer);\n  useValidateTypescriptPropTypes<DSChatT.ComposerProps>(propsWithDefault, ChatComposerPropTypes);\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    ariaMaxLengthMessage,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = propsWithDefault;\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                {ariaMaxLengthMessage ||\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 ? ` ${inputLength} / ${inputMaxLength}` : ''}\n        </StyledCounterArea>\n        <Grid />\n      </Grid>\n    </StyledChatContainerContentComposer>\n  );\n};\n\nChatComposer.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\nChatComposer.displayName = 'ChatComposer';\nconst ChatComposerWithSchema = describe(ChatComposer);\nChatComposerWithSchema.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatComposer, ChatComposerWithSchema };\n"],
-  "mappings": "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",
-  "names": ["React"]
-}

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

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

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

@@ -1,7 +0,0 @@
-{
-  "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,YAAY,WAAW;ACAvB,SAAS,cAAc,8BAA8B;",
-  "names": []
-}

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

@@ -1,73 +0,0 @@
-import * as React from "react";
-import { styled } from "@elliemae/ds-system";
-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/dist/esm/parts/chat-composer/styled.js.map

@@ -1,7 +0,0 @@
-{
-  "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 '@elliemae/ds-system';\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,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAIlB,MAAM,qCAAqC,OAAO,IAAI;AAAA;AAAA;AAAA,gBAG7C,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,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQvC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,kBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxC,CAAC,UAAW,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,OAAO,UAAU;AAAA;AAAA;AAIvE,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}

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

@@ -1,153 +0,0 @@
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import React2 from "react";
-import { noop } from "lodash";
-import {
-  useMemoMergePropsWithDefault,
-  useGetGlobalAttributes,
-  useValidateTypescriptPropTypes,
-  describe
-} from "@elliemae/ds-utilities";
-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, ChatContainerPropTypes } from "../../react-desc-prop-types";
-import { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from "./styled";
-const ChatContainer = (props) => {
-  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, ChatContainerPropTypes);
-  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
-  const {
-    sendingText,
-    sendingMessages,
-    bannerPosition,
-    bannerProps,
-    messagesListProps,
-    composerProps,
-    composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },
-    actionRef,
-    device,
-    isLoading,
-    hasMoreItems,
-    getMoreMessages
-  } = propsWithDefault;
-  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"
-        });
-      }, 50);
-    },
-    [onComposerResize, messagesListProps.messages, actionRef]
-  );
-  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") {
-          if (messagesListProps.messages?.length > 0) {
-            e.preventDefault();
-            if (["top", "bottom"].includes(bannerPosition)) {
-              bannerRef.current.focusOnWrapper();
-            } else {
-              const last = ref.current.getMessagesInView().pop();
-              ref.current?.focusToIndexWithoutScroll(last);
-            }
-          }
-        }
-      }
-    },
-    [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, {
-    ...globalAttributes,
-    rows: ["minmax(0, 1fr)", "auto"],
-    ref: containerRef,
-    role: "region",
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        style: { position: "relative", overflow: "hidden" },
-        children: [
-          /* @__PURE__ */ jsx(ChatContainerMessagesList, {
-            ...messagesListProps,
-            actionRef: actionRef || listRef,
-            isLoading,
-            hasMoreItems,
-            getMoreMessages,
-            sendingMessages,
-            sendingText,
-            bannerPosition,
-            bannerRef
-          }),
-          isLoading && ["top", "bottom"].includes(isLoading) ? /* @__PURE__ */ jsx(StyledIndicatorContainer, {
-            isLoading,
-            "data-testid": "ds-chat-loading-indicator",
-            children: /* @__PURE__ */ jsx(DSIndeterminateProgressIndicator, {
-              processing: true,
-              title: "Loading"
-            })
-          }) : null,
-          /* @__PURE__ */ jsx(StyledIndicatorContainer, {
-            linear: true,
-            isLoading: bannerPosition,
-            children: /* @__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",
-            children: /* @__PURE__ */ jsx(DSIndeterminateProgressIndicator, {
-              processing: true,
-              title: sendingText,
-              lineOnly: true
-            })
-          }) : null
-        ]
-      }),
-      /* @__PURE__ */ jsx(ChatComposer, {
-        ...composerProps,
-        onKeyDown: handleTabs,
-        onResize,
-        maxHeight: (containerRef.current?.clientHeight || 0) / 2,
-        actionRef: actionRef || listRef
-      })
-    ]
-  });
-};
-ChatContainer.propTypes = ChatContainerPropTypes;
-ChatContainer.displayName = "ChatContainer";
-const ChatContainerWithSchema = describe(ChatContainer);
-ChatContainerWithSchema.propTypes = ChatContainerPropTypes;
-export {
-  ChatContainer,
-  ChatContainerWithSchema
-};
-//# sourceMappingURL=ChatContainer.js.map

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

@@ -1,7 +0,0 @@
-{
-  "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, { WeakValidationMap } from 'react';\nimport { noop } from 'lodash';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  describe,\n} from '@elliemae/ds-utilities';\n\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 { DSChatT, defaultProps, ChatContainerPropTypes } from '../../react-desc-prop-types';\n\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n  useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\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  } = propsWithDefault;\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  return (\n    <Container {...globalAttributes} rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\">\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        {isLoading && ['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 = ChatContainerPropTypes as WeakValidationMap<unknown>;\nChatContainer.displayName = 'ChatContainer';\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainer, ChatContainerWithSchema };\n"],
-  "mappings": "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",
-  "names": ["React"]
-}

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

@@ -1,83 +0,0 @@
-import * as React from "react";
-import { styled } from "@elliemae/ds-system";
-import { Grid } from "@elliemae/ds-grid";
-import { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from "../../exported-related/bubble/styled";
-import { StyledComposerInput } from "../chat-composer/styled";
-import { Wrapper, Title, Time, Message } from "../../exported-related/system-message/style";
-const CONTAINER_WIDTH = 300;
-const StyledChatContainerContent = styled(Grid)`
-  height: 100%;
-  min-width: ${CONTAINER_WIDTH}px;
-  overflow: hidden;
-  background: ${(props) => props.theme.colors.neutral["050"]};
-  position: relative;
-`;
-const StyledIndicatorContainer = styled.div`
-  transition: 0.2s ease-in-out;
-  // 0.2s is the same duration of the banner settimeout function to focus itself
-  // this has to be this way to fix visual bugs on safari.
-  position: absolute;
-  visibility: hidden;
-  pointer-events: none;
-  width: 100%;
-  padding: 0 ${(props) => !props.linear ? props.theme.space.xxs : 0};
-  left: 0;
-  right: 0;
-  background: ${(props) => props.theme.colors.neutral["000"]};
-  ${(props) => props.isLoading === "top" ? `
-  top: -41px;
-  transform: translate(0, 41px);
-  visibility: visible;
-  pointer-events: auto;
-  ` : ""}
-  ${(props) => props.isLoading === "bottom" ? `
-  bottom: -41px;
-  transform: translate(0, -41px);
-  visibility: visible;
-  pointer-events: auto;
-  ` : ""}
-
-  & div,a {
-    font-size: 13px;
-  }
-`;
-const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`
-  ${StyledTitleLeftBubble},
-  ${StyleBodyWrapper} {
-    font-size: 16px;
-  }
-
-  ${StyledTitleRightBubble} {
-    font-size: 13px;
-  }
-
-  ${Wrapper} {
-    background-color: #fff;
-    box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);
-  }
-
-  ${Title},
-  ${Message} {
-    font-size: 16px;
-    text-align: left;
-  }
-
-  ${Time} {
-    font-size: 13px;
-  }
-
-  ${StyledComposerInput} {
-    font-size: 16px;
-  }
-
-  ${StyledIndicatorContainer} {
-    font-size: 16px;
-  }
-`;
-export {
-  CONTAINER_WIDTH,
-  MobileStyledChatContainerContent,
-  StyledChatContainerContent,
-  StyledIndicatorContainer
-};
-//# sourceMappingURL=styled.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container/styled.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '../../exported-related/bubble/styled';\nimport { StyledComposerInput } from '../chat-composer/styled';\nimport { Wrapper, Title, Time, Message } from '../../exported-related/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  transition: 0.2s ease-in-out;\n  // 0.2s is the same duration of the banner settimeout function to focus itself\n  // this has to be this way to fix visual bugs on safari.\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  width: 100%;\n  padding: 0 ${(props) => (!props.linear ? props.theme.space.xxs : 0)};\n  left: 0;\n  right: 0;\n  background: ${(props) => props.theme.colors.neutral['000']};\n  ${(props) =>\n    props.isLoading === 'top'\n      ? `\n  top: -41px;\n  transform: translate(0, 41px);\n  visibility: visible;\n  pointer-events: auto;\n  `\n      : ''}\n  ${(props) =>\n    props.isLoading === 'bottom'\n      ? `\n  bottom: -41px;\n  transform: translate(0, -41px);\n  visibility: visible;\n  pointer-events: auto;\n  `\n      : ''}\n\n  & div,a {\n    font-size: 13px;\n  }\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  ${StyledIndicatorContainer} {\n    font-size: 16px;\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,wBAAwB,uBAAuB,wBAAwB;AAChF,SAAS,2BAA2B;AACpC,SAAS,SAAS,OAAO,MAAM,eAAe;AACvC,MAAM,kBAAkB;AAExB,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA,eAEtC;AAAA;AAAA,gBAEC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAG/C,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAWhC,CAAC,UAAW,CAAC,MAAM,SAAS,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,gBAGnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAClD,CAAC,UACD,MAAM,cAAc,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA,IACJ,CAAC,UACD,MAAM,cAAc,WAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,mCAAmC,OAAO,0BAA0B;AAAA,IAC7E;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;",
-  "names": []
-}