@uzum-tech/ui 1.12.21 → 1.13.0

package/es/date-picker-v2/styles/light.d.ts

@@ -0,0 +1,477 @@
+import { ThemeCommonVars } from '../../_styles/common';
+export declare const self: (vars: ThemeCommonVars) => {
+    panelColor: string;
+    panelBoxShadow: string;
+    panelBorderRadius: string;
+    panelTextColor: string;
+    dividerColor: string;
+    itemTextColor: string;
+    itemTextColorOtherMonth: string;
+    itemTextColorDisabled: string;
+    itemColorHover: string;
+    itemColorActive: string;
+    itemColorIncluded: string;
+    itemTextColorActive: string;
+    itemBorderRadius: string;
+    iconColor: string;
+    iconColorDisabled: string;
+    weekdayTextColor: string;
+    weekendTextColor: string;
+    monthItemHeight: string;
+    monthItemColorHover: string;
+    monthItemColorActive: string;
+    monthItemTextColorActive: string;
+    yearTriggerColor: string;
+    yearTriggerColorHover: string;
+    yearTriggerTextColor: string;
+    currentDateIndicatorColor: string;
+};
+export type DatePickerV2ThemeVars = ReturnType<typeof self>;
+declare const datePickerV2Light: import("../../_mixins").Theme<"DatePickerV2", {
+    panelColor: string;
+    panelBoxShadow: string;
+    panelBorderRadius: string;
+    panelTextColor: string;
+    dividerColor: string;
+    itemTextColor: string;
+    itemTextColorOtherMonth: string;
+    itemTextColorDisabled: string;
+    itemColorHover: string;
+    itemColorActive: string;
+    itemColorIncluded: string;
+    itemTextColorActive: string;
+    itemBorderRadius: string;
+    iconColor: string;
+    iconColorDisabled: string;
+    weekdayTextColor: string;
+    weekendTextColor: string;
+    monthItemHeight: string;
+    monthItemColorHover: string;
+    monthItemColorActive: string;
+    monthItemTextColorActive: string;
+    yearTriggerColor: string;
+    yearTriggerColorHover: string;
+    yearTriggerTextColor: string;
+    currentDateIndicatorColor: string;
+}, {
+    Button: import("../../_mixins").Theme<"Button", {
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        borderRadiusTiny: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        opacityDisabled: string;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
+        colorOpacitySecondaryFocus: string;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
+        waveColorSecondary: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
+        colorTertiaryDisalbed: string;
+        waveColorTertiary: string;
+        textColorTextTertiary: string;
+        rippleColorTertiary: string;
+        colorQuaternary: string;
+        colorQuaternaryHover: string;
+        colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
+        color: string;
+        colorHover: string;
+        colorPressed: string;
+        colorFocus: string;
+        colorDisabled: string;
+        textColor: string;
+        textTertiary: string;
+        textColorTertiary: string;
+        textColorHover: string;
+        textColorPressed: string;
+        textColorFocus: string;
+        textColorDisabled: string;
+        textColorText: string;
+        textColorTextHover: string;
+        textColorTextPressed: string;
+        textColorTextFocus: string;
+        textColorTextDisabled: string;
+        textColorGhost: string;
+        textColorGhostHover: string;
+        textColorGhostPressed: string;
+        textColorGhostFocus: string;
+        textColorGhostDisabled: string;
+        border: string;
+        borderHover: string;
+        borderPressed: string;
+        borderFocus: string;
+        borderDisabled: string;
+        rippleColor: string;
+        colorPrimary: string;
+        colorHoverPrimary: string;
+        colorPressedPrimary: string;
+        colorFocusPrimary: string;
+        colorDisabledPrimary: string;
+        waveColorPrimary: string;
+        textColorPrimary: string;
+        textColorHoverPrimary: string;
+        textColorPressedPrimary: string;
+        textColorFocusPrimary: string;
+        textColorDisabledPrimary: string;
+        textColorTextPrimary: string;
+        textColorTextHoverPrimary: string;
+        textColorTextPressedPrimary: string;
+        textColorTextFocusPrimary: string;
+        textColorTextDisabledPrimary: string;
+        textColorGhostPrimary: string;
+        textColorGhostHoverPrimary: string;
+        textColorGhostPressedPrimary: string;
+        textColorGhostFocusPrimary: string;
+        textColorGhostDisabledPrimary: string;
+        borderPrimary: string;
+        borderHoverPrimary: string;
+        borderPressedPrimary: string;
+        borderFocusPrimary: string;
+        borderDisabledPrimary: string;
+        rippleColorPrimary: string;
+        colorInfo: string;
+        colorHoverInfo: string;
+        colorPressedInfo: string;
+        colorFocusInfo: string;
+        colorDisabledInfo: string;
+        textColorInfo: string;
+        textColorHoverInfo: string;
+        textColorPressedInfo: string;
+        textColorFocusInfo: string;
+        textColorDisabledInfo: string;
+        textColorTextInfo: string;
+        textColorTextHoverInfo: string;
+        textColorTextPressedInfo: string;
+        textColorTextFocusInfo: string;
+        textColorTextDisabledInfo: string;
+        textColorGhostInfo: string;
+        textColorGhostHoverInfo: string;
+        textColorGhostPressedInfo: string;
+        textColorGhostFocusInfo: string;
+        textColorGhostDisabledInfo: string;
+        borderInfo: string;
+        borderHoverInfo: string;
+        borderPressedInfo: string;
+        borderFocusInfo: string;
+        borderDisabledInfo: string;
+        rippleColorInfo: string;
+        colorSuccess: string;
+        colorHoverSuccess: string;
+        colorPressedSuccess: string;
+        colorFocusSuccess: string;
+        colorDisabledSuccess: string;
+        textColorSuccess: string;
+        textColorHoverSuccess: string;
+        textColorPressedSuccess: string;
+        textColorFocusSuccess: string;
+        textColorDisabledSuccess: string;
+        textColorTextSuccess: string;
+        textColorTextHoverSuccess: string;
+        textColorTextPressedSuccess: string;
+        textColorTextFocusSuccess: string;
+        textColorTextDisabledSuccess: string;
+        textColorGhostSuccess: string;
+        textColorGhostHoverSuccess: string;
+        textColorGhostPressedSuccess: string;
+        textColorGhostFocusSuccess: string;
+        textColorGhostDisabledSuccess: string;
+        borderSuccess: string;
+        borderHoverSuccess: string;
+        borderPressedSuccess: string;
+        borderFocusSuccess: string;
+        borderDisabledSuccess: string;
+        rippleColorSuccess: string;
+        colorWarning: string;
+        colorHoverWarning: string;
+        colorPressedWarning: string;
+        colorFocusWarning: string;
+        colorDisabledWarning: string;
+        textColorWarning: string;
+        textColorHoverWarning: string;
+        textColorPressedWarning: string;
+        textColorFocusWarning: string;
+        textColorDisabledWarning: string;
+        textColorTextWarning: string;
+        textColorTextHoverWarning: string;
+        textColorTextPressedWarning: string;
+        textColorTextFocusWarning: string;
+        textColorTextDisabledWarning: string;
+        textColorGhostWarning: string;
+        textColorGhostHoverWarning: string;
+        textColorGhostPressedWarning: string;
+        textColorGhostFocusWarning: string;
+        textColorGhostDisabledWarning: string;
+        borderWarning: string;
+        borderHoverWarning: string;
+        borderPressedWarning: string;
+        borderFocusWarning: string;
+        borderDisabledWarning: string;
+        rippleColorWarning: string;
+        colorError: string;
+        colorHoverError: string;
+        colorPressedError: string;
+        colorFocusError: string;
+        colorDisabledError: string;
+        textColorError: string;
+        textColorHoverError: string;
+        textColorPressedError: string;
+        textColorFocusError: string;
+        textColorDisabledError: string;
+        textColorTextError: string;
+        textColorTextHoverError: string;
+        textColorTextPressedError: string;
+        textColorTextFocusError: string;
+        textColorTextDisabledError: string;
+        textColorGhostError: string;
+        textColorGhostHoverError: string;
+        textColorGhostPressedError: string;
+        textColorGhostFocusError: string;
+        textColorGhostDisabledError: string;
+        borderError: string;
+        borderHoverError: string;
+        borderPressedError: string;
+        borderFocusError: string;
+        borderDisabledError: string;
+        rippleColorError: string;
+        waveOpacity: string;
+        fontWeight: string;
+        fontWeightStrong: string;
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingRoundTiny: string;
+        paddingRoundSmall: string;
+        paddingRoundMedium: string;
+        paddingRoundLarge: string;
+        iconMarginTiny: string;
+        iconMarginSmall: string;
+        iconMarginMedium: string;
+        iconMarginLarge: string;
+        iconSizeTiny: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        rippleDuration: string;
+    }, any>;
+    Input: import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
+        countTextColorDisabled: string;
+        countTextColor: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        heightHuge: string;
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        lineHeight: string;
+        lineHeightTextarea: string;
+        borderRadius: string;
+        iconSize: string;
+        groupLabelTextColor: string;
+        textColor: string;
+        textColorDisabled: string;
+        textDecorationColor: string;
+        caretColor: string;
+        placeholderColor: string;
+        placeholderColorDisabled: string;
+        color: string;
+        colorDisabled: string;
+        colorFocus: string;
+        groupLabelBorder: string;
+        border: string;
+        borderHover: string;
+        borderDisabled: string;
+        borderFocus: string;
+        boxShadowFocus: string;
+        loadingColor: string;
+        loadingColorWarning: string;
+        borderWarning: string;
+        borderHoverWarning: string;
+        colorFocusWarning: string;
+        borderFocusWarning: string;
+        boxShadowFocusWarning: string;
+        caretColorWarning: string;
+        loadingColorError: string;
+        borderError: string;
+        borderHoverError: string;
+        colorFocusError: string;
+        borderFocusError: string;
+        boxShadowFocusError: string;
+        caretColorError: string;
+        clearColor: string;
+        clearColorHover: string;
+        clearColorPressed: string;
+        iconColor: string;
+        iconColorDisabled: string;
+        iconColorHover: string;
+        iconColorPressed: string;
+        suffixTextColor: string;
+        selectionColor: string;
+    }, any>;
+    Select: import("../../_mixins").Theme<"InternalSelection", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSizeTiny: string;
+        clearSizeSmall: string;
+        clearSizeMedium: string;
+        clearSizeLarge: string;
+        clearSizeHuge: string;
+        arrowSizeTiny: string;
+        arrowSizeSmall: string;
+        arrowSizeMedium: string;
+        arrowSizeLarge: string;
+        arrowSizeHuge: string;
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        lineHeightTiny: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        lineHeightHuge: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        heightHuge: string;
+        borderRadiusTiny: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        borderRadiusHuge: string;
+        textColor: string;
+        textColorDisabled: string;
+        placeholderColor: string;
+        placeholderColorDisabled: string;
+        color: string;
+        colorFilled: string;
+        colorDisabled: string;
+        colorActive: string;
+        border: string;
+        borderFilled: string;
+        borderHover: string;
+        borderActive: string;
+        borderFocus: string;
+        borderDisabled: string;
+        boxShadowHover: string;
+        boxShadowActive: string;
+        boxShadowFocus: string;
+        caretColor: string;
+        arrowColor: string;
+        arrowColorHover: string;
+        arrowColorDisabled: string;
+        loadingColor: string;
+        borderWarning: string;
+        borderHoverWarning: string;
+        borderActiveWarning: string;
+        borderFocusWarning: string;
+        boxShadowHoverWarning: string;
+        boxShadowActiveWarning: string;
+        boxShadowFocusWarning: string;
+        colorActiveWarning: string;
+        caretColorWarning: string;
+        borderError: string;
+        borderHoverError: string;
+        borderActiveError: string;
+        borderFocusError: string;
+        boxShadowHoverError: string;
+        boxShadowActiveError: string;
+        boxShadowFocusError: string;
+        colorActiveError: string;
+        caretColorError: string;
+        clearColor: string;
+        clearColorHover: string;
+        clearColorPressed: string;
+        caretColorSecondary: string;
+        filterCounterTextColor: string;
+        filterCounterTextColorDisabled: string;
+        arrowColorSecondary: string;
+        clearColorSecondary: string;
+        colorSecondary: string;
+        textColorSecondary: string;
+        borderSecondary: string;
+        arrowColorDisabledSecondary: string;
+        clearColorDisabledSecondary: string;
+        colorDisabledSecondary: string;
+        textColorDisabledSecondary: string;
+        borderDisabledSecondary: string;
+        arrowColorHoverSecondary: string;
+        clearColorHoverSecondary: string;
+        colorHoverSecondary: string;
+        textColorHoverSecondary: string;
+        borderHoverSecondary: string;
+        arrowColorFocusSecondary: string;
+        clearColorFocusSecondary: string;
+        colorFocusSecondary: string;
+        textColorFocusSecondary: string;
+        borderFocusSecondary: string;
+        arrowColorActiveSecondary: string;
+        clearColorActiveSecondary: string;
+        colorActiveSecondary: string;
+        textColorActiveSecondary: string;
+        borderActiveSecondary: string;
+    }, {
+        Popover: import("../../_mixins").Theme<"Popover", {
+            space: string;
+            spaceArrow: string;
+            arrowOffset: string;
+            arrowOffsetVertical: string;
+            arrowHeight: string;
+            padding: string;
+            fontSize: string;
+            borderRadius: string;
+            color: string;
+            dividerColor: string;
+            textColor: string;
+            boxShadow: string;
+        }, any>;
+    }>;
+    Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>;
+}>;
+export default datePickerV2Light;
+export type DatePickerV2Theme = typeof datePickerV2Light;

