sard 1.0.0-canary.0

package/dist/utils/createPubSub.js

@@ -0,0 +1,53 @@
+export function createPubSub() {
+    const events = {};
+    const on = (type, handler) => {
+        let handlers;
+        if (!(handlers = events[type])) {
+            handlers = events[type] = new Set();
+        }
+        handlers.add(handler);
+    };
+    const off = (type, handler) => {
+        let handlers;
+        if (!type) {
+            Object.keys(events).forEach((key) => {
+                delete events[key];
+            });
+            return;
+        }
+        if (!(handlers = events[type])) {
+            return;
+        }
+        if (!handler) {
+            delete events[type];
+            return;
+        }
+        handlers.delete(handler);
+        if (handlers.size === 0) {
+            delete events[type];
+        }
+    };
+    const emit = (type, ...payload) => {
+        let handlers;
+        if (!(handlers = events[type])) {
+            return;
+        }
+        handlers.forEach((handler) => {
+            handler(...payload);
+        });
+    };
+    const once = (type, handler) => {
+        const oldHandler = handler;
+        handler = () => {
+            oldHandler();
+            off(type, handler);
+        };
+    };
+    return {
+        on,
+        off,
+        emit,
+        once,
+    };
+}
+export const pubSub = createPubSub();

package/dist/utils/date.d.ts

@@ -0,0 +1,13 @@
+export declare function getDaysInMonth(year: number, month: number): 29 | 28 | 30 | 31;
+export declare function getWeekOnFirstDay(year: number, month: number): number;
+export declare function getDaysInDate(date: Date): number;
+export declare function toDateNumber(date: Date): number;
+export declare function toDateString(date: Date): string;
+export declare function toMonthNumber(date: Date): number;
+export declare function getPadStartDays(year: number, month: number, amount: number): Date[];
+export declare function getPadEndDays(year: number, month: number, amount: number): Date[];
+export declare function getOffsetDaysFromFirstDay(weekOnFirstDay: number, weekStartsOn: number): number;
+export declare function formatDate(date: Date, formatStr?: string): string;
+export declare function minmaxDate(date: Date, minDate: Date, maxDate: Date): Date;
+export declare function getPrevMonthDate(date: Date): Date;
+export declare function getNextMonthDate(date: Date): Date;

package/dist/utils/date.js

@@ -0,0 +1,87 @@
+import { minmax } from './utils';
+// 获取一个月中的天数
+export function getDaysInMonth(year, month) {
+    month = month + 1;
+    if (month === 2) {
+        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28;
+    }
+    else {
+        return [4, 6, 9, 11].includes(month) ? 30 : 31;
+    }
+}
+// 获取一个月中一号对应的星期
+export function getWeekOnFirstDay(year, month) {
+    return new Date(year, month, 1).getDay();
+}
+// 获取 Date 中的总天数
+export function getDaysInDate(date) {
+    return Math.floor(date.getTime() / 1000 / 60 / 60 / 24);
+}
+// 把日期转换为年月日数值
+export function toDateNumber(date) {
+    return date.getFullYear() * 10000 + date.getMonth() * 100 + date.getDate();
+}
+// 把日期转换为年月日字符串
+export function toDateString(date) {
+    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
+}
+// 把日期转换为年月数值
+export function toMonthNumber(date) {
+    return date.getFullYear() * 10000 + date.getMonth() * 100;
+}
+// 获取从开头开始填充的日期
+export function getPadStartDays(year, month, amount) {
+    const dates = [];
+    for (let i = amount - 1; i >= 0; i--) {
+        dates.push(new Date(year, month, -i));
+    }
+    return dates;
+}
+// 获取从结尾开始填充的日期
+export function getPadEndDays(year, month, amount) {
+    const dates = [];
+    for (let i = 1; i <= amount; i++) {
+        dates.push(new Date(year, month + 1, i));
+    }
+    return dates;
+}
+// 获取一号偏移的天数
+export function getOffsetDaysFromFirstDay(weekOnFirstDay, weekStartsOn) {
+    return (weekOnFirstDay - weekStartsOn + 7) % 7;
+}
+// 根据传入的占位符返回格式化后的日期
+export function formatDate(date, formatStr = 'YYYY-MM-DD HH:mm:ss') {
+    const regexp = /YYYY|YY|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|SSS/g;
+    const matches = {
+        YYYY: (date) => String(date.getFullYear()).padStart(4, '0'),
+        YY: (date) => String(date.getFullYear()).slice(-2),
+        MM: (date) => String(date.getMonth() + 1).padStart(2, '0'),
+        M: (date) => String(date.getMonth() + 1),
+        DD: (date) => String(date.getDate()).padStart(2, '0'),
+        D: (date) => String(date.getDate()),
+        HH: (date) => String(date.getHours()).padStart(2, '0'),
+        H: (date) => String(date.getHours()),
+        hh: (date) => String(date.getHours() % 24).padStart(2, '0'),
+        h: (date) => String(date.getHours() % 24),
+        mm: (date) => String(date.getMinutes()).padStart(2, '0'),
+        m: (date) => String(date.getMinutes()),
+        ss: (date) => String(date.getSeconds()).padStart(2, '0'),
+        s: (date) => String(date.getSeconds()),
+        SSS: (date) => String(date.getMilliseconds()).padStart(3, '0'),
+    };
+    return formatStr.replace(regexp, (match) => {
+        return matches[match](date);
+    });
+}
+// 限定日期范围
+export function minmaxDate(date, minDate, maxDate) {
+    return new Date(minmax(date.getTime(), minDate.getTime(), maxDate.getTime()));
+}
+// 获取上一个月的日期对象
+export function getPrevMonthDate(date) {
+    return new Date(date.getFullYear(), date.getMonth() - 1, 1);
+}
+// 获取下一个月的日期对象
+export function getNextMonthDate(date) {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 1);
+}

