@elliemae/ds-chat-container 3.25.0-next.1 → 3.25.0-next.2

package/dist/cjs/ChatContainer.js

@@ -91,7 +91,7 @@ const ChatContainer = (props) => {
       actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
     }
   }, [actionRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { ...globalAttributes, rows: ["minmax(0, 1fr)", "auto"], ref: containerRef, role: "region", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { ...globalAttributes, rows: ["minmax(0, 1fr)", "auto"], innerRef: containerRef, role: "region", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", overflow: "hidden" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_chat_container_messages_list.ChatContainerMessagesList,

package/dist/cjs/ChatContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ChatContainer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { noop, omit } from 'lodash';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from './parts/chat-composer/index.js';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list/index.js';\nimport type { DSChatT } from './react-desc-prop-types.js';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types.js';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids.js';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled.js';\nimport { DSChatContainerName } from './DSChatContainerDefinitions.js';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n  useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes, DSChatContainerName);\n  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), 'cols', 'wrap');\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<HTMLDivElement | null>(null);\n  const listRef = React.useRef({ scrollToIndex: noop });\n\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n  const handleTabs = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (onComposerKeyDown) onComposerKeyDown(e);\n      else if (e.shiftKey && e.key === 'Tab' && messagesListProps.messages?.length > 0) {\n        e.preventDefault();\n        if (bannerPosition && ['top', 'bottom'].includes(bannerPosition)) {\n          bannerRef.current.focusOnWrapper();\n        }\n        if (actionRef?.current && actionRef.current.getMessagesInView) {\n          const last = actionRef.current.getMessagesInView().pop();\n          if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);\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={ChatContainerDataTestIds.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={ChatContainerDataTestIds.LOADING_INDICATOR}>\n            <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer\n        {...composerProps}\n        onKeyDown={handleTabs}\n        onResize={onComposerResize}\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { noop, omit } from 'lodash';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from './parts/chat-composer/index.js';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list/index.js';\nimport type { DSChatT } from './react-desc-prop-types.js';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types.js';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids.js';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled.js';\nimport { DSChatContainerName } from './DSChatContainerDefinitions.js';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n  useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes, DSChatContainerName);\n  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), 'cols', 'wrap');\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<HTMLDivElement | null>(null);\n  const listRef = React.useRef({ scrollToIndex: noop });\n\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n  const handleTabs = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (onComposerKeyDown) onComposerKeyDown(e);\n      else if (e.shiftKey && e.key === 'Tab' && messagesListProps.messages?.length > 0) {\n        e.preventDefault();\n        if (bannerPosition && ['top', 'bottom'].includes(bannerPosition)) {\n          bannerRef.current.focusOnWrapper();\n        }\n        if (actionRef?.current && actionRef.current.getMessagesInView) {\n          const last = actionRef.current.getMessagesInView().pop();\n          if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);\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']} innerRef={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={ChatContainerDataTestIds.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={ChatContainerDataTestIds.LOADING_INDICATOR}>\n            <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer\n        {...composerProps}\n        onKeyDown={handleTabs}\n        onResize={onComposerResize}\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuEjB;AApEN,mBAAkB;AAClB,oBAA2B;AAC3B,8BAKO;AACP,iDAA6C;AAC7C,uBAAuC;AACvC,2BAA6B;AAC7B,0CAA0C;AAE1C,mCAAqD;AACrD,sCAAyC;AACzC,oBAAuG;AACvG,wCAAoC;AAEpC,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,sDAAqD,OAAO,yCAAY;AACjG,8DAAuD,kBAAkB,qDAAwB,qDAAmB;AACpH,QAAM,uBAAmB,wBAAK,gDAAuB,gBAAgB,GAAG,QAAQ,MAAM;AAEtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,EAAE,UAAU,kBAAkB,WAAW,kBAAkB;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,YAAY,aAAAA,QAAM,OAAO,EAAE,gBAAgB,oBAAM,aAAa,mBAAK,CAAC;AAC1E,QAAM,eAAe,aAAAA,QAAM,OAA8B,IAAI;AAC7D,QAAM,UAAU,aAAAA,QAAM,OAAO,EAAE,eAAe,mBAAK,CAAC;AAEpD,QAAM,YAAY,WAAW,YAAY,2CAA6B;AACtE,QAAM,aAAa,aAAAA,QAAM;AAAA,IACvB,CAAC,MAA2B;AAC1B,UAAI;AAAmB,0BAAkB,CAAC;AAAA,eACjC,EAAE,YAAY,EAAE,QAAQ,SAAS,kBAAkB,UAAU,SAAS,GAAG;AAChF,UAAE,eAAe;AACjB,YAAI,kBAAkB,CAAC,OAAO,QAAQ,EAAE,SAAS,cAAc,GAAG;AAChE,oBAAU,QAAQ,eAAe;AAAA,QACnC;AACA,YAAI,WAAW,WAAW,UAAU,QAAQ,mBAAmB;AAC7D,gBAAM,OAAO,UAAU,QAAQ,kBAAkB,EAAE,IAAI;AACvD,cAAI,QAAQ,UAAU,QAAQ;AAA2B,sBAAU,SAAS,0BAA0B,IAAI;AAAA,QAC5G;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,mBAAmB,gBAAgB,kBAAkB,UAAU,MAAM;AAAA,EACnF;AAGA,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,gBAAgB,UAAU,QAAQ;AACpD,gBAAU,QAAQ,oBAAoB,UAAU,QAAQ;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AACd,SACE,6CAAC,aAAW,GAAG,kBAAkB,MAAM,CAAC,kBAAkB,MAAM,GAAG,UAAU,cAAc,MAAK,UAC9F;AAAA,iDAAC,SAAI,OAAO,EAAE,UAAU,YAAY,UAAU,SAAS,GACrD;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,aAAa;AAAA,UACxB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC,aAAa,CAAC,OAAO,QAAQ,EAAE,SAAS,SAAS,IAChD,4CAAC,0CAAyB,WAAsB,eAAa,yDAAyB,mBACpF,sDAAC,2CAAAC,SAAA,EAAiC,YAAU,MAAC,OAAM,WAAU,GAC/D,IACE;AAAA,MACJ,4CAAC,0CAAyB,QAAM,MAAC,WAAW,gBAC1C;AAAA,QAAC,iBAAAC;AAAA,QAAA;AAAA,UACC,iBAAe;AAAA,UACf,OAAO,aAAa,SAAS;AAAA,UAC7B,gBAAgB,EAAE,IAAI,iBAAiB;AAAA,UACvC,YAAY;AAAA,YACV,OAAO,aAAa,aAAa;AAAA,YACjC,SAAS,aAAa;AAAA,UACxB;AAAA,UACA,SAAS,aAAa;AAAA,UACtB,QAAM;AAAA,UACN,MAAM,aAAa,QAAQ,8BAAa;AAAA,UACxC,WAAW;AAAA;AAAA,MACb,GACF;AAAA,MACC,mBAAmB,gBAAgB,SAAS,IAC3C,4CAAC,0CAAyB,WAAU,UAAS,QAAM,MAAC,eAAa,yDAAyB,mBACxF,sDAAC,2CAAAD,SAAA,EAAiC,YAAU,MAAC,OAAO,aAAa,UAAQ,MAAC,GAC5E,IACE;AAAA,OACN;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY,aAAa,SAAS,gBAAgB,KAAK;AAAA,QACvD,WAAW,aAAa;AAAA;AAAA,IAC1B;AAAA,KACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": ["React", "DSIndeterminateProgressIndicator", "DSBanner"]
 }

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

