@webitel/ui-sdk 26.8.104 → 26.8.105

package/dist/{wt-chat-emoji-CdNBvJez.js → wt-chat-emoji-D1RzspYn.js}

@@ -1,4 +1,4 @@
-import "./components-oyMSmFwI.js";
+import "./components-D574RP8y.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { c as t } from "./enums-Bd-8yrmg.js";
 import { t as n } from "./wt-button-BzYDkfhK.js";

package/dist/{wt-display-chip-items-1uWroA2z.js → wt-display-chip-items-D9E7qoJ8.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-oyMSmFwI.js";
+import { C as e, i as t } from "./components-D574RP8y.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./utils-B_8uwL9P.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-expansion-card-CJjtuFDk.js → wt-expansion-card-DzZYhwnW.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { c as t } from "./enums-Bd-8yrmg.js";
 import { t as n } from "./useExpansion-DVdIpoOn.js";
-import "./composables-OP5kSvlh.js";
+import "./composables-Vg-QfE_2.js";
 import { t as r } from "./wt-expand-transition-C2p9bR4j.js";
 import { createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, guardReactiveProps as c, normalizeClass as l, normalizeProps as u, openBlock as d, renderSlot as f, resolveComponent as p, toRef as m, unref as h, vShow as g, withCtx as _, withDirectives as v, withKeys as y } from "vue";
 //#region src/components/wt-expansion-card/wt-expansion-card.vue?vue&type=script&setup=true&lang.ts

package/dist/{wt-galleria-CmaNfz7E.js → wt-galleria-iRpRiDc6.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t } from "./vue-i18n-B88GcHzn.js";
-import { a as n, o as r } from "./composables-OP5kSvlh.js";
+import { a as n, o as r } from "./composables-Vg-QfE_2.js";
 import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, nextTick as h, normalizeClass as g, onMounted as _, onUnmounted as v, openBlock as y, ref as b, renderSlot as x, resolveComponent as S, toDisplayString as C, unref as w, useAttrs as T, useModel as E, vShow as D, watch as O, withCtx as k, withDirectives as A } from "vue";
 //#region src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup.ts
 var j = () => {

package/dist/{wt-send-message-popup-C3qRY8Lk.js → wt-send-message-popup-C_6OHIhY.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./components-oyMSmFwI.js";
+import { n as e } from "./components-D574RP8y.js";
 import "./convertDuration-CGW5IDMW.js";
 import { n as t, r as n } from "./clients-BZ1QzRFi.js";
 import { t as r } from "./vue-i18n-B88GcHzn.js";

package/dist/{wt-table-xmGhfp4p.js → wt-table-_qNHChZt.js}

@@ -4,7 +4,7 @@ import { t as n } from "./wt-badge-lFnfK2an.js";
 import { t as r } from "./vue-i18n-B88GcHzn.js";
 import { n as i, t as a } from "./sortQueryAdapters-CyYXvnDN.js";
 import { t as o } from "./wt-icon-btn-CeGGT2PO.js";
-import { t as s } from "./composables-OP5kSvlh.js";
+import { t as s } from "./composables-Vg-QfE_2.js";
 import { t as c } from "./wt-popover-DuZFw3bg.js";
 import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as h, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as y, nextTick as b, normalizeClass as x, normalizeProps as S, normalizeStyle as C, onMounted as w, onUnmounted as T, openBlock as E, ref as D, renderList as ee, renderSlot as O, resolveComponent as k, resolveDirective as te, toDisplayString as A, unref as j, useSlots as M, useTemplateRef as ne, withCtx as N, withDirectives as P, withModifiers as F } from "vue";
 //#region src/components/wt-table/_internals/wt-table-column-filter.vue?vue&type=script&setup=true&lang.ts
@@ -433,6 +433,6 @@ var I = ["onPointerenter", "onPointerleave"], L = /*#__PURE__*/ e(/* @__PURE__ *
 			]))]);
 		};
 	}
-}), [["__scopeId", "data-v-ac0e4169"]]);
+}), [["__scopeId", "data-v-d94711c3"]]);
 //#endregion
 export { H as default };

package/dist/{wt-type-extension-value-input-CkBr5oPm.js → wt-type-extension-value-input-C9aMICVN.js}

@@ -1,4 +1,4 @@
-import { a as e, o as t, r as n, s as r } from "./components-oyMSmFwI.js";
+import { a as e, o as t, r as n, s as r } from "./components-D574RP8y.js";
 import { t as i } from "./clients-BZ1QzRFi.js";
 import { t as a } from "./enums-Bd-8yrmg.js";
 import { t as o } from "./vue-i18n-B88GcHzn.js";

package/dist/{wt-vidstack-player-P4fT1R6k.js → wt-vidstack-player-CLimONj6.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-oyMSmFwI.js";
+import { w as e } from "./components-D574RP8y.js";
 import "./convertDuration-CGW5IDMW.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { c as n } from "./enums-Bd-8yrmg.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.104",
+	"version": "26.8.105",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",

package/src/components/_internals/composables/useSelect/__tests__/useSelectAutoOpen.spec.ts

@@ -0,0 +1,206 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { defineComponent, ref } from 'vue';
+
+import type { SelectComponentRef } from '../types';
+import { useSelectAutoOpen } from '../useSelectAutoOpen';
+
+const useFakeRaf = () => {
+	const queue: FrameRequestCallback[] = [];
+
+	vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+		queue.push(cb);
+		return queue.length;
+	});
+	vi.stubGlobal('cancelAnimationFrame', vi.fn());
+
+	return {
+		flushFrame: async () => {
+			const pending = queue.splice(0, queue.length);
+			for (const cb of pending) cb(0);
+			await flushPromises();
+		},
+		pendingFrames: () => queue.length,
+	};
+};
+
+const setup = ({
+	autoOpen = true,
+	rects = [
+		{},
+	] as Array<Partial<DOMRect>>,
+	animations = [] as Animation[],
+} = {}) => {
+	const show = vi.fn();
+	let call = 0;
+
+	const el = {
+		getAnimations: () => animations,
+		parentElement: null,
+		getBoundingClientRect: () =>
+			({
+				top: 0,
+				left: 0,
+				width: 100,
+				height: 20,
+				...rects[Math.min(call++, rects.length - 1)],
+			}) as DOMRect,
+	} as unknown as HTMLElement;
+
+	const selectRef = ref<SelectComponentRef | undefined>({
+		show,
+		$el: el,
+	});
+
+	let openWhenSettled = async () => {};
+
+	const wrapper = mount(
+		defineComponent({
+			setup() {
+				({ openWhenSettled } = useSelectAutoOpen(() => autoOpen, selectRef));
+				return () => null;
+			},
+		}),
+	);
+
+	return {
+		show,
+		wrapper,
+		open: async () => {
+			void openWhenSettled();
+			await flushPromises();
+		},
+	};
+};
+
+const neverEndingAnimation = () =>
+	({
+		finished: new Promise<void>(() => {}),
+	}) as unknown as Animation;
+
+describe('useSelectAutoOpen', () => {
+	it('schedules nothing when autoOpen is off', async () => {
+		const raf = useFakeRaf();
+		const { show, open } = setup({
+			autoOpen: false,
+		});
+
+		await open();
+
+		expect(raf.pendingFrames()).toBe(0);
+		expect(show).not.toHaveBeenCalled();
+	});
+
+	it('does not open while an ancestor animation is still running', async () => {
+		const raf = useFakeRaf();
+		const { show, open } = setup({
+			animations: [
+				neverEndingAnimation(),
+			],
+		});
+
+		await open();
+		await raf.flushFrame();
+		await raf.flushFrame();
+
+		expect(show).not.toHaveBeenCalled();
+	});
+
+	it('opens once the ancestor animation resolves and the rect is stable', async () => {
+		const raf = useFakeRaf();
+		const { show, open } = setup({
+			animations: [
+				{
+					finished: Promise.resolve(),
+				} as unknown as Animation,
+			],
+			rects: [
+				{
+					top: 10,
+				},
+			],
+		});
+
+		await open();
+
+		await raf.flushFrame();
+		expect(show).not.toHaveBeenCalled();
+
+		await raf.flushFrame();
+		expect(show).toHaveBeenCalledTimes(1);
+	});
+
+	it('keeps waiting while the trigger is still moving', async () => {
+		const raf = useFakeRaf();
+		const { show, open } = setup({
+			rects: [
+				{
+					top: 0,
+				},
+				{
+					top: 40,
+				},
+				{
+					top: 70,
+				},
+				{
+					top: 80,
+				},
+				{
+					top: 80,
+				},
+			],
+		});
+
+		await open();
+
+		await raf.flushFrame();
+		await raf.flushFrame();
+		await raf.flushFrame();
+		await raf.flushFrame();
+		expect(show).not.toHaveBeenCalled();
+
+		await raf.flushFrame();
+		expect(show).toHaveBeenCalledTimes(1);
+	});
+
+	it('gives up waiting and opens after the frame cap', async () => {
+		const raf = useFakeRaf();
+		const { show, open } = setup({
+			rects: Array.from(
+				{
+					length: 40,
+				},
+				(_, i) => ({
+					top: i * 3,
+				}),
+			),
+		});
+
+		await open();
+		for (let i = 0; i < 30; i += 1) await raf.flushFrame();
+
+		expect(show).toHaveBeenCalledTimes(1);
+	});
+
+	it('stops waiting when the select unmounts', async () => {
+		const raf = useFakeRaf();
+		const { show, wrapper, open } = setup({
+			rects: [
+				{
+					top: 0,
+				},
+				{
+					top: 40,
+				},
+			],
+		});
+
+		await open();
+		await raf.flushFrame();
+		wrapper.unmount();
+		await raf.flushFrame();
+
+		expect(show).not.toHaveBeenCalled();
+	});
+});

package/src/components/_internals/composables/useSelect/types.ts

@@ -64,6 +64,7 @@ export interface UseSelectParams
 		Pick<UseSelectDropdownParams, 'selectId' | 'selectRef' | 'filterInput'> {
 	manualCustomValues?: boolean;
 	isSingle: boolean;
+	autoOpen?: () => boolean | undefined;
 	// biome-ignore lint/suspicious/noExplicitAny: receives the component's typed emit
 	emit?: (event: any, ...args: any[]) => void;
 }

package/src/components/_internals/composables/useSelect/useSelect.ts

@@ -1,5 +1,6 @@
 import { onMounted } from 'vue';
 import type { UseSelectParams } from './types';
+import { useSelectAutoOpen } from './useSelectAutoOpen';
 import { useSelectCustomValues } from './useSelectCustomValues';
 import { useSelectDropdown } from './useSelectDropdown';
 import { useSelectLoader } from './useSelectLoader';
@@ -19,6 +20,7 @@ export const useSelect = ({
 	searchMethod,
 	selectId,
 	isSingle,
+	autoOpen,
 	strictApiOptions = undefined,
 	// biome-ignore lint/suspicious/noExplicitAny: receives the component's typed emit
 	emit = (_event: any, ..._args: any[]) => {},
@@ -70,6 +72,8 @@ export const useSelect = ({
 
 	const { showFooterLoader } = useSelectLoader(isLoading);
 
+	const { openWhenSettled } = useSelectAutoOpen(autoOpen, selectRef);
+
 	const { onInputKeydown } = useSelectCustomValues({
 		selected,
 		filteredOptions,
@@ -85,8 +89,8 @@ export const useSelect = ({
 
 	onMounted(async () => {
 		await fetchSelectedByIds();
-		if (!searchMethod.value) return;
-		fetchOptions();
+		if (searchMethod.value) await fetchOptions();
+		openWhenSettled();
 	});
 
 	const clearValue = () => {

package/src/components/_internals/composables/useSelect/useSelectAutoOpen.ts

@@ -0,0 +1,106 @@
+import { onBeforeUnmount, type Ref } from 'vue';
+
+import type { SelectComponentRef } from './types';
+
+/** ~500ms at 60fps — opens anyway if something animates without end. */
+const MAX_SETTLE_FRAMES = 30;
+
+/** `getAnimations()` marks the real end; polling geometry reads a lull mid-animation as one. */
+const waitForAncestorAnimations = async (el: HTMLElement) => {
+	const animations: Animation[] = [];
+	let node: HTMLElement | null = el;
+
+	while (node) {
+		if (typeof node.getAnimations === 'function') {
+			animations.push(...node.getAnimations());
+		}
+		node = node.parentElement;
+	}
+
+	if (!animations.length) return;
+
+	await Promise.all(
+		animations.map((animation) => animation.finished.catch(() => undefined)),
+	);
+};
+
+/**
+ * Opens the dropdown (`autoOpen`) only once the select has stopped moving.
+ *
+ * In a popover the trigger keeps shifting through the 300ms enter animation,
+ * and primevue aligns the overlay to the trigger's rect — open too early and
+ * the dropdown sits in the wrong place until it snaps. The options half is the
+ * caller's: `useSelect` calls this after the first fetch resolves.
+ *
+ * [WTEL-10353](https://webitel.atlassian.net/browse/WTEL-10353)
+ */
+export const useSelectAutoOpen = (
+	autoOpen: (() => boolean | undefined) | undefined,
+	selectRef: Ref<SelectComponentRef | undefined>,
+) => {
+	let rafId: number | null = null;
+	let isCancelled = false;
+
+	const cancel = () => {
+		isCancelled = true;
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+	};
+
+	const waitForSettledRect = () =>
+		new Promise<void>((resolve) => {
+			let previousRect: DOMRect | undefined;
+			let frames = 0;
+
+			const step = () => {
+				rafId = null;
+				if (isCancelled) return;
+
+				const el = selectRef.value?.$el;
+				if (!el) return;
+
+				const rect = el.getBoundingClientRect();
+				const isSettled =
+					!!previousRect &&
+					rect.top === previousRect.top &&
+					rect.left === previousRect.left &&
+					rect.width === previousRect.width &&
+					rect.height === previousRect.height;
+
+				if (isSettled || ++frames >= MAX_SETTLE_FRAMES) {
+					resolve();
+					return;
+				}
+
+				previousRect = rect;
+				rafId = requestAnimationFrame(step);
+			};
+
+			rafId = requestAnimationFrame(step);
+		});
+
+	const openWhenSettled = async () => {
+		if (!autoOpen?.()) return;
+
+		const el = selectRef.value?.$el;
+		if (!el) return;
+
+		isCancelled = false;
+
+		await waitForAncestorAnimations(el);
+		if (isCancelled) return;
+
+		await waitForSettledRect();
+		if (isCancelled) return;
+
+		selectRef.value?.show?.();
+	};
+
+	onBeforeUnmount(cancel);
+
+	return {
+		openWhenSettled,
+	};
+};

package/src/components/_internals/types/PrimevueInstance.ts

@@ -11,5 +11,6 @@ export interface PrimevueInstance {
 export interface PrimevueOverlayInstance extends PrimevueInstance {
 	overlay?: HTMLElement;
 	alignOverlay?: () => void;
+	show?: (event?: Event) => void;
 	hide?: () => void;
 }

package/src/components/wt-multi-select/wt-multi-select.vue

@@ -167,6 +167,7 @@ interface Props extends Omit<SelectProps, 'options'> {
 	 * false disables options search
 	 */
 	filterable?: boolean;
+	autoOpen?: boolean;
 	/**
 	 * true shows the clear button
 	 */
@@ -260,6 +261,7 @@ const {
 	searchMethod: computed(() => props.searchMethod),
 	selectId: computed(() => selectId),
 	isSingle: false,
+	autoOpen: () => props.autoOpen,
 	strictApiOptions: computed(() => props.strictApiOptions),
 	emit,
 });

package/src/components/wt-single-select/wt-single-select.vue

@@ -140,6 +140,7 @@ interface Props extends Omit<SelectProps, 'size' | 'options'> {
 	 * false disables options search
 	 */
 	filterable?: boolean;
+	autoOpen?: boolean;
 	/**
 	 * true shows the clear button
 	 */
@@ -227,6 +228,7 @@ const {
 	searchMethod: computed(() => props.searchMethod),
 	selectId: computed(() => selectId),
 	isSingle: true,
+	autoOpen: () => props.autoOpen,
 	strictApiOptions: computed(() => props.strictApiOptions),
 	emit,
 });

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

@@ -673,7 +673,13 @@ onUnmounted(() => {
 .wt-table__empty {
   position: absolute;
   inset: 0;
+  z-index: 1;
   display: flex;
+  pointer-events: none;
+}
+
+.wt-table__empty > * {
+  pointer-events: auto;
 }
 
 .wt-table :deep(.wt-table__wrapper--overlay tr.p-datatable-empty-message) {

package/src/modules/UploadCsvPopup/components/wt-upload-csv-popup.vue

@@ -139,63 +139,63 @@ import { ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import useUploadCsv, {
-  type UseUploadCsvProps,
+	type UseUploadCsvProps,
 } from '../composable/useUploadCsv';
 import type { CsvMappingField } from '../scripts/normalizeCSVData';
 import HandlingCSVMode from '../types/WtUploadCSVHandlingMode.enum';
 
 interface CharsetOption {
-  name: string;
-  value: string;
+	name: string;
+	value: string;
 }
 
 interface Props extends UseUploadCsvProps {
-  file: File | null;
-  mappingFields: CsvMappingField[];
+	file: File | null;
+	mappingFields: CsvMappingField[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  file: null,
-  mappingFields: () => [],
-  handlingMode: HandlingCSVMode.PROCESS,
+	file: null,
+	mappingFields: () => [],
+	handlingMode: HandlingCSVMode.PROCESS,
 });
 
 const emit = defineEmits<{
-  (e: 'changeMappingFields', value: unknown[]): void;
-  (e: 'save'): void;
-  (e: 'close'): void;
+	(e: 'changeMappingFields', value: unknown[]): void;
+	(e: 'save'): void;
+	(e: 'close'): void;
 }>();
 
 const { t } = useI18n();
 
 const getFieldLabel = (field: CsvMappingField) =>
-  field.locale ? t(field.locale) : field.name;
+	field.locale ? t(field.locale) : field.name;
 
 const skipHeaders = ref(true);
 const separator = ref(',');
 const charsetOptions = ref<CharsetOption[]>([]);
 const charset = ref<CharsetOption>({
-  name: 'UTF-8',
-  value: 'utf-8',
+	name: 'UTF-8',
+	value: 'utf-8',
 });
 
 const { file, mappingFields } = toRefs(props);
 
 const {
-  isReadingFile,
-  isParsingCSV,
-  isParsingPreview,
-  csvPreviewTableData,
-  csvPreviewTableHeaders,
-  csvColumns,
-  allowSaveAction,
-  processCSV,
-  close,
+	isReadingFile,
+	isParsingCSV,
+	isParsingPreview,
+	csvPreviewTableData,
+	csvPreviewTableHeaders,
+	csvColumns,
+	allowSaveAction,
+	processCSV,
+	close,
 } = useUploadCsv({
-  props,
-  emit,
-  skipHeaders,
-  separator,
+	props,
+	emit,
+	skipHeaders,
+	separator,
 });
 </script>
 

package/src/modules/UploadCsvPopup/composable/__tests__/useUploadCsv.spec.js

@@ -91,7 +91,7 @@ describe('useUploadCsv', () => {
 	it('mounts a component with the composable', () => {
 		const wrapper = shallowMount(Component, {
 			props: {
-				file: {},
+				file: null,
 			},
 		});
 

package/src/modules/UploadCsvPopup/composable/useUploadCsv.ts

@@ -226,7 +226,9 @@ const useUploadCsv = ({
 		(file) => {
 			if (file) initUploadPopup();
 		},
-		{ immediate: true }, // if popup has v-if=file
+		{
+			immediate: true,
+		}, // if popup has v-if=file
 	);
 
 	return {