@elliemae/ds-chat 3.4.2 → 3.4.3

package/dist/esm/exported-related/tile-button/styled.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/tile-button/styled.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { TileButtonProps } from './props';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n\n// Buttons\nexport const StyledWrapperLeftBorder = styled(Grid)`\n  height: 100%;\n  width: 4px;\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\n\nexport const StyledStatusBadge = styled.div<Partial<TileButtonProps>>`\n  height: 8px;\n  width: 8px;\n  position: absolute;\n  top: 0;\n  background: ${(props) => {\n    switch (props.badgeColor) {\n      case 'blue':\n        return props.theme.colors.brand[600];\n      case 'green':\n        return props.theme.colors.success[900];\n      default:\n        return props.theme.colors.brand[600];\n    }\n  }};\n  ${(props) => {\n    switch (props.badgePosition) {\n      case 'left':\n        return 'left: -4px;';\n      case 'right':\n        return 'right: -4px;';\n      default:\n        return 'left: -4px;';\n    }\n  }};\n  border-radius: 50%;\n  box-sizing: content-box;\n`;\n\nexport const StyledWrapperCentralContent = styled(Grid)`\n  width: 24px;\n  height: 40px;\n`;\n\nexport const StyledTileButtonIcon = styled(Grid)`\n  position: relative;\n  height: 24px;\n  width: 24px;\n  svg {\n    fill: ${(props) => props.theme.colors.neutral[500]};\n  }\n\n  &:focus {\n    svg {\n      fill: ${(props) => props.theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledTileButtonLabel = styled.div`\n  width: 24px;\n  height: ${(props) => props.theme.space.xs};\n  text-transform: uppercase;\n  overflow: hidden;\n  text-align: center;\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  line-height: 17px;\n`;\n\nexport const CloseButton = styled.button`\n  outline: none;\n  background: none;\n  height: 9px;\n  width: 9px;\n  position: absolute;\n  top: 1px;\n  right: 1px;\n  overflow: hidden;\n  padding: 0;\n  border: none;\n  span {\n    position: absolute;\n    left: -3px;\n    top: -4px;\n  }\n\n  &:focus,\n  &:hover {\n    svg {\n      fill: ${(props) => props.theme.colors.brand[600]};\n    }\n    &:after {\n      display: block;\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: solid 1px ${(props) => props.theme.colors.brand[600]};\n      border-radius: 2px;\n    }\n  }\n  cursor: pointer;\n`;\n\n// MAIN WRAPPER\nexport const StyledTooltipV3ButtonWrapper = styled.div`\n  height: ${BUTTON_SIDEBAR_HEIGHT}px;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n`;\nexport const StyledTileButton = styled.button<Partial<TileButtonProps>>`\n  outline: none;\n  background: transparent;\n  height: ${BUTTON_SIDEBAR_HEIGHT}px;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n  position: relative;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  border-bottom: ${(props) => (props.isHeader ? `1px solid  ${props.theme.colors.neutral['200']}` : 'none')};\n  &:focus,\n  &:hover,\n  &:active,\n  &:disabled {\n    background: ${(props) => props.theme.colors.neutral['080']};\n    & ${StyledStatusBadge} {\n      border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n      margin-top: -2px;\n      ${(props) => {\n        switch (props.badgePosition) {\n          case 'left':\n            return 'margin-left: -2px;';\n          case 'right':\n            return 'margin-right: -2px;';\n          default:\n            return 'margin-left: -2px;';\n        }\n      }};\n    }\n  }\n\n  &:focus,\n  &:hover {\n    & ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.brand[800]};\n    }\n    & ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[600]};\n    }\n\n    & svg {\n      fill: ${(props) => props.theme.colors.brand[800]};\n    }\n  }\n\n  &:active:not(:disabled) {\n    background: ${(props) => props.theme.colors.neutral['050']};\n    & ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.brand[600]};\n    }\n    & ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[600]};\n      font-weight: 600;\n    }\n    & svg {\n      fill: ${(props) => props.theme.colors.brand[600]};\n    }\n    & ${StyledStatusBadge} {\n      border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n    }\n  }\n\n  &:disabled {\n    background: ${(props) => props.theme.colors.neutral['080']};\n    ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.neutral['400']};\n    }\n    & ${StyledStatusBadge} {\n      background: ${(props) => props.theme.colors.neutral['500']};\n      border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n    }\n    ${StyledTileButtonIcon} {\n      svg {\n        fill: ${(props) => props.theme.colors.neutral[400]};\n      }\n    }\n    ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[400]};\n    }\n  }\n\n  ${(props) => {\n    if (props.selected) {\n      return css`\n        & ${StyledWrapperLeftBorder} {\n          background: ${(nestedProps) => nestedProps.theme.colors.brand[600]};\n        }\n      `;\n    }\n    return '';\n  }}\n`;\n\nexport const StyledWrapper = styled(Grid)`\n  height: 100%;\n  width: 100%;\n  position: relative;\n`;\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './exported-related';\nexport * from './react-desc-prop-types';\nexport * from './parts';\nexport * from './ChatDataTestids';\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

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