package/es/date-picker-v2/styles/light.js

@@ -0,0 +1,56 @@
+import { inputLight } from '../../input/styles';
+import { buttonLight } from '../../button/styles';
+import { internalSelectionLight } from '../../_internal/selection/styles';
+import { commonLight } from '../../_styles/common';
+import { scrollbarLight } from '../../_internal/scrollbar/styles';
+import { createTheme } from '../../_mixins';
+export const self = (vars) => {
+    const { brandPrimary100, brandPrimary500, transparencySecondary, elementsTertiary, elementsQuaternary, textPrimary, textSecondary, borderRadiusSmall, borderRadiusLarge, containerPrimary, elementsPrimary, shadowDepth2, brandQuinary500, brandPrimary10 } = vars;
+    return {
+        // Panel
+        panelColor: containerPrimary,
+        panelBoxShadow: shadowDepth2,
+        panelBorderRadius: borderRadiusLarge,
+        panelTextColor: textPrimary,
+        // Divider
+        dividerColor: elementsQuaternary,
+        // Item (date cell)
+        itemTextColor: textPrimary,
+        itemTextColorOtherMonth: textSecondary,
+        itemTextColorDisabled: transparencySecondary,
+        itemColorHover: elementsTertiary,
+        itemColorActive: brandPrimary100,
+        itemColorIncluded: brandPrimary10,
+        itemTextColorActive: textPrimary,
+        itemBorderRadius: borderRadiusSmall,
+        // Icons
+        iconColor: elementsPrimary,
+        iconColorDisabled: transparencySecondary,
+        // Weekdays
+        weekdayTextColor: textPrimary,
+        weekendTextColor: brandQuinary500,
+        // Month items
+        monthItemHeight: '48px',
+        monthItemColorHover: elementsTertiary,
+        monthItemColorActive: brandPrimary100,
+        monthItemTextColorActive: brandPrimary500,
+        // Year trigger
+        yearTriggerColor: elementsTertiary,
+        yearTriggerColorHover: elementsQuaternary,
+        yearTriggerTextColor: textSecondary,
+        // Current date indicator
+        currentDateIndicatorColor: textPrimary
+    };
+};
+const datePickerV2Light = createTheme({
+    name: 'DatePickerV2',
+    common: commonLight,
+    peers: {
+        Button: buttonLight,
+        Input: inputLight,
+        Select: internalSelectionLight,
+        Scrollbar: scrollbarLight
+    },
+    self
+});
+export default datePickerV2Light;

