@elliemae/ds-chat 3.5.0-rc.7 → 3.5.1-next.0

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";
@@ -64,68 +65,92 @@ const ChatComposer = (props) => {
   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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",
+  "mappings": "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",
   "names": ["React"]
 }

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 {
@@ -74,59 +75,72 @@ const ChatContainer = (props) => {
       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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",
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { describe } from "@elliemae/ds-utilities";
 import DSButton from "@elliemae/ds-button";
@@ -42,52 +43,78 @@ const ChatContainerMessagesList = (props) => {
         transform: `translateY(${start}px)`,
         width: "100%"
       };
-      return /* @__PURE__ */ React2.createElement(ListItem, {
+      return /* @__PURE__ */ jsx(ListItem, {
         "data-element": "chat-element-list-item",
         "data-index": index,
-        key: `ds-chat-bubble-${index}-${row.dsId}-${row.type}`,
         style,
         ref: measureRef,
         tabIndex: -1,
         onKeyDown: handleKey,
-        role: "listitem"
-      }, /* @__PURE__ */ React2.createElement(StyledWrapperListItem, {
-        type: row.type
-      }, row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ React2.createElement(ChatBubble, {
-        ...row,
-        helpMessage: isSending ? sendingText : row.helpMessage
-      }) : null, row.type === BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ React2.createElement(MessageDelimiter, {
-        ...row
-      }) : null, row.type === BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ React2.createElement(SystemMessage, {
-        ...row
-      }) : null));
+        role: "listitem",
+        children: /* @__PURE__ */ jsxs(StyledWrapperListItem, {
+          type: row.type,
+          children: [
+            row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsx(ChatBubble, {
+              ...row,
+              helpMessage: isSending ? sendingText : row.helpMessage
+            }) : null,
+            row.type === BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ jsx(MessageDelimiter, {
+              ...row
+            }) : null,
+            row.type === BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ jsx(SystemMessage, {
+              ...row
+            }) : null
+          ]
+        })
+      }, `ds-chat-bubble-${index}-${row.dsId}-${row.type}`);
     }),
     [virtualItems, messages, sendingMessages, handleKey, sendingText]
   );
