@canlooks/can-ui 0.0.41 → 0.0.43

package/dist/cjs/utils/gesture.js

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraggable = useDraggable;
+exports.usePinchable = usePinchable;
+exports.useGesture = useGesture;
+const react_1 = require("react");
+const theme_1 = require("../components/theme");
+const hooks_1 = require("./hooks");
+function useDraggable({ disabled, ...options }) {
+    return useGesture({ draggable: !disabled, ...options }).draggableHandles;
+}
+function usePinchable({ disabled, ...options }) {
+    return useGesture({ draggable: false, pinchable: !disabled, ...options }).pinchableHandles;
+}
+function useGesture(options) {
+    const { zoom } = (0, theme_1.useTheme)();
+    const syncOptions = (0, hooks_1.useSync)({
+        zoom,
+        draggable: true,
+        distance: 0,
+        preventNativeTouchMove: true,
+        ...options
+    });
+    const pointerEventMap = (0, react_1.useRef)(new Map());
+    const isDragged = (0, react_1.useRef)(false);
+    const dragStartPosition = (0, react_1.useRef)([0, 0]);
+    const dragStartTime = (0, react_1.useRef)(0);
+    const delayTimeout = (0, react_1.useRef)(void 0);
+    const data = (0, react_1.useRef)(void 0);
+    const isPinching = (0, react_1.useRef)(false);
+    const pinchStartMiddle = (0, react_1.useRef)([0, 0]);
+    const pinchStartSpacing = (0, react_1.useRef)(0);
+    const isRollback = (0, react_1.useRef)(false);
+    /**
+     * --------------------------------------------------------------------------------
+     * Drag 部分
+     */
+    const dragStartFn = (e) => {
+        isDragged.current = false;
+        dragStartPosition.current = [e.clientX, e.clientY];
+        dragStartTime.current = Date.now();
+        data.current = syncOptions.current.onDragStart?.(e);
+        document.documentElement.style.userSelect = 'none';
+    };
+    const draggingPointerDown = (0, react_1.useCallback)((e) => {
+        const { draggable, delay } = syncOptions.current;
+        if (!draggable || pointerEventMap.current.size >= 1) {
+            return;
+        }
+        if (delay) {
+            delayTimeout.current = setTimeout(() => {
+                delayTimeout.current = void 0;
+                dragStartFn(e);
+            }, delay);
+        }
+        else {
+            dragStartFn(e);
+        }
+        addEventListener('pointermove', draggingPointerMove);
+        addEventListener('pointerup', draggingPointerUp);
+        addEventListener('pointercancel', draggingPointerCancel);
+    }, []);
+    const settleDragInfo = ({ clientX, clientY }) => {
+        const diffX = (clientX - dragStartPosition.current[0]) / syncOptions.current.zoom;
+        const diffY = (clientY - dragStartPosition.current[1]) / syncOptions.current.zoom;
+        return {
+            start: dragStartPosition.current,
+            current: [clientX, clientY],
+            diff: [diffX, diffY],
+            data: data.current
+        };
+    };
+    const draggingPointerMove = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        const dragInfo = settleDragInfo(e);
+        if (!isRollback.current) {
+            const absDiffX = Math.abs(dragInfo.diff[0]);
+            const absDiffY = Math.abs(dragInfo.diff[1]);
+            if (delayTimeout.current) {
+                if (absDiffX > 5 || absDiffY > 5) {
+                    // 延时尚未结束，但偏移量过大，取消拖拽
+                    draggingPointerCancel(e);
+                }
+                return;
+            }
+            const { distance } = syncOptions.current;
+            if (absDiffX < distance || absDiffY < distance) {
+                // 拖拽距离未达到起步距离
+                return;
+            }
+        }
+        isDragged.current = true;
+        syncOptions.current.onDrag?.(dragInfo, e);
+    }, []);
+    const cancelDragFn = () => {
+        delayTimeout.current && clearTimeout(delayTimeout.current);
+        delayTimeout.current = void 0;
+        document.documentElement.style.userSelect = '';
+        removeEventListener('pointermove', draggingPointerMove);
+        removeEventListener('pointerup', draggingPointerUp);
+        removeEventListener('pointercancel', draggingPointerCancel);
+        preventFn.current && removeEventListener('touchmove', preventFn.current);
+    };
+    const settleDragEndInfo = (e) => {
+        const dragInfo = settleDragInfo(e);
+        const duration = Date.now() - dragStartTime.current;
+        return {
+            ...dragInfo,
+            duration,
+            speed: [
+                Math.abs(dragInfo.diff[0] / duration),
+                Math.abs(dragInfo.diff[1] / duration)
+            ]
+        };
+    };
+    const draggingPointerCancel = (0, react_1.useCallback)((e) => {
+        cancelDragFn();
+        const callback = syncOptions.current.onDragCancel || syncOptions.current.onDragEnd;
+        callback?.(settleDragEndInfo(e));
+    }, []);
+    const draggingPointerUp = (0, react_1.useCallback)((e) => {
+        cancelDragFn();
+        syncOptions.current.onDragEnd?.(settleDragEndInfo(e));
+    }, []);
+    /**
+     * --------------------------------------------------------------------------------
+     * Pinch 部分
+     */
+    const calPinchInfo = () => {
+        const [{ clientX: x1, clientY: y1 }, { clientX: x2, clientY: y2 }] = pointerEventMap.current.values();
+        const a = Math.abs(x2 - x1);
+        const b = Math.abs(y2 - y1);
+        return {
+            middle: [(x1 + x2) / 2, (y1 + y2) / 2],
+            spacing: Math.sqrt(a * a + b * b)
+        };
+    };
+    const pinchingCancelListened = (0, react_1.useRef)(false);
+    const pinchingPointerDown = (0, react_1.useCallback)((e) => {
+        if (!syncOptions.current.pinchable || pointerEventMap.current.size >= 2) {
+            return;
+        }
+        pointerEventMap.current.set(e.pointerId, e);
+        if (pointerEventMap.current.size === 2) {
+            draggingPointerCancel(e.nativeEvent);
+            isPinching.current = true;
+            document.documentElement.style.userSelect = 'none';
+            const { middle: startMiddle, spacing: startSpacing } = calPinchInfo();
+            pinchStartMiddle.current = startMiddle;
+            pinchStartSpacing.current = startSpacing;
+            data.current = syncOptions.current.onPinchStart?.({ startMiddle, startSpacing });
+            addEventListener('pointermove', pinchingPointerMove);
+        }
+        if (pinchingCancelListened.current) {
+            return;
+        }
+        pinchingCancelListened.current = true;
+        addEventListener('pointerup', pinchingPointerUp);
+        addEventListener('pointercancel', pinchingPointerCancel);
+    }, []);
+    const settlePinchInfo = () => {
+        const { middle: currentMiddle, spacing: currentSpacing } = calPinchInfo();
+        const diffMiddleX = (currentMiddle[0] - pinchStartMiddle.current[0]) / syncOptions.current.zoom;
+        const diffMiddleY = (currentMiddle[1] - pinchStartMiddle.current[1]) / syncOptions.current.zoom;
+        return {
+            startMiddle: pinchStartMiddle.current,
+            currentMiddle,
+            diffMiddle: [diffMiddleX, diffMiddleY],
+            startSpacing: pinchStartSpacing.current,
+            currentSpacing,
+            diffSpacing: currentSpacing - pinchStartSpacing.current,
+            data: data.current
+        };
+    };
+    const pinchingPointerMove = (0, react_1.useCallback)((e) => {
+        const event = pointerEventMap.current.get(e.pointerId);
+        if (!event) {
+            return;
+        }
+        e.preventDefault();
+        event.clientX = e.clientX;
+        event.clientY = e.clientY;
+        syncOptions.current.onPinch?.(settlePinchInfo());
+    }, []);
+    const debounce = (0, react_1.useRef)(void 0);
+    const pinchingPointerCancel = (0, react_1.useCallback)((e) => {
+        isPinching.current = false;
+        pointerEventMap.current.delete(e.pointerId);
+        if (!pointerEventMap.current.size) {
+            pinchingCancelListened.current = false;
+            removeEventListener('pointermove', pinchingPointerMove);
+            removeEventListener('pointerup', pinchingPointerUp);
+            removeEventListener('pointercancel', pinchingPointerCancel);
+        }
+    }, []);
+    const pinchingPointerUp = (0, react_1.useCallback)((e) => {
+        if (isPinching.current) {
+            if (debounce.current) {
+                clearTimeout(debounce.current);
+                debounce.current = void 0;
+                isRollback.current
+                    = pinchingCancelListened.current
+                        = false;
+                document.documentElement.style.userSelect = '';
+                syncOptions.current.onPinchEnd?.(settlePinchInfo());
+            }
+            else {
+                debounce.current = setTimeout(() => {
+                    isRollback.current = true;
+                    dragStartFn(pointerEventMap.current.values().next().value);
+                }, 50);
+            }
+        }
+        pinchingPointerCancel(e);
+    }, []);
+    /**
+     * --------------------------------------------------------------------------------
+     * 托管touch与click事件
+     */
+    const preventFn = (0, react_1.useRef)(void 0);
+    const onTouchStart = (0, react_1.useCallback)(() => {
+        preventFn.current = (e) => {
+            e.cancelable && e.preventDefault();
+        };
+        addEventListener('touchmove', preventFn.current, { passive: false });
+    }, []);
+    const onClick = (0, react_1.useCallback)((e) => {
+        if (isDragged.current || isPinching.current) {
+            // 已经触发了拖拽或捏合，避免触发点击事件
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else {
+            syncOptions.current.onClick?.(e);
+        }
+    }, []);
+    const { preventNativeTouchMove, pinchable } = syncOptions.current;
+    return {
+        draggableHandles: {
+            onPointerDown: draggingPointerDown,
+            onClick,
+            ...preventNativeTouchMove && !pinchable && { onTouchStart }
+        },
+        pinchableHandles: {
+            onPointerDown: pinchingPointerDown,
+            onClick,
+            ...preventNativeTouchMove && pinchable && { onTouchStart }
+        }
+    };
+}