package/dist/utils/dom.d.ts

@@ -0,0 +1,149 @@
+import Taro from '@tarojs/taro';
+import { TouchEvent } from 'react';
+export declare const systemInfo: Taro.getSystemInfoSync.Result;
+export declare function pageScrollTop(top: number, animated?: boolean): void;
+interface windowResizeHandler {
+    (res: {
+        windowWidth: number;
+        windowHeight: number;
+    }): void;
+    __sard_listener: () => void;
+}
+export declare function onWindowResize(listener: windowResizeHandler): void;
+export declare function offWindowResize(listener: windowResizeHandler): void;
+export type AutoHeight = boolean | {
+    minHeight?: number;
+    maxHeight?: number;
+};
+export declare function resizeTextArea(el: HTMLInputElement & HTMLTextAreaElement, autoHeight: AutoHeight): void;
+/**
+ * @description: 获取目标元素在根元素内的可滚动的祖先元素
+ * @param {HTMLElement} target 目标元素，通常为 Event.target
+ * @param {HTMLElement} root 根元素
+ * @return {HTMLElement}
+ */
+export declare function getScrollParent(target: HTMLElement, root?: HTMLElement): HTMLElement;
+/**
+ * @description: 阻止浏览器默认行为
+ * @param {Event} event
+ * @return {void}
+ */
+export declare function preventDefault(event: Event | TouchEvent): void;
+/**
+ * @description: 获取元素的相对于指定元素的坐标
+ * @param {HTMLElement} elem
+ * @return {*}
+ */
+export declare function getOffset(elem: HTMLElement, root?: HTMLElement): {
+    top: number;
+    left: number;
+};
+export type ScrollIntoViewPosition = 'start' | 'center' | 'end' | 'nearest';
+export interface ScrollIntoViewValueOptions {
+    placement?: ScrollIntoViewPosition;
+    offsetStart?: number;
+    offsetEnd?: number;
+    limited?: boolean;
+    pageHeight?: number;
+}
+/**
+```
+                      page
+                     ╱
+    ╭───────────────╮    viewport
+  ╭─│─ ─ ─ ─ ─ ─ ─ ─│─╮ ╱
+  │ │ ╭───────────╮ │ │
+  │ │ │  element  │ │ │
+  │ │ ╰───────────╯ │ │
+  ╰─│─ ─ ─ ─ ─ ─ ─ ─│─╯
+    │               │
+    │               │
+    ╰───────────────╯
+```
+
+# 对象
+- viewport: 视窗
+- page: 页面
+- element: 元素
+
+# 参数
+- viewportHeight: 视窗高度
+- viewportScrollTop: 视窗顶部滚动距离
+- elementHeight: 元素高度
+- elementToPageTopOffset: 元素距离页面顶部距离
+
+# 选项
+- placement: 元素在视窗中的位置(start, center, end, nearest)
+- offsetStart: 元素距离视窗顶部的偏移量
+- offsetEnd: 元素距离视窗底部的偏移量
+- limited: 是否限定视窗滚动的距离，让页面始终覆盖视窗；需要同时传递pageHeight选项（用于自定义滚动）
+- pageHeight: 页面高度
+
+# 结果值
+- viewportScrollTop: 视窗顶部滚动的新的距离
+
+*/
+export declare function getScrollIntoViewValue(viewportHeight: number, viewportScrollTop: number, elementHeight: number, elementToPageTopOffset: number, options?: ScrollIntoViewValueOptions): number;
+export interface ScrollIntoViewOptions {
+    behavior?: 'smooth' | 'instant';
+    block?: 'start' | 'center' | 'end' | 'nearest';
+    inline?: 'start' | 'center' | 'end' | 'nearest';
+    contextId?: string;
+    offsetTop?: number;
+    offsetBottom?: number;
+}
+/**
+ * 滚动元素到页面指定位置
+ *
+ * @param pageScrollTop 当前页面滚动的距离
+ * @param element 使用 ref 获取到元素
+ *
+ */
+export declare function scrollIntoView(pageScrollTop: number, element: any, options?: ScrollIntoViewOptions): Promise<void>;
+export type NodeRect = {
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare function getRectById(id: string, ctxId?: string): Promise<NodeRect>;
+/**
+ * 命令式获取获取元素的大小和位置，兼容H5、小程序、RN
+ *
+ * @param element 通过 ref 获取的元素
+ * @param ctxId 在小程序端如果使用 CustomWrapper 包裹元素，需要传递其id。
+ */
+export declare function getRectByElement(element: any, ctxId?: string): Promise<{
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}>;
+interface MatchScrollVisibleOptions {
+    offset?: number;
+    errorValue?: number;
+    contextId?: string;
+    isRect?: boolean;
+}
+/**
+ * @description: 匹配元素列表中第一个位于滚动盒子可视区域的元素
+ * @param {HTMLElement} elements 元素列表
+ * @param {function} callback 匹配成功时回调
+ * @param {number} offset 距离滚动盒子顶部的偏移量
+ * @param {number} errorValue 误差值
+ * @return {void}
+ */
+export declare function matchScrollVisible(elementsOrRects: any[], callback: (index: number) => unknown, options?: MatchScrollVisibleOptions): Promise<unknown>;
+export declare function getElementById(id?: string): any;
+export declare function createMouseBinder(options: {
+    onStart?: (event: any) => void;
+    onMove?: (event: any) => void;
+    onEnd?: (event: any) => void;
+}): {
+    onMouseDown: (event: any) => void;
+};
+export {};

package/dist/utils/dom.js

@@ -0,0 +1,297 @@
+import Taro from '@tarojs/taro';
+import { minmax } from './utils';
+import { isRN } from './is';
+import { measure } from './measure';
+import { isH5 } from './is';
+export const systemInfo = Taro.getSystemInfoSync();
+export function pageScrollTop(top, animated = true) {
+    window.scrollTo({
+        top,
+        behavior: animated ? 'smooth' : 'auto',
+    });
+}
+export function onWindowResize(listener) {
+    listener.__sard_listener = () => {
+        listener({
+            windowWidth: window.innerWidth,
+            windowHeight: window.innerHeight,
+        });
+    };
+    window.addEventListener('resize', listener.__sard_listener);
+}
+export function offWindowResize(listener) {
+    window.removeEventListener('resize', listener.__sard_listener);
+}
+// | { minRows?: number; maxRows?: number }
+export function resizeTextArea(el, autoHeight) {
+    if (!autoHeight) {
+        return;
+    }
+    el.style.height = 'auto';
+    let height = el.scrollHeight;
+    if (autoHeight !== true) {
+        const { minHeight = 0, maxHeight = Number.MAX_SAFE_INTEGER } = autoHeight;
+        height = Math.min(Math.max(minHeight, height), maxHeight);
+    }
+    el.style.height = height + 'px';
+}
+/**
+ * @description: 获取目标元素在根元素内的可滚动的祖先元素
+ * @param {HTMLElement} target 目标元素，通常为 Event.target
+ * @param {HTMLElement} root 根元素
+ * @return {HTMLElement}
+ */
+export function getScrollParent(target, root = document.documentElement) {
+    let current = target;
+    while (current && current.nodeType === 1 && current !== root) {
+        const { overflowY } = window.getComputedStyle(current);
+        if (['scroll', 'auto', 'overlay'].includes(overflowY)) {
+            return current;
+        }
+        current = current.parentNode;
+    }
+    return root;
+}
+/**
+ * @description: 阻止浏览器默认行为
+ * @param {Event} event
+ * @return {void}
+ */
+export function preventDefault(event) {
+    if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+        event.preventDefault();
+    }
+}
+/**
+ * @description: 获取元素的相对于指定元素的坐标
+ * @param {HTMLElement} elem
+ * @return {*}
+ */
+export function getOffset(elem, root = document.body) {
+    let top = 0, left = 0;
+    if (elem && elem.nodeType === 1) {
+        while (elem.offsetParent && elem !== root) {
+            top += elem.offsetTop;
+            left += elem.offsetLeft;
+            elem = elem.offsetParent;
+        }
+        return { top: top, left: left };
+    }
+}
+/**
+```
+                      page
+                     ╱
+    ╭───────────────╮    viewport
+  ╭─│─ ─ ─ ─ ─ ─ ─ ─│─╮ ╱
+  │ │ ╭───────────╮ │ │
+  │ │ │  element  │ │ │
+  │ │ ╰───────────╯ │ │
+  ╰─│─ ─ ─ ─ ─ ─ ─ ─│─╯
+    │               │
+    │               │
+    ╰───────────────╯
+```
+
+# 对象
+- viewport: 视窗
+- page: 页面
+- element: 元素
+
+# 参数
+- viewportHeight: 视窗高度
+- viewportScrollTop: 视窗顶部滚动距离
+- elementHeight: 元素高度
+- elementToPageTopOffset: 元素距离页面顶部距离
+
+# 选项
+- placement: 元素在视窗中的位置(start, center, end, nearest)
+- offsetStart: 元素距离视窗顶部的偏移量
+- offsetEnd: 元素距离视窗底部的偏移量
+- limited: 是否限定视窗滚动的距离，让页面始终覆盖视窗；需要同时传递pageHeight选项（用于自定义滚动）
+- pageHeight: 页面高度
+
+# 结果值
+- viewportScrollTop: 视窗顶部滚动的新的距离
+
+*/
+export function getScrollIntoViewValue(viewportHeight, viewportScrollTop, elementHeight, elementToPageTopOffset, options = {}) {
+    const { offsetStart = 0, offsetEnd = 0, pageHeight, limited } = options;
+    let placement = options.placement || 'nearest';
+    const elementToViewportTopOffset = elementToPageTopOffset - viewportScrollTop;
+    const elementToViewportBottomOffset = elementToPageTopOffset + elementHeight - viewportScrollTop - viewportHeight;
+    if (placement === 'nearest') {
+        if (elementToViewportTopOffset >= 0 && elementToViewportBottomOffset <= 0) {
+            return viewportScrollTop;
+        }
+        else {
+            placement =
+                Math.abs(elementToViewportTopOffset) >
+                    Math.abs(elementToViewportBottomOffset)
+                    ? 'end'
+                    : 'start';
+        }
+    }
+    let nextScrollTop = 0;
+    switch (placement) {
+        case 'start':
+            nextScrollTop = elementToPageTopOffset - offsetStart;
+            break;
+        case 'center':
+            nextScrollTop =
+                elementToPageTopOffset - (viewportHeight - elementHeight) / 2;
+            break;
+        case 'end':
+            nextScrollTop =
+                elementToPageTopOffset + elementHeight - viewportHeight + offsetEnd;
+            break;
+    }
+    return limited
+        ? minmax(nextScrollTop, 0, pageHeight - viewportHeight)
+        : nextScrollTop;
+}
+/**
+ * 滚动元素到页面指定位置
+ *
+ * @param pageScrollTop 当前页面滚动的距离
+ * @param element 使用 ref 获取到元素
+ *
+ */
+export async function scrollIntoView(pageScrollTop, element, options = {}) {
+    const { contextId, block = 'start', behavior = 'instant', offsetTop = 0, offsetBottom = 0, } = options;
+    const windowHeight = systemInfo.windowHeight;
+    const scrollTop = pageScrollTop;
+    const elRect = await getRectByElement(element, contextId);
+    const elHeight = elRect.height;
+    const elToPageTop = scrollTop + elRect.top;
+    // tips: rn ios 端的 windowHeight 是包括状态栏和导航栏的，和屏幕高度一致。
+    const RNStartOffset = isRN ? (systemInfo.statusBarHeight || 0) + 44 : 0;
+    const nextScrollTop = getScrollIntoViewValue(windowHeight, scrollTop, elHeight, elToPageTop, {
+        placement: block,
+        offsetStart: offsetTop + RNStartOffset,
+        offsetEnd: offsetBottom,
+    });
+    Taro.pageScrollTo({
+        scrollTop: nextScrollTop,
+        duration: behavior === 'smooth' ? 300 : 0,
+    });
+}
+// NodesRef.fields 的异步封装
+export function getRectById(id, ctxId) {
+    return new Promise((resolve) => {
+        let query;
+        if (ctxId) {
+            const element = document.getElementById(ctxId);
+            if (element && element.ctx) {
+                query = Taro.createSelectorQuery().in(element.ctx);
+            }
+        }
+        if (!query) {
+            query = Taro.createSelectorQuery();
+        }
+        query
+            .select(`#${id}`)
+            .fields({
+            rect: true,
+            size: true,
+        }, (res) => {
+            resolve(res);
+        })
+            .exec();
+    });
+}
+// H5端获取元素位置和大小
+function getRectByWebElement(element) {
+    return new Promise((resolve, reject) => {
+        if (element instanceof Element) {
+            const rect = element.getBoundingClientRect();
+            resolve(rect);
+        }
+        else {
+            reject();
+        }
+    });
+}
+/**
+ * 命令式获取获取元素的大小和位置，兼容H5、小程序、RN
+ *
+ * @param element 通过 ref 获取的元素
+ * @param ctxId 在小程序端如果使用 CustomWrapper 包裹元素，需要传递其id。
+ */
+export function getRectByElement(element, ctxId) {
+    if (isRN) {
+        return measure(element);
+    }
+    else if (isH5) {
+        return getRectByWebElement(element);
+    }
+    else {
+        return getRectById(element.uid, ctxId);
+    }
+}
+/**
+ * @description: 匹配元素列表中第一个位于滚动盒子可视区域的元素
+ * @param {HTMLElement} elements 元素列表
+ * @param {function} callback 匹配成功时回调
+ * @param {number} offset 距离滚动盒子顶部的偏移量
+ * @param {number} errorValue 误差值
+ * @return {void}
+ */
+export async function matchScrollVisible(elementsOrRects, callback, options = {}) {
+    const { offset: optionOffset = 0, errorValue = 5, contextId, isRect, } = options;
+    const offset = optionOffset + errorValue;
+    for (let i = 0, l = elementsOrRects.length; i < l; i++) {
+        const elementOrRect = elementsOrRects[i];
+        let rect;
+        if (isRect) {
+            rect = elementOrRect;
+        }
+        else {
+            rect = await getRectByElement(elementOrRect, contextId);
+        }
+        if (rect) {
+            if (i === 0) {
+                if (rect.top > offset) {
+                    return callback(i);
+                }
+            }
+            else if (i > 0 && i < l - 1) {
+                if (rect.top > offset) {
+                    return callback(i - 1);
+                }
+                else if (rect.top <= offset && rect.bottom > offset) {
+                    return callback(i);
+                }
+            }
+            else {
+                return callback(i);
+            }
+        }
+    }
+}
+export function getElementById(id) {
+    if (id && typeof document === 'object' && document) {
+        return document.getElementById(id);
+    }
+}
+// 兼容pc端鼠标操作
+export function createMouseBinder(options) {
+    const { onStart, onMove, onEnd } = options;
+    const handleMouseDown = (event) => {
+        onStart?.(event);
+        const handeMouseMove = (event) => {
+            event.preventDefault();
+            onMove?.(event);
+        };
+        const handeMouseUp = (event) => {
+            document.removeEventListener('mousemove', handeMouseMove);
+            document.removeEventListener('mouseup', handeMouseUp);
+            onEnd?.(event);
+        };
+        document.addEventListener('mousemove', handeMouseMove);
+        document.addEventListener('mouseup', handeMouseUp);
+    };
+    return {
+        onMouseDown: handleMouseDown,
+    };
+}