package/es/dialog/src/DialogProvider.d.ts

@@ -288,6 +288,7 @@ export declare const UDialogProvider: import("vue").DefineComponent<{
                     brand150: string;
                     brand350: string;
                     brand550: string;
+                    brandPrimary10: string;
                     brandPrimary50: string;
                     brandPrimary100: string;
                     brandPrimary200: string;
@@ -656,6 +657,7 @@ export declare const UDialogProvider: import("vue").DefineComponent<{
                     brand150: string;
                     brand350: string;
                     brand550: string;
+                    brandPrimary10: string;
                     brandPrimary50: string;
                     brandPrimary100: string;
                     brandPrimary200: string;

package/es/header/src/Header.js

@@ -318,7 +318,10 @@ export default defineComponent({
         const navigationNode = resolveWrappedSlot($slots.navigation, (children) => children !== null && children !== void 0 ? children : null) || (h(HeaderNavigation, { menuOptions: this.menuOptions, menuPlacement: this.menuPlacement, menuTrigger: this.menuTrigger, menuValue: this.mergedMenuValue, menuTabsProps: this.menuTabsProps, menuCardMinColumnWidth: this.menuCardMinColumnWidth, mergedClsPrefix: mergedClsPrefix, menuPaneClass: this.menuPaneClass, menuPaneWrapperClass: this.menuPaneWrapperClass, activeMenuKey: this.mergedActiveMenuKey, onUpdateMenuValue: this.handleMenuValueUpdate, onUpdateActiveMenuKey: this.handleUpdateActiveMenuKey }));
         const mobileNode = this.responsive && this.isMobile ? (h(HeaderMobile, { visible: this.mobileMenuVisible, menuOptions: this.normalizedMenuItems, activeMenuValue: this.mergedMenuValue, langOptions: this.langOptions || defaultLangOptions, currentLang: this.currentLang, mergedClsPrefix: mergedClsPrefix, cssVars: this.cssVars, menuType: this.mobileMenuType, showFooterActions: this.mobileShowFooterActions, showHeaderActions: this.mobileShowHeaderActions, primaryActionText: this.mobilePrimaryActionText, secondaryActionText: this.mobileSecondaryActionText, onToggle: this.toggleMobileMenu, onClose: this.closeMobileMenu, onMenuItemClick: this.handleMobileMenuItemClick, onLanguageSelect: this.handleSelectLang, onPrimaryAction: this.handleMobilePrimaryAction, onSecondaryAction: this.handleMobileSecondaryAction, onSearchClick: this.handleSearchClick, onPreview: this.handlePreviewClick, onLogout: this.handleLogoutClick }, {
             actions: $slots['mobile-actions'],
-            footer: $slots['mobile-footer']
+            footer: $slots['mobile-footer'],
+            search: $slots['mobile-search'],
+            preview: $slots['mobile-preview'],
+            logout: $slots['mobile-logout']
         })) : null;
         const langNode = resolveWrappedSlot($slots.lang, (children) => children);
         const searchNode = resolveWrappedSlot($slots.search, (children) => children);

package/es/header/src/HeaderSearchDesktop.d.ts

@@ -49,6 +49,18 @@ declare const _default: import("vue").DefineComponent<{
     search: import("vue").Ref<string>;
     searchText: import("vue").ComputedRef<string>;
     placeholder: import("vue").ComputedRef<string>;
+    inputInstRef: import("vue").Ref<{
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | null>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly searchValue: {
         readonly type: StringConstructor;

package/es/header/src/HeaderSearchDesktop.js

@@ -1,4 +1,5 @@
-import { h, defineComponent, computed, ref } from 'vue';
+import { h, defineComponent, computed, ref, withDirectives, onMounted } from 'vue';
+import { clickoutside } from 'vdirs';
 import { UButton } from '../../button';
 import { UIcon } from '../../icon';
 import { UInput } from '../../input';
@@ -38,15 +39,21 @@ export default defineComponent({
         const search = ref('');
         const searchText = computed(() => localeRef.value.desktopSearchTitle);
         const placeholder = computed(() => localeRef.value.searchPlaceholder);
+        const inputInstRef = ref(null);
+        onMounted(() => {
+            var _a;
+            (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+        });
         return {
             search,
             searchText,
-            placeholder
+            placeholder,
+            inputInstRef
         };
     },
     render() {
         const blockClass = `${this.mergedClsPrefix}-header-search-desktop`;
-        return (h("div", { class: blockClass, style: this.cssVars },
+        const content = (h("div", { class: blockClass, style: this.cssVars },
             h(UButton, { text: true, class: `${blockClass}__close`, onClick: this.onSearchClose }, {
                 default: () => (h(UIcon, { size: 24, color: "#C5C7CA" }, { default: () => h(CloseIcon, null) }))
             }),
@@ -54,7 +61,7 @@ export default defineComponent({
                 h(UText, { variant: "title-l-medium", text: this.searchText })),
             h("div", { class: `${blockClass}__content` },
                 h("div", { class: `${blockClass}__input-wrapper` },
-                    h(UInput, { value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
+                    h(UInput, { ref: "inputInstRef", value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
                             var _a, _b;
                             if (e.key === 'Enter') {
                                 (_a = this.onSearchSubmit) === null || _a === void 0 ? void 0 : _a.call(this);
@@ -73,5 +80,15 @@ export default defineComponent({
                 cssVars: this.cssVars,
                 onSelect: this.onResultSelect
             })));
+        if (!this.onSearchClose)
+            return content;
+        return withDirectives(content, [
+            [
+                clickoutside,
+                this.onSearchClose,
+                undefined,
+                { capture: true }
+            ]
+        ]);
     }
 });

package/es/header/src/HeaderSearchMobile.d.ts

@@ -46,6 +46,18 @@ declare const _default: import("vue").DefineComponent<{
         disabled?: boolean | undefined;
     }[]>;
     searchLoading: import("vue").Ref<boolean>;
+    inputInstRef: import("vue").Ref<{
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | null>;
     handleSearchInput: (value: string) => void;
     handleSearch: () => Promise<void>;
     handleClose: () => void;