@uzum-tech/ui 1.12.12 → 1.12.14

package/es/chat/src/ChatListItems.js

@@ -10,6 +10,7 @@ import { chatLight } from '../styles';
 import { useConfig, useTheme, useThemeClass, useLocale } from '../../_mixins';
 import { CheckmarkDoneSharp, MdTime, PersonOutline, Refresh } from '../../_internal/icons';
 import { UFlex } from '../../flex';
+import { UText } from '../../typography';
 const statusIconMapper = {
     [MessageStatus.READ]: CheckmarkDoneSharp,
     [MessageStatus.PENDING]: MdTime,
@@ -127,24 +128,21 @@ export default defineComponent({
                                 : '?';
                     }
                 })),
-                header: () => (h("span", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title` }, typeof item.title === 'function' ? item.title() : item.title)),
-                description: () => (h("span", { class: [
+                header: () => (h(UText, { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title`, variant: "body-l-medium" }, {
+                    default: () => typeof item.title === 'function' ? item.title() : item.title
+                })),
+                description: () => (h(UText, { class: [
                         `${mergedClsPrefixRef.value}-chat-sidebar__item-subtitle`,
                         isTyping && 'typing'
-                    ], style: {
-                        display: 'block',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        minWidth: 0,
-                        maxWidth: '100%'
-                    } }, isTyping
-                    ? mergedTypingTextRef.value
-                    : typeof item.subtitle === 'string'
-                        ? item.subtitle
-                        : typeof item.subtitle === 'function'
-                            ? item.subtitle()
-                            : item.subtitle)),
+                    ], variant: "body-m-medium" }, {
+                    default: () => isTyping
+                        ? mergedTypingTextRef.value
+                        : typeof item.subtitle === 'string'
+                            ? item.subtitle
+                            : typeof item.subtitle === 'function'
+                                ? item.subtitle()
+                                : item.subtitle
+                })),
                 suffix: () => {
                     const displayUnreadCount = item.unreadCount || 0;
                     const hasUnreadIncoming = displayUnreadCount > 0;

package/es/chat/src/ChatMessages.d.ts

@@ -6205,7 +6205,6 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     renderMessage: (message: ChatMessageData) => JSX.Element;
     renderMarkMessage: (message: ChatMessageData) => JSX.Element;
-    renderTypingIndicator: () => JSX.Element;
     renderSkeletonMessage: (isOwn: boolean, index: number) => JSX.Element;
     renderDateSeparator: (date: string) => JSX.Element;
     renderUnreadNotification: () => JSX.Element;

package/es/chat/src/ChatMessages.js

@@ -95,7 +95,6 @@ export default defineComponent({
             };
         });
         const themeClassHandle = useThemeClass('chat-messages', computed(() => ''), cssVarsRef, props);
-        const mergedTypingTextRef = computed(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
         const mergedRetryTextRef = computed(() => { var _a; return (_a = props.retryText) !== null && _a !== void 0 ? _a : localeRef.value.retryText; });
         const mergedUnreadNotificationTextRef = computed(() => { var _a; return (_a = props.unreadNotificationText) !== null && _a !== void 0 ? _a : localeRef.value.unreadNotificationText; });
         const unreadMessagesCount = computed(() => {
@@ -260,23 +259,6 @@ export default defineComponent({
                                 ], theme: themeRef.value.peers.StatusIcon, themeOverrides: themeRef.value.peerOverrides.StatusIcon }))))))))));
             return messageContent;
         };
