@retailcrm/embed-ui-v1-components 0.9.11 → 0.9.12

package/dist/host.cjs

@@ -9583,7 +9583,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     const width = vue.ref("auto");
     const visible = vue.computed(() => props.opened);
     const autoScroll = async () => {
-      const option = scrollable.value?.querySelector(".ui-v1-select-option_selected");
+      const option = scrollable.value?.querySelector(".ui-v1-select-option_active") ?? scrollable.value?.querySelector(".ui-v1-select-option_selected");
       if (scrollable.value && option) {
         scrollable.value.scrollTop = option.offsetTop;
       }
@@ -9600,6 +9600,8 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
       return style;
     });
     __expose({
+      autoScroll,
+      updateWidth,
       adjust: () => popper.value?.adjust(),
       dispose: () => popper.value?.dispose(),
       show: () => popper.value?.show(),
@@ -9773,7 +9775,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     /** Нажатие клавиши в поле ввода */
     "keydown"
   ],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const i18n = vue.computed(() => _i18n$2.init(vue.inject(I18nInjectKey, null)?.locale ?? _i18n$2.fallback));
@@ -9864,6 +9866,16 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
       emit("update:value", value);
       emit("clear", event);
     };
+    __expose({
+      open,
+      close,
+      onClick,
+      onKeyDown,
+      onInput,
+      onFocus,
+      onBlur,
+      onClear
+    });
     vue.watch(() => props.value, () => {
       updateSelectionWidth();
       if (props.multiple && props.expanded) {

package/dist/host.d.ts

@@ -787,9 +787,26 @@ declare type UiScrollBoxProperties = {
     showOnHover?: boolean;
     showOnMac?: boolean;
 };
-export declare const UiSelectPopper: DefineComponent<UiPopperProperties, {
+export declare const UiSelectPopper: DefineComponent<UiSelectPopperProperties, {
     target: Ref<HTMLElement | null>;
-}, UiPopperMethods>;
+}, UiSelectPopperMethods & UiPopperMethods>;
+declare type UiSelectPopperMethods = {
+    autoScroll(): void;
+    updateWidth(): void;
+};
+declare type UiSelectPopperProperties = {
+    opened?: boolean;
+    targetTriggers?: Trigger[] | TriggerSchema;
+    popperTriggers?: Trigger[] | TriggerSchema;
+    popperFitTrigger?: boolean;
+    placement?: Side | `${Side}-${Alignment}` | PlacementOptions;
+    popperClass?: string;
+    popperOptions?: Omit<UiPopperProperties, 'placement' | 'shown' | 'target' | 'triggers'>;
+    disabled?: boolean;
+    readonly?: boolean;
+    multiple?: boolean;
+    ticker?: boolean;
+};
 export declare const UiSelectTrigger: DefineComponent<UiSelectTriggerProperties, UiSelectTriggerMethods>;
 declare type UiSelectTriggerMethods = {
     open(): void;

package/dist/host.js

@@ -9581,7 +9581,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const width = ref("auto");
     const visible = computed(() => props.opened);
     const autoScroll = async () => {
-      const option = scrollable.value?.querySelector(".ui-v1-select-option_selected");
+      const option = scrollable.value?.querySelector(".ui-v1-select-option_active") ?? scrollable.value?.querySelector(".ui-v1-select-option_selected");
       if (scrollable.value && option) {
         scrollable.value.scrollTop = option.offsetTop;
       }
@@ -9598,6 +9598,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       return style;
     });
     __expose({
+      autoScroll,
+      updateWidth,
       adjust: () => popper.value?.adjust(),
       dispose: () => popper.value?.dispose(),
       show: () => popper.value?.show(),
@@ -9771,7 +9773,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     /** Нажатие клавиши в поле ввода */
     "keydown"
   ],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const i18n = computed(() => _i18n$2.init(inject(I18nInjectKey, null)?.locale ?? _i18n$2.fallback));
@@ -9862,6 +9864,16 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       emit("update:value", value);
       emit("clear", event);
     };
+    __expose({
+      open,
+      close,
+      onClick,
+      onKeyDown,
+      onInput,
+      onFocus,
+      onBlur,
+      onClear
+    });
     watch(() => props.value, () => {
       updateSelectionWidth();
       if (props.multiple && props.expanded) {

package/dist/remote.cjs

@@ -106,15 +106,19 @@ const UiCopyButton = remote.defineRemoteComponent(
 const UiDateType = "UiDate";
 const UiDate = remote.defineRemoteComponent(UiDateType);
 const UiDatePickerType = "UiDatePicker";
-const UiDatePicker = remote.defineRemoteComponent(
-  UiDatePickerType,
-  [
+const UiDatePicker = remote.defineRemoteComponent(UiDatePickerType, {
+  emits: [
     "open",
     "close",
     "change",
     "update:value"
-  ]
-);
+  ],
+  methods: {
+    open: remote.defineRemoteMethod(),
+    close: remote.defineRemoteMethod(),
+    toggle: remote.defineRemoteMethod()
+  }
+});
 const UiErrorType = "UiError";
 const UiError = remote.defineRemoteComponent(
   UiErrorType,
@@ -436,20 +440,33 @@ const events = [
   "clear"
 ];
 const UiTextboxType = "UiTextbox";
-const UiTextbox = remote.defineRemoteComponent(
-  UiTextboxType,
-  events
-);
+const UiTextbox = remote.defineRemoteComponent(UiTextboxType, {
+  emits: events,
+  methods: {
+    getSelectionStart: remote.defineRemoteMethod(),
+    getSelectionEnd: remote.defineRemoteMethod(),
+    setSelectionRange: remote.defineRemoteMethod(),
+    focus: remote.defineRemoteMethod(),
+    blur: remote.defineRemoteMethod(),
+    select: remote.defineRemoteMethod(),
+    insert: remote.defineRemoteMethod(),
+    clear: remote.defineRemoteMethod()
+  }
+});
 const UiTimePickerType = "UiTimePicker";
-const UiTimePicker = remote.defineRemoteComponent(
-  UiTimePickerType,
-  [
+const UiTimePicker = remote.defineRemoteComponent(UiTimePickerType, {
+  emits: [
     "change",
     "update:value",
     "focus",
     "blur"
-  ]
-);
+  ],
+  methods: {
+    open: remote.defineRemoteMethod(),
+    close: remote.defineRemoteMethod(),
+    focus: remote.defineRemoteMethod()
+  }
+});
 const UiToolbarButtonType = "UiToolbarButton";
 const UiToolbarButton = remote.defineRemoteComponent(
   UiToolbarButtonType,
@@ -695,9 +712,8 @@ const RegisterHeaderOptionKey = Symbol("UiSelectOptionGroupRegisterHeaderOption"
 const UnregisterHeaderOptionKey = Symbol("UiSelectOptionGroupUnregisterHeaderOption");
 const I18nInjectKey = Symbol("$embedI18n");
 const UiSelectTriggerType = "UiSelectTrigger";
-const UiSelectTrigger = remote.defineRemoteComponent(
-  UiSelectTriggerType,
-  [
+const UiSelectTrigger = remote.defineRemoteComponent(UiSelectTriggerType, {
+  emits: [
     "input",
     "focus",
     "blur",
@@ -705,20 +721,33 @@ const UiSelectTrigger = remote.defineRemoteComponent(
     "clear",
     "update:value",
     "update:expanded"
-  ]
-);
+  ],
+  methods: {
+    open: remote.defineRemoteMethod(),
+    close: remote.defineRemoteMethod(),
+    onClick: remote.defineRemoteMethod(),
+    onKeyDown: remote.defineRemoteMethod(),
+    onInput: remote.defineRemoteMethod(),
+    onFocus: remote.defineRemoteMethod(),
+    onBlur: remote.defineRemoteMethod(),
+    onClear: remote.defineRemoteMethod()
+  }
+});
 const UiSelectPopperType = "UiSelectPopper";
-const UiSelectPopper = remote.defineRemoteComponent(
-  UiSelectPopperType,
-  [
+const UiSelectPopper = remote.defineRemoteComponent(UiSelectPopperType, {
+  emits: [
     "update:visible",
     "show",
     "hide",
     "shown",
     "hidden",
     "dispose"
-  ]
-);
+  ],
+  methods: {
+    autoScroll: remote.defineRemoteMethod(),
+    updateWidth: remote.defineRemoteMethod()
+  }
+});
 const UiSelectOptionType = "UiSelectOption";
 remote.defineRemoteComponent(
   UiSelectOptionType
@@ -856,6 +885,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     const noResult = vue.computed(() => i18n.value.t("search.noResult", { filter: state.filter }));
     const optionsRegistry = vue.ref([]);
     const activeOptionId = vue.ref(null);
+    const popper = vue.useTemplateRef("popper");
     const selection = vue.computed(() => {
       const model = arraify(state.value);
       const selectedOptions = [];
@@ -1028,6 +1058,14 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         activeOptionId.value = null;
       }
     };
+    const syncPopper = async () => {
+      if (!state.expanded) {
+        return;
+      }
+      await remote.nextTick();
+      await popper.value?.updateWidth();
+      await popper.value?.autoScroll();
+    };
     vue.watch(() => props.expanded, (newVal) => {
       state.expanded = newVal;
       if (!newVal) {
@@ -1041,6 +1079,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     vue.watch(() => state.expanded, (expanded) => {
       if (expanded) {
         resolveHighlightedOption("selected-first");
+        void syncPopper();
       } else {
         activeOptionId.value = null;
       }
@@ -1052,7 +1091,14 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       const exists = navigableOptions.value.some((option) => option.id === activeOptionId.value);
       if (!exists) {
         resolveHighlightedOption("selected-first");
+        void syncPopper();
+      }
+    });
+    vue.watch(activeOptionId, (next, prev) => {
+      if (!state.expanded || next === prev) {
+        return;
       }
+      void syncPopper();
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(UiPopperConnector), null, {
@@ -1081,6 +1127,8 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           }), null, 16, ["id", "value", "multiple", "selection", "filter", "filterable", "clearable", "expanded", "invalid", "disabled", "readonly", "placeholder-only", "placeholder", "textbox-size", "active-descendant"]),
           vue.createVNode(vue.unref(UiSelectPopper), {
             id: resolvedId.value,
+            ref_key: "popper",
+            ref: popper,
             disabled: __props.disabled || __props.readonly,
             multiple: __props.multiple,
             opened: state.expanded,

package/dist/remote.d.ts

@@ -1,12 +1,16 @@
 import { Alignment } from '@floating-ui/dom';
 import { AllowedComponentProps } from 'vue';
 import { Channel } from '@omnicajs/vue-remote/remote';
+import { ComponentCustomProperties } from 'vue';
 import { ComponentCustomProps } from 'vue';
+import { ComponentInternalInstance } from 'vue';
 import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
+import { ComponentPublicInstance } from 'vue';
 import { ComputedOptions } from 'vue';
 import { CreateComponentPublicInstanceWithMixins } from 'vue';
+import { DebuggerEvent } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { GlobalComponents } from 'vue';
@@ -14,6 +18,8 @@ import { GlobalDirectives } from 'vue';
 import { HTMLAttributes } from 'vue';
 import { InjectionKey } from 'vue';
 import { MethodOptions } from 'vue';
+import { nextTick } from 'vue';
+import { OnCleanup } from '@vue/reactivity';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
@@ -26,9 +32,13 @@ import { SerializedEvent } from '@omnicajs/vue-remote/types/events';
 import { SerializedFocusEvent } from '@omnicajs/vue-remote/types/events';
 import { SerializedInputEvent } from '@omnicajs/vue-remote/types/events';
 import { SerializedKeyboardEvent } from '@omnicajs/vue-remote/types/events';
+import { ShallowUnwrapRef } from 'vue';
 import { Side } from '@floating-ui/dom';
+import { Slot } from 'vue';
 import { Strategy } from '@floating-ui/dom';
 import { VNodeProps } from 'vue';
+import { WatchOptions } from 'vue';
+import { WatchStopHandle } from 'vue';
 declare const __VLS_component: DefineComponent<ExtractPropTypes<{
     /** Id для связки label/control */
     id: {
@@ -360,7 +370,90 @@ declare const __VLS_component_2: DefineComponent<ExtractPropTypes<{
     textboxSize: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
     popperFitTrigger: boolean;
     equalsFn: (a: unknown, b: unknown) => boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {
+    popper: ({
+        $: ComponentInternalInstance;
+        $data: {
+            [x: string]: never;
+        };
+        $props: Partial<{}> & Omit<{
+            readonly [x: string]: any;
+        } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: Slot<any> | undefined;
+        }>;
+        $root: ComponentPublicInstance | null;
+        $parent: ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: ComponentOptionsBase<Readonly<ExtractPropTypes<RemoteProperties<UiSelectPopperProperties>>>, {
+            [x: string]: unknown;
+        }, {
+            [x: string]: never;
+        }, {
+            [x: string]: never;
+        }, {
+            autoScroll: () => Promise<void>;
+            updateWidth: () => Promise<void>;
+        }, {
+            'update:visible': (visible: boolean) => boolean;
+            show: () => boolean;
+            hide: () => boolean;
+            shown: () => boolean;
+            hidden: () => boolean;
+            dispose: () => boolean;
+        }, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+            renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [
+            R,
+            R,
+            OnCleanup
+        ]) => any : (...args: [
+            any,
+            any,
+            OnCleanup
+        ]) => any, options?: WatchOptions): WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<ExtractPropTypes<RemoteProperties<UiSelectPopperProperties>>>, string> & ShallowUnwrapRef<{
+        [x: string]: unknown;
+    }> & {
+        [x: string]: never;
+    } & {
+        [x: string]: unknown;
+    } & MethodOptions & {
+        autoScroll: () => Promise<void>;
+        updateWidth: () => Promise<void>;
+    } & ComponentCustomProperties & {} & {
+        $slots: {
+            [x: string]: never;
+        } & {
+            default?: (...args: never[]) => unknown;
+        };
+    }) | null;
+}, any>;
 declare const __VLS_component_3: DefineComponent<ExtractPropTypes<{
     /** Значение опции */
     value: {
@@ -494,7 +587,90 @@ declare function __VLS_template_2(): {
     slots: {
         default?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        popper: ({
+            $: ComponentInternalInstance;
+            $data: {
+                [x: string]: never;
+            };
+            $props: Partial<{}> & Omit<{
+                readonly [x: string]: any;
+            } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: Slot<any> | undefined;
+            }>;
+            $root: ComponentPublicInstance | null;
+            $parent: ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: ComponentOptionsBase<Readonly<ExtractPropTypes<RemoteProperties<UiSelectPopperProperties>>>, {
+                [x: string]: unknown;
+            }, {
+                [x: string]: never;
+            }, {
+                [x: string]: never;
+            }, {
+                autoScroll: () => Promise<void>;
+                updateWidth: () => Promise<void>;
+            }, {
+                'update:visible': (visible: boolean) => boolean;
+                show: () => boolean;
+                hide: () => boolean;
+                shown: () => boolean;
+                hidden: () => boolean;
+                dispose: () => boolean;
+            }, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+                renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [
+                R,
+                R,
+                OnCleanup
+            ]) => any : (...args: [
+                any,
+                any,
+                OnCleanup
+            ]) => any, options?: WatchOptions): WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<ExtractPropTypes<RemoteProperties<UiSelectPopperProperties>>>, string> & ShallowUnwrapRef<{
+            [x: string]: unknown;
+        }> & {
+            [x: string]: never;
+        } & {
+            [x: string]: unknown;
+        } & MethodOptions & {
+            autoScroll: () => Promise<void>;
+            updateWidth: () => Promise<void>;
+        } & ComponentCustomProperties & {} & {
+            $slots: {
+                [x: string]: never;
+            } & {
+                default?: (...args: never[]) => unknown;
+            };
+        }) | null;
+    };
     rootEl: any;
 };
 declare function __VLS_template_3(): {
@@ -1546,7 +1722,11 @@ export declare const UiDatePicker: {
         [x: string]: never;
     }, {
         [x: string]: never;
-    }, MethodOptions, {
+    }, {
+        open: () => Promise<void>;
+        close: () => Promise<void>;
+        toggle: () => Promise<void>;
+    }, {
         open: () => boolean;
         close: () => boolean;
         change: (value: Date | Date[] | null) => boolean;
@@ -1571,7 +1751,11 @@ export declare const UiDatePicker: {
         [x: string]: never;
     }, ComputedOptions & {
         [x: string]: never;
-    }, MethodOptions, {}>;
+    }, MethodOptions & {
+        open: () => Promise<void>;
+        close: () => Promise<void>;
+        toggle: () => Promise<void>;
+    }, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
@@ -1581,7 +1765,11 @@ export declare const UiDatePicker: {
     [x: string]: never;
 }, {
     [x: string]: never;
-}, MethodOptions, {
+}, {
+    open: () => Promise<void>;
+    close: () => Promise<void>;
+    toggle: () => Promise<void>;
+}, {
     open: () => boolean;
     close: () => boolean;
     change: (value: Date | Date[] | null) => boolean;
@@ -2807,7 +2995,16 @@ export declare const UiTextbox: {
         [x: string]: never;
     }, {
         [x: string]: never;
-    }, MethodOptions, {
+    }, {
+        getSelectionStart: () => Promise<number | null>;
+        getSelectionEnd: () => Promise<number | null>;
+        setSelectionRange: (start: number, end: number) => Promise<void>;
+        focus: () => Promise<void>;
+        blur: () => Promise<void>;
+        select: () => Promise<void>;
+        insert: (value: string) => Promise<void>;
+        clear: () => Promise<void>;
+    }, {
         input: (event: SerializedInputEvent) => boolean;
         keydown: (event: SerializedKeyboardEvent) => boolean;
         paste: (event: SerializedEvent) => boolean;
@@ -2837,7 +3034,16 @@ export declare const UiTextbox: {
         [x: string]: never;
     }, ComputedOptions & {
         [x: string]: never;
-    }, MethodOptions, {}>;
+    }, MethodOptions & {
+        getSelectionStart: () => Promise<number | null>;
+        getSelectionEnd: () => Promise<number | null>;
+        setSelectionRange: (start: number, end: number) => Promise<void>;
+        focus: () => Promise<void>;
+        blur: () => Promise<void>;
+        select: () => Promise<void>;
+        insert: (value: string) => Promise<void>;
+        clear: () => Promise<void>;
+    }, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
@@ -2847,7 +3053,16 @@ export declare const UiTextbox: {
     [x: string]: never;
 }, {
     [x: string]: never;
-}, MethodOptions, {
+}, {
+    getSelectionStart: () => Promise<number | null>;
+    getSelectionEnd: () => Promise<number | null>;
+    setSelectionRange: (start: number, end: number) => Promise<void>;
+    focus: () => Promise<void>;
+    blur: () => Promise<void>;
+    select: () => Promise<void>;
+    insert: (value: string) => Promise<void>;
+    clear: () => Promise<void>;
+}, {
     input: (event: SerializedInputEvent) => boolean;
     keydown: (event: SerializedKeyboardEvent) => boolean;
     paste: (event: SerializedEvent) => boolean;
@@ -2914,7 +3129,11 @@ export declare const UiTimePicker: {
         [x: string]: never;
     }, {
         [x: string]: never;
-    }, MethodOptions, {
+    }, {
+        open: () => Promise<void>;
+        close: () => Promise<void>;
+        focus: () => Promise<void>;
+    }, {
         change: (value: string) => boolean;
         'update:value': (value: string) => boolean;
         focus: (event: FocusEvent) => boolean;
@@ -2939,7 +3158,11 @@ export declare const UiTimePicker: {
         [x: string]: never;
     }, ComputedOptions & {
         [x: string]: never;
-    }, MethodOptions, {}>;
+    }, MethodOptions & {
+        open: () => Promise<void>;
+        close: () => Promise<void>;
+        focus: () => Promise<void>;
+    }, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
@@ -2949,7 +3172,11 @@ export declare const UiTimePicker: {
     [x: string]: never;
 }, {
     [x: string]: never;
-}, MethodOptions, {
+}, {
+    open: () => Promise<void>;
+    close: () => Promise<void>;
+    focus: () => Promise<void>;
+}, {
     change: (value: string) => boolean;
     'update:value': (value: string) => boolean;
     focus: (event: FocusEvent) => boolean;

package/dist/remote.js

@@ -1,5 +1,5 @@
-import { defineRemoteComponent, createRemoteRoot } from "@omnicajs/vue-remote/remote";
-import { openBlock, createElementBlock, createElementVNode, defineComponent, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, unref, withCtx, reactive, computed, inject, ref, provide, watch, createBlock, onBeforeMount, onBeforeUnmount, createSlots, onMounted, getCurrentInstance } from "vue";
+import { defineRemoteComponent, defineRemoteMethod, nextTick, createRemoteRoot } from "@omnicajs/vue-remote/remote";
+import { openBlock, createElementBlock, createElementVNode, defineComponent, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, unref, withCtx, reactive, computed, inject, ref, useTemplateRef, provide, watch, createBlock, onBeforeMount, onBeforeUnmount, createSlots, onMounted, getCurrentInstance } from "vue";
 import isEqual from "lodash.isequal";
 import { preview } from "@retailcrm/image-preview";
 import { ru, es, enGB } from "date-fns/locale";
@@ -104,15 +104,19 @@ const UiCopyButton = defineRemoteComponent(
 const UiDateType = "UiDate";
 const UiDate = defineRemoteComponent(UiDateType);
 const UiDatePickerType = "UiDatePicker";
-const UiDatePicker = defineRemoteComponent(
-  UiDatePickerType,
-  [
+const UiDatePicker = defineRemoteComponent(UiDatePickerType, {
+  emits: [
     "open",
     "close",
     "change",
     "update:value"
-  ]
-);
+  ],
+  methods: {
+    open: defineRemoteMethod(),
+    close: defineRemoteMethod(),
+    toggle: defineRemoteMethod()
+  }
+});
 const UiErrorType = "UiError";
 const UiError = defineRemoteComponent(
   UiErrorType,
@@ -434,20 +438,33 @@ const events = [
   "clear"
 ];
 const UiTextboxType = "UiTextbox";
-const UiTextbox = defineRemoteComponent(
-  UiTextboxType,
-  events
-);
+const UiTextbox = defineRemoteComponent(UiTextboxType, {
+  emits: events,
+  methods: {
+    getSelectionStart: defineRemoteMethod(),
+    getSelectionEnd: defineRemoteMethod(),
+    setSelectionRange: defineRemoteMethod(),
+    focus: defineRemoteMethod(),
+    blur: defineRemoteMethod(),
+    select: defineRemoteMethod(),
+    insert: defineRemoteMethod(),
+    clear: defineRemoteMethod()
+  }
+});
 const UiTimePickerType = "UiTimePicker";
-const UiTimePicker = defineRemoteComponent(
-  UiTimePickerType,
-  [
+const UiTimePicker = defineRemoteComponent(UiTimePickerType, {
+  emits: [
     "change",
     "update:value",
     "focus",
     "blur"
-  ]
-);
+  ],
+  methods: {
+    open: defineRemoteMethod(),
+    close: defineRemoteMethod(),
+    focus: defineRemoteMethod()
+  }
+});
 const UiToolbarButtonType = "UiToolbarButton";
 const UiToolbarButton = defineRemoteComponent(
   UiToolbarButtonType,
@@ -693,9 +710,8 @@ const RegisterHeaderOptionKey = Symbol("UiSelectOptionGroupRegisterHeaderOption"
 const UnregisterHeaderOptionKey = Symbol("UiSelectOptionGroupUnregisterHeaderOption");
 const I18nInjectKey = Symbol("$embedI18n");
 const UiSelectTriggerType = "UiSelectTrigger";
-const UiSelectTrigger = defineRemoteComponent(
-  UiSelectTriggerType,
-  [
+const UiSelectTrigger = defineRemoteComponent(UiSelectTriggerType, {
+  emits: [
     "input",
     "focus",
     "blur",
@@ -703,20 +719,33 @@ const UiSelectTrigger = defineRemoteComponent(
     "clear",
     "update:value",
     "update:expanded"
-  ]
-);
+  ],
+  methods: {
+    open: defineRemoteMethod(),
+    close: defineRemoteMethod(),
+    onClick: defineRemoteMethod(),
+    onKeyDown: defineRemoteMethod(),
+    onInput: defineRemoteMethod(),
+    onFocus: defineRemoteMethod(),
+    onBlur: defineRemoteMethod(),
+    onClear: defineRemoteMethod()
+  }
+});
 const UiSelectPopperType = "UiSelectPopper";
-const UiSelectPopper = defineRemoteComponent(
-  UiSelectPopperType,
-  [
+const UiSelectPopper = defineRemoteComponent(UiSelectPopperType, {
+  emits: [
     "update:visible",
     "show",
     "hide",
     "shown",
     "hidden",
     "dispose"
-  ]
-);
+  ],
+  methods: {
+    autoScroll: defineRemoteMethod(),
+    updateWidth: defineRemoteMethod()
+  }
+});
 const UiSelectOptionType = "UiSelectOption";
 defineRemoteComponent(
   UiSelectOptionType
@@ -854,6 +883,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const noResult = computed(() => i18n.value.t("search.noResult", { filter: state.filter }));
     const optionsRegistry = ref([]);
     const activeOptionId = ref(null);
+    const popper = useTemplateRef("popper");
     const selection = computed(() => {
       const model = arraify(state.value);
       const selectedOptions = [];
@@ -1026,6 +1056,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         activeOptionId.value = null;
       }
     };
+    const syncPopper = async () => {
+      if (!state.expanded) {
+        return;
+      }
+      await nextTick();
+      await popper.value?.updateWidth();
+      await popper.value?.autoScroll();
+    };
     watch(() => props.expanded, (newVal) => {
       state.expanded = newVal;
       if (!newVal) {
@@ -1039,6 +1077,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     watch(() => state.expanded, (expanded) => {
       if (expanded) {
         resolveHighlightedOption("selected-first");
+        void syncPopper();
       } else {
         activeOptionId.value = null;
       }
@@ -1050,7 +1089,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const exists = navigableOptions.value.some((option) => option.id === activeOptionId.value);
       if (!exists) {
         resolveHighlightedOption("selected-first");
+        void syncPopper();
+      }
+    });
+    watch(activeOptionId, (next, prev) => {
+      if (!state.expanded || next === prev) {
+        return;
       }
+      void syncPopper();
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(UiPopperConnector), null, {
@@ -1079,6 +1125,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           }), null, 16, ["id", "value", "multiple", "selection", "filter", "filterable", "clearable", "expanded", "invalid", "disabled", "readonly", "placeholder-only", "placeholder", "textbox-size", "active-descendant"]),
           createVNode(unref(UiSelectPopper), {
             id: resolvedId.value,
+            ref_key: "popper",
+            ref: popper,
             disabled: __props.disabled || __props.readonly,
             multiple: __props.multiple,
             opened: state.expanded,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@retailcrm/embed-ui-v1-components",
   "type": "module",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "license": "MIT",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "repository": "git@github.com:retailcrm/embed-ui.git",
@@ -54,7 +54,7 @@
     "vue": "^3.5"
   },
   "dependencies": {
-    "@omnicajs/vue-remote": "^0.2.17",
+    "@omnicajs/vue-remote": "^0.2.18",
     "@remote-ui/rpc": "^1.4.7",
     "@retailcrm/image-preview": "^1.0.2",
     "date-fns": "^4.1.0",