@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/components/SSelect/SSelect.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,710 @@
+const require_SButton_types = require("../SButton/SButton.types.cjs");
+const require_SButton = require("../SButton/SButton.vue.cjs");
+const require_useAriaAttrs = require("../../composables/useAriaAttrs.cjs");
+const require_SDropdown = require("../SDropdown/SDropdown.vue.cjs");
+const require_SDropdownMenu = require("../SDropdownMenu/SDropdownMenu.vue.cjs");
+const require_SInput_types = require("../SInput/SInput.types.cjs");
+const require_fieldLabelId = require("../SInput/utils/fieldLabelId.cjs");
+const require_SInput = require("../SInput/SInput.vue.cjs");
+const require_SListItem = require("../SListItem/SListItem.vue.cjs");
+const require_SList = require("../SList/SList.vue.cjs");
+const require_buildSelectListItemProps = require("./utils/buildSelectListItemProps.cjs");
+const require_resolveSelectItemValue = require("./utils/resolveSelectItemValue.cjs");
+const require_useSelectState = require("./utils/useSelectState.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+let _vueuse_core = require("@vueuse/core");
+//#region src/components/SSelect/SSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "s-ui-select__empty s-ui-typography-body-14-regular"
+};
+var _hoisted_2 = [
+	"id",
+	"aria-expanded",
+	"aria-controls",
+	"aria-disabled",
+	"aria-readonly",
+	"aria-autocomplete",
+	"tabindex"
+];
+var _hoisted_3 = {
+	key: 0,
+	class: "s-ui-select__value"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "s-ui-select__placeholder"
+};
+var _hoisted_5 = {
+	key: 1,
+	class: "s-ui-select__placeholder"
+};
+var _hoisted_6 = {
+	key: 2,
+	class: "s-ui-select__value"
+};
+var _hoisted_7 = {
+	key: 3,
+	class: "s-ui-select__value-suffix"
+};
+var _hoisted_8 = [
+	"name",
+	"placeholder",
+	"disabled",
+	"readonly"
+];
+var chevronIconSize = 20;
+var defaultPanelWidth = "100%";
+var SELECT_LIST_VIRTUAL_THRESHOLD = 20;
+var SSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "SSelect",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		options: {},
+		itemValue: { default: "value" },
+		itemTitle: { default: "label" },
+		itemSubtitle: { default: "subtitle" },
+		itemId: {},
+		itemDisabled: { default: "disabled" },
+		itemIconLeft: { default: "iconLeft" },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		returnObject: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		closableOptions: {
+			type: Boolean,
+			default: false
+		},
+		searchable: {
+			type: [String, Boolean],
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		listHeight: { default: 320 },
+		searchPlaceholder: { default: "Search" },
+		filterOption: { type: Function },
+		fitViewport: {
+			type: Boolean,
+			default: true
+		},
+		panelWidth: {},
+		surfaceClass: {},
+		canLoadMore: { type: Function },
+		endReachedDistance: { default: 0 },
+		label: {},
+		labelProps: {},
+		placeholder: {},
+		helpMessages: {},
+		errorMessages: {},
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		iconLeft: {},
+		customize: { default: () => require_SInput_types.ESInputCustomize.NONE },
+		name: {},
+		id: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"searchQuery": { default: "" },
+		"searchQueryModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)([
+		"clear",
+		"focus",
+		"blur",
+		"open",
+		"close",
+		"endReached"
+	], ["update:modelValue", "update:searchQuery"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* Select / combobox: триггер `SInput`, панель `SDropdown` + `SList`.
+		* @displayName SSelect
+		*/
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		/**
+		* Текущий поисковый запрос (`v-model:searchQuery`).
+		* Полезен для серверной фильтрации: следите за значением и подменяйте `options`.
+		* Сбрасывается в `''` при закрытии панели, смене `searchable` и очистке значения.
+		*/
+		const searchQuery = (0, vue.useModel)(__props, "searchQuery");
+		const emit = __emit;
+		const { t } = (0, _shtabapp_ui_kit_primitives.useUiKitI18n)();
+		const slots = (0, vue.useSlots)();
+		const { getRootAttrs, getAriaAttrs, getAriaAttr } = require_useAriaAttrs.useAriaAttrs();
+		const generatedTriggerId = (0, vue.useId)();
+		const generatedListboxId = (0, vue.useId)();
+		const rootElementRef = (0, vue.useTemplateRef)("rootElementRef");
+		const triggerInputRef = (0, vue.useTemplateRef)("triggerInputRef");
+		const triggerInputSurrogate = (0, vue.ref)("");
+		const searchInputElementRef = (0, vue.useTemplateRef)("searchInputElementRef");
+		const panelSearchInputElementRef = (0, vue.useTemplateRef)("panelSearchInputElementRef");
+		const listElementRef = (0, vue.useTemplateRef)("listElementRef");
+		const listActiveKey = (0, vue.ref)();
+		const isDropdownOpen = (0, vue.ref)(false);
+		const isFocused = (0, vue.ref)(false);
+		const isPanelWidthMatchingTrigger = (0, vue.computed)(() => __props.panelWidth === void 0);
+		const resolvedPanelWidth = (0, vue.computed)(() => __props.panelWidth ?? defaultPanelWidth);
+		const resolvedItemId = (0, vue.computed)(() => __props.itemId ?? __props.itemValue);
+		const selectItemFields = (0, vue.computed)(() => ({
+			itemValue: __props.itemValue,
+			itemTitle: __props.itemTitle,
+			itemSubtitle: __props.itemSubtitle,
+			itemId: resolvedItemId.value
+		}));
+		const { selectedValues, filteredOptions, listSelectionMode, listSelectedModel, hasSelectedValues, singleDisplayLabel, multipleDisplayLabels, multipleDisplayText, showPlaceholder, showInputSearchField, isSearchableMode, isSearchableInputMode, isSearchableContentMode, isMultipleMode, clearSelection, removeSelectedValue, resolveValueFromListKey, formatSelectListKey } = require_useSelectState.useSelectState({
+			modelValue,
+			options: () => __props.options,
+			itemFields: () => selectItemFields.value,
+			multiple: () => __props.multiple,
+			returnObject: () => __props.returnObject,
+			searchable: () => __props.searchable,
+			filterOption: () => __props.filterOption,
+			isDropdownOpen,
+			searchQuery
+		});
+		const valueSuffixSlotScope = (0, vue.computed)(() => ({
+			disabled: __props.disabled,
+			displayLabel: singleDisplayLabel.value
+		}));
+		const isSelectListVirtual = (0, vue.computed)(() => {
+			return filteredOptions.value.length > SELECT_LIST_VIRTUAL_THRESHOLD;
+		});
+		/**
+		* Высота списка, зафиксированная на первом символе поиска: панель с поиском не прыгает, пока
+		* список сужается, и не стоит пустой на `listHeight`, когда опций мало.
+		*/
+		const searchLockedListHeight = (0, vue.ref)();
+		(0, vue.watch)(searchQuery, (activeQuery, previousQuery) => {
+			if (!activeQuery) {
+				searchLockedListHeight.value = void 0;
+				return;
+			}
+			if (!previousQuery && isSearchableContentMode.value && !isSelectListVirtual.value) {
+				const listElement = listElementRef.value?.$el;
+				searchLockedListHeight.value = listElement instanceof HTMLElement ? listElement.offsetHeight : void 0;
+			}
+		}, { flush: "pre" });
+		const selectListHeight = (0, vue.computed)(() => {
+			if (isSelectListVirtual.value) return __props.listHeight;
+			return searchLockedListHeight.value ?? "auto";
+		});
+		const selectListMaxHeight = (0, vue.computed)(() => {
+			if (isSelectListVirtual.value) return;
+			return __props.listHeight;
+		});
+		const selectedOptionListKeys = (0, vue.computed)(() => {
+			return selectedValues.value.map((valueItem) => formatSelectListKey(valueItem));
+		});
+		const isSelectOptionSelected = (listKey) => {
+			return selectedOptionListKeys.value.includes(listKey);
+		};
+		const getSelectListDefaultItemProps = () => ({ tiny: true });
+		const getSelectListItemProps = (listItemScope) => {
+			return require_buildSelectListItemProps.buildSelectListItemProps({
+				listItemScope,
+				itemTitle: __props.itemTitle,
+				itemSubtitle: __props.itemSubtitle,
+				itemDisabled: __props.itemDisabled,
+				itemIconLeft: __props.itemIconLeft,
+				listActiveKey: listActiveKey.value,
+				isOptionSelected: isSelectOptionSelected(listItemScope.key)
+			});
+		};
+		const handleOptionCloseClick = (listKey) => {
+			const optionValue = resolveValueFromListKey(listKey);
+			if (!require_resolveSelectItemValue.isPresentSelectValue(optionValue)) return;
+			if (isMultipleMode.value) {
+				removeSelectedValue(optionValue);
+				return;
+			}
+			modelValue.value = void 0;
+		};
+		const triggerElementId = (0, vue.computed)(() => __props.id ?? generatedTriggerId);
+		const listboxElementId = (0, vue.computed)(() => generatedListboxId);
+		const triggerLabelElementId = (0, vue.computed)(() => require_fieldLabelId.buildFieldLabelId(triggerElementId.value));
+		/**
+		* Доступное имя combobox и его listbox. `SLabel` указывает `for` на `div` с ролью combobox,
+		* а `div` не связывается с `<label>`, поэтому подпись подключается через `aria-labelledby`.
+		* Приоритет: явные `aria-label`/`aria-labelledby` снаружи, видимая подпись, placeholder.
+		*/
+		const getSelectNameAttrs = () => {
+			const ariaLabel = getAriaAttr("aria-label");
+			const ariaLabelledby = getAriaAttr("aria-labelledby");
+			if (ariaLabel || ariaLabelledby) return {
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby
+			};
+			if (__props.label || slots.label) return { "aria-labelledby": triggerLabelElementId.value };
+			if (__props.placeholder) return { "aria-label": __props.placeholder };
+			return {};
+		};
+		/** Имя панели — то же, что у combobox: панель телепортирована и своей подписи не видит. */
+		const panelLabel = (0, vue.computed)(() => getAriaAttr("aria-label") || __props.label || __props.placeholder);
+		/**
+		* Кольцо фокуса поля: combobox — это `div` в слоте `control`, и фокус-события нативного
+		* `input` от `SInput` до него не доходят.
+		*/
+		const { focused: isFocusWithin } = (0, _vueuse_core.useFocusWithin)(rootElementRef);
+		const getComboboxAriaAttrs = () => {
+			return {
+				...getAriaAttrs(),
+				...getSelectNameAttrs()
+			};
+		};
+		const triggerFieldElementRef = (0, vue.computed)(() => {
+			return triggerInputRef.value?.fieldElementRef ?? null;
+		});
+		const selectionSlotScope = (0, vue.computed)(() => ({
+			labels: multipleDisplayLabels.value,
+			values: selectedValues.value,
+			displayText: multipleDisplayText.value,
+			disabled: __props.disabled || __props.readonly,
+			removeValue: removeSelectedValue
+		}));
+		const triggerTabIndex = (0, vue.computed)(() => {
+			if (__props.disabled) return;
+			if (__props.readonly && !isSearchableInputMode.value) return 0;
+			if (isSearchableInputMode.value) return;
+			return 0;
+		});
+		const rootClasses = (0, vue.computed)(() => ({
+			"s-ui-select--disabled": __props.disabled,
+			"s-ui-select--readonly": __props.readonly,
+			"s-ui-select--multiple": isMultipleMode.value,
+			"s-ui-select--open": isDropdownOpen.value
+		}));
+		const focusSearchInput = () => {
+			if (isSearchableContentMode.value) {
+				panelSearchInputElementRef.value?.focus();
+				return;
+			}
+			searchInputElementRef.value?.focus();
+		};
+		const focusPanelSearchInput = async () => {
+			await (0, vue.nextTick)();
+			panelSearchInputElementRef.value?.focus();
+		};
+		const focusListPanel = async () => {
+			await (0, vue.nextTick)();
+			await listElementRef.value?.focusNavigation();
+		};
+		const openDropdown = async () => {
+			if (__props.disabled || __props.readonly) return;
+			if (isDropdownOpen.value) return;
+			isDropdownOpen.value = true;
+			emit("open");
+			if (isSearchableContentMode.value) {
+				await focusPanelSearchInput();
+				return;
+			}
+			if (isSearchableInputMode.value) {
+				await (0, vue.nextTick)();
+				searchInputElementRef.value?.focus();
+				return;
+			}
+			await focusListPanel();
+		};
+		const handleSearchInputFocus = async () => {
+			if (__props.disabled || __props.readonly) return;
+			if (!isDropdownOpen.value) await openDropdown();
+		};
+		(0, vue.watch)(searchQuery, async (activeQuery) => {
+			if (!isSearchableInputMode.value) return;
+			if (__props.disabled || __props.readonly) return;
+			if (!activeQuery) return;
+			if (!isDropdownOpen.value) await openDropdown();
+		});
+		const closeDropdown = () => {
+			if (!isDropdownOpen.value) return;
+			isDropdownOpen.value = false;
+			listActiveKey.value = void 0;
+			emit("close");
+		};
+		const closeDropdownAfterOptionPick = () => {
+			if (!__props.closeOnSelect || isMultipleMode.value) return;
+			closeDropdown();
+		};
+		(0, vue.watch)(modelValue, (nextValue, previousValue) => {
+			if (!__props.closeOnSelect || isMultipleMode.value || !isDropdownOpen.value) return;
+			if (!nextValue || nextValue === previousValue) return;
+			closeDropdown();
+		});
+		const handleSelectPanelBodyClick = (event) => {
+			if (!isDropdownOpen.value) return;
+			if (!(event.target instanceof Element)) return;
+			if (!event.target.closest(".s-ui-list-item")) return;
+			closeDropdownAfterOptionPick();
+		};
+		const handleSelectPanelBodyKeydown = async (event) => {
+			if (event.key !== "Enter" && event.key !== " " && event.key !== "Spacebar") return;
+			if (!isDropdownOpen.value) return;
+			await (0, vue.nextTick)();
+			closeDropdownAfterOptionPick();
+		};
+		const toggleDropdown = async () => {
+			if (isDropdownOpen.value) {
+				closeDropdown();
+				return;
+			}
+			await openDropdown();
+		};
+		const handleControlClick = async (event) => {
+			if (__props.disabled || __props.readonly) return;
+			if (!(event.target instanceof HTMLElement)) return;
+			if (event.target.closest(".s-ui-select__search-input")) {
+				if (!isDropdownOpen.value) await openDropdown();
+				return;
+			}
+			await toggleDropdown();
+		};
+		const handleChevronClick = async () => {
+			if (__props.disabled || __props.readonly) return;
+			await toggleDropdown();
+		};
+		const handleFocusListOnArrowKeydown = async (event) => {
+			if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return false;
+			event.preventDefault();
+			event.stopPropagation();
+			if (!isDropdownOpen.value) await openDropdown();
+			await focusListPanel();
+			await listElementRef.value?.handleKeyboardNavigation(event);
+			return true;
+		};
+		const commitActiveListOption = (activeKey) => {
+			const activeOptionValue = resolveValueFromListKey(activeKey);
+			if (!activeOptionValue) return;
+			if (isMultipleMode.value) {
+				if (selectedValues.value.some((valueItem) => formatSelectListKey(valueItem) === activeKey)) removeSelectedValue(activeOptionValue);
+				else listSelectedModel.value = [...selectedValues.value.map((valueItem) => formatSelectListKey(valueItem)), activeKey];
+				return;
+			}
+			listSelectedModel.value = activeKey;
+			closeDropdownAfterOptionPick();
+		};
+		const handleTriggerKeydown = async (event) => {
+			if (__props.disabled || __props.readonly) return;
+			if (await handleFocusListOnArrowKeydown(event)) return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				closeDropdown();
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				if (isDropdownOpen.value && listActiveKey.value) {
+					commitActiveListOption(listActiveKey.value);
+					return;
+				}
+				await toggleDropdown();
+			}
+		};
+		const handleSearchInputKeydown = async (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				closeDropdown();
+				return;
+			}
+			await handleFocusListOnArrowKeydown(event);
+		};
+		const handlePanelSearchKeydown = handleSearchInputKeydown;
+		const handleTriggerFocusIn = (event) => {
+			if (__props.disabled) return;
+			if (!isFocused.value) emit("focus", event);
+			isFocused.value = true;
+		};
+		const handleTriggerFocusOut = (event) => {
+			if (!(event.currentTarget instanceof HTMLElement)) return;
+			const nextFocusTarget = event.relatedTarget;
+			if (nextFocusTarget instanceof Node && event.currentTarget.contains(nextFocusTarget)) return;
+			isFocused.value = false;
+			emit("blur", event);
+		};
+		const handleClearClick = () => {
+			clearSelection();
+			emit("clear");
+		};
+		const handleListEndReached = (payload) => {
+			emit("endReached", payload);
+		};
+		__expose({
+			open: openDropdown,
+			close: closeDropdown,
+			toggle: toggleDropdown,
+			focusSearchInput
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+				ref_key: "rootElementRef",
+				ref: rootElementRef,
+				class: ["s-ui-select", rootClasses.value]
+			}, (0, vue.unref)(getRootAttrs)()), [(0, vue.createVNode)((0, vue.unref)(require_SDropdown.default), {
+				modelValue: isDropdownOpen.value,
+				"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isDropdownOpen.value = $event),
+				reference: triggerFieldElementRef.value,
+				disabled: __props.disabled,
+				"match-reference-width": isPanelWidthMatchingTrigger.value,
+				"fit-viewport": __props.fitViewport,
+				"surface-class": __props.surfaceClass,
+				"content-id": listboxElementId.value,
+				"dismiss-on-click-outside": true,
+				"dismiss-on-escape": true,
+				"focus-on-open": false,
+				"panel-label": panelLabel.value
+			}, {
+				content: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_SDropdownMenu.default), {
+					class: "s-ui-select__menu",
+					width: resolvedPanelWidth.value
+				}, (0, vue.createSlots)({
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
+						class: "s-ui-select__menu-body",
+						onClick: handleSelectPanelBodyClick,
+						onKeydown: handleSelectPanelBodyKeydown
+					}, [(0, vue.unref)(filteredOptions).length > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SList.default), (0, vue.mergeProps)({
+						key: 0,
+						ref_key: "listElementRef",
+						ref: listElementRef,
+						modelValue: listActiveKey.value,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => listActiveKey.value = $event),
+						selected: (0, vue.unref)(listSelectedModel),
+						"onUpdate:selected": _cache[3] || (_cache[3] = ($event) => (0, vue.isRef)(listSelectedModel) ? listSelectedModel.value = $event : null),
+						items: (0, vue.unref)(filteredOptions),
+						"item-key": resolvedItemId.value,
+						"title-key": __props.itemTitle,
+						"subtitle-key": __props.itemSubtitle,
+						"icon-left-key": __props.itemIconLeft,
+						"disabled-key": __props.itemDisabled,
+						"selection-mode": (0, vue.unref)(listSelectionMode),
+						mandatory: !__props.multiple,
+						height: selectListHeight.value,
+						"max-height": selectListMaxHeight.value,
+						virtual: isSelectListVirtual.value,
+						"item-props": getSelectListDefaultItemProps,
+						"selected-on-top": (0, vue.unref)(isMultipleMode),
+						"can-load-more": __props.canLoadMore,
+						"end-reached-distance": __props.endReachedDistance
+					}, getSelectNameAttrs(), { onEndReached: handleListEndReached }), (0, vue.createSlots)({ _: 2 }, [(0, vue.unref)(slots).option || (0, vue.unref)(slots)["option-icon"] || __props.closableOptions || (0, vue.unref)(isMultipleMode) ? {
+						name: "item",
+						fn: (0, vue.withCtx)((listItemScope) => [(0, vue.unref)(slots).option ? (0, vue.renderSlot)(_ctx.$slots, "option", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, listItemScope))) : __props.closableOptions ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SListItem.default), (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, getSelectListItemProps(listItemScope))), (0, vue.createSlots)({ _: 2 }, [(0, vue.unref)(slots)["option-icon"] ? {
+							name: "icon-left",
+							fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "option-icon", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(listItemScope)))]),
+							key: "0"
+						} : void 0, isSelectOptionSelected(listItemScope.key) ? {
+							name: "right",
+							fn: (0, vue.withCtx)((actionSlotProps) => [(0, vue.createVNode)((0, vue.unref)(require_SButton.default), {
+								appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).BARE,
+								variant: (0, vue.unref)(require_SButton_types.EButtonVariant).NEUTRAL,
+								size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+								icon: "closeMini",
+								"aria-label": (0, vue.unref)(t)("select.removeOption"),
+								disabled: actionSlotProps.disabled || actionSlotProps.readonly,
+								tabindex: -1,
+								onClick: (0, vue.withModifiers)(($event) => handleOptionCloseClick(listItemScope.key), ["stop"])
+							}, null, 8, [
+								"appearance",
+								"variant",
+								"size",
+								"aria-label",
+								"disabled",
+								"onClick"
+							])]),
+							key: "1"
+						} : void 0]), 1040)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SListItem.default), (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 2 }, getSelectListItemProps(listItemScope))), (0, vue.createSlots)({ _: 2 }, [(0, vue.unref)(slots)["option-icon"] ? {
+							name: "icon-left",
+							fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "option-icon", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(listItemScope)))]),
+							key: "0"
+						} : void 0]), 1040))]),
+						key: "0"
+					} : void 0]), 1040, [
+						"modelValue",
+						"selected",
+						"items",
+						"item-key",
+						"title-key",
+						"subtitle-key",
+						"icon-left-key",
+						"disabled-key",
+						"selection-mode",
+						"mandatory",
+						"height",
+						"max-height",
+						"virtual",
+						"selected-on-top",
+						"can-load-more",
+						"end-reached-distance"
+					])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "empty", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("select.noOptions")), 1)])]))], 32)]),
+					_: 2
+				}, [(0, vue.unref)(isSearchableContentMode) || (0, vue.unref)(slots)["panel-header"] ? {
+					name: "header",
+					fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "panel-header"), (0, vue.unref)(isSearchableContentMode) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SInput.default), {
+						key: 0,
+						ref_key: "panelSearchInputElementRef",
+						ref: panelSearchInputElementRef,
+						modelValue: searchQuery.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+						placeholder: __props.searchPlaceholder,
+						disabled: __props.disabled,
+						clearable: false,
+						"aria-label": __props.searchPlaceholder,
+						"icon-left": "search",
+						onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)(() => {}, ["stop"])),
+						onKeydown: (0, vue.unref)(handlePanelSearchKeydown)
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"disabled",
+						"aria-label",
+						"onKeydown"
+					])) : (0, vue.createCommentVNode)("", true)]),
+					key: "0"
+				} : void 0, (0, vue.unref)(slots)["panel-footer"] ? {
+					name: "footer",
+					fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "panel-footer")]),
+					key: "1"
+				} : void 0]), 1032, ["width"])]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"reference",
+				"disabled",
+				"match-reference-width",
+				"fit-viewport",
+				"surface-class",
+				"content-id",
+				"panel-label"
+			]), (0, vue.createVNode)((0, vue.unref)(require_SInput.default), {
+				ref_key: "triggerInputRef",
+				ref: triggerInputRef,
+				modelValue: triggerInputSurrogate.value,
+				"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => triggerInputSurrogate.value = $event),
+				label: __props.label,
+				"label-props": __props.labelProps,
+				placeholder: __props.placeholder,
+				"help-messages": __props.helpMessages,
+				"error-messages": __props.errorMessages,
+				bordered: __props.bordered,
+				disabled: __props.disabled,
+				readonly: __props.readonly,
+				clearable: __props.clearable,
+				"has-value": (0, vue.unref)(hasSelectedValues),
+				focused: (0, vue.unref)(isFocusWithin) || isDropdownOpen.value,
+				"icon-left": __props.iconLeft,
+				customize: __props.customize,
+				name: __props.name,
+				id: triggerElementId.value,
+				onClear: handleClearClick,
+				onFocus: handleTriggerFocusIn,
+				onBlur: handleTriggerFocusOut
+			}, (0, vue.createSlots)({
+				control: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
+					id: triggerElementId.value,
+					class: ["s-ui-select__control s-ui-typography-body-14-regular", {
+						"s-ui-select__control--multiple": (0, vue.unref)(isMultipleMode),
+						"s-ui-select__control--empty": (0, vue.unref)(isMultipleMode) && !(0, vue.unref)(hasSelectedValues) && !(0, vue.unref)(showInputSearchField),
+						"s-ui-select__control--with-value-suffix": (0, vue.unref)(slots)["value-suffix"] && !(0, vue.unref)(isMultipleMode) && !(0, vue.unref)(showInputSearchField) && !(0, vue.unref)(showPlaceholder)
+					}],
+					role: "combobox",
+					"aria-expanded": isDropdownOpen.value,
+					"aria-controls": listboxElementId.value,
+					"aria-haspopup": "listbox",
+					"aria-disabled": __props.disabled ? true : void 0,
+					"aria-readonly": __props.readonly ? true : void 0,
+					"aria-autocomplete": (0, vue.unref)(isSearchableMode) ? "list" : void 0
+				}, getComboboxAriaAttrs(), {
+					tabindex: triggerTabIndex.value,
+					onClick: handleControlClick,
+					onKeydown: handleTriggerKeydown
+				}), [
+					(0, vue.unref)(isMultipleMode) ? (0, vue.renderSlot)(_ctx.$slots, "selection", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, selectionSlotScope.value)), () => [(0, vue.unref)(multipleDisplayText) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3, (0, vue.toDisplayString)((0, vue.unref)(multipleDisplayText)), 1)) : (0, vue.unref)(showPlaceholder) && !(0, vue.unref)(showInputSearchField) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4, (0, vue.toDisplayString)(__props.placeholder), 1)) : (0, vue.createCommentVNode)("", true)]) : (0, vue.unref)(showPlaceholder) && !(0, vue.unref)(showInputSearchField) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5, (0, vue.toDisplayString)(__props.placeholder), 1)) : !(0, vue.unref)(showInputSearchField) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6, (0, vue.toDisplayString)((0, vue.unref)(singleDisplayLabel)), 1)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(slots)["value-suffix"] && !(0, vue.unref)(isMultipleMode) && !(0, vue.unref)(showInputSearchField) && !(0, vue.unref)(showPlaceholder) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_7, [(0, vue.renderSlot)(_ctx.$slots, "value-suffix", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(valueSuffixSlotScope.value)))])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(showInputSearchField) ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("input", (0, vue.mergeProps)({
+						key: 4,
+						ref_key: "searchInputElementRef",
+						ref: searchInputElementRef,
+						"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => searchQuery.value = $event),
+						class: "s-ui-select__search-input",
+						type: "text",
+						name: __props.name,
+						placeholder: __props.placeholder,
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						autocomplete: "off"
+					}, getSelectNameAttrs(), {
+						onClick: _cache[6] || (_cache[6] = (0, vue.withModifiers)(() => {}, ["stop"])),
+						onFocus: handleSearchInputFocus,
+						onKeydown: handleSearchInputKeydown
+					}), null, 16, _hoisted_8)), [[vue.vModelText, searchQuery.value]]) : (0, vue.createCommentVNode)("", true)
+				], 16, _hoisted_2)]),
+				action: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+					name: "chevronMiniDown",
+					size: chevronIconSize,
+					class: "s-ui-select__chevron",
+					onClick: handleChevronClick
+				})]),
+				_: 2
+			}, [
+				(0, vue.unref)(slots).label ? {
+					name: "label",
+					fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label")]),
+					key: "0"
+				} : void 0,
+				(0, vue.unref)(slots).prefix ? {
+					name: "prefix",
+					fn: (0, vue.withCtx)((prefixSlotProps) => [(0, vue.renderSlot)(_ctx.$slots, "prefix", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(prefixSlotProps)))]),
+					key: "1"
+				} : void 0,
+				(0, vue.unref)(slots).prepend ? {
+					name: "prepend",
+					fn: (0, vue.withCtx)((prependSlotProps) => [(0, vue.renderSlot)(_ctx.$slots, "prepend", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(prependSlotProps)))]),
+					key: "2"
+				} : void 0,
+				(0, vue.unref)(slots).message ? {
+					name: "message",
+					fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "message")]),
+					key: "3"
+				} : void 0
+			]), 1032, [
+				"modelValue",
+				"label",
+				"label-props",
+				"placeholder",
+				"help-messages",
+				"error-messages",
+				"bordered",
+				"disabled",
+				"readonly",
+				"clearable",
+				"has-value",
+				"focused",
+				"icon-left",
+				"customize",
+				"name",
+				"id"
+			])], 16);
+		};
+	}
+});
+//#endregion
+exports.default = SSelect_vue_vue_type_script_setup_true_lang_default;