-        const renderTypingIndicator = () => {
-            return (h("div", { class: [
-                    `${mergedClsPrefixRef.value}-chat-main__message`,
-                    `${mergedClsPrefixRef.value}-chat-main__message--other`
-                ] },
-                h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
-                    h("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--typing`
-                        ] }),
-                    h("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta--other`
-                        ] },
-                        h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, mergedTypingTextRef.value)))));
-        };
         const renderSkeletonMessage = (isOwn, index) => {
             return (h("div", { key: `skeleton-${index}`, class: [
                     `${mergedClsPrefixRef.value}-chat-main__message`,
@@ -306,7 +288,6 @@ export default defineComponent({
             mergedTheme: themeRef,
             renderMessage,
             renderMarkMessage,
-            renderTypingIndicator,
             renderSkeletonMessage,
             renderDateSeparator,
             renderUnreadNotification,
@@ -320,9 +301,9 @@ export default defineComponent({
         };
     },
     render() {
-        var _a, _b, _c;
+        var _a, _b;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        const { mergedClsPrefixRef, renderMessage, renderMarkMessage, renderTypingIndicator, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
+        const { mergedClsPrefixRef, renderMessage, renderMarkMessage, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
         if (this.loading) {
             return (h("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
                 h("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
@@ -383,7 +364,6 @@ export default defineComponent({
                 id: 'unread-notification'
             });
         }
-        const isTyping = this.selectedChatId && ((_c = this.typingChatIds) === null || _c === void 0 ? void 0 : _c.includes(this.selectedChatId));
         return (h("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
             h("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
                     border: 'none',
@@ -398,21 +378,19 @@ export default defineComponent({
                             event.preventDefault();
                             this.contextMenuShow = false;
                         }
-                    } },
-                    messagesWithDates.map((item) => {
-                        var _a;
-                        if (item.type === 'date-separator') {
-                            return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');
-                        }
-                        if (item.type === 'unread-notification') {
-                            return renderUnreadNotification();
-                        }
-                        const message = item;
-                        if (message.type === ChatMessageType.MARK) {
-                            return renderMarkMessage(message);
-                        }
-                        return renderMessage(message);
-                    }),
-                    isTyping && renderTypingIndicator()))));
+                    } }, messagesWithDates.map((item) => {
+                    var _a;
+                    if (item.type === 'date-separator') {
+                        return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');
+                    }
+                    if (item.type === 'unread-notification') {
+                        return renderUnreadNotification();
+                    }
+                    const message = item;
+                    if (message.type === ChatMessageType.MARK) {
+                        return renderMarkMessage(message);
+                    }
+                    return renderMessage(message);
+                })))));
     }
 });

package/es/chat/src/ChatParts/MainArea.js

@@ -44,6 +44,11 @@ export default defineComponent({
                 return 0;
             return messagesRef.value.filter((msg) => !msg.isOwn && msg.status === MessageStatus.UNREAD).length;
         });
+        const isTyping = computed(() => {
+            if (!selectedChatRef.value || !typingChatIdsRef.value)
+                return false;
+            return typingChatIdsRef.value.includes(selectedChatRef.value.id);
+        });
         const showNotificationManually = ref(false);
         const hasUnreadMessages = ref(false);
         const unreadCountOnOpen = ref(0);
@@ -183,9 +188,16 @@ export default defineComponent({
                         const keyId = toKeyString(chat === null || chat === void 0 ? void 0 : chat.id);
                         const keyTitle = toKeyString(chat === null || chat === void 0 ? void 0 : chat.title);
                         return (h(Fragment, null,
-                            h(UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
-                                default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
-                            }),
+                            h(UFlex, { vertical: true, size: [0, 0], justify: 'flex-start"' },
+                                h(UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
+                                    default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
+                                }),
+                                isTyping.value && (h(UText, { class: [
+                                        `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
+                                        'typing'
+                                    ], variant: "body-m-medium" }, {
+                                    default: () => { var _a; return (_a = typingTextRef.value) !== null && _a !== void 0 ? _a : ''; }
+                                }))),
                             h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
                                 default: () => resolveSlot(slots.headerActions, () => {
                                     const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);

package/es/chat/src/styles/index.cssr.js

@@ -72,53 +72,28 @@ export default cB('chat', `
  background-color: var(--u-sidebar-item-background-color-selected);
  `, [c('&:hover', `
  background-color: var(--u-sidebar-item-background-color-selected);
- `)]), cM('typing', `
- .u-list-item__description {
- color: var(--u-color-primary) !important;
- font-style: italic;
- }
- `), c('&:hover', `
+ `)]), c('&:hover', `
  background-color: var(--u-sidebar-item-background-color-hover);
  `, [cM('selected', `
  background-color: var(--u-sidebar-item-background-color-selected);
  `)])]), cE('item-title', `
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
  color: var(--u-sidebar-item-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+ margin-bottom: 0;
  `), cE('item-subtitle', `
- font-size: 12px;
- line-height: 16px;
+ display: block;
  color: var(--u-sidebar-item-subtitle-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
- `, [cM('typing', `
- color: var(--u-color-primary);
- font-style: italic;
- `)]), cE('item-main', `
+ minWidth: 0;
+ maxWidth: 100%;
+ `), cE('item-main', `
  flex: 1;
  min-width: 0;
  margin-right: 12px;
- `), cE('item-title', `
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
- color: var(--u-text-color-base);
- margin-bottom: 2px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- `), cE('item-subtitle', `
- font-size: 12px;
- line-height: 16px;
- color: var(--u-text-color-disabled);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
  `), cE('item-indicators', `
  display: flex;
  flex-direction: column;
@@ -157,10 +132,9 @@ export default cB('chat', `
  `, [cE('header', `
  border-bottom: 1px solid var(--u-border-color);
  width: 100%;
- padding: 24px 20px 8px 24px;
+ padding: 24px 20px 10px 24px;
  flex-shrink: 0;
  `), cE('header-title', `
- margin-top: 9px;
  color: var(--u-header-title-color);
  flex: 1;
  min-width: 0;
@@ -169,6 +143,14 @@ export default cB('chat', `
  white-space: nowrap;
  display: block;
  margin-right: 16px;
+ `), cE('header-subtitle', `
+ display: block;
+ color: var(--u-sidebar-item-subtitle-color);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ minWidth: 0;
+ maxWidth: 100%;
  `), cE('header-actions', `
  padding: 4px;
  flex-shrink: 0;

package/es/config-provider/src/ConfigProvider.d.ts

@@ -1,8 +1,8 @@
-import { type PropType, type ComputedRef, type ExtractPropTypes } from 'vue';
+import { type PropType, type ExtractPropTypes } from 'vue';
 import { type Hljs } from '../../_mixins';
 import type { UDateLocale, ULocale } from '../../locales';
 import type { GlobalTheme, GlobalThemeOverrides, GlobalComponentConfig, GlobalIconConfig } from './interface';
-import type { RtlProp, Breakpoints, BreakpointProps, BreakpointThemeOverrides } from './internal-interface';
+import type { RtlProp, Breakpoints, BreakpointProps, BreakpointThemeOverrides, BreakpointMode } from './internal-interface';
 import type { Katex } from './katex';
 export declare const configProviderProps: {
     readonly abstract: BooleanConstructor;
@@ -31,6 +31,10 @@ export declare const configProviderProps: {
     readonly breakpoints: PropType<Breakpoints>;
     readonly breakpointProps: PropType<BreakpointProps>;
     readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
+    readonly breakpointMode: {
+        readonly type: PropType<BreakpointMode>;
+        readonly default: "desktop-first";
+    };
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
@@ -70,6 +74,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly breakpoints: PropType<Breakpoints>;
     readonly breakpointProps: PropType<BreakpointProps>;
     readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
+    readonly breakpointMode: {
+        readonly type: PropType<BreakpointMode>;
+        readonly default: "desktop-first";
+    };
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
@@ -81,11 +89,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
 }, {
-    mergedClsPrefix: ComputedRef<string>;
-    mergedBordered: ComputedRef<boolean | undefined>;
-    mergedNamespace: ComputedRef<string | undefined>;
-    mergedTheme: ComputedRef<GlobalTheme | undefined>;
-    mergedThemeOverrides: ComputedRef<GlobalThemeOverrides | undefined>;
+    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedBordered: import("vue").ComputedRef<boolean | undefined>;
+    mergedNamespace: import("vue").ComputedRef<string | undefined>;
+    mergedTheme: import("vue").ComputedRef<GlobalTheme | undefined>;
+    mergedThemeOverrides: import("vue").ComputedRef<GlobalThemeOverrides | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly abstract: BooleanConstructor;
     readonly bordered: {
@@ -113,6 +121,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly breakpoints: PropType<Breakpoints>;
     readonly breakpointProps: PropType<BreakpointProps>;
     readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
+    readonly breakpointMode: {
+        readonly type: PropType<BreakpointMode>;
+        readonly default: "desktop-first";
+    };
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
@@ -128,6 +140,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly bordered: boolean | undefined;
     readonly clsPrefix: string;
     readonly tag: string;
+    readonly breakpointMode: BreakpointMode;
     readonly preflightStyleDisabled: boolean;
     readonly inlineThemeDisabled: boolean;
     readonly as: string | undefined;

package/es/config-provider/src/ConfigProvider.js

@@ -29,6 +29,10 @@ export const configProviderProps = {
     breakpoints: Object,
     breakpointProps: Object,
     breakpointThemeOverrides: Object,
+    breakpointMode: {
+        type: String,
+        default: 'desktop-first'
+    },
     preflightStyleDisabled: Boolean,
     inlineThemeDisabled: {
         type: Boolean,
@@ -53,7 +57,7 @@ export default defineComponent({
         const mergedThemeRef = computed(() => {
             const { theme } = props;
             if (theme === null)
-                return undefined;
+                return;
             const inheritedTheme = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedThemeRef.value;
             return theme === undefined
                 ? inheritedTheme
@@ -61,30 +65,64 @@ export default defineComponent({
                     ? theme
                     : Object.assign({}, inheritedTheme, theme);
         });
-        const getActiveBreakpointValue = (breakpointMap) => {
-            if (!breakpointMap || !isBrowser) {
-                return undefined;
-            }
-            const currentWidth = windowWidthRef.value;
+        const mergedBreakpointModeRef = computed(() => {
+            const { breakpointMode } = props;
+            return (breakpointMode ||
+                (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointModeRef.value) ||
+                'desktop-first');
+        });
+        const getMergedBreakpointValues = (breakpointMap) => {
+            if (!breakpointMap)
+                return;
             const breakpointWidths = Object.keys(breakpointMap)
                 .map(Number)
-                .filter((width) => width <= currentWidth)
-                .sort((a, b) => b - a);
-            if (breakpointWidths.length === 0) {
-                return undefined;
+                .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+            const mergedMap = {};
+            let previousValue;
+            for (const width of breakpointWidths) {
+                if (previousValue !== undefined) {
+                    mergedMap[width] = merge({}, previousValue, breakpointMap[width]);
+                }
+                else {
+                    mergedMap[width] = breakpointMap[width];
+                }
+                previousValue = mergedMap[width];
+            }
+            return mergedMap;
+        };
+        const getActiveBreakpointValue = (breakpointMap, mode = 'desktop-first') => {
+            if (!breakpointMap || !isBrowser)
+                return;
+            const mergedMap = getMergedBreakpointValues(breakpointMap);
+            if (!mergedMap)
+                return;
+            const currentWidth = windowWidthRef.value;
+            const breakpointWidths = Object.keys(mergedMap).map(Number);
+            let matchingBreakpoints;
+            if (mode === 'mobile-first') {
+                matchingBreakpoints = breakpointWidths
+                    .filter((width) => width >= currentWidth)
+                    .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+            }
+            else {
+                matchingBreakpoints = breakpointWidths
+                    .filter((width) => width <= currentWidth)
+                    .sort((leftWidth, rightWidth) => rightWidth - leftWidth);
             }
-            const activeBreakpoint = breakpointWidths[0];
-            return breakpointMap[activeBreakpoint];
+            if (matchingBreakpoints.length === 0)
+                return;
+            const activeBreakpoint = matchingBreakpoints[0];
+            return mergedMap[activeBreakpoint];
         };
-        const activeBreakPointThemeOverridesRef = computed(() => {
+        const activeBreakpointThemeOverridesRef = computed(() => {
             const { breakpointThemeOverrides } = props;
             const breakpointThemeOverridesToUse = breakpointThemeOverrides !== null && breakpointThemeOverrides !== void 0 ? breakpointThemeOverrides : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointThemeOverridesRef.value;
-            return getActiveBreakpointValue(breakpointThemeOverridesToUse);
+            return getActiveBreakpointValue(breakpointThemeOverridesToUse, mergedBreakpointModeRef.value);
         });
         const mergedThemeOverridesRef = computed(() => {
             const { themeOverrides } = props;
             if (themeOverrides === null)
-                return undefined;
+                return;
             let baseThemeOverrides;
             if (themeOverrides === undefined) {
                 baseThemeOverrides = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedThemeOverridesRef.value;
@@ -98,14 +136,14 @@ export default defineComponent({
                     baseThemeOverrides = merge({}, inheritedThemeOverrides, themeOverrides);
                 }
             }
-            const activeBreakPointThemeOverrides = activeBreakPointThemeOverridesRef.value;
-            if (!activeBreakPointThemeOverrides) {
+            const activeBreakpointThemeOverrides = activeBreakpointThemeOverridesRef.value;
+            if (!activeBreakpointThemeOverrides) {
                 return baseThemeOverrides;
             }
             if (!baseThemeOverrides) {
-                return activeBreakPointThemeOverrides;
+                return activeBreakpointThemeOverrides;
             }
-            return merge({}, baseThemeOverrides, activeBreakPointThemeOverrides);
+            return merge({}, baseThemeOverrides, activeBreakpointThemeOverrides);
         });
         const mergedNamespaceRef = useMemo(() => {
             const { namespace } = props;
@@ -140,24 +178,24 @@ export default defineComponent({
                 window.removeEventListener('resize', updateWindowWidth);
             }
         });
-        const activeBreakPointPropsRef = computed(() => {
+        const activeBreakpointPropsRef = computed(() => {
             const { breakpointProps } = props;
             const breakpointPropsToUse = breakpointProps !== null && breakpointProps !== void 0 ? breakpointProps : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointPropsRef.value;
-            return getActiveBreakpointValue(breakpointPropsToUse);
+            return getActiveBreakpointValue(breakpointPropsToUse, mergedBreakpointModeRef.value);
         });
         const mergedComponentPropsRef = computed(() => {
             const { componentOptions } = props;
             const baseComponentOptions = componentOptions !== undefined
                 ? componentOptions
                 : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedComponentPropsRef.value;
-            const activeBreakPointProps = activeBreakPointPropsRef.value;
-            if (!activeBreakPointProps) {
+            const activeBreakpointProps = activeBreakpointPropsRef.value;
+            if (!activeBreakpointProps) {
                 return baseComponentOptions;
             }
             if (!baseComponentOptions) {
-                return activeBreakPointProps;
+                return activeBreakpointProps;
             }
-            return merge({}, baseComponentOptions, activeBreakPointProps);
+            return merge({}, baseComponentOptions, activeBreakpointProps);
         });
         const mergedClsPrefixRef = computed(() => {
             const { clsPrefix } = props;
@@ -227,13 +265,16 @@ export default defineComponent({
             mergedComponentPropsRef,
             mergedBreakpointPropsRef,
             mergedBreakpointThemeOverridesRef,
+            mergedBreakpointModeRef,
+            activeBreakpointPropsRef,
+            activeBreakpointThemeOverridesRef,
             mergedBorderedRef,
             mergedNamespaceRef,
             mergedClsPrefixRef,
             mergedLocaleRef: computed(() => {
                 const { locale } = props;
                 if (locale === null)
-                    return undefined;
+                    return;
                 return locale === undefined
                     ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedLocaleRef.value
                     : locale;
@@ -241,7 +282,7 @@ export default defineComponent({
             mergedDateLocaleRef: computed(() => {
                 const { dateLocale } = props;
                 if (dateLocale === null)
-                    return undefined;
+                    return;
                 return dateLocale === undefined
                     ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedDateLocaleRef.value
                     : dateLocale;

package/es/config-provider/src/interface.d.ts

@@ -13,4 +13,4 @@ export type GlobalThemeOverrides = {
 } & {
     [key in keyof GlobalThemeWithoutCommon]?: ExtractThemeOverrides<GlobalThemeWithoutCommon[key]>;
 };
-export type { GlobalIconConfig, GlobalComponentConfig, BreakpointProps, BreakpointThemeOverrides } from './internal-interface';
+export type { GlobalIconConfig, GlobalComponentConfig, BreakpointProps, BreakpointThemeOverrides, BreakpointMode } from './internal-interface';

package/es/config-provider/src/internal-interface.d.ts

@@ -429,6 +429,7 @@ export type RtlEnabledState = Partial<Record<keyof GlobalThemeWithoutCommon, Rtl
 export type Breakpoints = Record<string, number> | undefined;
 export type BreakpointProps = Record<number, GlobalComponentConfig> | undefined;
 export type BreakpointThemeOverrides = Record<number, GlobalThemeOverrides> | undefined;
+export type BreakpointMode = 'mobile-first' | 'desktop-first';
 export interface ConfigProviderInjection {
     mergedBreakpointsRef: Ref<Breakpoints | undefined>;
     mergedClsPrefixRef: Ref<string>;
@@ -446,6 +447,9 @@ export interface ConfigProviderInjection {
     mergedThemeHashRef: Ref<string>;
     mergedBreakpointPropsRef: Ref<BreakpointProps | undefined>;
     mergedBreakpointThemeOverridesRef: Ref<BreakpointThemeOverrides | undefined>;
+    mergedBreakpointModeRef: Ref<BreakpointMode>;
+    activeBreakpointPropsRef: Ref<GlobalComponentConfig | undefined>;
+    activeBreakpointThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>;
     inlineThemeDisabled: boolean;
     preflightStyleDisabled: boolean;
 }

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.12";
+declare const _default: "1.12.14";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.12.12';
+export default '1.12.14';

package/lib/chat/src/ChatListItems.js

@@ -16,6 +16,7 @@ const styles_1 = require("../styles");
 const _mixins_1 = require("../../_mixins");
 const icons_1 = require("../../_internal/icons");
 const flex_1 = require("../../flex");
+const typography_1 = require("../../typography");
 const statusIconMapper = {
     [interface_1.MessageStatus.READ]: icons_1.CheckmarkDoneSharp,
     [interface_1.MessageStatus.PENDING]: icons_1.MdTime,
@@ -133,24 +134,21 @@ exports.default = (0, vue_1.defineComponent)({
                                 : '?';
                     }
                 })),
-                header: () => ((0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title` }, typeof item.title === 'function' ? item.title() : item.title)),
-                description: () => ((0, vue_1.h)("span", { class: [
+                header: () => ((0, vue_1.h)(typography_1.UText, { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title`, variant: "body-l-medium" }, {
+                    default: () => typeof item.title === 'function' ? item.title() : item.title
+                })),
+                description: () => ((0, vue_1.h)(typography_1.UText, { class: [
                         `${mergedClsPrefixRef.value}-chat-sidebar__item-subtitle`,
                         isTyping && 'typing'
-                    ], style: {
-                        display: 'block',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        minWidth: 0,
-                        maxWidth: '100%'
-                    } }, isTyping
-                    ? mergedTypingTextRef.value
-                    : typeof item.subtitle === 'string'
-                        ? item.subtitle
-                        : typeof item.subtitle === 'function'
-                            ? item.subtitle()
-                            : item.subtitle)),
+                    ], variant: "body-m-medium" }, {
+                    default: () => isTyping
+                        ? mergedTypingTextRef.value
+                        : typeof item.subtitle === 'string'
+                            ? item.subtitle
+                            : typeof item.subtitle === 'function'
+                                ? item.subtitle()
+                                : item.subtitle
+                })),
                 suffix: () => {
                     const displayUnreadCount = item.unreadCount || 0;
                     const hasUnreadIncoming = displayUnreadCount > 0;

package/lib/chat/src/ChatMessages.d.ts

@@ -6205,7 +6205,6 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     renderMessage: (message: ChatMessageData) => JSX.Element;
     renderMarkMessage: (message: ChatMessageData) => JSX.Element;
-    renderTypingIndicator: () => JSX.Element;
     renderSkeletonMessage: (isOwn: boolean, index: number) => JSX.Element;
     renderDateSeparator: (date: string) => JSX.Element;
     renderUnreadNotification: () => JSX.Element;