package/dist/utils/file.d.ts

@@ -0,0 +1,18 @@
+export declare function isImageUrl(url: string): boolean;
+export declare function isImageFile(options: {
+    isImage?: boolean;
+    file?: File;
+    url?: string;
+    content?: string;
+}): boolean;
+export declare function isVideoUrl(url: string): boolean;
+export declare function isVideoFile(options: {
+    isVideo?: boolean;
+    file?: File;
+    url?: string;
+    content?: string;
+}): boolean;
+export declare function isFileUrl(url: string): boolean;
+export type FileReaderResultType = 'file' | 'dataUrl' | 'text';
+export declare function readFileContent(file: File, resultType: FileReaderResultType): Promise<string | void>;
+export declare function getFileName(path: string, ext?: boolean): string;

package/dist/utils/file.js

@@ -0,0 +1,57 @@
+import { isNumber, isString } from './is';
+// 判断url是否为图片url
+export function isImageUrl(url) {
+    const rPicMime = /\.(?:jpg|jpeg|png|gif|svg|bmp|webp|tiff|tif|heic|heif)$/i;
+    return (isNumber(url) ||
+        (isString(url) && (rPicMime.test(url) || url.indexOf('data:image') === 0)));
+}
+// 判断是否为图片，可以有多种校验方式
+export function isImageFile(options) {
+    const { isImage, file, url, content } = options;
+    return (isImage ||
+        (file && file.type.indexOf('image') === 0) ||
+        (url && isImageUrl(url)) ||
+        (isString(content) && content.indexOf('data:image') === 0));
+}
+// 判断url是否为图片url
+export function isVideoUrl(url) {
+    const rVideoMime = /\.(avi|mp4|mov|wmv|flv|mkv|mpeg|mpg|3gp|webm|swf|rmvb|vob|ts|mts|m2ts|divx|asf|ogv|f4v)$/i;
+    return (isNumber(url) ||
+        (isString(url) && (rVideoMime.test(url) || url.indexOf('data:video') === 0)));
+}
+// 判断是否为图片，可以有多种校验方式
+export function isVideoFile(options) {
+    const { isVideo, file, url, content } = options;
+    return (isVideo ||
+        (file && file.type.indexOf('video') === 0) ||
+        (url && isImageUrl(url)) ||
+        (isString(content) && content.indexOf('data:video') === 0));
+}
+// 判断url是否为文件url
+export function isFileUrl(url) {
+    return url.includes('/');
+}
+// 读取文件内容
+export function readFileContent(file, resultType) {
+    return new Promise((resolve) => {
+        if (resultType === 'file') {
+            resolve();
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => {
+            resolve(reader.result);
+        };
+        if (resultType === 'dataUrl') {
+            reader.readAsDataURL(file);
+        }
+        else if (resultType === 'text') {
+            reader.readAsText(file);
+        }
+    });
+}
+// 从路径中获取文件名（可以选择是否包含扩展名）
+export function getFileName(path, ext = true) {
+    const name = path.match(/\/([^/]+)$/)?.[1] || '';
+    return ext ? name : name.replace(/\.[^.]+$/, '');
+}

package/dist/utils/imperative.d.ts

@@ -0,0 +1,20 @@
+import { MutableRefObject } from 'react';
+import { PopupProps } from '../popup';
+export type AgentProps<ComponentProps extends {
+    onVisible?: (visible: boolean) => void;
+    popupProps?: PopupProps;
+}> = {
+    id?: string;
+    $$afterRender?: () => void;
+    popupProps?: PopupProps;
+} & ComponentProps;
+export interface AgentRef<ComponentProps> {
+    show(props: ComponentProps): void;
+    hide(): void;
+}
+export interface MapIdAgent<ComponentProps, ComponentRef> {
+    [id: string]: MutableRefObject<(AgentRef<ComponentProps> & ComponentRef) | undefined>;
+}
+export declare function useAgent<ComponentProps extends {
+    onVisible?(visible: boolean): void;
+}, ComponentRef>(component: any, agentProps: AgentProps<ComponentProps>, mapIdAgent: MapIdAgent<ComponentProps, ComponentRef>, defaultId: string): import("react").CElement<any, import("react").Component<any, any, any>>;