@@ -128,7 +128,7 @@ const ChatComposer = (props) => {
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_styled.StyledComposerInput,
                 {
-                  ref: input,
+                  innerRef: input,
                   onChange: handleChange,
                   style: { ...heightProps },
                   height: heightProps.height,
@@ -163,7 +163,7 @@ const ChatComposer = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_styled.StyledComposerInput,
           {
-            ref: inputSize,
+            innerRef: inputSize,
             "aria-label": "ghost",
             style: {
               visibility: "hidden",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/chat-composer/ChatContainerComposer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-props-helpers';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\nimport { DSChatContainerComposerName } from '../../DSChatContainerDefinitions.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types.js';\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>(\n    propsWithDefault,\n    ChatComposerPropTypes,\n    DSChatContainerComposerName,\n  );\n  const {\n    inputValue,\n    onChange,\n    onResize,\n    onSend,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    maxLengthMessage,\n    ariaMaxLengthMessage,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = propsWithDefault;\n\n  const COMPOSER_MIN_HEIGHT = 32;\n  const input = React.useRef<HTMLTextAreaElement | null>(null);\n  const inputSize = React.useRef<HTMLTextAreaElement | null>(null);\n  const inputSend = React.useRef<HTMLButtonElement>(null);\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    if (inputSize?.current?.scrollHeight) {\n      const newHeight =\n        inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n      if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);\n      setHeight(newHeight);\n      setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);\n    }\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.ChangeEventHandler<HTMLTextAreaElement> = 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(() => {\n    if (!inputMaxLength) return false;\n    return inputLength > inputMaxLength;\n  }, [inputLength, inputMaxLength]);\n\n  const isSendButtonDisabled = useMemo(\n    () => !inputValue || buttonDisabled || hasError,\n    [inputValue, buttonDisabled, hasError],\n  );\n  return (\n    <StyledChatContainerContentComposer\n      rows={['auto', '15px']}\n      maxHeight={`${maxHeight}px`}\n      data-testid={dataTestid ?? ChatContainerDataTestIds.COMPOSER}\n    >\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          height={heightProps.height}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid={ChatContainerDataTestIds.COMPOSER_TEXTAREA}\n          name=\"chat-composer-textarea\"\n          id=\"chat-composer-textarea\"\n        />\n\n        <Grid height=\"32px\" alignItems=\"center\">\n          <StyledComposerButton\n            buttonType=\"icon\"\n            onClick={onSend}\n            size=\"s\"\n            disabled={isSendButtonDisabled}\n            aria-disabled={isSendButtonDisabled}\n            data-testid={ChatContainerDataTestIds.COMPOSER_SEND_BUTTON}\n            aria-label=\"Send\"\n            innerRef={inputSend}\n          >\n            <PaperAirplane width={18} height={18} />\n          </StyledComposerButton>\n        </Grid>\n      </Grid>\n      <StyledComposerInput\n        ref={inputSize}\n        aria-label=\"ghost\"\n        style={{\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: 0,\n          width: input.current?.clientWidth,\n        }}\n        height={32}\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={ChatContainerDataTestIds.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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-props-helpers';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\nimport { DSChatContainerComposerName } from '../../DSChatContainerDefinitions.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types.js';\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>(\n    propsWithDefault,\n    ChatComposerPropTypes,\n    DSChatContainerComposerName,\n  );\n  const {\n    inputValue,\n    onChange,\n    onResize,\n    onSend,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    maxLengthMessage,\n    ariaMaxLengthMessage,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = propsWithDefault;\n\n  const COMPOSER_MIN_HEIGHT = 32;\n  const input = React.useRef<HTMLTextAreaElement | null>(null);\n  const inputSize = React.useRef<HTMLTextAreaElement | null>(null);\n  const inputSend = React.useRef<HTMLButtonElement>(null);\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    if (inputSize?.current?.scrollHeight) {\n      const newHeight =\n        inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n      if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);\n      setHeight(newHeight);\n      setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);\n    }\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.ChangeEventHandler<HTMLTextAreaElement> = 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(() => {\n    if (!inputMaxLength) return false;\n    return inputLength > inputMaxLength;\n  }, [inputLength, inputMaxLength]);\n\n  const isSendButtonDisabled = useMemo(\n    () => !inputValue || buttonDisabled || hasError,\n    [inputValue, buttonDisabled, hasError],\n  );\n  return (\n    <StyledChatContainerContentComposer\n      rows={['auto', '15px']}\n      maxHeight={`${maxHeight}px`}\n      data-testid={dataTestid ?? ChatContainerDataTestIds.COMPOSER}\n    >\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          innerRef={input}\n          onChange={handleChange}\n          style={{ ...heightProps }}\n          height={heightProps.height}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid={ChatContainerDataTestIds.COMPOSER_TEXTAREA}\n          name=\"chat-composer-textarea\"\n          id=\"chat-composer-textarea\"\n        />\n\n        <Grid height=\"32px\" alignItems=\"center\">\n          <StyledComposerButton\n            buttonType=\"icon\"\n            onClick={onSend}\n            size=\"s\"\n            disabled={isSendButtonDisabled}\n            aria-disabled={isSendButtonDisabled}\n            data-testid={ChatContainerDataTestIds.COMPOSER_SEND_BUTTON}\n            aria-label=\"Send\"\n            innerRef={inputSend}\n          >\n            <PaperAirplane width={18} height={18} />\n          </StyledComposerButton>\n        </Grid>\n      </Grid>\n      <StyledComposerInput\n        innerRef={inputSize}\n        aria-label=\"ghost\"\n        style={{\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: 0,\n          width: input.current?.clientWidth,\n        }}\n        height={32}\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={ChatContainerDataTestIds.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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgGjB;AA9FN,mBAA+B;AAC/B,qBAAqB;AACrB,sBAA8B;AAC9B,8BAAuF;AACvF,oBAMO;AACP,sCAAyC;AACzC,wCAA4C;AAE5C,mCAA4D;AAE5D,MAAM,eAA2D,CAAC,UAAU;AAC1E,QAAM,uBAAmB,sDAAoD,OAAO,iDAAoB;AACxG;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAsB;AAC5B,QAAM,QAAQ,aAAAA,QAAM,OAAmC,IAAI;AAC3D,QAAM,YAAY,aAAAA,QAAM,OAAmC,IAAI;AAC/D,QAAM,YAAY,aAAAA,QAAM,OAA0B,IAAI;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAAA,QAAM,SAAS,EAAE;AAC7C,QAAM,oBAAoB,aAAAA,QAAM,QAAQ,MAAM,YAAY,IAAI,CAAC,SAAS,CAAC;AACzE,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAS,IAAI;AAEvD,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,WAAW,SAAS,cAAc;AACpC,YAAM,YACJ,UAAU,QAAQ,eAAe,oBAAoB,oBAAoB,UAAU,SAAS;AAC9F,UAAI,cAAc,UAAU,YAAY,uBAAuB;AAAU,iBAAS,SAAS;AAC3F,gBAAU,SAAS;AACnB,oBAAc,UAAU,QAAQ,eAAe,UAAU,QAAQ,eAAe,CAAC;AAAA,IACnF;AAAA,EACF,GAAG,CAAC,YAAY,mBAAmB,QAAQ,QAAQ,CAAC;AAEpD,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,kBAAkB,MAAM;AACxC,eAAO,SAAS,QAAQ;AAAA,MAC1B;AACA,gBAAU,QAAQ,cAAc,MAAM;AACpC,mBAAW,SAAS,QAAQ;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,eAA8D,aAAAA,QAAM;AAAA,IACxE,CAAC,MAAM;AACL,eAAS,EAAE,OAAO,KAAK;AAAA,IACzB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AACA,QAAM,cAAc,EAAE,QAAQ,UAAU,aAAa,SAAS,SAAS;AAEvE,QAAM,cAAc,OAAO,cAAc,EAAE,EAAE;AAC7C,QAAM,WAAW,aAAAA,QAAM,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAgB,aAAO;AAC5B,WAAO,cAAc;AAAA,EACvB,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,2BAAuB;AAAA,IAC3B,MAAM,CAAC,cAAc,kBAAkB;AAAA,IACvC,CAAC,YAAY,gBAAgB,QAAQ;AAAA,EACvC;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,WAAW,GAAG;AAAA,MACd,eAAa,cAAc,yDAAyB;AAAA,MAEpD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,OAAO,MAAM;AAAA,YACpB,OAAO,EAAE,QAAQ,YAAY,OAAO;AAAA,YACpC,gBAAe;AAAA,YACf,YAAW;AAAA,YACX,QAAO;AAAA,YAEP;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,UAAU;AAAA,kBACV,OAAO,EAAE,GAAG,YAAY;AAAA,kBACxB,QAAQ,YAAY;AAAA,kBACpB,OAAO;AAAA,kBACP;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,cAAW;AAAA,kBACX,eAAa,yDAAyB;AAAA,kBACtC,MAAK;AAAA,kBACL,IAAG;AAAA;AAAA,cACL;AAAA,cAEA,4CAAC,uBAAK,QAAO,QAAO,YAAW,UAC7B;AAAA,gBAAC;AAAA;AAAA,kBACC,YAAW;AAAA,kBACX,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,iBAAe;AAAA,kBACf,eAAa,yDAAyB;AAAA,kBACtC,cAAW;AAAA,kBACX,UAAU;AAAA,kBAEV,sDAAC,iCAAc,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cACxC,GACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,cAAW;AAAA,YACX,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK;AAAA,cACL,OAAO,MAAM,SAAS;AAAA,YACxB;AAAA,YACA,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,OAAO;AAAA;AAAA,QACT;AAAA,QACA,6CAAC,uBAAK,MAAM,CAAC,OAAO,MAAM,GAAG,gBAAe,YAAW,YAAW,UAAS,QAAO,OAAM,IAAG,OACzF;AAAA,uDAAC,mCAAkB,UAAoB,eAAa,yDAAyB,uBAC1E;AAAA,8BAAkB,WACjB,4EACE;AAAA,0DAAC,wCAAuB,MAAK,SAC1B,kCACC,oBAAoB,yDAClB,cAAc,6CACe,+BACnC;AAAA,cACC,oBAAoB,6BAA6B;AAAA,eACpD,IAEA;AAAA,YAED,iBAAiB,IAAI,iBAAiB,mBAAmB;AAAA,aAC5D;AAAA,UACA,4CAAC,uBAAK;AAAA,WACR;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": ["React"]
 }

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

@@ -76,7 +76,7 @@ const ChatContainerMessagesList = (props) => {
           "data-element": "chat-element-list-item",
           "data-index": index,
           style,
-          ref: measureRef,
+          innerRef: measureRef,
           tabIndex: -1,
           onKeyDown: handleKey,
           role: "listitem",
@@ -97,7 +97,7 @@ const ChatContainerMessagesList = (props) => {
       {
         "data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.THREAD_CONTAINER,
         tabIndex: 0,
-        ref: virtualListRef,
+        innerRef: virtualListRef,
         role: "list",
         onKeyDown: handleListKey,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledChatContainerContentListScroll, { height: `${totalSize}px`, children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\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                <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? (\n                <MessageDelimiter {...(row as unknown as DSChatMessageDelimeterT.Props)} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as DSChatSystemMessageT.Props)} /> : 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={ChatContainerDataTestIds.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              <DSButtonV2\n                buttonType=\"outline\"\n                onClick={getMoreMessages}\n                data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n                innerRef={loadMoreRef}\n              >\n                Load More\n              </DSButtonV2>\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEX;AAhEZ,mBAAkB;AAClB,8BAAyB;AACzB,0BAA2B;AAC3B,4BAAyC;AAEzC,uCAAiC;AAEjC,oCAA8B;AAC9B,oBAQO;AAEP,mCAAmD;AACnD,+BAAkC;AAClC,yCAA4C;AAC5C,sCAAyC;AAEzC,MAAM,4BAA4E,CAAC,UAAU;AAC3F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gEAA4B,KAAK;AAErC,QAAM,EAAE,aAAa,iBAAiB,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAC7F,QAAM,EAAE,WAAW,aAAa,IAAI;AAEpC,QAAM,kBAAc,4CAAkB,QAAQ;AAE9C,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,MAAM,SAAS,KAAK;AAC1B,YAAM,YAAY,mBAAmB,gBAAgB,KAAK,CAAC,MAAM,MAAM,IAAI,IAAI;AAC/E,YAAM,QAAuB;AAAA,QAC3B,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW,cAAc;AAAA,QACzB,OAAO;AAAA,MACT;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,cAAY;AAAA,UAEZ;AAAA,UACA,KAAK;AAAA,UACL,UAAU;AAAA,UACV,WAAW;AAAA,UACX,MAAK;AAAA,UAEL,uDAAC,uCAAsB,MAAM,IAAI,MAC9B;AAAA,gBAAI,SAAS,mCAAa,UAAU,IAAI,SAAS,mCAAa,YAC7D,4CAAC,oCAAY,GAAG,KAAK,aAAa,YAAY,cAAc,IAAI,aAAa,IAC3E;AAAA,YACH,IAAI,SAAS,mCAAa,YACzB,4CAAC,qDAAkB,GAAI,KAAkD,IACvE;AAAA,YACH,IAAI,SAAS,mCAAa,SAAS,4CAAC,+CAAe,GAAI,KAAoC,IAAK;AAAA,aACnG;AAAA;AAAA,QAfK,kBAAkB,SAAS,IAAI,QAAQ,IAAI;AAAA,MAgBlD;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,cAAc,UAAU,iBAAiB,WAAW,WAAW;AAAA,EAClE;AAEA,SACE,6CAAC,+BAAe,GAAG,kBACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,yDAAyB;AAAA,QACtC,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAW;AAAA,QAEX,uDAAC,sDAAqC,QAAQ,GAAG,eAC9C;AAAA,WAAC,aAAa,eACb,4CAAC,yCAAwB,cACvB;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,SAAS;AAAA,cACT,eAAa,yDAAyB;AAAA,cACtC,UAAU;AAAA,cACX;AAAA;AAAA,UAED,GACF,IACE;AAAA,UACH;AAAA,WACH;AAAA;AAAA,IACF;AAAA,IAEA,4CAAC,kDAAiC,aAAU,UAAS,eAAY,SAC9D,sBAAY,IAAI,CAAC,eAChB,6CAAC,OACE;AAAA,iBAAW;AAAA,MAAM;AAAA,MAAE,WAAW;AAAA,MAAK;AAAA,MAAE,WAAW;AAAA,MAAK;AAAA,MAAE,WAAW;AAAA,MAAa;AAAA,MAAE,WAAW;AAAA,SADvF,WAAW,IAEnB,CACD,GACH;AAAA,KACF;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,kCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\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            innerRef={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                <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? (\n                <MessageDelimiter {...(row as unknown as DSChatMessageDelimeterT.Props)} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as DSChatSystemMessageT.Props)} /> : 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={ChatContainerDataTestIds.THREAD_CONTAINER}\n        tabIndex={0}\n        innerRef={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              <DSButtonV2\n                buttonType=\"outline\"\n                onClick={getMoreMessages}\n                data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n                innerRef={loadMoreRef}\n              >\n                Load More\n              </DSButtonV2>\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEX;AAhEZ,mBAAkB;AAClB,8BAAyB;AACzB,0BAA2B;AAC3B,4BAAyC;AAEzC,uCAAiC;AAEjC,oCAA8B;AAC9B,oBAQO;AAEP,mCAAmD;AACnD,+BAAkC;AAClC,yCAA4C;AAC5C,sCAAyC;AAEzC,MAAM,4BAA4E,CAAC,UAAU;AAC3F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gEAA4B,KAAK;AAErC,QAAM,EAAE,aAAa,iBAAiB,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAC7F,QAAM,EAAE,WAAW,aAAa,IAAI;AAEpC,QAAM,kBAAc,4CAAkB,QAAQ;AAE9C,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,MAAM,SAAS,KAAK;AAC1B,YAAM,YAAY,mBAAmB,gBAAgB,KAAK,CAAC,MAAM,MAAM,IAAI,IAAI;AAC/E,YAAM,QAAuB;AAAA,QAC3B,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW,cAAc;AAAA,QACzB,OAAO;AAAA,MACT;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,cAAY;AAAA,UAEZ;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV,WAAW;AAAA,UACX,MAAK;AAAA,UAEL,uDAAC,uCAAsB,MAAM,IAAI,MAC9B;AAAA,gBAAI,SAAS,mCAAa,UAAU,IAAI,SAAS,mCAAa,YAC7D,4CAAC,oCAAY,GAAG,KAAK,aAAa,YAAY,cAAc,IAAI,aAAa,IAC3E;AAAA,YACH,IAAI,SAAS,mCAAa,YACzB,4CAAC,qDAAkB,GAAI,KAAkD,IACvE;AAAA,YACH,IAAI,SAAS,mCAAa,SAAS,4CAAC,+CAAe,GAAI,KAAoC,IAAK;AAAA,aACnG;AAAA;AAAA,QAfK,kBAAkB,SAAS,IAAI,QAAQ,IAAI;AAAA,MAgBlD;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,cAAc,UAAU,iBAAiB,WAAW,WAAW;AAAA,EAClE;AAEA,SACE,6CAAC,+BAAe,GAAG,kBACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,yDAAyB;AAAA,QACtC,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAK;AAAA,QACL,WAAW;AAAA,QAEX,uDAAC,sDAAqC,QAAQ,GAAG,eAC9C;AAAA,WAAC,aAAa,eACb,4CAAC,yCAAwB,cACvB;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,SAAS;AAAA,cACT,eAAa,yDAAyB;AAAA,cACtC,UAAU;AAAA,cACX;AAAA;AAAA,UAED,GACF,IACE;AAAA,UACH;AAAA,WACH;AAAA;AAAA,IACF;AAAA,IAEA,4CAAC,kDAAiC,aAAU,UAAS,eAAY,SAC9D,sBAAY,IAAI,CAAC,eAChB,6CAAC,OACE;AAAA,iBAAW;AAAA,MAAM;AAAA,MAAE,WAAW;AAAA,MAAK;AAAA,MAAE,WAAW;AAAA,MAAK;AAAA,MAAE,WAAW;AAAA,MAAa;AAAA,MAAE,WAAW;AAAA,SADvF,WAAW,IAEnB,CACD,GACH;AAAA,KACF;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,kCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
   "names": ["React"]
 }

package/dist/esm/ChatContainer.js

@@ -62,7 +62,7 @@ const ChatContainer = (props) => {
       actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
     }
   }, [actionRef]);
-  return /* @__PURE__ */ jsxs(Container, { ...globalAttributes, rows: ["minmax(0, 1fr)", "auto"], ref: containerRef, role: "region", children: [
+  return /* @__PURE__ */ jsxs(Container, { ...globalAttributes, rows: ["minmax(0, 1fr)", "auto"], innerRef: containerRef, role: "region", children: [
     /* @__PURE__ */ jsxs("div", { style: { position: "relative", overflow: "hidden" }, children: [
       /* @__PURE__ */ jsx(
         ChatContainerMessagesList,

package/dist/esm/ChatContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ChatContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { noop, omit } from 'lodash';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from './parts/chat-composer/index.js';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list/index.js';\nimport type { DSChatT } from './react-desc-prop-types.js';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types.js';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids.js';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled.js';\nimport { DSChatContainerName } from './DSChatContainerDefinitions.js';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n  useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes, DSChatContainerName);\n  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), 'cols', 'wrap');\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<HTMLDivElement | null>(null);\n  const listRef = React.useRef({ scrollToIndex: noop });\n\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n  const handleTabs = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (onComposerKeyDown) onComposerKeyDown(e);\n      else if (e.shiftKey && e.key === 'Tab' && messagesListProps.messages?.length > 0) {\n        e.preventDefault();\n        if (bannerPosition && ['top', 'bottom'].includes(bannerPosition)) {\n          bannerRef.current.focusOnWrapper();\n        }\n        if (actionRef?.current && actionRef.current.getMessagesInView) {\n          const last = actionRef.current.getMessagesInView().pop();\n          if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);\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={ChatContainerDataTestIds.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={ChatContainerDataTestIds.LOADING_INDICATOR}>\n            <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer\n        {...composerProps}\n        onKeyDown={handleTabs}\n        onResize={onComposerResize}\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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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { noop, omit } from 'lodash';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from './parts/chat-composer/index.js';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list/index.js';\nimport type { DSChatT } from './react-desc-prop-types.js';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types.js';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids.js';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled.js';\nimport { DSChatContainerName } from './DSChatContainerDefinitions.js';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n  useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes, DSChatContainerName);\n  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), 'cols', 'wrap');\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<HTMLDivElement | null>(null);\n  const listRef = React.useRef({ scrollToIndex: noop });\n\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n  const handleTabs = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (onComposerKeyDown) onComposerKeyDown(e);\n      else if (e.shiftKey && e.key === 'Tab' && messagesListProps.messages?.length > 0) {\n        e.preventDefault();\n        if (bannerPosition && ['top', 'bottom'].includes(bannerPosition)) {\n          bannerRef.current.focusOnWrapper();\n        }\n        if (actionRef?.current && actionRef.current.getMessagesInView) {\n          const last = actionRef.current.getMessagesInView().pop();\n          if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);\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']} innerRef={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={ChatContainerDataTestIds.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={ChatContainerDataTestIds.LOADING_INDICATOR}>\n            <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer\n        {...composerProps}\n        onKeyDown={handleTabs}\n        onResize={onComposerResize}\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-composer/ChatContainerComposer.js

@@ -100,7 +100,7 @@ const ChatComposer = (props) => {
               /* @__PURE__ */ jsx(
                 StyledComposerInput,
                 {
-                  ref: input,
+                  innerRef: input,
                   onChange: handleChange,
                   style: { ...heightProps },
                   height: heightProps.height,
@@ -135,7 +135,7 @@ const ChatComposer = (props) => {
         /* @__PURE__ */ jsx(
           StyledComposerInput,
           {
-            ref: inputSize,
+            innerRef: inputSize,
             "aria-label": "ghost",
             style: {
               visibility: "hidden",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/ChatContainerComposer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-props-helpers';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\nimport { DSChatContainerComposerName } from '../../DSChatContainerDefinitions.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types.js';\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>(\n    propsWithDefault,\n    ChatComposerPropTypes,\n    DSChatContainerComposerName,\n  );\n  const {\n    inputValue,\n    onChange,\n    onResize,\n    onSend,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    maxLengthMessage,\n    ariaMaxLengthMessage,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = propsWithDefault;\n\n  const COMPOSER_MIN_HEIGHT = 32;\n  const input = React.useRef<HTMLTextAreaElement | null>(null);\n  const inputSize = React.useRef<HTMLTextAreaElement | null>(null);\n  const inputSend = React.useRef<HTMLButtonElement>(null);\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    if (inputSize?.current?.scrollHeight) {\n      const newHeight =\n        inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n      if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);\n      setHeight(newHeight);\n      setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);\n    }\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.ChangeEventHandler<HTMLTextAreaElement> = 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(() => {\n    if (!inputMaxLength) return false;\n    return inputLength > inputMaxLength;\n  }, [inputLength, inputMaxLength]);\n\n  const isSendButtonDisabled = useMemo(\n    () => !inputValue || buttonDisabled || hasError,\n    [inputValue, buttonDisabled, hasError],\n  );\n  return (\n    <StyledChatContainerContentComposer\n      rows={['auto', '15px']}\n      maxHeight={`${maxHeight}px`}\n      data-testid={dataTestid ?? ChatContainerDataTestIds.COMPOSER}\n    >\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          height={heightProps.height}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid={ChatContainerDataTestIds.COMPOSER_TEXTAREA}\n          name=\"chat-composer-textarea\"\n          id=\"chat-composer-textarea\"\n        />\n\n        <Grid height=\"32px\" alignItems=\"center\">\n          <StyledComposerButton\n            buttonType=\"icon\"\n            onClick={onSend}\n            size=\"s\"\n            disabled={isSendButtonDisabled}\n            aria-disabled={isSendButtonDisabled}\n            data-testid={ChatContainerDataTestIds.COMPOSER_SEND_BUTTON}\n            aria-label=\"Send\"\n            innerRef={inputSend}\n          >\n            <PaperAirplane width={18} height={18} />\n          </StyledComposerButton>\n        </Grid>\n      </Grid>\n      <StyledComposerInput\n        ref={inputSize}\n        aria-label=\"ghost\"\n        style={{\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: 0,\n          width: input.current?.clientWidth,\n        }}\n        height={32}\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={ChatContainerDataTestIds.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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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-props-helpers';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\nimport { DSChatContainerComposerName } from '../../DSChatContainerDefinitions.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types.js';\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>(\n    propsWithDefault,\n    ChatComposerPropTypes,\n    DSChatContainerComposerName,\n  );\n  const {\n    inputValue,\n    onChange,\n    onResize,\n    onSend,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    maxLengthMessage,\n    ariaMaxLengthMessage,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = propsWithDefault;\n\n  const COMPOSER_MIN_HEIGHT = 32;\n  const input = React.useRef<HTMLTextAreaElement | null>(null);\n  const inputSize = React.useRef<HTMLTextAreaElement | null>(null);\n  const inputSend = React.useRef<HTMLButtonElement>(null);\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    if (inputSize?.current?.scrollHeight) {\n      const newHeight =\n        inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n      if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);\n      setHeight(newHeight);\n      setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);\n    }\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.ChangeEventHandler<HTMLTextAreaElement> = 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(() => {\n    if (!inputMaxLength) return false;\n    return inputLength > inputMaxLength;\n  }, [inputLength, inputMaxLength]);\n\n  const isSendButtonDisabled = useMemo(\n    () => !inputValue || buttonDisabled || hasError,\n    [inputValue, buttonDisabled, hasError],\n  );\n  return (\n    <StyledChatContainerContentComposer\n      rows={['auto', '15px']}\n      maxHeight={`${maxHeight}px`}\n      data-testid={dataTestid ?? ChatContainerDataTestIds.COMPOSER}\n    >\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          innerRef={input}\n          onChange={handleChange}\n          style={{ ...heightProps }}\n          height={heightProps.height}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid={ChatContainerDataTestIds.COMPOSER_TEXTAREA}\n          name=\"chat-composer-textarea\"\n          id=\"chat-composer-textarea\"\n        />\n\n        <Grid height=\"32px\" alignItems=\"center\">\n          <StyledComposerButton\n            buttonType=\"icon\"\n            onClick={onSend}\n            size=\"s\"\n            disabled={isSendButtonDisabled}\n            aria-disabled={isSendButtonDisabled}\n            data-testid={ChatContainerDataTestIds.COMPOSER_SEND_BUTTON}\n            aria-label=\"Send\"\n            innerRef={inputSend}\n          >\n            <PaperAirplane width={18} height={18} />\n          </StyledComposerButton>\n        </Grid>\n      </Grid>\n      <StyledComposerInput\n        innerRef={inputSize}\n        aria-label=\"ghost\"\n        style={{\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: 0,\n          width: input.current?.clientWidth,\n        }}\n        height={32}\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={ChatContainerDataTestIds.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-container-messages-list/ChatContainerMessagesList.js

@@ -50,7 +50,7 @@ const ChatContainerMessagesList = (props) => {
           "data-element": "chat-element-list-item",
           "data-index": index,
           style,
-          ref: measureRef,
+          innerRef: measureRef,
           tabIndex: -1,
           onKeyDown: handleKey,
           role: "listitem",
@@ -71,7 +71,7 @@ const ChatContainerMessagesList = (props) => {
       {
         "data-testid": ChatContainerDataTestIds.THREAD_CONTAINER,
         tabIndex: 0,
-        ref: virtualListRef,
+        innerRef: virtualListRef,
         role: "list",
         onKeyDown: handleListKey,
         children: /* @__PURE__ */ jsxs(StyledChatContainerContentListScroll, { height: `${totalSize}px`, children: [

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

@@ -1,7 +1,7 @@
 {
   "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 type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\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                <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? (\n                <MessageDelimiter {...(row as unknown as DSChatMessageDelimeterT.Props)} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as DSChatSystemMessageT.Props)} /> : 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={ChatContainerDataTestIds.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              <DSButtonV2\n                buttonType=\"outline\"\n                onClick={getMoreMessages}\n                data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n                innerRef={loadMoreRef}\n              >\n                Load More\n              </DSButtonV2>\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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",
+  "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 type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\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            innerRef={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                <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? (\n                <MessageDelimiter {...(row as unknown as DSChatMessageDelimeterT.Props)} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as DSChatSystemMessageT.Props)} /> : 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={ChatContainerDataTestIds.THREAD_CONTAINER}\n        tabIndex={0}\n        innerRef={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              <DSButtonV2\n                buttonType=\"outline\"\n                onClick={getMoreMessages}\n                data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n                innerRef={loadMoreRef}\n              >\n                Load More\n              </DSButtonV2>\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": "AAAA,YAAY,WAAW;ACoEX,SAEI,KAFJ;AAhEZ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,YAAY,oBAAoB;AAEzC,SAAS,wBAAwB;AAEjC,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0CAA0C;AACnD,SAAS,yBAAyB;AAClC,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AAEzC,MAAM,4BAA4E,CAAC,UAAU;AAC3F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B,KAAK;AAErC,QAAM,EAAE,aAAa,iBAAiB,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAC7F,QAAM,EAAE,WAAW,aAAa,IAAI;AAEpC,QAAM,cAAc,kBAAkB,QAAQ;AAE9C,QAAM,SAASA,OAAM;AAAA,IACnB,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,MAAM,SAAS,KAAK;AAC1B,YAAM,YAAY,mBAAmB,gBAAgB,KAAK,CAAC,MAAM,MAAM,IAAI,IAAI;AAC/E,YAAM,QAAuB;AAAA,QAC3B,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW,cAAc;AAAA,QACzB,OAAO;AAAA,MACT;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,cAAY;AAAA,UAEZ;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV,WAAW;AAAA,UACX,MAAK;AAAA,UAEL,+BAAC,yBAAsB,MAAM,IAAI,MAC9B;AAAA,gBAAI,SAAS,aAAa,UAAU,IAAI,SAAS,aAAa,YAC7D,oBAAC,cAAY,GAAG,KAAK,aAAa,YAAY,cAAc,IAAI,aAAa,IAC3E;AAAA,YACH,IAAI,SAAS,aAAa,YACzB,oBAAC,oBAAkB,GAAI,KAAkD,IACvE;AAAA,YACH,IAAI,SAAS,aAAa,SAAS,oBAAC,iBAAe,GAAI,KAAoC,IAAK;AAAA,aACnG;AAAA;AAAA,QAfK,kBAAkB,SAAS,IAAI,QAAQ,IAAI;AAAA,MAgBlD;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,cAAc,UAAU,iBAAiB,WAAW,WAAW;AAAA,EAClE;AAEA,SACE,qBAAC,iBAAe,GAAG,kBACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,yBAAyB;AAAA,QACtC,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAK;AAAA,QACL,WAAW;AAAA,QAEX,+BAAC,wCAAqC,QAAQ,GAAG,eAC9C;AAAA,WAAC,aAAa,eACb,oBAAC,2BAAwB,cACvB;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,SAAS;AAAA,cACT,eAAa,yBAAyB;AAAA,cACtC,UAAU;AAAA,cACX;AAAA;AAAA,UAED,GACF,IACE;AAAA,UACH;AAAA,WACH;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,oCAAiC,aAAU,UAAS,eAAY,SAC9D,sBAAY,IAAI,CAAC,eAChB,qBAAC,OACE;AAAA,iBAAW;AAAA,MAAM;AAAA,MAAE,WAAW;AAAA,MAAK;AAAA,MAAE,WAAW;AAAA,MAAK;AAAA,MAAE,WAAW;AAAA,MAAa;AAAA,MAAE,WAAW;AAAA,SADvF,WAAW,IAEnB,CACD,GACH;AAAA,KACF;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,SAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
   "names": ["React"]
 }

package/dist/types/parts/chat-composer/styled.d.ts

@@ -2,10 +2,10 @@
 import type { TextAreaProps } from '../../react-desc-prop-types.js';
 export declare const StyledChatContainerContentComposer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
     maxHeight: string;
-} & import("@elliemae/ds-system").OwnerInterface, never>;
-export declare const StyledComposerInput: import("styled-components").StyledComponent<"textarea", import("@elliemae/ds-system").Theme, TextAreaProps & import("@elliemae/ds-system").OwnerInterface, never>;
-export declare const StyledComposerButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledComposerInput: import("styled-components").StyledComponent<"textarea", import("@elliemae/ds-system").Theme, TextAreaProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"textarea">, never>;
+export declare const StyledComposerButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>>, never>;
 export declare const StyledCounterArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
     hasError: boolean;
-} & import("@elliemae/ds-system").OwnerInterface, never>;
-export declare const StyledCounterErrorA11y: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledCounterErrorA11y: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;

package/dist/types/parts/chat-container-messages-list/styled.d.ts

@@ -1,12 +1,12 @@
 import type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';
-export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
-export declare const StyledWrapperListItem: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, Partial<DSChatBubbleT.Props> & import("@elliemae/ds-system").OwnerInterface, never>;
-export declare const StyledChatContainerContentList: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
-export declare const StyledNewMessagesHiddenContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledWrapperListItem: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, Partial<DSChatBubbleT.Props> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledChatContainerContentList: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledNewMessagesHiddenContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledChatContainerContentListScroll: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     height: string;
-} & import("@elliemae/ds-system").OwnerInterface, never>;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledLoadMoreContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     hasMoreItems?: "top" | "bottom" | undefined;
-} & import("@elliemae/ds-system").OwnerInterface, never>;
-export declare const ListItem: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const ListItem: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/react-desc-prop-types.d.ts

@@ -110,6 +110,7 @@ export declare const ChatContainerMessagesListPropTypes: {
     'on-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     'data-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     'all HTML attributes': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    innerRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     about: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     accept: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     acceptCharset: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
@@ -495,6 +496,7 @@ export declare const ChatContainerPropTypes: {
     'on-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     'data-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     'all HTML attributes': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    innerRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     about: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     accept: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     acceptCharset: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;

package/dist/types/styled.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const CONTAINER_WIDTH = 300;
-export declare const StyledChatContainerContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
+export declare const StyledChatContainerContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 export declare const StyledIndicatorContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     isLoading?: "top" | "bottom" | undefined;
     linear?: boolean | undefined;
-} & import("@elliemae/ds-system").OwnerInterface, never>;
-export declare const MobileStyledChatContainerContent: import("styled-components").StyledComponent<import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, {
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const MobileStyledChatContainerContent: import("styled-components").StyledComponent<import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>, import("@elliemae/ds-system").Theme, {
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
@@ -14,4 +14,4 @@ export declare const MobileStyledChatContainerContent: import("styled-components
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & import("@elliemae/ds-system").OwnerInterface, never>;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>>, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat-container",
-  "version": "3.25.0-next.1",
+  "version": "3.25.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat Container",
   "files": [
@@ -124,23 +124,23 @@
   },
   "dependencies": {
     "react-virtual": "~2.10.4",
-    "@elliemae/ds-banner": "3.25.0-next.1",
-    "@elliemae/ds-button-v2": "3.25.0-next.1",
-    "@elliemae/ds-chat-bubble": "3.25.0-next.1",
-    "@elliemae/ds-chat-container-header": "3.25.0-next.1",
-    "@elliemae/ds-chat-message-delimeter": "3.25.0-next.1",
-    "@elliemae/ds-chat-system-message": "3.25.0-next.1",
-    "@elliemae/ds-grid": "3.25.0-next.1",
-    "@elliemae/ds-icons": "3.25.0-next.1",
-    "@elliemae/ds-props-helpers": "3.25.0-next.1",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.25.0-next.1",
-    "@elliemae/ds-system": "3.25.0-next.1"
+    "@elliemae/ds-banner": "3.25.0-next.2",
+    "@elliemae/ds-button-v2": "3.25.0-next.2",
+    "@elliemae/ds-chat-bubble": "3.25.0-next.2",
+    "@elliemae/ds-chat-container-header": "3.25.0-next.2",
+    "@elliemae/ds-chat-message-delimeter": "3.25.0-next.2",
+    "@elliemae/ds-chat-system-message": "3.25.0-next.2",
+    "@elliemae/ds-grid": "3.25.0-next.2",
+    "@elliemae/ds-icons": "3.25.0-next.2",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.25.0-next.2",
+    "@elliemae/ds-props-helpers": "3.25.0-next.2",
+    "@elliemae/ds-system": "3.25.0-next.2"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "@types/react": "latest",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.25.0-next.1"
+    "@elliemae/ds-monorepo-devops": "3.25.0-next.2"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",