@elliemae/ds-chat-container 3.80.0-next.30 → 3.80.0-next.35

package/dist/cjs/react-desc-prop-types.js

@@ -39,6 +39,7 @@ module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_banner = require("@elliemae/ds-banner");
+var import_DSChatContainerDefinitions = require("./DSChatContainerDefinitions.js");
 function noop(..._args) {
 }
 const defaultPropsComposer = {
@@ -61,7 +62,7 @@ const defaultPropsComposer = {
 const ChatComposerPropTypes = {
   placeholder: import_ds_props_helpers.PropTypes.string.description("Input Placeholder").defaultValue(defaultPropsComposer.placeholder),
   inputValue: import_ds_props_helpers.PropTypes.string.description("Input value").defaultValue(defaultPropsComposer.inputValue),
-  ariaMaxLengthMessage: import_ds_props_helpers.PropTypes.string.description("Aria message for Max length message when exceeded").defaultValue(defaultPropsComposer.maxLengthMessage),
+  ariaMaxLengthMessage: import_ds_props_helpers.PropTypes.string.description("Aria message for Max length message when exceeded").defaultValue(defaultPropsComposer.ariaMaxLengthMessage),
   maxLengthMessage: import_ds_props_helpers.PropTypes.string.description("Max length message").defaultValue(defaultPropsComposer.maxLengthMessage),
   onChange: import_ds_props_helpers.PropTypes.func.description("Called when the user types").defaultValue(defaultPropsComposer.onChange),
   onResize: import_ds_props_helpers.PropTypes.func.description("Called the input changes his height").defaultValue(defaultPropsComposer.onResize),
@@ -69,19 +70,22 @@ const ChatComposerPropTypes = {
   onFocus: import_ds_props_helpers.PropTypes.func.description("Input focus").defaultValue(defaultPropsComposer.onFocus),
   onBlur: import_ds_props_helpers.PropTypes.func.description("Input blur").defaultValue(defaultPropsComposer.onBlur),
   onKeyDown: import_ds_props_helpers.PropTypes.func.description("Input on key down").defaultValue(defaultPropsComposer.onKeyDown),
-  maxHeight: import_ds_props_helpers.PropTypes.number.description("Max height of the composer. Use 0 for no limit").defaultValue(defaultPropsComposer.onBlur),
+  maxHeight: import_ds_props_helpers.PropTypes.number.description("Max height of the composer. Use 0 for no limit").defaultValue(defaultPropsComposer.maxHeight),
   inputMaxLength: import_ds_props_helpers.PropTypes.number.description("Max length of the composer. `undefined` for no limit").defaultValue(defaultPropsComposer.inputMaxLength),
   buttonDisabled: import_ds_props_helpers.PropTypes.bool.description("Control the disabled for the send button").defaultValue(defaultPropsComposer.buttonDisabled),
-  dataTestid: import_ds_props_helpers.PropTypes.string.description("Data testid").defaultValue(defaultPropsComposer.placeholder),
+  dataTestid: import_ds_props_helpers.PropTypes.string.description("Data testid").defaultValue(defaultPropsComposer.dataTestid),
   actionRef: import_ds_props_helpers.PropTypes.object.description(
     `Reference: 
         { 
-          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,
-          getMessagesInView?: () => number[],
-          focusToIndex?: (n: number) => void,
+          scrollToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,
+          focusToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,
+          getMessagesInView?: () => string[],
+          focusToIndexWithoutScroll?: (n: string) => void,
           focusToList?: () => void,
           focusToComposer?: () => void,
           focusToSend?: () => void,
+          focusOnBanner?: () => void,
+          focusOnBannerLink?: () => void,
         }
         
       `
@@ -100,18 +104,21 @@ const defaultPropsMessagesList = {
   bannerRef: void 0
 };
 const ChatContainerMessagesListPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_DSChatContainerDefinitions.DSChatContainerSlotName, import_DSChatContainerDefinitions.DSChatContainerSlots),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   messages: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description("The array of out-of-the-box items you want to render inside the ChatMessageList").defaultValue(defaultPropsMessagesList.messages),
   actionRef: import_ds_props_helpers.PropTypes.object.description(
     `Reference: 
         { 
-          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToIndexWithoutScroll: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
+          scrollToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,
+          focusToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,
+          getMessagesInView?: () => string[],
+          focusToIndexWithoutScroll?: (n: string) => void,
+          focusToList?: () => void,
+          focusToComposer?: () => void,
+          focusToSend?: () => void,
+          focusOnBanner?: () => void,
+          focusOnBannerLink?: () => void,
         }
         
       `
@@ -123,7 +130,9 @@ const ChatContainerMessagesListPropTypes = {
   hasMoreItems: import_ds_props_helpers.PropTypes.oneOf(["top", "bottom", void 0]).description(
     "Show Load More button at the `top` or `bottom` of the container"
   ),
-  getMoreMessages: import_ds_props_helpers.PropTypes.func.description("Called when the user clicks on load more").defaultValue(defaultPropsMessagesList.getMoreMessages),
+  getMoreMessages: import_ds_props_helpers.PropTypes.func.description(
+    "Called when the user clicks on load more. When older messages are added at the start of `messages`, the list keeps its scroll offset, so the messages in view shift; call `actionRef.current.scrollToIndex` after updating `messages` to bring the user back to where they were"
+  ).defaultValue(defaultPropsMessagesList.getMoreMessages),
   sendingMessages: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.string), import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.number)]).description("Array of ids of sending messages").defaultValue(defaultPropsMessagesList.sendingMessages),
   sendingText: import_ds_props_helpers.PropTypes.string.description("Label description for messages in sending status").defaultValue(defaultPropsMessagesList.sendingText)
 };
@@ -149,7 +158,9 @@ const defaultProps = {
 };
 const ChatContainerPropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
-  messagesListProps: import_ds_props_helpers.PropTypes.object.description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
+  messagesListProps: import_ds_props_helpers.PropTypes.object.description(
+    'ChatMessageList props "messages" / "onScrollEnds", plus the "dsChatcontainerMessagesListScrollArea" slot prop (object or function) for the scroll area'
+  ).defaultValue(defaultProps.messagesListProps),
   composerProps: import_ds_props_helpers.PropTypes.object.description("Composer configuration").defaultValue(defaultProps.composerProps),
   autoScroll: import_ds_props_helpers.PropTypes.bool.description("Auto scroll to bottom on resize").defaultValue(defaultProps.autoScroll),
   device: import_ds_props_helpers.PropTypes.string.description("Option to render mobile or desktop style composer").defaultValue(defaultProps.device),
@@ -159,9 +170,11 @@ const ChatContainerPropTypes = {
   hasMoreItems: import_ds_props_helpers.PropTypes.oneOf(["top", "bottom", void 0]).description(
     "Show Load More button at the `top` or `bottom` of the container"
   ),
-  getMoreMessages: import_ds_props_helpers.PropTypes.func.description("Called when the user clicks on load more").defaultValue(defaultProps.getMoreMessages),
+  getMoreMessages: import_ds_props_helpers.PropTypes.func.description(
+    "Called when the user clicks on load more. When older messages are added at the start of `messages`, the list keeps its scroll offset, so the messages in view shift; call `actionRef.current.scrollToIndex` after updating `messages` to bring the user back to where they were"
+  ).defaultValue(defaultProps.getMoreMessages),
   bannerPosition: import_ds_props_helpers.PropTypes.oneOf(["top", "bottom", void 0]).description(
-    "Show Loading messages indicator at the `top` or `bottom` of the container"
+    "Show the unread messages banner (configured with `bannerProps`) at the `top` or `bottom` of the container"
   ),
   bannerProps: import_ds_props_helpers.PropTypes.object.description(
     `Banner configuration:
@@ -177,12 +190,15 @@ const ChatContainerPropTypes = {
   actionRef: import_ds_props_helpers.PropTypes.object.description(
     `Reference: 
         { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
+          scrollToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,
+          focusToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,
+          getMessagesInView?: () => string[],
+          focusToIndexWithoutScroll?: (n: string) => void,
+          focusToList?: () => void,
+          focusToComposer?: () => void,
+          focusToSend?: () => void,
+          focusOnBanner?: () => void,
+          focusOnBannerLink?: () => void,
         }
         
       `

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { Virtualizer } from '@tanstack/react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n  interface ChatBannerProps {\n    label: string;\n    viewLabel: string;\n    type?: 'info' | 'success' | 'danger' | 'warning';\n    onView: () => void;\n    onClose: () => void;\n  }\n  /**\n   * Single source of truth for the virtualizer's element generics \u2014 reused across every file that\n   * types `useVirtualHelpers`, so they can't drift out of sync with each other (which previously\n   * produced a real dts build failure: `Virtualizer<HTMLDivElement, Element>` vs `Virtualizer<Element, Element>`).\n   */\n  export type ChatVirtualizer = Virtualizer<HTMLDivElement, HTMLDivElement>;\n  export type ScrollToIndexOptions = Parameters<ChatVirtualizer['scrollToIndex']>[1];\n  export type ActionRef = React.MutableRefObject<{\n    scrollToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n    focusToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n    getMessagesInView?: () => string[];\n    focusToIndexWithoutScroll?: (index: string) => void;\n    focusToList?: () => void;\n    focusToComposer?: () => void;\n    focusToSend?: () => void;\n    focusOnBanner?: () => void;\n    focusOnBannerLink?: () => void;\n  }>;\n\n  export interface ComposerProps extends Record<string, unknown> {\n    placeholder?: string;\n    inputValue?: string;\n    ariaMaxLengthMessage?: string;\n    maxLengthMessage?: string;\n    onChange: (value: string) => void;\n    onResize?: (value: number) => void;\n    onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    maxHeight?: number;\n    inputMaxLength?: number;\n    buttonDisabled: boolean;\n    dataTestid?: string;\n    actionRef?: ActionRef;\n  }\n\n  export interface MessagesListProps extends Record<string, unknown> {\n    messages: DSChatBubbleT.Props[];\n    actionRef: ActionRef;\n    onScrollEnds?: (indexList: string[]) => void;\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    sendingMessages?: Array<string | number>;\n    sendingText: string;\n    bannerPosition?: 'top' | 'bottom';\n    bannerRef?: React.MutableRefObject<{\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnWrapper: (...args: any[]) => void;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnLink: (...args: any[]) => void;\n    }>;\n  }\n\n  export interface ContainerProps extends Record<string, unknown> {\n    messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n    composerProps: ComposerProps;\n    actionRef?: ActionRef;\n    autoScroll: boolean;\n    device: 'desktop' | 'mobile';\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    bannerPosition?: 'top' | 'bottom';\n    bannerProps?: ChatBannerProps;\n    sendingMessages?: string[] | number[];\n    sendingText: string;\n  }\n\n  export interface GetPaddingT {\n    hasMoreItems: string | undefined;\n    bannerPosition: string | undefined;\n    isLoading: string | undefined;\n  }\n}\n\nexport interface TextAreaProps {\n  height: string | number;\n  style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n  placeholder: 'Type your message',\n  inputValue: '',\n  ariaMaxLengthMessage: '',\n  onChange: noop,\n  onResize: noop,\n  onSend: noop,\n  onFocus: noop,\n  onBlur: noop,\n  onKeyDown: noop,\n  maxHeight: 0,\n  inputMaxLength: undefined,\n  maxLengthMessage: undefined,\n  buttonDisabled: false,\n  dataTestid: 'ds-chat-composer',\n  actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n  inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n  ariaMaxLengthMessage: PropTypes.string\n    .description('Aria message for Max length message when exceeded')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  maxLengthMessage: PropTypes.string\n    .description('Max length message')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n  onResize: PropTypes.func\n    .description('Called the input changes his height')\n    .defaultValue(defaultPropsComposer.onResize),\n  onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n  onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n  onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n  maxHeight: PropTypes.number\n    .description('Max height of the composer. Use 0 for no limit')\n    .defaultValue(defaultPropsComposer.onBlur),\n  inputMaxLength: PropTypes.number\n    .description('Max length of the composer. `undefined` for no limit')\n    .defaultValue(defaultPropsComposer.inputMaxLength),\n  buttonDisabled: PropTypes.bool\n    .description('Control the disabled for the send button')\n    .defaultValue(defaultPropsComposer.buttonDisabled),\n  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n          getMessagesInView?: () => number[],\n          focusToIndex?: (n: number) => void,\n          focusToList?: () => void,\n          focusToComposer?: () => void,\n          focusToSend?: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n  messages: [],\n  actionRef: { current: {} },\n  // we don't want this to exist \"by default\" since this loads document.addEventListener\n  // the code is already checking for this callback existence everytime it's invoked anyway\n  // onScrollEnds: () => [],\n  getMoreMessages: noop,\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n  bannerPosition: undefined,\n  bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n  ...globalAttributesPropTypes,\n\n  messages: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n    .defaultValue(defaultPropsMessagesList.messages),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToIndexWithoutScroll: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsMessagesList.actionRef),\n  onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Keeps the load more space while the loading is in progress',\n  ),\n  hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Load More button at the `top` or `bottom` of the container',\n  ),\n  getMoreMessages: PropTypes.func\n    .description('Called when the user clicks on load more')\n    .defaultValue(defaultPropsMessagesList.getMoreMessages),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultPropsMessagesList.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n  messagesListProps: defaultPropsMessagesList,\n  composerProps: defaultPropsComposer,\n  actionRef: undefined,\n  autoScroll: false,\n  device: 'desktop',\n  isLoading: undefined,\n  hasMoreItems: undefined,\n  getMoreMessages: noop,\n  bannerPosition: undefined,\n  bannerProps: {\n    type: BANNER_TYPES.INFO,\n    label: 'Unread Messages',\n    viewLabel: 'View',\n    onView: noop,\n    onClose: noop,\n  },\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n  ...globalAttributesPropTypes,\n  messagesListProps: PropTypes.object\n    .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n    .defaultValue(defaultProps.messagesListProps),\n  composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),\n  autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n  device: PropTypes.string\n    .description('Option to render mobile or desktop style composer')\n    .defaultValue(defaultProps.device),\n  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Load More button at the `top` or `bottom` of the container',\n  ),\n  getMoreMessages: PropTypes.func\n    .description('Called when the user clicks on load more')\n    .defaultValue(defaultProps.getMoreMessages),\n  bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  bannerProps: PropTypes.object\n    .description(\n      `Banner configuration:\n  label: string;\n  viewLabel: string;\n  type: BANNER_TYPES;\n  onView: () => void;\n  onClose: () => void;\n  `,\n    )\n    .defaultValue(defaultProps.bannerProps),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultProps.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultProps.sendingText),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultProps.actionRef),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\nimport { PropTypes, getPropsPerSlotPropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSChatContainerSlotName, DSChatContainerSlots } from './DSChatContainerDefinitions.js';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n  interface ChatBannerProps {\n    label: string;\n    viewLabel: string;\n    type?: 'info' | 'success' | 'danger' | 'warning';\n    onView: () => void;\n    onClose: () => void;\n  }\n  /**\n   * Kept with its published shape \u2014 react-virtual v2's optional `scrollToIndex` options: `{ align }` with `align`\n   * required, or `undefined` \u2014 so code written against it keeps compiling.\n   */\n  export type ScrollToIndexOptions = DSFastListT.ScrollToOptions | undefined;\n  /** What `scrollToIndex` and `focusToIndex` accept: `align` is optional and `behavior` can request a smooth scroll. */\n  export type ScrollActionOptions = DSFastListT.ScrollActionOptions;\n  export type ActionRef = React.MutableRefObject<{\n    /** Method syntax on purpose: an `actionRef` typed with the published `ScrollToIndexOptions` stays assignable. */\n    scrollToIndex?(index: number, opts?: ScrollActionOptions): void;\n    focusToIndex?(index: number, opts?: ScrollActionOptions): void;\n    getMessagesInView?: () => string[];\n    focusToIndexWithoutScroll?: (index: string) => void;\n    focusToList?: () => void;\n    focusToComposer?: () => void;\n    focusToSend?: () => void;\n    focusOnBanner?: () => void;\n    focusOnBannerLink?: () => void;\n  }>;\n\n  export interface ComposerProps extends Record<string, unknown> {\n    placeholder?: string;\n    inputValue?: string;\n    ariaMaxLengthMessage?: string;\n    maxLengthMessage?: string;\n    onChange: (value: string) => void;\n    onResize?: (value: number) => void;\n    onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    maxHeight?: number;\n    inputMaxLength?: number;\n    buttonDisabled: boolean;\n    dataTestid?: string;\n    actionRef?: ActionRef;\n  }\n\n  export type MessagesListSlotProps = TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSChatContainerSlotName,\n    typeof DSChatContainerSlots\n  >;\n\n  export interface MessagesListProps extends Record<string, unknown>, MessagesListSlotProps {\n    messages: DSChatBubbleT.Props[];\n    actionRef: ActionRef;\n    onScrollEnds?: (indexList: string[]) => void;\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    sendingMessages?: Array<string | number>;\n    sendingText: string;\n    bannerPosition?: 'top' | 'bottom';\n    bannerRef?: React.MutableRefObject<{\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnWrapper: (...args: any[]) => void;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnLink: (...args: any[]) => void;\n    }>;\n  }\n\n  export interface ContainerProps extends Record<string, unknown> {\n    messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'> & MessagesListSlotProps;\n    composerProps: ComposerProps;\n    actionRef?: ActionRef;\n    autoScroll: boolean;\n    device: 'desktop' | 'mobile';\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    bannerPosition?: 'top' | 'bottom';\n    bannerProps?: ChatBannerProps;\n    sendingMessages?: string[] | number[];\n    sendingText: string;\n  }\n\n  export interface GetPaddingT {\n    hasMoreItems: string | undefined;\n    bannerPosition: string | undefined;\n    isLoading: string | undefined;\n  }\n}\n\nexport interface TextAreaProps {\n  height: string | number;\n  style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n  placeholder: 'Type your message',\n  inputValue: '',\n  ariaMaxLengthMessage: '',\n  onChange: noop,\n  onResize: noop,\n  onSend: noop,\n  onFocus: noop,\n  onBlur: noop,\n  onKeyDown: noop,\n  maxHeight: 0,\n  inputMaxLength: undefined,\n  maxLengthMessage: undefined,\n  buttonDisabled: false,\n  dataTestid: 'ds-chat-composer',\n  actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n  inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n  ariaMaxLengthMessage: PropTypes.string\n    .description('Aria message for Max length message when exceeded')\n    .defaultValue(defaultPropsComposer.ariaMaxLengthMessage),\n  maxLengthMessage: PropTypes.string\n    .description('Max length message')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n  onResize: PropTypes.func\n    .description('Called the input changes his height')\n    .defaultValue(defaultPropsComposer.onResize),\n  onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n  onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n  onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n  maxHeight: PropTypes.number\n    .description('Max height of the composer. Use 0 for no limit')\n    .defaultValue(defaultPropsComposer.maxHeight),\n  inputMaxLength: PropTypes.number\n    .description('Max length of the composer. `undefined` for no limit')\n    .defaultValue(defaultPropsComposer.inputMaxLength),\n  buttonDisabled: PropTypes.bool\n    .description('Control the disabled for the send button')\n    .defaultValue(defaultPropsComposer.buttonDisabled),\n  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.dataTestid),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,\n          focusToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,\n          getMessagesInView?: () => string[],\n          focusToIndexWithoutScroll?: (n: string) => void,\n          focusToList?: () => void,\n          focusToComposer?: () => void,\n          focusToSend?: () => void,\n          focusOnBanner?: () => void,\n          focusOnBannerLink?: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n  messages: [],\n  actionRef: { current: {} },\n  // we don't want this to exist \"by default\" since this loads document.addEventListener\n  // the code is already checking for this callback existence everytime it's invoked anyway\n  // onScrollEnds: () => [],\n  getMoreMessages: noop,\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n  bannerPosition: undefined,\n  bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n  ...getPropsPerSlotPropTypes(DSChatContainerSlotName, DSChatContainerSlots),\n  ...globalAttributesPropTypes,\n\n  messages: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n    .defaultValue(defaultPropsMessagesList.messages),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,\n          focusToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,\n          getMessagesInView?: () => string[],\n          focusToIndexWithoutScroll?: (n: string) => void,\n          focusToList?: () => void,\n          focusToComposer?: () => void,\n          focusToSend?: () => void,\n          focusOnBanner?: () => void,\n          focusOnBannerLink?: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsMessagesList.actionRef),\n  onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Keeps the load more space while the loading is in progress',\n  ),\n  hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Load More button at the `top` or `bottom` of the container',\n  ),\n  getMoreMessages: PropTypes.func\n    .description(\n      'Called when the user clicks on load more. When older messages are added at the start of `messages`, the list keeps its scroll offset, so the messages in view shift; call `actionRef.current.scrollToIndex` after updating `messages` to bring the user back to where they were',\n    )\n    .defaultValue(defaultPropsMessagesList.getMoreMessages),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultPropsMessagesList.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n  messagesListProps: defaultPropsMessagesList,\n  composerProps: defaultPropsComposer,\n  actionRef: undefined,\n  autoScroll: false,\n  device: 'desktop',\n  isLoading: undefined,\n  hasMoreItems: undefined,\n  getMoreMessages: noop,\n  bannerPosition: undefined,\n  bannerProps: {\n    type: BANNER_TYPES.INFO,\n    label: 'Unread Messages',\n    viewLabel: 'View',\n    onView: noop,\n    onClose: noop,\n  },\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n  ...globalAttributesPropTypes,\n  messagesListProps: PropTypes.object\n    .description(\n      'ChatMessageList props \"messages\" / \"onScrollEnds\", plus the \"dsChatcontainerMessagesListScrollArea\" slot prop (object or function) for the scroll area',\n    )\n    .defaultValue(defaultProps.messagesListProps),\n  composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),\n  autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n  device: PropTypes.string\n    .description('Option to render mobile or desktop style composer')\n    .defaultValue(defaultProps.device),\n  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Load More button at the `top` or `bottom` of the container',\n  ),\n  getMoreMessages: PropTypes.func\n    .description(\n      'Called when the user clicks on load more. When older messages are added at the start of `messages`, the list keeps its scroll offset, so the messages in view shift; call `actionRef.current.scrollToIndex` after updating `messages` to bring the user back to where they were',\n    )\n    .defaultValue(defaultProps.getMoreMessages),\n  bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show the unread messages banner (configured with `bannerProps`) at the `top` or `bottom` of the container',\n  ),\n  bannerProps: PropTypes.object\n    .description(\n      `Banner configuration:\n  label: string;\n  viewLabel: string;\n  type: BANNER_TYPES;\n  onView: () => void;\n  onClose: () => void;\n  `,\n    )\n    .defaultValue(defaultProps.bannerProps),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultProps.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultProps.sendingText),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,\n          focusToIndex?: (n: number, opts?: { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }) => void,\n          getMessagesInView?: () => string[],\n          focusToIndexWithoutScroll?: (n: string) => void,\n          focusToList?: () => void,\n          focusToComposer?: () => void,\n          focusToSend?: () => void,\n          focusOnBanner?: () => void,\n          focusOnBannerLink?: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultProps.actionRef),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-chat-container-valid.js

@@ -76,6 +76,19 @@ const testDefinitionAsConst = {
   },
   sendingText: "Sending..."
 };
+const actionRef = { current: {} };
+const scrollOptionsAlign = { align: "end" };
+const scrollOptionsBehavior = { behavior: "smooth" };
+const scrollOptionsBoth = { align: "start", behavior: "auto" };
+const publishedScrollOptions = { align: "center" };
+const publishedAlign = publishedScrollOptions.align;
+const publishedNoScrollOptions = void 0;
+const handleScrollToIndexWithPublishedOptions = () => actionRef.current.scrollToIndex?.(1, publishedScrollOptions);
+const handleScrollToIndex = () => actionRef.current.scrollToIndex?.(1);
+const handleScrollToIndexWithAlign = () => actionRef.current.scrollToIndex?.(1, { align: "end" });
+const handleScrollToIndexWithBehavior = () => actionRef.current.scrollToIndex?.(1, { behavior: "smooth" });
+const handleFocusToIndexWithBoth = () => actionRef.current.focusToIndex?.(1, { align: "start", behavior: "auto" });
+const handleGetMessagesInView = () => actionRef.current.getMessagesInView?.() ?? [];
 const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ChatContainer, { ...testExplicitDefinition }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ChatContainer, { ...testInferedTypeCompatibility }),
@@ -99,6 +112,24 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
       },
       sendingText: "Sending..."
     }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ChatContainer, { ...testExplicitDefinition, actionRef }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.ChatContainer,
+    {
+      ...testExplicitDefinition,
+      messagesListProps: { messages, dsChatcontainerMessagesListScrollArea: { "aria-describedby": "description" } }
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.ChatContainer,
+    {
+      ...testExplicitDefinition,
+      messagesListProps: {
+        messages,
+        dsChatcontainerMessagesListScrollArea: () => ({ "aria-describedby": "description" })
+      }
+    }
   )
 ] });
 //# sourceMappingURL=typescript-chat-container-valid.js.map

package/dist/cjs/typescript-testing/typescript-chat-container-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-chat-container-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { ChatContainer } from '../index.js';\nimport type { DSChatT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChatT.ContainerProps;\n\nconst messages: DSChatBubbleT.Props[] = [];\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  messagesListProps: {\n    messages,\n  },\n  composerProps: {\n    onChange: () => {},\n    onSend: () => {},\n    buttonDisabled: false,\n  },\n  autoScroll: false,\n  device: 'desktop',\n  getMoreMessages: () => {},\n  sendingText: 'Sending...',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  messagesListProps: {\n    messages,\n  },\n  composerProps: {\n    onChange: () => {},\n    onSend: () => {},\n    buttonDisabled: false,\n  },\n  autoScroll: false,\n  device: 'desktop',\n  getMoreMessages: () => {},\n  sendingText: 'Sending...',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  messagesListProps: {\n    messages,\n  },\n  composerProps: {\n    onChange: () => {},\n    onSend: () => {},\n    buttonDisabled: false,\n  },\n  autoScroll: false,\n  device: 'desktop',\n  getMoreMessages: () => {},\n  sendingText: 'Sending...',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <ChatContainer {...testExplicitDefinition} />\n    <ChatContainer {...testInferedTypeCompatibility} />\n    <ChatContainer {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <ChatContainer\n      messagesListProps={{\n        messages,\n      }}\n      composerProps={{\n        onChange: () => {},\n        onSend: () => {},\n        buttonDisabled: false,\n      }}\n      autoScroll={false}\n      device=\"desktop\"\n      getMoreMessages={() => {}}\n      sendingText=\"Sending...\"\n    />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;AC0DrB;AAxDF,eAA8B;AAM9B,MAAM,WAAkC,CAAC;AAGzC,MAAM,yBAA+C;AAAA,EACnD,mBAAmB;AAAA,IACjB;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,UAAU,MAAM;AAAA,IAAC;AAAA,IACjB,QAAQ,MAAM;AAAA,IAAC;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,aAAa;AACf;AAGA,MAAM,+BAA+B;AAAA,EACnC,mBAAmB;AAAA,IACjB;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,UAAU,MAAM;AAAA,IAAC;AAAA,IACjB,QAAQ,MAAM;AAAA,IAAC;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,aAAa;AACf;AAEA,MAAM,wBAAwB;AAAA,EAC5B,mBAAmB;AAAA,IACjB;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,UAAU,MAAM;AAAA,IAAC;AAAA,IACjB,QAAQ,MAAM;AAAA,IAAC;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,aAAa;AACf;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,0BAAe,GAAG,wBAAwB;AAAA,EAC3C,4CAAC,0BAAe,GAAG,8BAA8B;AAAA,EACjD,4CAAC,0BAAe,GAAG,uBAAuB;AAAA,EAE1C;AAAA,IAAC;AAAA;AAAA,MACC,mBAAmB;AAAA,QACjB;AAAA,MACF;AAAA,MACA,eAAe;AAAA,QACb,UAAU,MAAM;AAAA,QAAC;AAAA,QACjB,QAAQ,MAAM;AAAA,QAAC;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,MACA,YAAY;AAAA,MACZ,QAAO;AAAA,MACP,iBAAiB,MAAM;AAAA,MAAC;AAAA,MACxB,aAAY;AAAA;AAAA,EACd;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { ChatContainer } from '../index.js';\nimport type { DSChatT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChatT.ContainerProps;\n\nconst messages: DSChatBubbleT.Props[] = [];\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  messagesListProps: {\n    messages,\n  },\n  composerProps: {\n    onChange: () => {},\n    onSend: () => {},\n    buttonDisabled: false,\n  },\n  autoScroll: false,\n  device: 'desktop',\n  getMoreMessages: () => {},\n  sendingText: 'Sending...',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  messagesListProps: {\n    messages,\n  },\n  composerProps: {\n    onChange: () => {},\n    onSend: () => {},\n    buttonDisabled: false,\n  },\n  autoScroll: false,\n  device: 'desktop',\n  getMoreMessages: () => {},\n  sendingText: 'Sending...',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  messagesListProps: {\n    messages,\n  },\n  composerProps: {\n    onChange: () => {},\n    onSend: () => {},\n    buttonDisabled: false,\n  },\n  autoScroll: false,\n  device: 'desktop',\n  getMoreMessages: () => {},\n  sendingText: 'Sending...',\n} as const;\n\n// the public actionRef, including the scroll options (both `align` and `behavior` are optional)\nconst actionRef: DSChatT.ActionRef = { current: {} };\nconst scrollOptionsAlign: DSChatT.ScrollActionOptions = { align: 'end' };\nconst scrollOptionsBehavior: DSChatT.ScrollActionOptions = { behavior: 'smooth' };\nconst scrollOptionsBoth: DSChatT.ScrollActionOptions = { align: 'start', behavior: 'auto' };\n// ScrollToIndexOptions keeps its published shape: `{ align }` with `align` required, or `undefined`\nconst publishedScrollOptions: NonNullable<DSChatT.ScrollToIndexOptions> = { align: 'center' };\nconst publishedAlign: 'start' | 'center' | 'end' | 'auto' = publishedScrollOptions.align;\nconst publishedNoScrollOptions: DSChatT.ScrollToIndexOptions = undefined;\nconst handleScrollToIndexWithPublishedOptions = () => actionRef.current.scrollToIndex?.(1, publishedScrollOptions);\nconst handleScrollToIndex = () => actionRef.current.scrollToIndex?.(1);\nconst handleScrollToIndexWithAlign = () => actionRef.current.scrollToIndex?.(1, { align: 'end' });\nconst handleScrollToIndexWithBehavior = () => actionRef.current.scrollToIndex?.(1, { behavior: 'smooth' });\nconst handleFocusToIndexWithBoth = () => actionRef.current.focusToIndex?.(1, { align: 'start', behavior: 'auto' });\nconst handleGetMessagesInView: () => string[] = () => actionRef.current.getMessagesInView?.() ?? [];\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <ChatContainer {...testExplicitDefinition} />\n    <ChatContainer {...testInferedTypeCompatibility} />\n    <ChatContainer {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <ChatContainer\n      messagesListProps={{\n        messages,\n      }}\n      composerProps={{\n        onChange: () => {},\n        onSend: () => {},\n        buttonDisabled: false,\n      }}\n      autoScroll={false}\n      device=\"desktop\"\n      getMoreMessages={() => {}}\n      sendingText=\"Sending...\"\n    />\n    <ChatContainer {...testExplicitDefinition} actionRef={actionRef} />\n    {/* the message list scroll area slot, in object and function form, through messagesListProps */}\n    <ChatContainer\n      {...testExplicitDefinition}\n      messagesListProps={{ messages, dsChatcontainerMessagesListScrollArea: { 'aria-describedby': 'description' } }}\n    />\n    <ChatContainer\n      {...testExplicitDefinition}\n      messagesListProps={{\n        messages,\n        dsChatcontainerMessagesListScrollArea: () => ({ 'aria-describedby': 'description' }),\n      }}\n    />\n  </>\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/DSChatContainerDefinitions.js

@@ -2,9 +2,15 @@ import * as React from "react";
 const DSChatContainerName = "DSChatcontainername";
 const DSChatContainerComposerName = "DSChatcontainercomposer";
 const DSChatContainerMessagesList = "DSChatcontainermessageslist";
+const DSChatContainerSlotName = "DSChatcontainer";
+const DSChatContainerSlots = {
+  MESSAGES_LIST_SCROLL_AREA: "messages-list-scroll-area"
+};
 export {
   DSChatContainerComposerName,
   DSChatContainerMessagesList,
-  DSChatContainerName
+  DSChatContainerName,
+  DSChatContainerSlotName,
+  DSChatContainerSlots
 };
 //# sourceMappingURL=DSChatContainerDefinitions.js.map

package/dist/esm/DSChatContainerDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSChatContainerDefinitions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSChatContainerName = 'DSChatcontainername';\nexport const DSChatContainerComposerName = 'DSChatcontainercomposer';\nexport const DSChatContainerMessagesList = 'DSChatcontainermessageslist';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSChatContainerName = 'DSChatcontainername';\nexport const DSChatContainerComposerName = 'DSChatcontainercomposer';\nexport const DSChatContainerMessagesList = 'DSChatcontainermessageslist';\n\n/**\n * Slot system: the main component and its parts share one slot owner name, each part with its own slot\n * names (the convention of the `ds-chat-container-compliance` change, which moves these into `src/constants/`).\n */\nexport const DSChatContainerSlotName = 'DSChatcontainer';\nexport const DSChatContainerSlots = {\n  MESSAGES_LIST_SCROLL_AREA: 'messages-list-scroll-area',\n} as const;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AAMpC,MAAM,0BAA0B;AAChC,MAAM,uBAAuB;AAAA,EAClC,2BAA2B;AAC7B;",
   "names": []
 }

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

@@ -8,101 +8,162 @@ import { MessageDelimiter } from "@elliemae/ds-chat-message-delimeter";
 import { SystemMessage } from "@elliemae/ds-chat-system-message";
 import {
   StyledWrapperListItem,
-  StyledChatContainerContentList,
-  StyledChatContainerContentListScroll,
+  StyledFastList,
   StyledWrapper,
   StyledLoadMoreContainer,
-  ListItem,
   StyledNewMessagesHiddenContainer
 } from "./styled.js";
 import { ChatContainerMessagesListPropTypes } from "../../react-desc-prop-types.js";
 import { useGetNewMessages } from "./useGetNewMessages.js";
 import { useChatContainerMessageList } from "./useChatContainerMessageList.js";
+import { getMessageFocusId, getMessagePositionId } from "./useMessageFocusTracker.js";
 import { ChatContainerDataTestIds } from "../../ChatContainerDataTestids.js";
+const ESTIMATED_MESSAGE_HEIGHT = 80;
+const estimateSize = () => ESTIMATED_MESSAGE_HEIGHT;
+const WRAPPER_LIST_PROPS = { role: "none" };
+const ItemRenderer = ({ index, extraItemProps }) => {
+  const { messages, sendingMessages, sendingText, focusRequest, focusCallbacks } = extraItemProps ?? {};
+  const row = messages?.[index];
+  const isFocusTarget = Boolean(
+    row && focusRequest && (focusRequest.messageId === getMessageFocusId(row, index) || focusRequest.messageId === getMessagePositionId(index))
+  );
+  const requestId = isFocusTarget && focusRequest ? focusRequest.requestId : 0;
+  const preventScroll = isFocusTarget && focusRequest ? focusRequest.preventScroll : false;
+  const focusRef = React2.useCallback(
+    (node) => {
+      if (!node || !isFocusTarget || !focusCallbacks) return;
+      const item = node.closest("[data-index]");
+      const takeFocus = focusCallbacks.mayTakeFocus(requestId, item);
+      if (!takeFocus) return;
+      item?.focus({ preventScroll: takeFocus === "restore" || preventScroll });
+      focusCallbacks.markFulfilled(requestId);
+    },
+    [isFocusTarget, requestId, preventScroll, focusCallbacks]
+  );
+  if (!row) return null;
+  const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);
+  return /* @__PURE__ */ jsxs(StyledWrapperListItem, { type: row.type, innerRef: focusRef, children: [
+    row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsx(ChatBubble, { ...row, helpMessage: isSending ? sendingText : row.helpMessage }) : null,
+    row.type === BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ jsx(MessageDelimiter, { ...row }) : null,
+    row.type === BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ jsx(SystemMessage, { ...row }) : null
+  ] });
+};
 const ChatContainerMessagesList = (props) => {
   const {
     propsWithDefault,
     globalAttributes,
-    useVirtualHelpers,
+    fastListActionRef,
+    paddingStart,
+    paddingEnd,
     handleKey,
     handleListKey,
     loadMoreRef,
-    virtualListRef
+    virtualListRef,
+    focusTracker
   } = useChatContainerMessageList(props);
   const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;
-  const totalSize = useVirtualHelpers.getTotalSize();
-  const virtualItems = useVirtualHelpers.getVirtualItems();
-  const { measureElement } = useVirtualHelpers;
   const newMessages = useGetNewMessages(messages);
-  const render = React2.useMemo(
-    () => virtualItems.map((virtualItem) => {
-      const { index, start } = virtualItem;
-      const row = messages[index];
-      const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);
-      const style = {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        transform: `translateY(${start}px)`,
-        width: "100%"
-      };
-      return /* @__PURE__ */ jsx(
-        ListItem,
-        {
-          "data-element": "chat-element-list-item",
-          "data-index": index,
-          style,
-          innerRef: measureElement,
-          tabIndex: -1,
-          onKeyDown: handleKey,
-          role: "listitem",
-          children: /* @__PURE__ */ jsxs(StyledWrapperListItem, { type: row.type, children: [
-            row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsx(ChatBubble, { ...row, helpMessage: isSending ? sendingText : row.helpMessage }) : null,
-            row.type === BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ jsx(MessageDelimiter, { ...row }) : null,
-            row.type === BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ jsx(SystemMessage, { ...row }) : null
-          ] })
-        },
-        `ds-chat-bubble-${index}-${row.dsId}-${row.type}`
-      );
-    }),
-    [virtualItems, messages, sendingMessages, handleKey, sendingText, measureElement]
+  const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
+  const getId = React2.useCallback(
+    (index) => `${index}-${messages[index].dsId}-${messages[index].type}`,
+    [messages]
+  );
+  const {
+    focusRequest,
+    mayTakeFocus,
+    markFulfilled,
+    trackFocusedMessage,
+    trackFocusResetter,
+    handleFocusOut,
+    listRootRef
+  } = focusTracker;
+  const focusCallbacks = React2.useMemo(() => ({ mayTakeFocus, markFulfilled }), [mayTakeFocus, markFulfilled]);
+  const extraItemProps = React2.useMemo(
+    () => ({ messages, sendingMessages, sendingText, focusRequest, focusCallbacks }),
+    [messages, sendingMessages, sendingText, focusRequest, focusCallbacks]
   );
-  return /* @__PURE__ */ jsxs(StyledWrapper, { ...globalAttributes, children: [
-    /* @__PURE__ */ jsx(
-      StyledChatContainerContentList,
+  const { onFocus: onFocusFromConsumer, onBlur: onBlurFromConsumer } = globalAttributes;
+  const handleFocusIn = React2.useCallback(
+    (e) => {
+      const item = e.target.closest('[data-element="chat-element-list-item"]');
+      const index = item?.dataset.index;
+      const position = Number(index);
+      const row = index !== void 0 ? messages[position] : void 0;
+      if (row) trackFocusedMessage(getMessageFocusId(row, position));
+      else trackFocusResetter();
+      onFocusFromConsumer?.(e);
+    },
+    [messages, trackFocusedMessage, trackFocusResetter, onFocusFromConsumer]
+  );
+  const handleFocusOutWithConsumer = React2.useCallback(
+    (e) => {
+      handleFocusOut(e);
+      onBlurFromConsumer?.(e);
+    },
+    [handleFocusOut, onBlurFromConsumer]
+  );
+  const itemProps = React2.useMemo(
+    () => ({ "data-element": "chat-element-list-item", tabIndex: -1, onKeyDown: handleKey }),
+    [handleKey]
+  );
+  const extraContent = React2.useMemo(
+    () => !isLoading && hasMoreItems ? /* @__PURE__ */ jsx(StyledLoadMoreContainer, { hasMoreItems, role: "listitem", children: /* @__PURE__ */ jsx(
+      DSButtonV2,
       {
-        "data-testid": ChatContainerDataTestIds.THREAD_CONTAINER,
-        tabIndex: 0,
-        innerRef: virtualListRef,
-        role: "list",
-        onKeyDown: handleListKey,
-        children: /* @__PURE__ */ jsxs(StyledChatContainerContentListScroll, { height: `${totalSize}px`, children: [
-          !isLoading && hasMoreItems ? /* @__PURE__ */ jsx(StyledLoadMoreContainer, { hasMoreItems, role: "listitem", children: /* @__PURE__ */ jsx(
-            DSButtonV2,
-            {
-              buttonType: "outline",
-              onClick: getMoreMessages,
-              "data-testid": ChatContainerDataTestIds.LOAD_MORE_BUTTON,
-              innerRef: loadMoreRef,
-              children: "Load More"
-            }
-          ) }) : null,
-          render
-        ] })
+        buttonType: "outline",
+        onClick: getMoreMessages,
+        "data-testid": ChatContainerDataTestIds.LOAD_MORE_BUTTON,
+        innerRef: loadMoreRef,
+        children: "Load More"
       }
-    ),
-    /* @__PURE__ */ jsx(StyledNewMessagesHiddenContainer, { "aria-live": "polite", "aria-hidden": "false", children: newMessages.map((newMessage) => /* @__PURE__ */ jsxs("p", { children: [
-      newMessage.title,
-      " ",
-      newMessage.time,
-      " ",
-      newMessage.body,
-      " ",
-      newMessage.errorMessage,
-      " ",
-      newMessage.helpMessage
-    ] }, newMessage.dsId)) })
-  ] });
+    ) }) : null,
+    [isLoading, hasMoreItems, getMoreMessages, loadMoreRef]
+  );
+  return /* @__PURE__ */ jsxs(
+    StyledWrapper,
+    {
+      ...globalAttributes,
+      innerRef: listRootRef,
+      onFocus: handleFocusIn,
+      onBlur: handleFocusOutWithConsumer,
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledFastList,
+          {
+            getOwnerProps,
+            "data-testid": ChatContainerDataTestIds.THREAD_CONTAINER,
+            role: "list",
+            tabIndex: 0,
+            onKeyDown: handleListKey,
+            innerRef: virtualListRef,
+            actionRef: fastListActionRef,
+            remountOnCountChange: false,
+            count: messages.length,
+            getId,
+            estimateSize,
+            paddingStart,
+            paddingEnd,
+            ItemRenderer,
+            extraItemProps,
+            extraContent,
+            dsFastlistWrapperList: WRAPPER_LIST_PROPS,
+            dsFastlistItem: itemProps
+          }
+        ),
+        /* @__PURE__ */ jsx(StyledNewMessagesHiddenContainer, { "aria-live": "polite", "aria-hidden": "false", children: newMessages.map((newMessage) => /* @__PURE__ */ jsxs("p", { children: [
+          newMessage.title,
+          " ",
+          newMessage.time,
+          " ",
+          newMessage.body,
+          " ",
+          newMessage.errorMessage,
+          " ",
+          newMessage.helpMessage
+        ] }, newMessage.dsId)) })
+      ]
+    }
+  );
 };
 ChatContainerMessagesList.displayName = "ChatContainerMessagesList";
 const ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);