-  return /* @__PURE__ */ React2.createElement(StyledWrapper, {
-    ...globalAttributes
-  }, /* @__PURE__ */ React2.createElement(StyledChatContainerContentList, {
-    "data-testid": "chat-thread-container",
-    tabIndex: 0,
-    ref: virtualListRef,
-    role: "list",
-    onKeyDown: handleListKey
-  }, /* @__PURE__ */ React2.createElement(StyledChatContainerContentListScroll, {
-    height: `${totalSize}px`
-  }, !isLoading && hasMoreItems ? /* @__PURE__ */ React2.createElement(StyledLoadMoreContainer, {
-    hasMoreItems
-  }, /* @__PURE__ */ React2.createElement(DSButton, {
-    labelText: "Load More",
-    buttonType: "secondary",
-    onClick: getMoreMessages,
-    "data-testid": "ds-chat-load-more-btn",
-    innerRef: loadMoreRef
-  })) : null, render)), /* @__PURE__ */ React2.createElement(StyledNewMessagesHiddenContainer, {
-    "aria-live": "polite",
-    "aria-hidden": "false"
-  }, newMessages.map((newMessage) => /* @__PURE__ */ React2.createElement("p", {
-    key: newMessage.dsId
-  }, newMessage.title, " ", newMessage.time, " ", newMessage.body, " ", newMessage.errorMessage, " ", newMessage.helpMessage))));
+  return /* @__PURE__ */ jsxs(StyledWrapper, {
+    ...globalAttributes,
+    children: [
+      /* @__PURE__ */ jsx(StyledChatContainerContentList, {
+        "data-testid": "chat-thread-container",
+        tabIndex: 0,
+        ref: virtualListRef,
+        role: "list",
+        onKeyDown: handleListKey,
+        children: /* @__PURE__ */ jsxs(StyledChatContainerContentListScroll, {
+          height: `${totalSize}px`,
+          children: [
+            !isLoading && hasMoreItems ? /* @__PURE__ */ jsx(StyledLoadMoreContainer, {
+              hasMoreItems,
+              children: /* @__PURE__ */ jsx(DSButton, {
+                labelText: "Load More",
+                buttonType: "secondary",
+                onClick: getMoreMessages,
+                "data-testid": "ds-chat-load-more-btn",
+                innerRef: loadMoreRef
+              })
+            }) : null,
+            render
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx(StyledNewMessagesHiddenContainer, {
+        "aria-live": "polite",
+        "aria-hidden": "false",
+        children: newMessages.map((newMessage) => /* @__PURE__ */ jsxs("p", {
+          children: [
+            newMessage.title,
+            " ",
+            newMessage.time,
+            " ",
+            newMessage.body,
+            " ",
+            newMessage.errorMessage,
+            " ",
+            newMessage.helpMessage
+          ]
+        }, newMessage.dsId))
+      })
+    ]
+  });
 };
 ChatContainerMessagesList.propTypes = ChatContainerMessagesListPropTypes;
 ChatContainerMessagesList.displayName = "ChatContainerMessagesList";

package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React, { CSSProperties, WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport DSButton from '@elliemae/ds-button';\nimport { ChatBubble, BUBBLE_TYPES } from '../../exported-related/bubble';\nimport { MessageDelimiter } from '../../exported-related/message-delimiter';\nimport { SystemMessage } from '../../exported-related/system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled';\nimport { DSChatT, ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types';\nimport { useGetNewMessages } from './useGetNewMessages';\nimport { useChatContainerMessageList } from './useChatContainerMessageList';\n\nconst ChatContainerMessagesList: React.ComponentType<DSChatT.MessagesListProps> = (props) => {\n  const {\n    propsWithDefault,\n    globalAttributes,\n    useVirtualHelpers,\n    handleKey,\n    handleListKey,\n    loadMoreRef,\n    virtualListRef,\n  } = useChatContainerMessageList(props);\n\n  const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;\n  const { totalSize, virtualItems } = useVirtualHelpers;\n\n  const newMessages = useGetNewMessages(messages);\n\n  const render = React.useMemo(\n    () =>\n      virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const row = messages[index];\n        const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n        const style: CSSProperties = {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          transform: `translateY(${start}px)`,\n          width: '100%',\n        };\n\n        return (\n          <ListItem\n            data-element=\"chat-element-list-item\"\n            data-index={index}\n            key={`ds-chat-bubble-${index}-${row.dsId}-${row.type}`}\n            style={style}\n            ref={measureRef}\n            tabIndex={-1}\n            onKeyDown={handleKey}\n            role=\"listitem\"\n          >\n            <StyledWrapperListItem type={row.type}>\n              {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n                // eslint-disable-next-line eslint-comments/no-unlimited-disable\n                <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? <MessageDelimiter {...row} /> : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...row} /> : null}\n            </StyledWrapperListItem>\n          </ListItem>\n        );\n      }),\n    [virtualItems, messages, sendingMessages, handleKey, sendingText],\n  );\n\n  return (\n    <StyledWrapper {...globalAttributes}>\n      <StyledChatContainerContentList\n        data-testid=\"chat-thread-container\"\n        tabIndex={0}\n        ref={virtualListRef as React.RefObject<HTMLDivElement>}\n        role=\"list\"\n        onKeyDown={handleListKey}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems}>\n              <DSButton\n                labelText=\"Load More\"\n                buttonType=\"secondary\"\n                onClick={getMoreMessages}\n                data-testid=\"ds-chat-load-more-btn\"\n                innerRef={loadMoreRef}\n              />\n            </StyledLoadMoreContainer>\n          ) : null}\n          {render}\n        </StyledChatContainerContentListScroll>\n      </StyledChatContainerContentList>\n      {/* We repeat the render with the new available messages */}\n      <StyledNewMessagesHiddenContainer aria-live=\"polite\" aria-hidden=\"false\">\n        {newMessages.map((newMessage) => (\n          <p key={newMessage.dsId}>\n            {newMessage.title} {newMessage.time} {newMessage.body} {newMessage.errorMessage} {newMessage.helpMessage}\n          </p>\n        ))}\n      </StyledNewMessagesHiddenContainer>\n    </StyledWrapper>\n  );\n};\n\nChatContainerMessagesList.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\nChatContainerMessagesList.displayName = 'ChatContainerMessagesList';\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": ["React"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat",
-  "version": "3.5.0-rc.7",
+  "version": "3.5.1-next.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat",
   "files": [
@@ -307,15 +307,15 @@
     "typeSafety": false
   },
   "dependencies": {
-    "@elliemae/ds-banner": "3.5.0-rc.7",
-    "@elliemae/ds-button": "3.5.0-rc.7",
-    "@elliemae/ds-grid": "3.5.0-rc.7",
-    "@elliemae/ds-icons": "3.5.0-rc.7",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.5.0-rc.7",
-    "@elliemae/ds-system": "3.5.0-rc.7",
-    "@elliemae/ds-tooltip": "3.5.0-rc.7",
-    "@elliemae/ds-truncated-tooltip-text": "3.5.0-rc.7",
-    "@elliemae/ds-utilities": "3.5.0-rc.7",
+    "@elliemae/ds-banner": "3.5.1-next.0",
+    "@elliemae/ds-button": "3.5.1-next.0",
+    "@elliemae/ds-grid": "3.5.1-next.0",
+    "@elliemae/ds-icons": "3.5.1-next.0",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.5.1-next.0",
+    "@elliemae/ds-system": "3.5.1-next.0",
+    "@elliemae/ds-tooltip": "3.5.1-next.0",
+    "@elliemae/ds-truncated-tooltip-text": "3.5.1-next.0",
+    "@elliemae/ds-utilities": "3.5.1-next.0",
     "react-virtual": "~2.10.4"
   },
   "devDependencies": {