@webitel/ui-sdk 26.8.126 → 26.8.128

package/dist/{wt-chat-emoji-DUrA-v1_.js → wt-chat-emoji-DScnZq3L.js}

@@ -1,4 +1,4 @@
-import "./components-BAjXjwgz.js";
+import "./components-ClBeAarp.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { m as t } from "./enums-Xag5PrU-.js";
 import { t as n } from "./wt-button-BfNbgYHy.js";

package/dist/{wt-display-chip-items-CZvSZVP_.js → wt-display-chip-items-T7QK4gFh.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-BAjXjwgz.js";
+import { C as e, i as t } from "./components-ClBeAarp.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./utils-B4S9Yz-y.js";
 import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";

package/dist/{wt-send-message-popup-DphWte4I.js → wt-send-message-popup-DXWOn8eg.js}

@@ -1,6 +1,6 @@
-import { n as e } from "./components-BAjXjwgz.js";
+import { n as e } from "./components-ClBeAarp.js";
 import "./convertDuration-B5bq1uxb.js";
-import { i as t, r as n } from "./clients-DV2KSEHt.js";
+import { i as t, r as n } from "./clients-BIYo95Lm.js";
 import { n as r } from "./vue-i18n-VBiROMZ4.js";
 import { n as i } from "./useEventBus-B-ZeklLu.js";
 import { createBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, onMounted as u, openBlock as d, ref as f, resolveComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";

package/dist/{wt-type-extension-value-input-BjmJrhU5.js → wt-type-extension-value-input-BsIDJ-6K.js}

@@ -1,8 +1,8 @@
 import { a as e, c as t, i as n, n as r, r as i, s as a, t as o } from "./dist-EXdgfpvN.js";
 import { n as s } from "./genClient-CvWlQ0TZ.js";
 import { a as c } from "./caseConverters-DGri4uJo.js";
-import { a as l, o as u, r as d, s as f } from "./components-BAjXjwgz.js";
-import { a as p, n as m, t as h } from "./clients-DV2KSEHt.js";
+import { a as l, o as u, r as d, s as f } from "./components-ClBeAarp.js";
+import { a as p, n as m, t as h } from "./clients-BIYo95Lm.js";
 import { a as g, b as _, d as v, f as y, g as b, i as x, n as S, o as C, r as w, s as T, t as E, x as D } from "./enums-Xag5PrU-.js";
 import { n as ee, t as te } from "./vue-i18n-VBiROMZ4.js";
 import "./wt-toast-BScwyGca.js";

package/dist/{wt-vidstack-player-Zns27bwa.js → wt-vidstack-player-C_miJ8JF.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-BAjXjwgz.js";
+import { w as e } from "./components-ClBeAarp.js";
 import "./convertDuration-B5bq1uxb.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { m as n } from "./enums-Xag5PrU-.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.126",
+	"version": "26.8.128",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -65,6 +65,7 @@
 		"@tinymce/tinymce-vue": "^6.3.0",
 		"@vuepic/vue-datepicker": "^4.5.1",
 		"@vueuse/components": "^14.0.0",
+		"@vueuse/core": "^14.0.0",
 		"autosize": "^6.0.1",
 		"csv-parse": "^7.0.2",
 		"csv-stringify": "^5.5.3",

package/src/components/wt-layout/__tests__/WtLayout.spec.js

@@ -1,4 +1,4 @@
-import { mount, shallowMount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 
 import WtLayout from '../wt-layout.vue';
 
@@ -137,6 +137,45 @@ describe('WtLayout', () => {
 		wrapper.unmount();
 	});
 
+	it('reports the rendered width, keeping the preferred one when shrunk', async () => {
+		let notify;
+		vi.stubGlobal(
+			'ResizeObserver',
+			class {
+				constructor(callback) {
+					notify = callback;
+				}
+				observe() {}
+				disconnect() {}
+			},
+		);
+		const wrapper = shallowMount(WtLayout, {
+			props: {
+				defaultWidth: 480,
+				resizable: true,
+			},
+		});
+		await flushPromises();
+		// container got narrower: flex shrinks the layout below its preferred width
+		notify([
+			{
+				borderBoxSize: [
+					{
+						inlineSize: 400.4,
+						blockSize: 600,
+					},
+				],
+			},
+		]);
+		await wrapper.vm.$nextTick();
+
+		expect(
+			wrapper.find('.wt-layout__resizer').attributes('aria-valuenow'),
+		).toBe('400');
+		expect(wrapper.element.style.flexBasis).toBe('480px');
+		vi.unstubAllGlobals();
+	});
+
 	it('resizes with arrow keys', async () => {
 		const { wrapper, layout } = mountPair({
 			resizable: true,

package/src/components/wt-layout/wt-layout.vue

@@ -11,7 +11,7 @@
     <slot />
     <div
       v-if="resizable"
-      :aria-valuenow="width"
+      :aria-valuenow="Math.round(renderedWidth)"
       :class="`wt-layout__resizer--${resizeEdge}`"
       aria-orientation="vertical"
       class="wt-layout__resizer"
@@ -24,6 +24,7 @@
 </template>
 
 <script setup lang="ts">
+import { useElementSize } from '@vueuse/core';
 import { onBeforeUnmount, ref, useTemplateRef, watch } from 'vue';
 
 /**
@@ -56,9 +57,22 @@ const emit = defineEmits<{
 }>();
 
 const KEYBOARD_STEP = 16;
+const KEY_DIRECTION: Partial<Record<string, 1 | -1>> = {
+	ArrowLeft: -1,
+	ArrowRight: 1,
+};
 
 const root = useTemplateRef<HTMLElement>('root');
+/**
+ * Preferred width: what the user dragged to. A fixed layout may still render
+ * narrower (it shrinks with its container) and returns to this width once
+ * there is room again.
+ */
 const width = ref<number | undefined>(props.defaultWidth);
+/** Width actually on screen, kept in sync with container resizes. */
+const { width: renderedWidth } = useElementSize(root, undefined, {
+	box: 'border-box',
+});
 const resizing = ref(false);
 
 watch(
@@ -133,10 +147,7 @@ const startResize = (event: PointerEvent) => {
 
 const handleResizerKeydown = (event: KeyboardEvent) => {
 	if (!root.value) return;
-	const keyDirection = {
-		ArrowLeft: -1,
-		ArrowRight: 1,
-	}[event.key];
+	const keyDirection = KEY_DIRECTION[event.key];
 	if (!keyDirection) return;
 	event.preventDefault();