@visactor/react-vtable 1.25.0 → 1.25.1-alpha.1

package/es/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/avatar/avatar.tsx"],"names":[],"mappings":"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","file":"avatar.js","sourcesContent":["import type { IGroup, IGroupAttribute } from '@visactor/vtable/es/vrender';\nimport {\n  measureTextSize,\n  type BackgroundAttributes,\n  type Cursor,\n  type IRectGraphicAttribute,\n  type ITextGraphicAttribute,\n  type Padding,\n  type Tag,\n  type TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { isString, merge } from '@visactor/vutils';\nimport type { ReactElement } from 'react';\nimport React, { useEffect } from 'react';\nimport { Group, Image, Text } from '../../table-components';\n\nexport interface AvatarProps {\n  children?: string | React.ReactNode;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  panelStyle?: BackgroundAttributes;\n  size?: number;\n  shape?: 'circle' | 'square';\n  visible?: boolean;\n  cursor?: Cursor;\n  autoFixFontSize?: boolean;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: AvatarProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: '#FFF'\n  },\n  panelStyle: {\n    visible: true,\n    fill: 'rgb(201, 205, 212)',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  size: 40,\n  shape: 'circle',\n  autoFixFontSize: true\n  // cursor: 'pointer',\n};\n\nfunction AvatarComponent(baseProps: AvatarProps, ref: React.Ref<IGroup>) {\n  const props: AvatarProps = merge({}, defaultProps, baseProps);\n  const { size, children, onClick } = props;\n  let avatarRef = React.useRef<IGroup>(null);\n  avatarRef = ref ? (ref as React.RefObject<IGroup>) : avatarRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      onClick && onClick(event);\n    },\n    [onClick]\n  );\n\n  const groupAttribute = getGroupAttribute(props);\n  if (isString(children)) {\n    const textAttribute = getTextAttribute(props);\n    return (\n      <Group ref={avatarRef} attribute={groupAttribute} onClick={handleClick}>\n        <Text attribute={textAttribute}></Text>\n      </Group>\n    );\n  }\n  if ((children as ReactElement).type === 'image') {\n    (children as ReactElement).props.attribute.width = size;\n    (children as ReactElement).props.attribute.height = size;\n  }\n  return (\n    <Group ref={avatarRef} attribute={groupAttribute} onClick={handleClick}>\n      {children}\n    </Group>\n  );\n}\n\nfunction getTextAttribute(props: AvatarProps) {\n  const { textStyle, size, children, autoFixFontSize } = props;\n\n  const attribute: ITextGraphicAttribute = {\n    text: children as string,\n    ...textStyle\n  };\n\n  if (autoFixFontSize) {\n    getAutoFixFontSize(size, attribute);\n  }\n\n  return attribute;\n}\nfunction getGroupAttribute(props: AvatarProps) {\n  const { panelStyle, size, shape } = props;\n  const attribute: IGroupAttribute = {\n    ...panelStyle,\n    width: size,\n    height: size,\n    clip: true,\n    cornerRadius: shape === 'circle' ? size / 2 : panelStyle.cornerRadius ?? 2,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    visibleAll: true,\n    path: undefined\n  };\n  return attribute;\n}\n\nexport const Avatar = React.forwardRef<IGroup, AvatarProps>(AvatarComponent);\n\nAvatar.displayName = 'Avatar';\n\n// auto adjust font size\nfunction getAutoFixFontSize(size: number, attribute: ITextGraphicAttribute) {\n  const textWidth = measureTextSize(attribute.text, attribute).width;\n  const scale = size / (textWidth + 8);\n  const fontSize = Math.max(Math.floor(attribute.fontSize * scale), 6);\n  attribute.fontSize = fontSize;\n}\n"]}
+{"version":3,"sources":["components/avatar/avatar.tsx"],"names":[],"mappings":"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","file":"avatar.js","sourcesContent":["import type { IGroup, IGroupGraphicAttribute } from '@visactor/vtable/es/vrender';\nimport {\n  measureTextSize,\n  type BackgroundAttributes,\n  type Cursor,\n  type IRectGraphicAttribute,\n  type ITextGraphicAttribute,\n  type Padding,\n  type Tag,\n  type TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { isString, merge } from '@visactor/vutils';\nimport type { ReactElement } from 'react';\nimport React, { useEffect } from 'react';\nimport { Group, Image, Text } from '../../table-components';\n\nexport interface AvatarProps {\n  children?: string | React.ReactNode;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  panelStyle?: BackgroundAttributes;\n  size?: number;\n  shape?: 'circle' | 'square';\n  visible?: boolean;\n  cursor?: Cursor;\n  autoFixFontSize?: boolean;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: AvatarProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: '#FFF'\n  },\n  panelStyle: {\n    visible: true,\n    fill: 'rgb(201, 205, 212)',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  size: 40,\n  shape: 'circle',\n  autoFixFontSize: true\n  // cursor: 'pointer',\n};\n\nfunction AvatarComponent(baseProps: AvatarProps, ref: React.Ref<IGroup>) {\n  const props: AvatarProps = merge({}, defaultProps, baseProps);\n  const { size, children, onClick } = props;\n  let avatarRef = React.useRef<IGroup>(null);\n  avatarRef = ref ? (ref as React.RefObject<IGroup>) : avatarRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      onClick && onClick(event);\n    },\n    [onClick]\n  );\n\n  const groupAttribute = getGroupAttribute(props);\n  if (isString(children)) {\n    const textAttribute = getTextAttribute(props);\n    return (\n      <Group ref={avatarRef} attribute={groupAttribute} onClick={handleClick}>\n        <Text attribute={textAttribute}></Text>\n      </Group>\n    );\n  }\n  if ((children as ReactElement).type === 'image') {\n    (children as ReactElement).props.attribute.width = size;\n    (children as ReactElement).props.attribute.height = size;\n  }\n  return (\n    <Group ref={avatarRef} attribute={groupAttribute} onClick={handleClick}>\n      {children}\n    </Group>\n  );\n}\n\nfunction getTextAttribute(props: AvatarProps) {\n  const { textStyle, size, children, autoFixFontSize } = props;\n\n  const attribute: ITextGraphicAttribute = {\n    text: children as string,\n    ...textStyle\n  };\n\n  if (autoFixFontSize) {\n    getAutoFixFontSize(size, attribute);\n  }\n\n  return attribute;\n}\nfunction getGroupAttribute(props: AvatarProps) {\n  const { panelStyle, size, shape } = props;\n  const attribute: IGroupGraphicAttribute = {\n    ...panelStyle,\n    width: size,\n    height: size,\n    clip: true,\n    cornerRadius: shape === 'circle' ? size / 2 : panelStyle.cornerRadius ?? 2,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    visibleAll: true,\n    path: undefined\n  };\n  return attribute;\n}\n\nexport const Avatar = React.forwardRef<IGroup, AvatarProps>(AvatarComponent);\n\nAvatar.displayName = 'Avatar';\n\n// auto adjust font size\nfunction getAutoFixFontSize(size: number, attribute: ITextGraphicAttribute) {\n  const textWidth = measureTextSize(attribute.text, attribute).width;\n  const scale = size / (textWidth + 8);\n  const fontSize = Math.max(Math.floor(attribute.fontSize * scale), 6);\n  attribute.fontSize = fontSize;\n}\n"]}

package/es/components/button/button.js

@@ -37,14 +37,19 @@ function ButtonComponent(baseProps, ref) {
         disabled ? "function" == typeof (null == event ? void 0 : event.preventDefault) && event.preventDefault() : onClick && onClick(event);
     }), [ disabled, onClick ]), attribute = getTagAttribute(props);
     return useEffect((() => {
-        buttonRef.current.addEventListener("mouseenter", (() => {
-            disabled || (buttonRef.current.addState("hover", !0, !1), buttonRef.current.stage.renderNextFrame());
-        })), buttonRef.current.addEventListener("mouseleave", (() => {
-            disabled || (buttonRef.current.removeState("hover", !1), buttonRef.current.stage.renderNextFrame());
-        }));
+        const inst = buttonRef.current;
+        inst && (inst.addEventListener("mouseenter", (() => {
+            var _a, _b;
+            disabled || (inst.addState("hover", !0, !1), null === (_b = null === (_a = inst.stage) || void 0 === _a ? void 0 : _a.renderNextFrame) || void 0 === _b || _b.call(_a));
+        })), inst.addEventListener("mouseleave", (() => {
+            var _a, _b;
+            disabled || (inst.removeState("hover", !1), null === (_b = null === (_a = inst.stage) || void 0 === _a ? void 0 : _a.renderNextFrame) || void 0 === _b || _b.call(_a));
+        })));
     })), useEffect((() => {
-        disabled ? (buttonRef.current.removeState("disabled", !1), buttonRef.current.addState("disabled", !0, !1)) : buttonRef.current.removeState("disabled", !1), 
-        buttonRef.current.stage.renderNextFrame();
+        var _a, _b;
+        const inst = buttonRef.current;
+        inst && (disabled ? (inst.removeState("disabled", !1), inst.addState("disabled", !0, !1)) : inst.removeState("disabled", !1), 
+        null === (_b = null === (_a = inst.stage) || void 0 === _a ? void 0 : _a.renderNextFrame) || void 0 === _b || _b.call(_a));
     })), React.createElement(VTag, {
         ref: buttonRef,
         attribute: attribute,

package/es/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/button/button.tsx"],"names":[],"mappings":"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","file":"button.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { merge } from '@visactor/vutils';\nimport React, { useEffect } from 'react';\n\ninterface ButtonStateStyle {\n  textStyle?: {\n    hover?: Partial<ITextGraphicAttribute>;\n    disabled?: Partial<ITextGraphicAttribute>;\n  };\n  panelStyle?: {\n    hover?: Partial<IRectGraphicAttribute>;\n    disabled?: Partial<IRectGraphicAttribute>;\n  };\n}\n\nexport interface ButtonProps {\n  children?: string;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  padding?: Padding;\n  panelStyle?: BackgroundAttributes;\n  minWidth?: number;\n  maxWidth?: number;\n  visible?: boolean;\n  state?: ButtonStateStyle;\n  disabled?: boolean;\n  cursor?: Cursor;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: ButtonProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: '#FFF'\n  },\n  panelStyle: {\n    visible: true,\n    fill: '#165dff',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  padding: 10,\n  // cursor: 'pointer',\n  state: {\n    panelStyle: {\n      hover: {\n        fill: '#4080ff'\n      },\n      disabled: {\n        fill: '#94bfff'\n      }\n    }\n  }\n};\n\nfunction ButtonComponent(baseProps: ButtonProps, ref: React.Ref<Tag>) {\n  const props: ButtonProps = merge({}, defaultProps, baseProps);\n  const { disabled, onClick } = props;\n  let buttonRef = React.useRef<Tag>(null);\n  buttonRef = ref ? (ref as React.RefObject<Tag>) : buttonRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      if (disabled) {\n        typeof event?.preventDefault === 'function' && event.preventDefault();\n        return;\n      }\n      onClick && onClick(event);\n    },\n    [disabled, onClick]\n  );\n\n  const attribute: TagAttributes = getTagAttribute(props);\n\n  useEffect(() => {\n    buttonRef.current.addEventListener('mouseenter', () => {\n      // console.log('mouseenter', buttonRef.current, e.clone());\n      if (!disabled) {\n        buttonRef.current.addState('hover', true, false);\n        // buttonRef.current._bgRect.addState('hover', true, false);\n        // buttonRef.current._textShape.addState('hover', true, false);\n        buttonRef.current.stage.renderNextFrame();\n      }\n    });\n    buttonRef.current.addEventListener('mouseleave', () => {\n      // console.log('mouseleave', buttonRef.current, e.clone());\n      if (!disabled) {\n        buttonRef.current.removeState('hover', false);\n        // buttonRef.current._bgRect.removeState('hover', false);\n        // buttonRef.current._textShape.removeState('hover', false);\n        buttonRef.current.stage.renderNextFrame();\n      }\n    });\n  });\n\n  useEffect(() => {\n    if (disabled) {\n      buttonRef.current.removeState('disabled', false);\n      // buttonRef.current._bgRect.removeState('disabled', false);\n      // buttonRef.current._textShape.removeState('disabled', false);\n\n      buttonRef.current.addState('disabled', true, false);\n      // buttonRef.current._bgRect.addState('disabled', true, false);\n      // buttonRef.current._textShape.addState('disabled', true, false);\n      // console.log('add disable');\n    } else {\n      buttonRef.current.removeState('disabled', false);\n      // buttonRef.current._bgRect.removeState('disabled', false);\n      // buttonRef.current._textShape.removeState('disabled', false);\n      // console.log('remove disable');\n    }\n    buttonRef.current.stage.renderNextFrame();\n  });\n\n  return <VTag ref={buttonRef} attribute={attribute} onClick={handleClick}></VTag>;\n}\n\nfunction getTagAttribute(props: ButtonProps) {\n  const { textStyle, padding, panelStyle, minWidth, maxWidth, visible, cursor, disabled, state, children } = props;\n  const attr: TagAttributes = {\n    text: children,\n    textStyle,\n    padding,\n    panel: panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor: cursor ?? disabled ? 'not-allowed' : 'pointer',\n    childrenPickable: false,\n    state: {\n      text: {\n        hover: state?.textStyle?.hover,\n        disabled: state?.textStyle?.disabled\n      },\n      panel: {\n        hover: state?.panelStyle?.hover,\n        disabled: state?.panelStyle?.disabled\n      }\n    }\n  };\n\n  return attr;\n}\n\nexport const Button = React.forwardRef<Tag, ButtonProps>(ButtonComponent);\n\nButton.displayName = 'Button';\n"]}
+{"version":3,"sources":["components/button/button.tsx"],"names":[],"mappings":"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","file":"button.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { merge } from '@visactor/vutils';\nimport React, { useEffect } from 'react';\n\ninterface ButtonStateStyle {\n  textStyle?: {\n    hover?: Partial<ITextGraphicAttribute>;\n    disabled?: Partial<ITextGraphicAttribute>;\n  };\n  panelStyle?: {\n    hover?: Partial<IRectGraphicAttribute>;\n    disabled?: Partial<IRectGraphicAttribute>;\n  };\n}\n\nexport interface ButtonProps {\n  children?: string;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  padding?: Padding;\n  panelStyle?: BackgroundAttributes;\n  minWidth?: number;\n  maxWidth?: number;\n  visible?: boolean;\n  state?: ButtonStateStyle;\n  disabled?: boolean;\n  cursor?: Cursor;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: ButtonProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: '#FFF'\n  },\n  panelStyle: {\n    visible: true,\n    fill: '#165dff',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  padding: 10,\n  // cursor: 'pointer',\n  state: {\n    panelStyle: {\n      hover: {\n        fill: '#4080ff'\n      },\n      disabled: {\n        fill: '#94bfff'\n      }\n    }\n  }\n};\n\nfunction ButtonComponent(baseProps: ButtonProps, ref: React.Ref<Tag>) {\n  const props: ButtonProps = merge({}, defaultProps, baseProps);\n  const { disabled, onClick } = props;\n  let buttonRef = React.useRef<Tag>(null);\n  buttonRef = ref ? (ref as React.RefObject<Tag>) : buttonRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      if (disabled) {\n        typeof event?.preventDefault === 'function' && event.preventDefault();\n        return;\n      }\n      onClick && onClick(event);\n    },\n    [disabled, onClick]\n  );\n\n  const attribute: TagAttributes = getTagAttribute(props);\n\n  useEffect(() => {\n    const inst = buttonRef.current;\n    if (!inst) {\n      return;\n    }\n    inst.addEventListener('mouseenter', () => {\n      // console.log('mouseenter', buttonRef.current, e.clone());\n      if (!disabled) {\n        inst.addState('hover', true, false);\n        // buttonRef.current._bgRect.addState('hover', true, false);\n        // buttonRef.current._textShape.addState('hover', true, false);\n        inst.stage?.renderNextFrame?.();\n      }\n    });\n    inst.addEventListener('mouseleave', () => {\n      // console.log('mouseleave', buttonRef.current, e.clone());\n      if (!disabled) {\n        inst.removeState('hover', false);\n        // buttonRef.current._bgRect.removeState('hover', false);\n        // buttonRef.current._textShape.removeState('hover', false);\n        inst.stage?.renderNextFrame?.();\n      }\n    });\n  });\n\n  useEffect(() => {\n    const inst = buttonRef.current;\n    if (!inst) {\n      return;\n    }\n    if (disabled) {\n      inst.removeState('disabled', false);\n      // buttonRef.current._bgRect.removeState('disabled', false);\n      // buttonRef.current._textShape.removeState('disabled', false);\n\n      inst.addState('disabled', true, false);\n      // buttonRef.current._bgRect.addState('disabled', true, false);\n      // buttonRef.current._textShape.addState('disabled', true, false);\n      // console.log('add disable');\n    } else {\n      inst.removeState('disabled', false);\n      // buttonRef.current._bgRect.removeState('disabled', false);\n      // buttonRef.current._textShape.removeState('disabled', false);\n      // console.log('remove disable');\n    }\n    inst.stage?.renderNextFrame?.();\n  });\n\n  return <VTag ref={buttonRef} attribute={attribute} onClick={handleClick}></VTag>;\n}\n\nfunction getTagAttribute(props: ButtonProps) {\n  const { textStyle, padding, panelStyle, minWidth, maxWidth, visible, cursor, disabled, state, children } = props;\n  const attr: TagAttributes = {\n    text: children,\n    textStyle,\n    padding,\n    panel: panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor: cursor ?? disabled ? 'not-allowed' : 'pointer',\n    childrenPickable: false,\n    state: {\n      text: {\n        hover: state?.textStyle?.hover,\n        disabled: state?.textStyle?.disabled\n      },\n      panel: {\n        hover: state?.panelStyle?.hover,\n        disabled: state?.panelStyle?.disabled\n      }\n    }\n  };\n\n  return attr;\n}\n\nexport const Button = React.forwardRef<Tag, ButtonProps>(ButtonComponent);\n\nButton.displayName = 'Button';\n"]}

package/es/components/link/link.js

@@ -42,14 +42,19 @@ function LinkComponent(baseProps, ref) {
         href && window.open(href));
     }), [ disabled, href, onClick ]), attribute = getTagAttribute(props);
     return useEffect((() => {
-        linkRef.current.addEventListener("mouseenter", (() => {
-            disabled || (linkRef.current.addState("hover", !0, !1), linkRef.current.stage.renderNextFrame());
-        })), linkRef.current.addEventListener("mouseleave", (() => {
-            disabled || (linkRef.current.removeState("hover", !1), linkRef.current.stage.renderNextFrame());
-        }));
+        const inst = linkRef.current;
+        inst && (inst.addEventListener("mouseenter", (() => {
+            var _a, _b;
+            disabled || (inst.addState("hover", !0, !1), null === (_b = null === (_a = inst.stage) || void 0 === _a ? void 0 : _a.renderNextFrame) || void 0 === _b || _b.call(_a));
+        })), inst.addEventListener("mouseleave", (() => {
+            var _a, _b;
+            disabled || (inst.removeState("hover", !1), null === (_b = null === (_a = inst.stage) || void 0 === _a ? void 0 : _a.renderNextFrame) || void 0 === _b || _b.call(_a));
+        })));
     }), []), useEffect((() => {
-        disabled ? (linkRef.current.removeState("disabled", !1), linkRef.current.addState("disabled", !0, !1)) : linkRef.current.removeState("disabled", !1), 
-        linkRef.current.stage.renderNextFrame();
+        var _a, _b;
+        const inst = linkRef.current;
+        inst && (disabled ? (inst.removeState("disabled", !1), inst.addState("disabled", !0, !1)) : inst.removeState("disabled", !1), 
+        null === (_b = null === (_a = inst.stage) || void 0 === _a ? void 0 : _a.renderNextFrame) || void 0 === _b || _b.call(_a));
     })), React.createElement(VTag, {
         ref: linkRef,
         attribute: attribute,

package/es/components/link/link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/link/link.tsx"],"names":[],"mappings":"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","file":"link.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { merge } from '@visactor/vutils';\nimport React, { useEffect } from 'react';\n\ninterface LinkStateStyle {\n  textStyle?: {\n    hover?: Partial<ITextGraphicAttribute>;\n    disabled?: Partial<ITextGraphicAttribute>;\n  };\n  panelStyle?: {\n    hover?: Partial<IRectGraphicAttribute>;\n    disabled?: Partial<IRectGraphicAttribute>;\n  };\n}\n\nexport interface LinkProps {\n  children?: string;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  padding?: Padding;\n  space?: number;\n  panelStyle?: BackgroundAttributes;\n  minWidth?: number;\n  maxWidth?: number;\n  visible?: boolean;\n  state?: LinkStateStyle;\n  disabled?: boolean;\n  icon?: boolean;\n  cursor?: Cursor;\n  href?: string;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: LinkProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: 'rgb(64, 128, 255)'\n  },\n  panelStyle: {\n    visible: true,\n    opacity: 0,\n    fill: 'rgba(242, 243, 245, 0.5)',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  padding: 4,\n  space: 6,\n  // cursor: 'pointer',\n  state: {\n    textStyle: {\n      disabled: {\n        fill: 'rgb(148, 191, 255)'\n      }\n    },\n    panelStyle: {\n      hover: {\n        // visible: true\n        opacity: 1\n      }\n    }\n  }\n};\n\nfunction LinkComponent(baseProps: LinkProps, ref: React.Ref<Tag>) {\n  const props: LinkProps = merge({}, defaultProps, baseProps);\n  const { disabled, href, onClick } = props;\n  let linkRef = React.useRef<Tag>(null);\n  linkRef = ref ? (ref as React.RefObject<Tag>) : linkRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      if (disabled) {\n        typeof event?.preventDefault === 'function' && event.preventDefault();\n        return;\n      }\n      onClick && onClick(event);\n      if (href) {\n        // eslint-disable-next-line no-undef\n        window.open(href);\n      }\n    },\n    [disabled, href, onClick]\n  );\n\n  const attribute: TagAttributes = getTagAttribute(props);\n\n  useEffect(() => {\n    linkRef.current.addEventListener('mouseenter', () => {\n      // console.log('mouseenter', linkRef.current, e.clone());\n      if (!disabled) {\n        linkRef.current.addState('hover', true, false);\n        // linkRef.current._bgRect.addState('hover', true, false);\n        // linkRef.current._textShape.addState('hover', true, false);\n        linkRef.current.stage.renderNextFrame();\n      }\n    });\n    linkRef.current.addEventListener('mouseleave', () => {\n      // console.log('mouseleave', linkRef.current, e.clone());\n      if (!disabled) {\n        linkRef.current.removeState('hover', false);\n        // linkRef.current._bgRect.removeState('hover', false);\n        // linkRef.current._textShape.removeState('hover', false);\n        linkRef.current.stage.renderNextFrame();\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    if (disabled) {\n      linkRef.current.removeState('disabled', false);\n      // linkRef.current._bgRect.removeState('disabled', false);\n      // linkRef.current._textShape.removeState('disabled', false);\n\n      linkRef.current.addState('disabled', true, false);\n      // linkRef.current._bgRect.addState('disabled', true, false);\n      // linkRef.current._textShape.addState('disabled', true, false);\n      // console.log('add disable');\n    } else {\n      linkRef.current.removeState('disabled', false);\n      // linkRef.current._bgRect.removeState('disabled', false);\n      // linkRef.current._textShape.removeState('disabled', false);\n      // console.log('remove disable');\n    }\n    linkRef.current.stage.renderNextFrame();\n  });\n\n  return <VTag ref={linkRef} attribute={attribute} onClick={handleClick}></VTag>;\n}\n\nfunction getTagAttribute(props: LinkProps) {\n  const {\n    textStyle,\n    padding,\n    space,\n    panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor,\n    disabled,\n    icon,\n    state,\n    children\n  } = props;\n  const attr: TagAttributes = {\n    text: children,\n    textStyle,\n    padding,\n    panel: panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor: cursor ?? disabled ? 'not-allowed' : 'pointer',\n    childrenPickable: false,\n    state: {\n      text: {\n        hover: state?.textStyle?.hover,\n        disabled: state?.textStyle?.disabled\n      },\n      panel: {\n        hover: state?.panelStyle?.hover,\n        disabled: state?.panelStyle?.disabled\n      }\n    },\n    space,\n    shape: {\n      visible: !!icon,\n      fill: false,\n      stroke: textStyle.fill,\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M -0.2927 -15.4348 L -15.142 -0.5855 C -18.6567 2.9292 -18.6567 8.6277 -15.142 12.1424 V 12.1424 C -11.6273 15.6571 -5.9288 15.6571 -2.4141 12.1424 L 15.2636 -5.5353 C 17.6067 -7.8784 17.6067 -11.6774 15.2636 -14.0206 V -14.0206 C 12.9205 -16.3637 9.1215 -16.3637 6.7783 -14.0206 L -10.8993 3.6571 C -12.0709 4.8287 -12.0709 6.7282 -10.8993 7.8997 V 7.8997 C -9.7278 9.0713 -7.8283 9.0713 -6.6567 7.8997 L 8.1925 -6.9495'\n    }\n  };\n\n  return attr;\n}\n\nexport const Link = React.forwardRef<Tag, LinkProps>(LinkComponent);\n\nLink.displayName = 'Link';\n"]}
+{"version":3,"sources":["components/link/link.tsx"],"names":[],"mappings":"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","file":"link.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { merge } from '@visactor/vutils';\nimport React, { useEffect } from 'react';\n\ninterface LinkStateStyle {\n  textStyle?: {\n    hover?: Partial<ITextGraphicAttribute>;\n    disabled?: Partial<ITextGraphicAttribute>;\n  };\n  panelStyle?: {\n    hover?: Partial<IRectGraphicAttribute>;\n    disabled?: Partial<IRectGraphicAttribute>;\n  };\n}\n\nexport interface LinkProps {\n  children?: string;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  padding?: Padding;\n  space?: number;\n  panelStyle?: BackgroundAttributes;\n  minWidth?: number;\n  maxWidth?: number;\n  visible?: boolean;\n  state?: LinkStateStyle;\n  disabled?: boolean;\n  icon?: boolean;\n  cursor?: Cursor;\n  href?: string;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: LinkProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: 'rgb(64, 128, 255)'\n  },\n  panelStyle: {\n    visible: true,\n    opacity: 0,\n    fill: 'rgba(242, 243, 245, 0.5)',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  padding: 4,\n  space: 6,\n  // cursor: 'pointer',\n  state: {\n    textStyle: {\n      disabled: {\n        fill: 'rgb(148, 191, 255)'\n      }\n    },\n    panelStyle: {\n      hover: {\n        // visible: true\n        opacity: 1\n      }\n    }\n  }\n};\n\nfunction LinkComponent(baseProps: LinkProps, ref: React.Ref<Tag>) {\n  const props: LinkProps = merge({}, defaultProps, baseProps);\n  const { disabled, href, onClick } = props;\n  let linkRef = React.useRef<Tag>(null);\n  linkRef = ref ? (ref as React.RefObject<Tag>) : linkRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      if (disabled) {\n        typeof event?.preventDefault === 'function' && event.preventDefault();\n        return;\n      }\n      onClick && onClick(event);\n      if (href) {\n        // eslint-disable-next-line no-undef\n        window.open(href);\n      }\n    },\n    [disabled, href, onClick]\n  );\n\n  const attribute: TagAttributes = getTagAttribute(props);\n\n  useEffect(() => {\n    const inst = linkRef.current;\n    if (!inst) {\n      return;\n    }\n    inst.addEventListener('mouseenter', () => {\n      // console.log('mouseenter', linkRef.current, e.clone());\n      if (!disabled) {\n        inst.addState('hover', true, false);\n        // linkRef.current._bgRect.addState('hover', true, false);\n        // linkRef.current._textShape.addState('hover', true, false);\n        inst.stage?.renderNextFrame?.();\n      }\n    });\n    inst.addEventListener('mouseleave', () => {\n      // console.log('mouseleave', linkRef.current, e.clone());\n      if (!disabled) {\n        inst.removeState('hover', false);\n        // linkRef.current._bgRect.removeState('hover', false);\n        // linkRef.current._textShape.removeState('hover', false);\n        inst.stage?.renderNextFrame?.();\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    const inst = linkRef.current;\n    if (!inst) {\n      return;\n    }\n    if (disabled) {\n      inst.removeState('disabled', false);\n      // linkRef.current._bgRect.removeState('disabled', false);\n      // linkRef.current._textShape.removeState('disabled', false);\n\n      inst.addState('disabled', true, false);\n      // linkRef.current._bgRect.addState('disabled', true, false);\n      // linkRef.current._textShape.addState('disabled', true, false);\n      // console.log('add disable');\n    } else {\n      inst.removeState('disabled', false);\n      // linkRef.current._bgRect.removeState('disabled', false);\n      // linkRef.current._textShape.removeState('disabled', false);\n      // console.log('remove disable');\n    }\n    inst.stage?.renderNextFrame?.();\n  });\n\n  return <VTag ref={linkRef} attribute={attribute} onClick={handleClick}></VTag>;\n}\n\nfunction getTagAttribute(props: LinkProps) {\n  const {\n    textStyle,\n    padding,\n    space,\n    panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor,\n    disabled,\n    icon,\n    state,\n    children\n  } = props;\n  const attr: TagAttributes = {\n    text: children,\n    textStyle,\n    padding,\n    panel: panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor: cursor ?? disabled ? 'not-allowed' : 'pointer',\n    childrenPickable: false,\n    state: {\n      text: {\n        hover: state?.textStyle?.hover,\n        disabled: state?.textStyle?.disabled\n      },\n      panel: {\n        hover: state?.panelStyle?.hover,\n        disabled: state?.panelStyle?.disabled\n      }\n    },\n    space,\n    shape: {\n      visible: !!icon,\n      fill: false,\n      stroke: textStyle.fill,\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M -0.2927 -15.4348 L -15.142 -0.5855 C -18.6567 2.9292 -18.6567 8.6277 -15.142 12.1424 V 12.1424 C -11.6273 15.6571 -5.9288 15.6571 -2.4141 12.1424 L 15.2636 -5.5353 C 17.6067 -7.8784 17.6067 -11.6774 15.2636 -14.0206 V -14.0206 C 12.9205 -16.3637 9.1215 -16.3637 6.7783 -14.0206 L -10.8993 3.6571 C -12.0709 4.8287 -12.0709 6.7282 -10.8993 7.8997 V 7.8997 C -9.7278 9.0713 -7.8283 9.0713 -6.6567 7.8997 L 8.1925 -6.9495'\n    }\n  };\n\n  return attr;\n}\n\nexport const Link = React.forwardRef<Tag, LinkProps>(LinkComponent);\n\nLink.displayName = 'Link';\n"]}

package/es/components/popover/popover.js

@@ -43,7 +43,8 @@ function PopoverComponent(baseProps, ref) {
     popoverRef = ref || popoverRef;
     const [popupOpen, setPopupOpen] = useState(!1);
     useEffect((() => {
-        setPopupOpen(!!popupVisible), popoverRef.current.stage.renderNextFrame();
+        var _a, _b, _c;
+        setPopupOpen(!!popupVisible), null === (_c = null === (_b = null === (_a = popoverRef.current) || void 0 === _a ? void 0 : _a.stage) || void 0 === _b ? void 0 : _b.renderNextFrame) || void 0 === _c || _c.call(_b);
     }), [ popupVisible ]), useEffect((() => {
         var _a;
         setPopupOpen(null !== (_a = null != popupVisible ? popupVisible : defaultPopupVisible) && void 0 !== _a && _a);
@@ -66,9 +67,11 @@ function PopoverComponent(baseProps, ref) {
             anchorType: anchorType
         }
     }, groupMouseEnter = useCallback((event => {
-        isValid(popupVisible) || (setPopupOpen(!0), event.currentTarget.stage.renderNextFrame());
+        var _a, _b, _c;
+        isValid(popupVisible) || (setPopupOpen(!0), null === (_c = null === (_b = null === (_a = event.currentTarget) || void 0 === _a ? void 0 : _a.stage) || void 0 === _b ? void 0 : _b.renderNextFrame) || void 0 === _c || _c.call(_b));
     }), []), groupMouseLeave = useCallback((event => {
-        isValid(popupVisible) || (setPopupOpen(!1), event.currentTarget.stage.renderNextFrame());
+        var _a, _b, _c;
+        isValid(popupVisible) || (setPopupOpen(!1), null === (_c = null === (_b = null === (_a = event.currentTarget) || void 0 === _a ? void 0 : _a.stage) || void 0 === _b ? void 0 : _b.renderNextFrame) || void 0 === _c || _c.call(_b));
     }), []);
     return React.createElement(Group, {
         ref: popoverRef,

package/es/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/popover/popover.tsx"],"names":[],"mappings":"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","file":"popover.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IGroup,\n  IGroupGraphicAttribute,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport type { BoundsAnchorType } from '@visactor/vutils';\nimport { isValid, merge } from '@visactor/vutils';\nimport type { CSSProperties, ReactElement, ReactNode } from 'react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { Group } from '../../table-components';\n\ntype Anchor = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';\nexport interface PopoverProps {\n  children?: ReactElement;\n  defaultPopupVisible?: boolean;\n  // disabled?: boolean;\n  // popupHoverStay?: boolean;\n  popupVisible?: boolean;\n  // color?: string;\n  position?: Anchor;\n  content?: ReactNode;\n  // onVisibleChange?: (visible: boolean) => void;\n\n  panelStyle?: CSSProperties;\n  arrowStyle?: CSSProperties;\n}\n\nconst defaultProps: PopoverProps = {\n  defaultPopupVisible: false,\n  // popupHoverStay: true,\n  // popupVisible: false,\n  position: 'top'\n};\n\nconst defaultPoptipPanelStyle: CSSProperties = {\n  backgroundColor: 'rgb(255, 255, 255)',\n  boxShadow: '0 4px 10px rgba(0, 0, 0, .1)',\n  fontSize: '14px',\n  borderRadius: '4px',\n  lineHeight: '1.5715',\n  boxSizing: 'border-box',\n  color: 'rgb(78, 89, 105)',\n  border: '1px solid rgb(229, 230, 235)',\n  padding: '12px 16px'\n};\n\nconst Tooltip = (props: {\n  visible: boolean;\n  content: ReactNode;\n  position: Anchor;\n  panelStyle?: CSSProperties;\n  arrowStyle?: CSSProperties;\n}) => {\n  const arrowStyle: CSSProperties = {\n    content: '',\n    height: '8px',\n    width: '8px',\n    position: 'absolute',\n    display: 'block',\n    boxSizing: 'border-box',\n    transform: 'rotate(45deg)',\n    transformOrigin: '50% 50% 0',\n    backgroundColor: 'rgb(255, 255, 255)',\n    border: '1px solid rgb(229, 230, 235)',\n    ...getArrowStyle(props.position),\n\n    ...props.arrowStyle\n  };\n\n  return props.visible ? (\n    <>\n      <div style={merge({}, defaultPoptipPanelStyle, props.panelStyle)}>{props.content}</div>\n      <div style={arrowStyle}></div>\n    </>\n  ) : (\n    <></>\n  );\n};\n\nfunction PopoverComponent(baseProps: PopoverProps, ref: React.Ref<IGroup>) {\n  const props: PopoverProps = merge({}, defaultProps, baseProps);\n  const { content, position, popupVisible, defaultPopupVisible, panelStyle, arrowStyle, children } = props;\n  let popoverRef = React.useRef<IGroup>(null);\n  popoverRef = ref ? (ref as React.RefObject<IGroup>) : popoverRef;\n\n  const [popupOpen, setPopupOpen] = useState(false);\n\n  useEffect(() => {\n    if (popupVisible) {\n      setPopupOpen(true);\n    } else {\n      setPopupOpen(false);\n    }\n    popoverRef.current.stage.renderNextFrame();\n  }, [popupVisible]);\n\n  useEffect(() => {\n    setPopupOpen(popupVisible ?? defaultPopupVisible ?? false);\n  }, []);\n\n  const { transform, anchorType } = getTransform(position);\n  const poptipContainerStyle: CSSProperties = {\n    // display: popupOpen ? 'block' : 'none',\n    transform: transform\n  };\n\n  const groupAttribute: IGroupGraphicAttribute = {\n    react: {\n      // width: 100,\n      // height: 100,\n      style: poptipContainerStyle,\n      element: (\n        <Tooltip\n          visible={popupOpen}\n          content={content}\n          position={position}\n          panelStyle={panelStyle}\n          arrowStyle={arrowStyle}\n        />\n      ),\n      container: null,\n      visible: true,\n      pointerEvents: false,\n      anchorType: anchorType\n    } as IGroupGraphicAttribute['react']\n  };\n\n  const groupMouseEnter = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(true);\n    event.currentTarget.stage.renderNextFrame();\n  }, []);\n\n  const groupMouseLeave = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(false);\n    event.currentTarget.stage.renderNextFrame();\n  }, []);\n\n  return (\n    <Group ref={popoverRef} attribute={groupAttribute} onMouseEnter={groupMouseEnter} onMouseLeave={groupMouseLeave}>\n      {children}\n    </Group>\n  );\n}\n\nfunction getTransform(position: Anchor): { transform: string; anchorType: BoundsAnchorType } {\n  switch (position) {\n    case 'top':\n      return {\n        anchorType: 'top',\n        transform: 'translate(-50%, calc(-100% - 10px))'\n      };\n    case 'tl':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(0, calc(-100% - 10px))'\n      };\n    case 'tr':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(-100%, calc(-100% - 10px))'\n      };\n    case 'bottom':\n      return {\n        anchorType: 'bottom',\n        transform: 'translate(-50%, 10px)'\n      };\n    case 'bl':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(0, 10px)'\n      };\n    case 'br':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(-100%, 10px)'\n      };\n    case 'left':\n      return {\n        anchorType: 'left',\n        transform: 'translate(calc(-100% - 10px), -50%)'\n      };\n    case 'lt':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(calc(-100% - 10px), 0)'\n      };\n    case 'lb':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(calc(-100% - 10px), -100%)'\n      };\n    case 'right':\n      return {\n        anchorType: 'right',\n        transform: 'translate(10px, -50%)'\n      };\n    case 'rt':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(10px, 0)'\n      };\n    case 'rb':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(10px, -100%)'\n      };\n  }\n}\n\nfunction getArrowStyle(position: Anchor): CSSProperties {\n  switch (position) {\n    case 'top':\n      return {\n        top: 'calc(100% - 5px)',\n        left: 'calc(50% - 5px)',\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tl':\n      return {\n        top: 'calc(100% - 4px)',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tr':\n      return {\n        top: 'calc(100% - 4px)',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'bottom':\n      return {\n        top: '-4px',\n        left: 'calc(50% - 4px)',\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'bl':\n      return {\n        top: '-4px',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'br':\n      return {\n        top: '-4px',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'left':\n      return {\n        top: 'calc(50% - 4px)',\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'right':\n      return {\n        top: 'calc(50% - 4px)',\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n  }\n}\n\nexport const Popover = React.forwardRef<IGroup, PopoverProps>(PopoverComponent);\n\nPopover.displayName = 'Popover';\n"]}
+{"version":3,"sources":["components/popover/popover.tsx"],"names":[],"mappings":"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","file":"popover.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IGroup,\n  IGroupGraphicAttribute,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport type { BoundsAnchorType } from '@visactor/vutils';\nimport { isValid, merge } from '@visactor/vutils';\nimport type { CSSProperties, ReactElement, ReactNode } from 'react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { Group } from '../../table-components';\n\ntype Anchor = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';\nexport interface PopoverProps {\n  children?: ReactElement;\n  defaultPopupVisible?: boolean;\n  // disabled?: boolean;\n  // popupHoverStay?: boolean;\n  popupVisible?: boolean;\n  // color?: string;\n  position?: Anchor;\n  content?: ReactNode;\n  // onVisibleChange?: (visible: boolean) => void;\n\n  panelStyle?: CSSProperties;\n  arrowStyle?: CSSProperties;\n}\n\nconst defaultProps: PopoverProps = {\n  defaultPopupVisible: false,\n  // popupHoverStay: true,\n  // popupVisible: false,\n  position: 'top'\n};\n\nconst defaultPoptipPanelStyle: CSSProperties = {\n  backgroundColor: 'rgb(255, 255, 255)',\n  boxShadow: '0 4px 10px rgba(0, 0, 0, .1)',\n  fontSize: '14px',\n  borderRadius: '4px',\n  lineHeight: '1.5715',\n  boxSizing: 'border-box',\n  color: 'rgb(78, 89, 105)',\n  border: '1px solid rgb(229, 230, 235)',\n  padding: '12px 16px'\n};\n\nconst Tooltip = (props: {\n  visible: boolean;\n  content: ReactNode;\n  position: Anchor;\n  panelStyle?: CSSProperties;\n  arrowStyle?: CSSProperties;\n}) => {\n  const arrowStyle: CSSProperties = {\n    content: '',\n    height: '8px',\n    width: '8px',\n    position: 'absolute',\n    display: 'block',\n    boxSizing: 'border-box',\n    transform: 'rotate(45deg)',\n    transformOrigin: '50% 50% 0',\n    backgroundColor: 'rgb(255, 255, 255)',\n    border: '1px solid rgb(229, 230, 235)',\n    ...getArrowStyle(props.position),\n\n    ...props.arrowStyle\n  };\n\n  return props.visible ? (\n    <>\n      <div style={merge({}, defaultPoptipPanelStyle, props.panelStyle)}>{props.content}</div>\n      <div style={arrowStyle}></div>\n    </>\n  ) : (\n    <></>\n  );\n};\n\nfunction PopoverComponent(baseProps: PopoverProps, ref: React.Ref<IGroup>) {\n  const props: PopoverProps = merge({}, defaultProps, baseProps);\n  const { content, position, popupVisible, defaultPopupVisible, panelStyle, arrowStyle, children } = props;\n  let popoverRef = React.useRef<IGroup>(null);\n  popoverRef = ref ? (ref as React.RefObject<IGroup>) : popoverRef;\n\n  const [popupOpen, setPopupOpen] = useState(false);\n\n  useEffect(() => {\n    if (popupVisible) {\n      setPopupOpen(true);\n    } else {\n      setPopupOpen(false);\n    }\n    popoverRef.current?.stage?.renderNextFrame?.();\n  }, [popupVisible]);\n\n  useEffect(() => {\n    setPopupOpen(popupVisible ?? defaultPopupVisible ?? false);\n  }, []);\n\n  const { transform, anchorType } = getTransform(position);\n  const poptipContainerStyle: CSSProperties = {\n    // display: popupOpen ? 'block' : 'none',\n    transform: transform\n  };\n\n  const groupAttribute: IGroupGraphicAttribute = {\n    react: {\n      // width: 100,\n      // height: 100,\n      style: poptipContainerStyle,\n      element: (\n        <Tooltip\n          visible={popupOpen}\n          content={content}\n          position={position}\n          panelStyle={panelStyle}\n          arrowStyle={arrowStyle}\n        />\n      ),\n      container: null,\n      visible: true,\n      pointerEvents: false,\n      anchorType: anchorType\n    } as IGroupGraphicAttribute['react']\n  };\n\n  const groupMouseEnter = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(true);\n    event.currentTarget?.stage?.renderNextFrame?.();\n  }, []);\n\n  const groupMouseLeave = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(false);\n    event.currentTarget?.stage?.renderNextFrame?.();\n  }, []);\n\n  return (\n    <Group ref={popoverRef} attribute={groupAttribute} onMouseEnter={groupMouseEnter} onMouseLeave={groupMouseLeave}>\n      {children}\n    </Group>\n  );\n}\n\nfunction getTransform(position: Anchor): { transform: string; anchorType: BoundsAnchorType } {\n  switch (position) {\n    case 'top':\n      return {\n        anchorType: 'top',\n        transform: 'translate(-50%, calc(-100% - 10px))'\n      };\n    case 'tl':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(0, calc(-100% - 10px))'\n      };\n    case 'tr':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(-100%, calc(-100% - 10px))'\n      };\n    case 'bottom':\n      return {\n        anchorType: 'bottom',\n        transform: 'translate(-50%, 10px)'\n      };\n    case 'bl':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(0, 10px)'\n      };\n    case 'br':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(-100%, 10px)'\n      };\n    case 'left':\n      return {\n        anchorType: 'left',\n        transform: 'translate(calc(-100% - 10px), -50%)'\n      };\n    case 'lt':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(calc(-100% - 10px), 0)'\n      };\n    case 'lb':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(calc(-100% - 10px), -100%)'\n      };\n    case 'right':\n      return {\n        anchorType: 'right',\n        transform: 'translate(10px, -50%)'\n      };\n    case 'rt':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(10px, 0)'\n      };\n    case 'rb':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(10px, -100%)'\n      };\n  }\n}\n\nfunction getArrowStyle(position: Anchor): CSSProperties {\n  switch (position) {\n    case 'top':\n      return {\n        top: 'calc(100% - 5px)',\n        left: 'calc(50% - 5px)',\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tl':\n      return {\n        top: 'calc(100% - 4px)',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tr':\n      return {\n        top: 'calc(100% - 4px)',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'bottom':\n      return {\n        top: '-4px',\n        left: 'calc(50% - 4px)',\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'bl':\n      return {\n        top: '-4px',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'br':\n      return {\n        top: '-4px',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'left':\n      return {\n        top: 'calc(50% - 4px)',\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'right':\n      return {\n        top: 'calc(50% - 4px)',\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n  }\n}\n\nexport const Popover = React.forwardRef<IGroup, PopoverProps>(PopoverComponent);\n\nPopover.displayName = 'Popover';\n"]}

package/es/containers/withContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["containers/withContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AASjE,MAAM,CAAC,OAAO,UAAU,aAAa,CACnC,IAA4C,EAC5C,IAAI,GAAG,gBAAgB,EACvB,QAAoC;IAEpC,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,KAAwB,EAAE,GAAG,EAAE,EAAE;QACrF,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;QAC3B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAiB,KAAK,EAAjB,OAAO,UAAK,KAAK,EAA/C,+BAAuC,CAAQ,CAAC;QAEtD,eAAe,CAAC,GAAG,EAAE;YACnB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACL,6BACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,kBACH,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,MAAM,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,MAAM,IACzB,KAAK,KAGT,MAAM,CAAC,CAAC,CAAC,CACR,oBAAC,IAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,CAAC,OAAO,IAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAE,OAAqB,CAAC,EAAI,CAC9G,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CACG,CACP,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,GAAG,CAAC,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC","file":"withContainer.js","sourcesContent":["import React, { useRef, useState, useLayoutEffect } from 'react';\n\nexport interface ContainerProps {\n  style?: React.CSSProperties;\n  className?: string;\n  width?: number | string;\n  height?: number | string;\n}\n\nexport default function withContainer<Props extends ContainerProps, CompProps>(\n  Comp: typeof React.Component<any, CompProps>,\n  name = 'TableContainer',\n  getProps?: (props: any) => CompProps\n) {\n  const Cls = React.forwardRef<any, CompProps & Props>((props: CompProps & Props, ref) => {\n    const container = useRef();\n    const [inited, setInited] = useState(false);\n    const { className, style, width, ...options } = props;\n\n    useLayoutEffect(() => {\n      setInited(true);\n    }, []);\n\n    return (\n      <div\n        ref={container}\n        className={className}\n        style={{\n          position: 'relative',\n          height: props.height || '100%',\n          width: props.width || '100%',\n          ...style\n        }}\n      >\n        {inited ? (\n          <Comp ref={ref} container={container.current} {...(getProps ? getProps(options) : (options as CompProps))} />\n        ) : (\n          <></>\n        )}\n      </div>\n    );\n  });\n  Cls.displayName = name || Comp.name;\n  return Cls;\n}\n"]}
+{"version":3,"sources":["containers/withContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AASjE,MAAM,CAAC,OAAO,UAAU,aAAa,CACnC,IAA4C,EAC5C,IAAI,GAAG,gBAAgB,EACvB,QAAoC;IAEpC,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QAClE,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;QAC3B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAiB,KAAK,EAAjB,OAAO,UAAK,KAAK,EAA/C,+BAAuC,CAAQ,CAAC;QAEtD,eAAe,CAAC,GAAG,EAAE;YACnB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACL,6BACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,kBACH,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,MAAM,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,MAAM,IACzB,KAAK,KAGT,MAAM,CAAC,CAAC,CAAC,CACR,oBAAC,IAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,CAAC,OAAO,IAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAE,OAAqB,CAAC,EAAI,CAC9G,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CACG,CACP,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,GAAG,CAAC,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC","file":"withContainer.js","sourcesContent":["import React, { useRef, useState, useLayoutEffect } from 'react';\n\nexport interface ContainerProps {\n  style?: React.CSSProperties;\n  className?: string;\n  width?: number | string;\n  height?: number | string;\n}\n\nexport default function withContainer<Props extends ContainerProps, CompProps>(\n  Comp: typeof React.Component<any, CompProps>,\n  name = 'TableContainer',\n  getProps?: (props: any) => CompProps\n) {\n  const Cls = React.forwardRef<any, CompProps & Props>((props, ref) => {\n    const container = useRef();\n    const [inited, setInited] = useState(false);\n    const { className, style, width, ...options } = props;\n\n    useLayoutEffect(() => {\n      setInited(true);\n    }, []);\n\n    return (\n      <div\n        ref={container}\n        className={className}\n        style={{\n          position: 'relative',\n          height: props.height || '100%',\n          width: props.width || '100%',\n          ...style\n        }}\n      >\n        {inited ? (\n          <Comp ref={ref} container={container.current} {...(getProps ? getProps(options) : (options as CompProps))} />\n        ) : (\n          <></>\n        )}\n      </div>\n    );\n  });\n  Cls.displayName = name || Comp.name;\n  return Cls;\n}\n"]}

package/es/context/table.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ListTable, PivotTable, PivotChart } from '@visactor/vtable';
 export interface TableContextType {
     table?: ListTable | PivotTable | PivotChart;
+    onError?: (err: Error) => void;
     isChildrenUpdated?: boolean;
 }
 declare const TableContext: React.Context<TableContextType>;

package/es/context/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["context/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAmB,IAAI,CAAC,CAAC;AACjE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,MAAM,UAAU,iBAAiB,CAAI,SAAiC;IACpE,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAW,CAAC,KAAU,EAAE,GAAG,EAAE,EAAE;QACzD,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,CAAC,GAAqB,EAAE,EAAE,CAAC,oBAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,IAAM,KAAK,EAAI,CAC1D,CACzB,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC;IACjC,OAAO,GAAG,CAAC;AACb,CAAC;AAED,eAAe,YAAY,CAAC","file":"table.js","sourcesContent":["import React from 'react';\nimport type { ListTable, PivotTable, PivotChart } from '@visactor/vtable';\n\nexport interface TableContextType {\n  table?: ListTable | PivotTable | PivotChart;\n  // optionFromChildren: any;\n  isChildrenUpdated?: boolean;\n}\n\nconst TableContext = React.createContext<TableContextType>(null);\nTableContext.displayName = 'TableContext';\n\nexport function withTableInstance<T>(Component: typeof React.Component) {\n  const Com = React.forwardRef<any, any>((props: any, ref) => {\n    return (\n      <TableContext.Consumer>\n        {(ctx: TableContextType) => <Component ref={ref} table={ctx.table} {...props} />}\n      </TableContext.Consumer>\n    );\n  });\n  Com.displayName = Component.name;\n  return Com;\n}\n\nexport default TableContext;\n"]}
+{"version":3,"sources":["context/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAmB,IAAI,CAAC,CAAC;AACjE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,MAAM,UAAU,iBAAiB,CAAI,SAAiC;IACpE,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAW,CAAC,KAAU,EAAE,GAAG,EAAE,EAAE;QACzD,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,CAAC,GAAqB,EAAE,EAAE,CAAC,oBAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,IAAM,KAAK,EAAI,CAC1D,CACzB,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC;IACjC,OAAO,GAAG,CAAC;AACb,CAAC;AAED,eAAe,YAAY,CAAC","file":"table.js","sourcesContent":["import React from 'react';\nimport type { ListTable, PivotTable, PivotChart } from '@visactor/vtable';\n\nexport interface TableContextType {\n  table?: ListTable | PivotTable | PivotChart;\n  onError?: (err: Error) => void;\n  // optionFromChildren: any;\n  isChildrenUpdated?: boolean;\n}\n\nconst TableContext = React.createContext<TableContextType>(null);\nTableContext.displayName = 'TableContext';\n\nexport function withTableInstance<T>(Component: typeof React.Component) {\n  const Com = React.forwardRef<any, any>((props: any, ref) => {\n    return (\n      <TableContext.Consumer>\n        {(ctx: TableContextType) => <Component ref={ref} table={ctx.table} {...props} />}\n      </TableContext.Consumer>\n    );\n  });\n  Com.displayName = Component.name;\n  return Com;\n}\n\nexport default TableContext;\n"]}

package/es/index.d.ts

@@ -1,4 +1,4 @@
 export * from './tables';
 export * from './table-components';
 export * from './components';
-export declare const version = "1.25.0";
+export declare const version = "1.25.1-alpha.1";

package/es/index.js

@@ -4,5 +4,5 @@ export * from "./table-components";
 
 export * from "./components";
 
-export const version = "1.25.0";
+export const version = "1.25.1-alpha.1";
 //# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAE7B,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './table-components';\nexport * from './components';\n\nexport const version = \"1.25.0\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAE7B,MAAM,CAAC,MAAM,OAAO,GAAG,gBAAgB,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './table-components';\nexport * from './components';\n\nexport const version = \"1.25.1-alpha.1\";\n"]}

package/es/table-components/base-component.js

@@ -56,6 +56,8 @@ function parseCustomChildren(children, componentId) {
 }
 
 function isReactElement(obj) {
-    return obj && obj.$$typeof === Symbol.for("react.element");
+    if (!obj) return !1;
+    const reactElement = Symbol.for("react.element"), reactTransitionalElement = Symbol.for("react.transitional.element");
+    return obj.$$typeof === reactElement || obj.$$typeof === reactTransitionalElement;
 }
 //# sourceMappingURL=base-component.js.map

package/es/table-components/base-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["table-components/base-component.tsx"],"names":[],"mappings":"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","file":"base-component.js","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React, { useContext, useEffect } from 'react';\nimport { isEqual, isNil, pickWithout } from '@visactor/vutils';\n\nimport type { TableContextType } from '../context/table';\nimport RootTableContext from '../context/table';\nimport { bindEventsToTable } from '../eventsUtils';\nimport { uid } from '../util';\nimport { CustomLayout } from './custom/custom-layout';\n\nexport interface BaseComponentProps {\n  id?: string | number;\n  children?: React.ReactNode;\n}\n\ntype ComponentProps = BaseComponentProps & { updateId?: number; componentId?: string; componentIndex?: number };\n\nexport const createComponent = <T extends ComponentProps>(\n  componentName: string,\n  optionName: string,\n  supportedEvents?: Record<string, string> | null,\n  isSingle?: boolean\n) => {\n  const ignoreKeys = ['id', 'updateId', 'componentIndex', 'children'];\n  const notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;\n\n  const Comp = (props: T): React.ReactElement | null => {\n    const context = useContext(RootTableContext);\n    // const id = React.useRef<string | number>(isNil(props.id) ? uid(optionName) : props.id);\n\n    const eventsBinded = React.useRef<T>(null);\n    const updateId = React.useRef<number>(props.updateId);\n    // const componentOption = React.useRef<Partial<T>>();\n\n    if (props.updateId !== updateId.current) {\n      // update triggered by table when table is rendered\n      updateId.current = props.updateId;\n\n      // rebind events after table render\n      const hasPrevEventsBinded = supportedEvents\n        ? bindEventsToTable(context.table, props as any, eventsBinded.current as any, supportedEvents)\n        : false;\n      if (hasPrevEventsBinded) {\n        eventsBinded.current = props;\n      }\n      // } else {\n      //   const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n      //   if (!isEqual(newComponentOption, componentOption.current)) {\n      //     componentOption.current = newComponentOption;\n      //     updateToContext(context, id.current, optionName, isSingle, newComponentOption);\n      //   }\n    }\n\n    useEffect(() => {\n      return () => {\n        if (supportedEvents) {\n          bindEventsToTable(context.table, null, eventsBinded.current as any, supportedEvents);\n        }\n        // deleteToContext(context, id.current, optionName, isSingle);\n      };\n    }, []);\n\n    // children are all custom layout temply\n    // return props.children\n    //   ? React.cloneElement(props.children as ReactElement, { componentIndex: props.componentIndex })\n    //   : null;\n    // if (props.children) {\n    //   return React.Children.map(props.children as ReactElement, (child: ReactElement) => {\n    //     if (child.props.role === 'custom-layout' || child.props.role === 'header-custom-layout') {\n    //       return React.createElement(CustomLayout, { componentId: props.componentId }, child);\n    //     }\n    //   });\n    // }\n    const result = parseCustomChildren(props.children, props.componentId);\n    return result as React.ReactElement | null;\n  };\n\n  Comp.displayName = componentName;\n\n  (Comp as any).parseOption = (props: T & { updateId?: number; componentId?: string }) => {\n    const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n    // deal width customLayout\n    if (props.children) {\n      const { children } = props;\n      React.Children.map(children as ReactElement, (child: ReactElement, index) => {\n        parseChild(child, props, newComponentOption, notOptionKeys, props.componentId + '-' + index);\n      });\n    }\n    // if (props.children && (props.children as React.ReactElement).props.role === 'custom-layout') {\n    //   (newComponentOption as any).customLayout = 'react-custom-layout';\n    // }\n\n    return {\n      option: newComponentOption,\n      optionName,\n      isSingle\n    };\n  };\n\n  return Comp;\n};\n\nfunction parseChild(\n  child: ReactElement,\n  componentProps: any,\n  newComponentOption: any,\n  notOptionKeys: string[],\n  componentId: string\n) {\n  if (child.props.role === 'custom-layout') {\n    (newComponentOption as any).customLayout = 'react-custom-layout';\n    (newComponentOption as any).customLayoutComponentId = componentId;\n  }\n  if (child.props.role === 'header-custom-layout') {\n    (newComponentOption as any).headerCustomLayout = 'react-custom-layout';\n    (newComponentOption as any).headerCustomLayoutComponentId = componentId;\n  }\n  if ((child.type as any).displayName === 'ListColumn') {\n    if (!newComponentOption.columns) {\n      newComponentOption.columns = [];\n    }\n    const childOption = pickWithout(child.props, notOptionKeys);\n    newComponentOption.columns.push(childOption);\n    childOption.componentId = componentId;\n    if (child.props.children) {\n      React.Children.map(child.props.children as ReactElement, (child: ReactElement, index) => {\n        parseChild(child, componentProps, childOption, notOptionKeys, componentId + '-' + index);\n      });\n    }\n  }\n}\n\nfunction parseCustomChildren(children: ReactNode, componentId: string): ReactNode | undefined {\n  if (isReactElement(children) || Array.isArray(children)) {\n    return React.Children.map(children as ReactElement, (child: ReactElement, index) => {\n      if (child.props.children) {\n        return parseCustomChildren(child.props.children as ReactElement, componentId + '-' + index);\n      } else if (child.props.role === 'custom-layout' || child.props.role === 'header-custom-layout') {\n        return React.createElement(CustomLayout, { componentId: componentId }, child);\n      }\n      return null;\n    });\n  }\n  return null;\n}\n\nfunction isReactElement(obj: any) {\n  return obj && obj.$$typeof === Symbol.for('react.element');\n}\n"]}
+{"version":3,"sources":["table-components/base-component.tsx"],"names":[],"mappings":"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","file":"base-component.js","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React, { useContext, useEffect } from 'react';\nimport { isEqual, isNil, pickWithout } from '@visactor/vutils';\n\nimport type { TableContextType } from '../context/table';\nimport RootTableContext from '../context/table';\nimport { bindEventsToTable } from '../eventsUtils';\nimport { uid } from '../util';\nimport { CustomLayout } from './custom/custom-layout';\n\nexport interface BaseComponentProps {\n  id?: string | number;\n  children?: React.ReactNode;\n}\n\ntype ComponentProps = BaseComponentProps & { updateId?: number; componentId?: string; componentIndex?: number };\n\nexport const createComponent = <T extends ComponentProps>(\n  componentName: string,\n  optionName: string,\n  supportedEvents?: Record<string, string> | null,\n  isSingle?: boolean\n) => {\n  const ignoreKeys = ['id', 'updateId', 'componentIndex', 'children'];\n  const notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;\n\n  const Comp = (props: T): React.ReactElement | null => {\n    const context = useContext(RootTableContext);\n    // const id = React.useRef<string | number>(isNil(props.id) ? uid(optionName) : props.id);\n\n    const eventsBinded = React.useRef<T>(null);\n    const updateId = React.useRef<number>(props.updateId);\n    // const componentOption = React.useRef<Partial<T>>();\n\n    if (props.updateId !== updateId.current) {\n      // update triggered by table when table is rendered\n      updateId.current = props.updateId;\n\n      // rebind events after table render\n      const hasPrevEventsBinded = supportedEvents\n        ? bindEventsToTable(context.table, props as any, eventsBinded.current as any, supportedEvents)\n        : false;\n      if (hasPrevEventsBinded) {\n        eventsBinded.current = props;\n      }\n      // } else {\n      //   const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n      //   if (!isEqual(newComponentOption, componentOption.current)) {\n      //     componentOption.current = newComponentOption;\n      //     updateToContext(context, id.current, optionName, isSingle, newComponentOption);\n      //   }\n    }\n\n    useEffect(() => {\n      return () => {\n        if (supportedEvents) {\n          bindEventsToTable(context.table, null, eventsBinded.current as any, supportedEvents);\n        }\n        // deleteToContext(context, id.current, optionName, isSingle);\n      };\n    }, []);\n\n    // children are all custom layout temply\n    // return props.children\n    //   ? React.cloneElement(props.children as ReactElement, { componentIndex: props.componentIndex })\n    //   : null;\n    // if (props.children) {\n    //   return React.Children.map(props.children as ReactElement, (child: ReactElement) => {\n    //     if (child.props.role === 'custom-layout' || child.props.role === 'header-custom-layout') {\n    //       return React.createElement(CustomLayout, { componentId: props.componentId }, child);\n    //     }\n    //   });\n    // }\n    const result = parseCustomChildren(props.children, props.componentId);\n    return result as React.ReactElement | null;\n  };\n\n  Comp.displayName = componentName;\n\n  (Comp as any).parseOption = (props: T & { updateId?: number; componentId?: string }) => {\n    const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n    // deal width customLayout\n    if (props.children) {\n      const { children } = props;\n      React.Children.map(children as ReactElement, (child: ReactElement, index) => {\n        parseChild(child, props, newComponentOption, notOptionKeys, props.componentId + '-' + index);\n      });\n    }\n    // if (props.children && (props.children as React.ReactElement).props.role === 'custom-layout') {\n    //   (newComponentOption as any).customLayout = 'react-custom-layout';\n    // }\n\n    return {\n      option: newComponentOption,\n      optionName,\n      isSingle\n    };\n  };\n\n  return Comp;\n};\n\nfunction parseChild(\n  child: ReactElement,\n  componentProps: any,\n  newComponentOption: any,\n  notOptionKeys: string[],\n  componentId: string\n) {\n  if (child.props.role === 'custom-layout') {\n    (newComponentOption as any).customLayout = 'react-custom-layout';\n    (newComponentOption as any).customLayoutComponentId = componentId;\n  }\n  if (child.props.role === 'header-custom-layout') {\n    (newComponentOption as any).headerCustomLayout = 'react-custom-layout';\n    (newComponentOption as any).headerCustomLayoutComponentId = componentId;\n  }\n  if ((child.type as any).displayName === 'ListColumn') {\n    if (!newComponentOption.columns) {\n      newComponentOption.columns = [];\n    }\n    const childOption = pickWithout(child.props, notOptionKeys);\n    newComponentOption.columns.push(childOption);\n    childOption.componentId = componentId;\n    if (child.props.children) {\n      React.Children.map(child.props.children as ReactElement, (child: ReactElement, index) => {\n        parseChild(child, componentProps, childOption, notOptionKeys, componentId + '-' + index);\n      });\n    }\n  }\n}\n\nfunction parseCustomChildren(children: ReactNode, componentId: string): ReactNode | undefined {\n  if (isReactElement(children) || Array.isArray(children)) {\n    return React.Children.map(children as ReactElement, (child: ReactElement, index) => {\n      if (child.props.children) {\n        return parseCustomChildren(child.props.children as ReactElement, componentId + '-' + index);\n      } else if (child.props.role === 'custom-layout' || child.props.role === 'header-custom-layout') {\n        return React.createElement(CustomLayout, { componentId: componentId }, child);\n      }\n      return null;\n    });\n  }\n  return null;\n}\n\nfunction isReactElement(obj: any) {\n  if (!obj) {\n    return false;\n  }\n  const reactElement = Symbol.for('react.element');\n  const reactTransitionalElement = Symbol.for('react.transitional.element');\n  return obj.$$typeof === reactElement || obj.$$typeof === reactTransitionalElement;\n}\n"]}

package/es/table-components/custom/custom-layout.js

@@ -4,14 +4,21 @@ import RootTableContext from "../../context/table";
 
 import { Group } from "@visactor/vtable/es/vrender";
 
-import { reconcilor } from "./reconciler";
-
-import { LegacyRoot } from "react-reconciler/constants";
+import { reconcilor, createReconcilerContainer } from "./reconciler";
 
 export const CustomLayout = (props, ref) => {
     const {componentId: componentId, children: children} = props;
     if (!isValidElement(children)) return null;
-    const context = useContext(RootTableContext), {table: table} = context, isHeaderCustomLayout = "header-custom-layout" === children.props.role, container = useRef(new Map), createGraphic = useCallback((args => {
+    const context = useContext(RootTableContext), {table: table, onError: onError} = context, isHeaderCustomLayout = "header-custom-layout" === children.props.role, container = useRef(new Map), reportReconcilerError = useCallback(((type, error) => {
+        var _a;
+        if (!onError) return;
+        if (error instanceof Error) {
+            const wrapped = new Error(`[react-vtable custom-layout:${type}] ${error.message}`);
+            return wrapped.stack = error.stack, void onError(wrapped);
+        }
+        const message = "string" == typeof error ? error : null !== (_a = null == error ? void 0 : error.message) && void 0 !== _a ? _a : String(error);
+        onError(new Error(`[react-vtable custom-layout:${type}] ${message}`));
+    }), [ onError ]), createGraphic = useCallback((args => {
         var _a, _b;
         const key = `${null !== (_a = args.originCol) && void 0 !== _a ? _a : args.col}-${null !== (_b = args.originRow) && void 0 !== _b ? _b : args.row}${args.forComputation ? "-forComputation" : ""}`;
         let group;
@@ -20,14 +27,14 @@ export const CustomLayout = (props, ref) => {
             reconcilorUpdateContainer(children, currentContainer, args), group = currentContainer.containerInfo;
         } else {
             group = new Group({});
-            const currentContainer = reconcilor.createContainer(group, LegacyRoot, null, null, null, "custom", null, null);
+            const currentContainer = createReconcilerContainer(group, "custom", reportReconcilerError);
             container.current.set(key, currentContainer), reconcilorUpdateContainer(children, currentContainer, args);
         }
         return {
             rootContainer: group,
             renderDefault: !!children.props.renderDefault
         };
-    }), [ children ]), removeContainer = useCallback(((col, row) => {
+    }), [ children, reportReconcilerError ]), removeContainer = useCallback(((col, row) => {
         const key = `${col}-${row}`;
         if (container.current.has(key)) {
             const currentContainer = container.current.get(key);
@@ -69,7 +76,12 @@ export const CustomLayout = (props, ref) => {
 };
 
 function reconcilorUpdateContainer(children, currentContainer, args) {
-    reconcilor.updateContainer(React.cloneElement(children, Object.assign({}, args)), currentContainer, null);
+    const element = React.cloneElement(children, Object.assign({}, args)), updateContainerSync = reconcilor.updateContainerSync;
+    if ("function" != typeof updateContainerSync) reconcilor.updateContainer(element, currentContainer, null); else {
+        updateContainerSync(element, currentContainer, null);
+        const flushSyncWork = reconcilor.flushSyncWork;
+        "function" == typeof flushSyncWork && flushSyncWork();
+    }
 }
 
 function getCellRect(col, row, table) {

package/es/table-components/custom/custom-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["table-components/custom/custom-layout.tsx"],"names":[],"mappings":"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","file":"custom-layout.js","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { PropsWithChildren, ReactElement } from 'react';\nimport React, { isValidElement, useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport RootTableContext from '../../context/table';\nimport { Group } from '@visactor/vtable/es/vrender';\nimport type { ICustomLayoutFuc, CustomRenderFunctionArg } from '@visactor/vtable/es/ts-types';\nimport type { FiberRoot } from 'react-reconciler';\nimport { reconcilor } from './reconciler';\nimport { LegacyRoot } from 'react-reconciler/constants';\n\ntype CustomLayoutProps = { componentId: string };\n\nexport type CustomLayoutFunctionArg = Partial<CustomRenderFunctionArg> & {\n  role?: 'custom-layout' | 'header-custom-layout';\n  renderDefault?: boolean;\n};\n\nexport const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildren<CustomLayoutProps>, ref) => {\n  const { componentId, children } = props;\n  if (!isValidElement(children)) {\n    return null;\n  }\n  const context = useContext(RootTableContext);\n  const { table } = context;\n\n  const isHeaderCustomLayout = children.props.role === 'header-custom-layout';\n\n  // react customLayout component container cache\n  const container = useRef<Map<string, FiberRoot>>(new Map());\n\n  // customLayout function for vtable\n  const createGraphic: ICustomLayoutFuc = useCallback(\n    args => {\n      const key = `${args.originCol ?? args.col}-${args.originRow ?? args.row}${\n        args.forComputation ? '-forComputation' : ''\n      }`;\n      let group;\n      if (container.current.has(key)) {\n        const currentContainer = container.current.get(key);\n        reconcilorUpdateContainer(children, currentContainer, args);\n        group = currentContainer.containerInfo;\n      } else {\n        group = new Group({});\n        const currentContainer = reconcilor.createContainer(\n          group as any,\n          LegacyRoot,\n          null,\n          null,\n          null,\n          'custom',\n          null,\n          null\n        );\n        container.current.set(key, currentContainer);\n        reconcilorUpdateContainer(children, currentContainer, args);\n      }\n\n      return {\n        rootContainer: group,\n        renderDefault: !!children.props.renderDefault\n      };\n    },\n    [children]\n  );\n\n  const removeContainer = useCallback((col: number, row: number) => {\n    const key = `${col}-${row}`;\n    if (container.current.has(key)) {\n      const currentContainer = container.current.get(key);\n      reconcilor.updateContainer(null, currentContainer, null);\n      // group = currentContainer.containerInfo;\n      currentContainer.containerInfo.delete();\n      container.current.delete(key);\n    }\n  }, []);\n\n  const removeAllContainer = useCallback(() => {\n    container.current.forEach((value, key) => {\n      const currentContainer = value;\n      reconcilor.updateContainer(null, currentContainer, null);\n      currentContainer.containerInfo.delete();\n    });\n    container.current.clear();\n  }, []);\n\n  useLayoutEffect(() => {\n    // init and release\n    // eslint-disable-next-line no-undef\n    console.log('init', props, table);\n    // table && (table._reactCreateGraphic = createGraphic); // never go to here\n    // table?.renderWithRecreateCells();\n    return () => {\n      // eslint-disable-next-line no-undef\n      console.log('release', props, table);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    // update props\n    // eslint-disable-next-line no-undef\n    console.log('update props', props, table);\n\n    table?.checkReactCustomLayout(); // init reactCustomLayout component\n    table?.reactCustomLayout?.setReactRemoveAllGraphic(componentId, removeAllContainer, isHeaderCustomLayout); // set customLayout function\n\n    if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) {\n      table.reactCustomLayout?.setReactCreateGraphic(\n        componentId,\n        createGraphic,\n        // container.current,\n        isHeaderCustomLayout\n      ); // set customLayout function\n      table.reactCustomLayout?.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout); // set customLayout function\n      table.reactCustomLayout?.updateCustomCell(componentId, isHeaderCustomLayout); // update cell content\n    } else if (table) {\n      table.reactCustomLayout?.setReactCreateGraphic(\n        componentId,\n        createGraphic,\n        // container.current,\n        isHeaderCustomLayout\n      ); // update customLayout function\n      // update all container\n      container.current.forEach((value, key) => {\n        const [col, row] = key.split('-').map(Number);\n        // const width = table.getColWidth(col); // to be fixed: may be merge cell\n        // const height = table.getRowHeight(row); // to be fixed: may be merge cell\n        const { width, height } = getCellRect(col, row, table);\n        const currentContainer = value;\n        const args = {\n          col,\n          row,\n          dataValue: table.getCellOriginValue(col, row),\n          value: table.getCellValue(col, row) || '',\n          rect: {\n            left: 0,\n            top: 0,\n            right: width,\n            bottom: height,\n            width,\n            height\n          },\n          table\n        };\n        // update element in container\n        const group = currentContainer.containerInfo;\n        reconcilorUpdateContainer(children, currentContainer, args);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        table.scenegraph.updateNextFrame();\n      });\n    }\n  });\n\n  return null;\n};\n\nfunction reconcilorUpdateContainer(children: ReactElement, currentContainer: any, args: any) {\n  reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n  // group = group.firstChild;\n  // if (isReactElement(group.attribute.html?.dom)) {\n  //   const div = document.createElement('div');\n  //   const root = ReactDOM.createRoot(div as HTMLElement);\n  //   root.render(group.attribute.html.dom);\n  //   group.attribute.html.dom = div;\n  //   // debugger;\n  //   // group.html.dom = div;\n  // }\n}\n\nfunction getCellRect(col: number, row: number, table: any) {\n  const range = table.getCellRange(col, row);\n  const rect = table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);\n  return rect;\n}\n"]}
+{"version":3,"sources":["table-components/custom/custom-layout.tsx"],"names":[],"mappings":"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","file":"custom-layout.js","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { PropsWithChildren, ReactElement } from 'react';\nimport React, { isValidElement, useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport RootTableContext from '../../context/table';\nimport { Group } from '@visactor/vtable/es/vrender';\nimport type { ICustomLayoutFuc, CustomRenderFunctionArg } from '@visactor/vtable/es/ts-types';\nimport type { FiberRoot } from 'react-reconciler';\nimport type { ReconcilerErrorReporter } from './reconciler';\nimport { reconcilor, createReconcilerContainer } from './reconciler';\n\ntype CustomLayoutProps = { componentId: string };\n\nexport type CustomLayoutFunctionArg = Partial<CustomRenderFunctionArg> & {\n  role?: 'custom-layout' | 'header-custom-layout';\n  renderDefault?: boolean;\n};\n\nexport const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildren<CustomLayoutProps>, ref) => {\n  const { componentId, children } = props;\n  if (!isValidElement(children)) {\n    return null;\n  }\n  const context = useContext(RootTableContext);\n  const { table, onError } = context;\n\n  const isHeaderCustomLayout = children.props.role === 'header-custom-layout';\n\n  // react customLayout component container cache\n  const container = useRef<Map<string, FiberRoot>>(new Map());\n\n  const reportReconcilerError: ReconcilerErrorReporter = useCallback(\n    (type, error) => {\n      if (!onError) {\n        return;\n      }\n      if (error instanceof Error) {\n        const wrapped = new Error(`[react-vtable custom-layout:${type}] ${error.message}`);\n        (wrapped as any).stack = error.stack;\n        onError(wrapped);\n        return;\n      }\n      const message = typeof error === 'string' ? error : (error as any)?.message ?? String(error);\n      onError(new Error(`[react-vtable custom-layout:${type}] ${message}`));\n    },\n    [onError]\n  );\n\n  // customLayout function for vtable\n  const createGraphic: ICustomLayoutFuc = useCallback(\n    args => {\n      const key = `${args.originCol ?? args.col}-${args.originRow ?? args.row}${\n        args.forComputation ? '-forComputation' : ''\n      }`;\n      let group;\n      if (container.current.has(key)) {\n        const currentContainer = container.current.get(key);\n        reconcilorUpdateContainer(children, currentContainer, args);\n        group = currentContainer.containerInfo;\n      } else {\n        group = new Group({});\n        const currentContainer = createReconcilerContainer(group as any, 'custom', reportReconcilerError);\n        container.current.set(key, currentContainer);\n        reconcilorUpdateContainer(children, currentContainer, args);\n      }\n\n      return {\n        rootContainer: group,\n        renderDefault: !!children.props.renderDefault\n      };\n    },\n    [children, reportReconcilerError]\n  );\n\n  const removeContainer = useCallback((col: number, row: number) => {\n    const key = `${col}-${row}`;\n    if (container.current.has(key)) {\n      const currentContainer = container.current.get(key);\n      reconcilor.updateContainer(null, currentContainer, null);\n      // group = currentContainer.containerInfo;\n      currentContainer.containerInfo.delete();\n      container.current.delete(key);\n    }\n  }, []);\n\n  const removeAllContainer = useCallback(() => {\n    container.current.forEach((value, key) => {\n      const currentContainer = value;\n      reconcilor.updateContainer(null, currentContainer, null);\n      currentContainer.containerInfo.delete();\n    });\n    container.current.clear();\n  }, []);\n\n  useLayoutEffect(() => {\n    // init and release\n    // eslint-disable-next-line no-undef\n    console.log('init', props, table);\n    // table && (table._reactCreateGraphic = createGraphic); // never go to here\n    // table?.renderWithRecreateCells();\n    return () => {\n      // eslint-disable-next-line no-undef\n      console.log('release', props, table);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    // update props\n    // eslint-disable-next-line no-undef\n    console.log('update props', props, table);\n\n    table?.checkReactCustomLayout(); // init reactCustomLayout component\n    table?.reactCustomLayout?.setReactRemoveAllGraphic(componentId, removeAllContainer, isHeaderCustomLayout); // set customLayout function\n\n    if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) {\n      table.reactCustomLayout?.setReactCreateGraphic(\n        componentId,\n        createGraphic,\n        // container.current,\n        isHeaderCustomLayout\n      ); // set customLayout function\n      table.reactCustomLayout?.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout); // set customLayout function\n      table.reactCustomLayout?.updateCustomCell(componentId, isHeaderCustomLayout); // update cell content\n    } else if (table) {\n      table.reactCustomLayout?.setReactCreateGraphic(\n        componentId,\n        createGraphic,\n        // container.current,\n        isHeaderCustomLayout\n      ); // update customLayout function\n      // update all container\n      container.current.forEach((value, key) => {\n        const [col, row] = key.split('-').map(Number);\n        // const width = table.getColWidth(col); // to be fixed: may be merge cell\n        // const height = table.getRowHeight(row); // to be fixed: may be merge cell\n        const { width, height } = getCellRect(col, row, table);\n        const currentContainer = value;\n        const args = {\n          col,\n          row,\n          dataValue: table.getCellOriginValue(col, row),\n          value: table.getCellValue(col, row) || '',\n          rect: {\n            left: 0,\n            top: 0,\n            right: width,\n            bottom: height,\n            width,\n            height\n          },\n          table\n        };\n        // update element in container\n        const group = currentContainer.containerInfo;\n        reconcilorUpdateContainer(children, currentContainer, args);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        table.scenegraph.updateNextFrame();\n      });\n    }\n  });\n\n  return null;\n};\n\nfunction reconcilorUpdateContainer(children: ReactElement, currentContainer: any, args: any) {\n  const element = React.cloneElement(children, { ...args });\n  const updateContainerSync = (reconcilor as any).updateContainerSync;\n  if (typeof updateContainerSync === 'function') {\n    updateContainerSync(element, currentContainer, null);\n    const flushSyncWork = (reconcilor as any).flushSyncWork;\n    if (typeof flushSyncWork === 'function') {\n      flushSyncWork();\n    }\n    return;\n  }\n  reconcilor.updateContainer(element, currentContainer, null);\n  // group = group.firstChild;\n  // if (isReactElement(group.attribute.html?.dom)) {\n  //   const div = document.createElement('div');\n  //   const root = ReactDOM.createRoot(div as HTMLElement);\n  //   root.render(group.attribute.html.dom);\n  //   group.attribute.html.dom = div;\n  //   // debugger;\n  //   // group.html.dom = div;\n  // }\n}\n\nfunction getCellRect(col: number, row: number, table: any) {\n  const range = table.getCellRange(col, row);\n  const rect = table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);\n  return rect;\n}\n"]}

package/es/table-components/custom/reconciler.d.ts

@@ -1,5 +1,6 @@
-import type { Graphic } from '@visactor/vtable/es/vrender';
-import ReactReconciler from 'react-reconciler';
-type Instance = Graphic;
-export declare const reconcilor: ReactReconciler.Reconciler<Instance, any, any, Instance, Instance>;
+type Instance = any;
+export type ReconcilerErrorType = 'uncaught' | 'caught' | 'recoverable';
+export type ReconcilerErrorReporter = (type: ReconcilerErrorType, error: unknown) => void;
+export declare const reconcilor: any;
+export declare const createReconcilerContainer: (container: Instance, identifierPrefix?: string, reportError?: ReconcilerErrorReporter) => any;
 export {};