@m4l/components 0.0.62 → 0.0.63

package/{dist/components → components}/CommonActions/components/Actions/index.js

@@ -82,9 +82,7 @@ function MenuActions(props) {
         size: "small",
         onClick: handleOpen,
         children: /* @__PURE__ */ jsx(Icon, {
-          src: urlFinalIcon,
-          width: 16,
-          height: 16
+          src: urlFinalIcon
         })
       })
     }), /* @__PURE__ */ jsx(MenuPopover, {

package/{dist/components → components}/DataGrid/index.js

@@ -179,24 +179,26 @@ function CheckboxIndeterminateIcon(props) {
     })
   });
 }
-const CheckboxFormatter = forwardRef(function CheckboxFormatter2({
-  onChange,
-  checked,
-  ...props
-}, _ref) {
-  function handleChange(e) {
-    onChange(e.target.checked, e.nativeEvent.shiftKey);
-  }
-  return /* @__PURE__ */ jsx(Checkbox, {
+const CheckboxFormatter = forwardRef(
+  function CheckboxFormatter2({
+    onChange,
     checked,
-    size: "small",
-    icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
-    checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
-    indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
-    onChange: handleChange,
     ...props
-  });
-});
+  }, _ref) {
+    function handleChange(e) {
+      onChange(e.target.checked, e.nativeEvent.shiftKey);
+    }
+    return /* @__PURE__ */ jsx(Checkbox, {
+      checked,
+      size: "small",
+      icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
+      checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
+      indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
+      onChange: handleChange,
+      ...props
+    });
+  }
+);
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectFormatter(props) {
@@ -685,7 +687,9 @@ const getInOrderColumns = (columns, isMultipleRows, columnsConfig, columnsWidths
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
     return !column.hidden && visible;
-  }).sort((a, b) => getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig)).map((columnSorted) => {
+  }).sort(
+    (a, b) => getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig)
+  ).map((columnSorted) => {
     const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
     return {
       ...columnSorted,
@@ -719,7 +723,9 @@ const getAligByType = (columnType) => {
 };
 const useSortColumnsRows = (sourceColumns, sourceRows, isMultipleRows) => {
   const { columnsConfig, columnsWidths, onChangeColumnsOrder, rowActionsGetter, isSkeleton } = useBase();
-  const [columns, setColumns] = useState(() => []);
+  const [columns, setColumns] = useState(
+    () => []
+  );
   const [sortColumns, setSortColumns] = useState([]);
   const { activeFilters, filters } = useFilters();
   const findKeyInColumns = (key, cols) => {
@@ -727,8 +733,18 @@ const useSortColumnsRows = (sourceColumns, sourceRows, isMultipleRows) => {
     return index !== -1;
   };
   useEffect(() => {
-    setColumns(getInOrderColumns(sourceColumns, isMultipleRows, columnsConfig, columnsWidths, rowActionsGetter));
-    const finalSortedColumns = sortColumns.filter((sortColumn) => findKeyInColumns(sortColumn.columnKey, sourceColumns));
+    setColumns(
+      getInOrderColumns(
+        sourceColumns,
+        isMultipleRows,
+        columnsConfig,
+        columnsWidths,
+        rowActionsGetter
+      )
+    );
+    const finalSortedColumns = sortColumns.filter(
+      (sortColumn) => findKeyInColumns(sortColumn.columnKey, sourceColumns)
+    );
     if (JSON.stringify(finalSortedColumns) !== JSON.stringify(sortColumns)) {
       setSortColumns(finalSortedColumns);
     }

package/{dist/components → components}/DynamicFilter/index.js

@@ -18,10 +18,10 @@ import "../../react-lazy-load-image-component.js";
 import "../Image/index.js";
 import "../hook-form/RHFUpload.js";
 import { I as IconButton } from "../mui_extended/IconButton/index.js";
-import { I as Icon } from "../Icon/index.js";
 import "../../simplebar.js";
 import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
 import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
+import { I as Icon } from "../Icon/index.js";
 import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.js";
 import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.js";
 import "react-router-dom";
@@ -1132,7 +1132,7 @@ function ApplyedFilter(props) {
   return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
     id: "WrapperApplyedFilter",
     className: !isSetted ? "waf_no_setted" : "",
-    children: [urlIcon && /* @__PURE__ */ jsx(Icon, {
+    children: [urlIcon && /* @__PURE__ */ jsx(IconButton, {
       src: urlIcon,
       onClick
     }), /* @__PURE__ */ jsxs(AplyedFilterStyled, {
@@ -1272,14 +1272,14 @@ function FilterButton() {
     });
   }
   const color = useMemo(() => {
-    if (automatic) {
-      return "active";
+    if (automatic || !isDirty) {
+      return "action.active";
     }
     if (!isValid) {
-      return "error";
+      return "error.main";
     }
-    return "selected";
-  }, [automatic, isValid]);
+    return "primary.main";
+  }, [automatic, isValid, isDirty]);
   return /* @__PURE__ */ jsx(WrapperFilterButton, {
     id: "WrapperFilterButton",
     className: isDirty && isValid ? "isDirty" : "",

package/{dist/components → components}/Icon/index.js

@@ -1,45 +1,59 @@
 import { styled } from "@mui/material";
-import { useState, useEffect } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { useTheme } from "@mui/material/styles";
 import { g as getPaletteColor } from "../../vendor.js";
 import { jsx } from "react/jsx-runtime";
 const DivIcon = styled("div", {
-  shouldForwardProp: (props) => props !== "src" && props !== "width" && props !== "height" && props !== "bgColor"
-})((props) => ({
+  shouldForwardProp: (props) => props !== "src" && props !== "sizeIcon" && props !== "bgColor"
+})(({
+  size,
+  src,
+  bgColor
+}) => ({
   maskPosition: "center!important",
   maskRepeat: "no-repeat!important",
   WebkitMaskRepeat: "no-repeat!important",
-  width: props.width === void 0 ? "20px" : props.width,
-  height: props.height === void 0 ? "20px" : props.height,
-  backgroundColor: props.bgColor,
-  mask: `url('data:image/svg+xml;base64,${props.src}')`,
-  WebkitMask: `url('data:image/svg+xml;base64,${props.src}')`
+  width: size,
+  height: size,
+  backgroundColor: bgColor,
+  mask: `url('data:image/svg+xml;base64,${src}')`,
+  WebkitMask: `url('data:image/svg+xml;base64,${src}')`
 }));
-const WrapperPlaceHolder = styled("div", {
-  shouldForwardProp: (props) => props !== "widht" && props !== "height"
-})((props) => ({
+const WrapperPlaceHolder = styled("div")(() => ({
   display: "flex",
   justifyContent: "center",
-  alignItems: "center",
-  width: props.width,
-  height: props.height
+  alignItems: "center"
 }));
 function Icon(props) {
   const {
     src,
-    width = "16px",
-    height = "16px",
+    size = "small",
     bgColor = "action.active"
   } = props;
   const [resource, setResource] = useState(void 0);
   const theme = useTheme();
+  const finalSize = useMemo(() => {
+    switch (size) {
+      case "extra-small":
+        return "12px";
+      case "small":
+        return "16px";
+      case "medium":
+        return "18px";
+      case "large":
+        return "22px";
+    }
+    return size;
+  }, [size]);
   useEffect(() => {
     let mounted = true;
     (async function networkOperation() {
       await fetch(src).then((response) => {
         return response.text() || "";
       }).then((xml) => {
-        xml = xml.match(/(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g)?.toString() || "";
+        xml = xml.match(
+          /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
+        )?.toString() || "";
         if (mounted) {
           setResource(window.btoa(xml));
           console.log("value icon set resource", resource);
@@ -56,12 +70,9 @@ function Icon(props) {
   console.log("value for getColor", getPaletteColor(theme.palette, "error.main"));
   return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
     id: "IconReact",
-    width,
-    height,
     children: resource ? /* @__PURE__ */ jsx(DivIcon, {
       src: resource,
-      width,
-      height,
+      size: finalSize,
       bgColor: getPaletteColor(theme.palette, bgColor)
     }) : /* @__PURE__ */ jsx("img", {
       src: placeHolder,

package/components/Icon/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from './types';
+export declare const DivIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & IconProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperPlaceHolder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Icon/types.d.ts

@@ -0,0 +1,9 @@
+export declare type SizeIcon = 'extra-small' | 'small' | 'normal' | 'large' | string;
+export interface IconProps {
+    src: string;
+    bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'selected' | 'disabled';
+    size?: SizeIcon;
+}
+export declare type WrapperPlaceHolderProps = {
+    size: string;
+};

package/{dist/components → components}/Page/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { PageProps } from './types';
-export declare const Page: import("react").ForwardRefExoticComponent<Pick<PageProps, "meta" | "p" | "slot" | "style" | "title" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "sx" | "key" | "children" | "className" | "classes" | "component" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Page: import("react").ForwardRefExoticComponent<Pick<PageProps, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "children" | "meta" | "p" | "slot" | "style" | "title" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "sx" | "key" | "className" | "classes" | "component" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;