package/dist/cjs/utils/index.d.ts

@@ -3,6 +3,7 @@ export * from './curd';
 export * from './dataGrid';
 export * from './dnd';
 export * from './form';
+export * from './gesture';
 export * from './hooks';
 export * from './keyboard';
 export * from './polyfill';

package/dist/cjs/utils/index.js

@@ -6,6 +6,7 @@ tslib_1.__exportStar(require("./curd"), exports);
 tslib_1.__exportStar(require("./dataGrid"), exports);
 tslib_1.__exportStar(require("./dnd"), exports);
 tslib_1.__exportStar(require("./form"), exports);
+tslib_1.__exportStar(require("./gesture"), exports);
 tslib_1.__exportStar(require("./hooks"), exports);
 tslib_1.__exportStar(require("./keyboard"), exports);
 tslib_1.__exportStar(require("./polyfill"), exports);

package/dist/cjs/utils/style.js

@@ -105,7 +105,7 @@ function useTouchRipple(colorPropsValue) {
         return (0, color_1.default)(colorTransfer(colorPropsValue, theme)).alpha(.6).string();
     }, [colorPropsValue, theme]);
     return (element) => {
-        typeof element.animate === 'function' && element.animate([
+        element.animate([
             {
                 outlineWidth: '0',
                 outlineStyle: 'solid',

package/dist/cjs/utils/utils.d.ts

@@ -116,8 +116,6 @@ export declare function findPredecessor(target: Element, callback: (el: Element)
 export declare function listenAllPredecessorsScroll(target: Element | Document, listener: (e: Event) => void): () => void;
 /**
  * 将数值限制在某个范围内
- * @param value
- * @param {[min, max]}
  */
 export declare function range(value: number, min?: number, max?: number): number;
 /**

package/dist/cjs/utils/utils.js

@@ -286,8 +286,6 @@ function listenAllPredecessorsScroll(target, listener) {
 }
 /**
  * 将数值限制在某个范围内
- * @param value
- * @param {[min, max]}
  */
 function range(value, min = -Infinity, max = Infinity) {
     return Math.max(min, Math.min(max, value));

package/dist/esm/components/alert/alert.style.js

@@ -19,6 +19,7 @@ export function useStyle({ color }) {
         const filledBg = mode === 'light' ? colorValue : c.alpha(.8).string();
         return css `
             display: flex;
+            align-items: center;
             gap: ${spacing[3]}px;
             padding: ${spacing[4]}px ${spacing[5]}px;
             border-radius: ${borderRadius}px;

package/dist/esm/components/checkboxBase/checkboxBase.js

@@ -15,7 +15,7 @@ export const CheckboxBase = memo(({ inputProps, _type, size, color, label, value
     }
     const checkboxRef = useRef(null);
     const innerInputRef = useRef(null);
-    const [innerChecked, setInnerChecked] = useControlled(defaultChecked, context.checked ?? checked);
+    const [innerChecked, setInnerChecked] = useControlled(defaultChecked, checked);
     const showRipple = useTouchRipple(color);
     const clickHandler = (e) => {
         if (disabled || readOnly) {
@@ -26,7 +26,6 @@ export const CheckboxBase = memo(({ inputProps, _type, size, color, label, value
         e.target = e.currentTarget = innerInputRef.current;
         props.onClick?.(e);
         onChange?.(e);
-        context.setChecked?.(newChecked);
         setInnerChecked(newChecked);
     };
     const inputKeydown = (e) => {

package/dist/esm/components/checkboxBaseGroup/checkboxBaseGroup.d.ts

@@ -14,7 +14,5 @@ export type CheckboxBaseGroupProps<I extends ItemType, V extends Id = Id> = Chec
 export declare function useCheckboxBaseGroupContext(): {
     size?: Size;
     color?: ColorPropsValue;
-    checked?: boolean;
-    setChecked?(checked: boolean): void;
 };
 export declare const CheckboxBaseGroup: <I extends ItemType, V extends Id = Id>(props: CheckboxBaseGroupProps<I, V>) => ReactElement;

package/dist/esm/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, createContext, isValidElement, useContext } from 'react';
+import { Children, cloneElement, createContext, isValidElement, useContext, useMemo } from 'react';
 import { Flex } from '../flex';
 import { clsx, isSelected } from '../../utils';
 import { classes } from './checkboxBaseGroup.style';
@@ -7,9 +7,9 @@ import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
 import { useTheme } from '../theme';
 import { useShallowSelection } from '../selectionContext';
-const checkboxBaseGroupContext = createContext({});
+const CheckboxBaseGroupContext = createContext({});
 export function useCheckboxBaseGroupContext() {
-    return useContext(checkboxBaseGroupContext);
+    return useContext(CheckboxBaseGroupContext);
 }
 export const CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
     const { spacing } = useTheme();
@@ -42,5 +42,5 @@ export const CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', m
             });
         });
     };
-    return (_jsx(Flex, { gap: spacing[8], ...props, className: clsx(classes.root, props.className), children: renderItems() }));
+    return (_jsx(Flex, { gap: spacing[8], ...props, className: clsx(classes.root, props.className), children: _jsx(CheckboxBaseGroupContext, { value: useMemo(() => ({ size, color }), [size, color]), children: renderItems() }) }));
 });

package/dist/esm/components/clickAway/clickAway.d.ts

@@ -10,4 +10,288 @@ export interface ClickAwayProps extends DivProps {
     /** 用于参考的目标元素，若为数组，需要点击数组外的元素才会触发clickAway */
     targets?: () => Element | null | (Element | null)[];
 }
-export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").FunctionComponentElement<{
+    ref: (ref: Element | null) => void;
+    key: string | number | bigint | null;
+    defaultChecked: boolean;
+    defaultValue: string | number | readonly string[];
+    suppressContentEditableWarning: boolean;
+    suppressHydrationWarning: boolean;
+    accessKey: string;
+    autoCapitalize: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
+    autoFocus: boolean;
+    className: string;
+    contentEditable: boolean | "inherit" | "false" | "true" | "plaintext-only";
+    contextMenu: string;
+    dir: string;
+    draggable: boolean | "false" | "true";
+    enterKeyHint: "search" | "done" | "next" | "enter" | "go" | "previous" | "send";
+    hidden: boolean;
+    id: string;
+    lang: string;
+    nonce: string;
+    slot: string;
+    spellCheck: boolean | "false" | "true";
+    style: import("react").CSSProperties;
+    tabIndex: number;
+    title: string;
+    translate: "yes" | "no";
+    radioGroup: string;
+    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
+    about: string;
+    content: string;
+    datatype: string;
+    inlist: any;
+    prefix: string;
+    property: string;
+    rel: string;
+    resource: string;
+    rev: string;
+    typeof: string;
+    vocab: string;
+    autoCorrect: string;
+    autoSave: string;
+    color: string;
+    itemProp: string;
+    itemScope: boolean;
+    itemType: string;
+    itemID: string;
+    itemRef: string;
+    results: number;
+    security: string;
+    unselectable: "off" | "on";
+    popover: "" | "auto" | "manual";
+    popoverTargetAction: "hide" | "show" | "toggle";
+    popoverTarget: string;
+    inert: boolean;
+    inputMode: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
+    is: string;
+    exportparts: string;
+    part: string;
+    "aria-activedescendant": string;
+    "aria-atomic": boolean | "false" | "true";
+    "aria-autocomplete": "both" | "none" | "inline" | "list";
+    "aria-braillelabel": string;
+    "aria-brailleroledescription": string;
+    "aria-busy": boolean | "false" | "true";
+    "aria-checked": boolean | "mixed" | "false" | "true";
+    "aria-colcount": number;
+    "aria-colindex": number;
+    "aria-colindextext": string;
+    "aria-colspan": number;
+    "aria-controls": string;
+    "aria-current": boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date";
+    "aria-describedby": string;
+    "aria-description": string;
+    "aria-details": string;
+    "aria-disabled": boolean | "false" | "true";
+    "aria-dropeffect": "link" | "none" | "copy" | "move" | "execute" | "popup";
+    "aria-errormessage": string;
+    "aria-expanded": boolean | "false" | "true";
+    "aria-flowto": string;
+    "aria-grabbed": boolean | "false" | "true";
+    "aria-haspopup": boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
+    "aria-hidden": boolean | "false" | "true";
+    "aria-invalid": boolean | "false" | "true" | "grammar" | "spelling";
+    "aria-keyshortcuts": string;
+    "aria-label": string;
+    "aria-labelledby": string;
+    "aria-level": number;
+    "aria-live": "off" | "assertive" | "polite";
+    "aria-modal": boolean | "false" | "true";
+    "aria-multiline": boolean | "false" | "true";
+    "aria-multiselectable": boolean | "false" | "true";
+    "aria-orientation": "horizontal" | "vertical";
+    "aria-owns": string;
+    "aria-placeholder": string;
+    "aria-posinset": number;
+    "aria-pressed": boolean | "mixed" | "false" | "true";
+    "aria-readonly": boolean | "false" | "true";
+    "aria-relevant": "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    "aria-required": boolean | "false" | "true";
+    "aria-roledescription": string;
+    "aria-rowcount": number;
+    "aria-rowindex": number;
+    "aria-rowindextext": string;
+    "aria-rowspan": number;
+    "aria-selected": boolean | "false" | "true";
+    "aria-setsize": number;
+    "aria-sort": "none" | "ascending" | "descending" | "other";
+    "aria-valuemax": number;
+    "aria-valuemin": number;
+    "aria-valuenow": number;
+    "aria-valuetext": string;
+    dangerouslySetInnerHTML: {
+        __html: string | TrustedHTML;
+    };
+    onCopy: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCopyCapture: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCut: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCutCapture: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onPaste: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onPasteCapture: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCompositionEnd: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionEndCapture: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionStart: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionStartCapture: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionUpdate: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionUpdateCapture: import("react").CompositionEventHandler<HTMLDivElement>;
+    onFocus: import("react").FocusEventHandler<HTMLDivElement>;
+    onFocusCapture: import("react").FocusEventHandler<HTMLDivElement>;
+    onBlur: import("react").FocusEventHandler<HTMLDivElement>;
+    onBlurCapture: import("react").FocusEventHandler<HTMLDivElement>;
+    onChange: import("react").FormEventHandler<HTMLDivElement>;
+    onChangeCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInput: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInputCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onInput: import("react").FormEventHandler<HTMLDivElement>;
+    onInputCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onReset: import("react").FormEventHandler<HTMLDivElement>;
+    onResetCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onSubmit: import("react").FormEventHandler<HTMLDivElement>;
+    onSubmitCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onInvalid: import("react").FormEventHandler<HTMLDivElement>;
+    onInvalidCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onLoad: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onError: import("react").ReactEventHandler<HTMLDivElement>;
+    onErrorCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onKeyDown: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyDownCapture: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyPress: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyPressCapture: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyUp: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyUpCapture: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onAbort: import("react").ReactEventHandler<HTMLDivElement>;
+    onAbortCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlay: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlayCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlayThrough: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlayThroughCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onDurationChange: import("react").ReactEventHandler<HTMLDivElement>;
+    onDurationChangeCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onEmptied: import("react").ReactEventHandler<HTMLDivElement>;
+    onEmptiedCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onEncrypted: import("react").ReactEventHandler<HTMLDivElement>;
+    onEncryptedCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onEnded: import("react").ReactEventHandler<HTMLDivElement>;
+    onEndedCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedData: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedDataCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedMetadata: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedMetadataCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadStart: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadStartCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onPause: import("react").ReactEventHandler<HTMLDivElement>;
+    onPauseCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlay: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlayCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlaying: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlayingCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onProgress: import("react").ReactEventHandler<HTMLDivElement>;
+    onProgressCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onRateChange: import("react").ReactEventHandler<HTMLDivElement>;
+    onRateChangeCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onResize: import("react").ReactEventHandler<HTMLDivElement>;
+    onResizeCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeeked: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeekedCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeeking: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeekingCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onStalled: import("react").ReactEventHandler<HTMLDivElement>;
+    onStalledCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onSuspend: import("react").ReactEventHandler<HTMLDivElement>;
+    onSuspendCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onTimeUpdate: import("react").ReactEventHandler<HTMLDivElement>;
+    onTimeUpdateCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onVolumeChange: import("react").ReactEventHandler<HTMLDivElement>;
+    onVolumeChangeCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onWaiting: import("react").ReactEventHandler<HTMLDivElement>;
+    onWaitingCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onAuxClick: import("react").MouseEventHandler<HTMLDivElement>;
+    onAuxClickCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onClick: import("react").MouseEventHandler<HTMLDivElement>;
+    onClickCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onContextMenu: import("react").MouseEventHandler<HTMLDivElement>;
+    onContextMenuCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onDoubleClick: import("react").MouseEventHandler<HTMLDivElement>;
+    onDoubleClickCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onDrag: import("react").DragEventHandler<HTMLDivElement>;
+    onDragCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEnd: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEndCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEnter: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEnterCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragExit: import("react").DragEventHandler<HTMLDivElement>;
+    onDragExitCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragLeave: import("react").DragEventHandler<HTMLDivElement>;
+    onDragLeaveCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragOver: import("react").DragEventHandler<HTMLDivElement>;
+    onDragOverCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragStart: import("react").DragEventHandler<HTMLDivElement>;
+    onDragStartCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDrop: import("react").DragEventHandler<HTMLDivElement>;
+    onDropCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onMouseDown: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseDownCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseEnter: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseLeave: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseMove: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseMoveCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOut: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOutCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOver: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOverCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseUp: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseUpCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onSelect: import("react").ReactEventHandler<HTMLDivElement>;
+    onSelectCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onTouchCancel: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchCancelCapture: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchEnd: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchEndCapture: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchMove: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchMoveCapture: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchStart: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchStartCapture: import("react").TouchEventHandler<HTMLDivElement>;
+    onPointerDown: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerDownCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerMove: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerMoveCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerUp: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerUpCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerCancel: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerCancelCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerEnter: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerLeave: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOver: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOverCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOut: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOutCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onGotPointerCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onGotPointerCaptureCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onLostPointerCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onLostPointerCaptureCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onScroll: import("react").UIEventHandler<HTMLDivElement>;
+    onScrollCapture: import("react").UIEventHandler<HTMLDivElement>;
+    onScrollEnd: import("react").UIEventHandler<HTMLDivElement>;
+    onScrollEndCapture: import("react").UIEventHandler<HTMLDivElement>;
+    onWheel: import("react").WheelEventHandler<HTMLDivElement>;
+    onWheelCapture: import("react").WheelEventHandler<HTMLDivElement>;
+    onAnimationStart: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationStartCapture: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationEnd: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationEndCapture: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationIteration: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationIterationCapture: import("react").AnimationEventHandler<HTMLDivElement>;
+    onToggle: import("react").ToggleEventHandler<HTMLDivElement>;
+    onBeforeToggle: import("react").ToggleEventHandler<HTMLDivElement>;
+    onTransitionCancel: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionCancelCapture: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionEnd: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionEndCapture: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionRun: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionRunCapture: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionStart: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionStartCapture: import("react").TransitionEventHandler<HTMLDivElement>;
+}> | undefined;