@@ -1,4 +1,5 @@
 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";
@@ -55,74 +56,101 @@ const ChatComposer = (props) => {
       };
     }
   }, [actionRef]);
-  const handleChange = React2.useCallback((e) => {
-    onChange(e.target.value);
-  }, [onChange]);
+  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__ */ React2.createElement(StyledChatContainerContentComposer, {
+  return /* @__PURE__ */ jsxs(StyledChatContainerContentComposer, {
     rows: ["auto", "15px"],
     maxHeight: `${maxHeight}px`,
-    "data-testid": dataTestid
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    cols: ["1fr", "24px"],
-    style: { height: heightProps.height },
-    justifyContent: "center",
-    alignItems: "flex-end",
-    gutter: "xxs"
-  }, /* @__PURE__ */ React2.createElement(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__ */ React2.createElement(Grid, {
-    height: "32px",
-    alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement(StyledComposerButton, {
-    buttonType: "text",
-    icon: /* @__PURE__ */ React2.createElement(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__ */ React2.createElement(StyledComposerInput, {
-    ref: inputSize,
-    style: {
-      height: 32,
-      visibility: "hidden",
-      pointerEvents: "none",
-      position: "absolute",
-      top: 0,
-      width: input.current?.clientWidth
-    },
-    onChange: handleChange,
-    value: inputValue
-  }), /* @__PURE__ */ React2.createElement(Grid, {
-    cols: ["1fr", "24px"],
-    justifyContent: "flex-end",
-    alignItems: "center",
-    gutter: "xxs",
-    pb: "xxs"
-  }, /* @__PURE__ */ React2.createElement(StyledCounterArea, {
-    hasError,
-    "data-testid": "composer-counter-area"
-  }, inputMaxLength && hasError ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledCounterErrorA11y, {
-    role: "alert"
-  }, 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__ */ React2.createElement(Grid, null)));
+    "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";

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

@@ -2,6 +2,6 @@
   "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": []
+  "mappings": "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",
+  "names": ["React"]
 }

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

@@ -2,6 +2,6 @@
   "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;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,8BAA8B;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "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;ACAA;AACA;AACA;AAIO,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;",
+  "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,4 +1,5 @@
 import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { noop } from "lodash";
 import {
@@ -34,93 +35,112 @@ const ChatContainer = (props) => {
   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 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);
+  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]);
+    },
+    [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__ */ React2.createElement(Container, {
+  return /* @__PURE__ */ jsxs(Container, {
     ...globalAttributes,
     rows: ["minmax(0, 1fr)", "auto"],
     ref: containerRef,
-    role: "region"
-  }, /* @__PURE__ */ React2.createElement("div", {
-    style: { position: "relative", overflow: "hidden" }
-  }, /* @__PURE__ */ React2.createElement(ChatContainerMessagesList, {
-    ...messagesListProps,
-    actionRef: actionRef || listRef,
-    isLoading,
-    hasMoreItems,
-    getMoreMessages,
-    sendingMessages,
-    sendingText,
-    bannerPosition,
-    bannerRef
-  }), isLoading && ["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
-  }));
+    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";

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

@@ -2,6 +2,6 @@
   "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": []
+  "mappings": "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",
+  "names": ["React"]
 }

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

@@ -2,6 +2,6 @@
   "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;ACAA;AACA;AACA;AACA;AACA;AACO,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;",
+  "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": []
 }