@gingkoo/pandora-metabase 1.0.146 → 1.0.147

package/lib/es/components/dialog/custom-column/tokenized-expression.d.ts

@@ -5,6 +5,6 @@ interface PropsType {
     source: string;
 }
 export default class TokenizedExpression extends React.Component<PropsType> {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/es/components/dialog/custom-editor/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import './index.less';
 import { MetaCustom_Item } from '../../../store/types';
 interface PropsType {
@@ -7,5 +8,5 @@ interface PropsType {
     onOk: Function;
     onCancel: Function;
 }
-declare const CaseEditor: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const CaseEditor: (props: PropsType) => React.JSX.Element;
 export default CaseEditor;

package/lib/es/components/dialog/expression/index.d.ts

@@ -1,4 +1,5 @@
 import './index.less';
+import React from 'react';
 import { AtomsExpression } from '../../../store/types';
 import { DataType } from '../select-column-multiple';
 interface PropsType {
@@ -11,5 +12,5 @@ interface PropsType {
     filterCustomType?: boolean;
     parentPopupChannel?: 'primary' | 'secondary';
 }
-declare const _default: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const _default: (props: PropsType) => React.JSX.Element;
 export default _default;

package/lib/es/components/dialog/formula/index.js

@@ -19,6 +19,8 @@ import { Select, Button } from '@gingkoo/pandora';
 import cloneDeep from 'lodash/cloneDeep';
 import { useStore } from '../../../hooks/use-provider';
 import { getTopLayerZIndex } from '../../../utils/helper-dom';
+import { useRightClickValue } from '../../right-click-value';
+import SqbRightClickMenu, { openSqbRightClickMenu } from '../../right-click-menu';
 var VisualBox = Styled.div.attrs({
   className: 'visual-box scroller'
 })(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
@@ -71,6 +73,11 @@ var CaseEditor = React.forwardRef(function (props, ref) {
     });
   }, [currentFormulaKey, currentFormulaTemplate, effectiveArity]);
   var _ref = useRef(null);
+  var formulaRightClickValueId = useRightClickValue(fun);
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rightClickMenuState = _useState6[0],
+    setRightClickMenuState = _useState6[1];
   var usable = useMemo(function () {
     return fun.name && isOk(fun.args);
   }, [fun]);
@@ -119,6 +126,9 @@ var CaseEditor = React.forwardRef(function (props, ref) {
     className: cx(props.className, 'function-box'),
     ref: ref,
     children: [_jsx(VisualBox, {
+      onContextMenu: function onContextMenu(e) {
+        return openSqbRightClickMenu(store, e, setRightClickMenuState);
+      },
       children: _jsx("div", {
         className: "Sqb-item Sqb-case-editor mb-2 mt-2",
         children: _jsxs("div", {
@@ -150,6 +160,7 @@ var CaseEditor = React.forwardRef(function (props, ref) {
                       className: cx("Sqb-TableName Sqb-TableName-OPERATOR", {
                         notSelected: !fun.name
                       }),
+                      "data-right-click-id": formulaRightClickValueId,
                       children: formulaName(fun, formulaList) || __('customColumn.selectFormula')
                     });
                   },
@@ -237,6 +248,10 @@ var CaseEditor = React.forwardRef(function (props, ref) {
           })]
         })
       })
+    }), _jsx(SqbRightClickMenu, {
+      popupZIndex: getTopLayerZIndex() + 10,
+      state: rightClickMenuState,
+      setState: setRightClickMenuState
     }), _jsx("div", {
       className: "btns p-4",
       children: _jsxs("div", {

package/lib/es/components/dialog/formula-list/CaseWhenGroup.d.ts

@@ -24,5 +24,5 @@ type Props = {
     activeRegionKey?: string | null;
     onActivateRegion?: (key: string) => void;
 };
-declare const CaseWhenGroup: ({ caseAtomsContent, whenClauses, elseContent, onAddBranch, onAddElse, onRemoveElse, onZoomCase, onDeleteCase, showTools, isNested, useBranchScrollInner, caseRegionKey, elseRegionKey, activeRegionKey, onActivateRegion, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const CaseWhenGroup: ({ caseAtomsContent, whenClauses, elseContent, onAddBranch, onAddElse, onRemoveElse, onZoomCase, onDeleteCase, showTools, isNested, useBranchScrollInner, caseRegionKey, elseRegionKey, activeRegionKey, onActivateRegion, }: Props) => React.JSX.Element;
 export default CaseWhenGroup;

package/lib/es/components/dialog/formula-list/LogicGroup.d.ts

@@ -9,5 +9,5 @@ type Props = {
     onDeleteItem: (operatorIndex: number, side: 'left' | 'right') => void;
     onDelete: (e: any) => void;
 };
-declare const LogicGroup: ({ items, onChangeOperator, onAddItem, onDeleteItem, onDelete, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const LogicGroup: ({ items, onChangeOperator, onAddItem, onDeleteItem, onDelete, }: Props) => React.JSX.Element;
 export default LogicGroup;

package/lib/es/components/dialog/formula-list/index.js

@@ -32,6 +32,7 @@ import SelectList from '../../dialog/select-list';
 import arrow from './arrow.svg';
 import { useStore, Provider } from '../../../hooks/use-provider';
 import ItemName from '../../modules/components/item-name';
+import RightClickValue from '../../right-click-value';
 import DiffViewer from '../diff-viewer';
 import storage from '../../../utils/storage';
 import { getTopLayerZIndex } from '../../../utils/helper-dom';
@@ -586,7 +587,8 @@ var FormulaList = forwardRef(function (props, ref) {
                   height: '100%',
                   fullscreen: true,
                   value: sql,
-                  showLanguage: false
+                  showLanguage: false,
+                  matchBrackets: store.matchBrackets
                 })
               }),
               onClose: function onClose() {}
@@ -2170,13 +2172,16 @@ var FormulaList = forwardRef(function (props, ref) {
             openCheck: isCheck && !isCompositeAtom
           }),
           children: itemContent.raw ? itemContent.node : _jsx(ItemName, _objectSpread(_objectSpread({}, getItemNameProps(v)), {}, {
-            children: _jsx("div", _objectSpread(_objectSpread({
-              className: cx('Sqb-TableName', itemContent.className),
-              onClick: itemContent.onClick,
-              style: getTokenStyleByClassName(itemContent.className, itemContent.style)
-            }, itemContent.attrs || {}), {}, {
-              children: itemContent.node
-            }))
+            children: _jsx(RightClickValue, {
+              value: v,
+              children: _jsx("div", _objectSpread(_objectSpread({
+                className: cx('Sqb-TableName', itemContent.className),
+                onClick: itemContent.onClick,
+                style: getTokenStyleByClassName(itemContent.className, itemContent.style)
+              }, itemContent.attrs || {}), {}, {
+                children: itemContent.node
+              }))
+            })
           }))
         }), showAfterArrow && selectOperator({
           triggerElement: function triggerElement(value) {

package/lib/es/components/dialog/select-column/index.d.ts

@@ -1,4 +1,5 @@
 import './index.less';
+import React from 'react';
 import { MetaData_ColumnsType, MetaData_TableType } from '../../../store/types';
 interface PropsType {
     data: MetaData_ColumnsType[];
@@ -7,5 +8,5 @@ interface PropsType {
     groupIndex: number;
     onChange: (record: MetaData_ColumnsType[], newMetaList?: any[]) => void;
 }
-declare const SelectColumn: ({ data, table, metaIndex, groupIndex, onChange }: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const SelectColumn: ({ data, table, metaIndex, groupIndex, onChange }: PropsType) => React.JSX.Element;
 export default SelectColumn;

package/lib/es/components/dialog/select-column-multiple/index.d.ts

@@ -1,4 +1,5 @@
 import './index.less';
+import React from 'react';
 import { ColumnsPopupThemeEnum, SQL_COLUMN_TYPE } from '../../../store/enum';
 import { MetaData_ColumnsType, MetaJoin_TalbeType, AtomsField } from '../../../store/types';
 import { DatasourceType } from '../../../types';
@@ -42,5 +43,5 @@ interface PropsType {
     nextBtnText?: string;
     onNextStep?: () => void;
 }
-declare const SelectJoinColumn: ({ data, value: _value, theme, onSelect, isGroup, onGroup, didUpdate, multiple, showNextBtn, nextBtnText, onNextStep, }: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const SelectJoinColumn: ({ data, value: _value, theme, onSelect, isGroup, onGroup, didUpdate, multiple, showNextBtn, nextBtnText, onNextStep, }: PropsType) => React.JSX.Element;
 export default SelectJoinColumn;

package/lib/es/components/dialog/select-join/index.d.ts

@@ -1,8 +1,9 @@
 import './index.less';
+import React from 'react';
 import { JoinEnum } from '../../../store/enum';
 interface PropsType {
     value: JoinEnum;
     onChange: (type: JoinEnum) => void;
 }
-declare const SelectJoin: ({ value, onChange }: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const SelectJoin: ({ value, onChange }: PropsType) => React.JSX.Element;
 export default SelectJoin;

package/lib/es/components/dialog/select-join-column/index.d.ts

@@ -1,4 +1,5 @@
 import './index.less';
+import React from 'react';
 import { ColumnsPopupThemeEnum, SQL_COLUMN_TYPE } from '../../../store/enum';
 import { MetaData_ColumnsType, MetaJoin_TalbeType } from '../../../store/types';
 import { DatasourceType } from '../../../types';
@@ -45,5 +46,5 @@ interface PropsType {
     didUpdate?: Function;
     multiple?: boolean;
 }
-declare const SelectJoinColumn: ({ data, value: _value, theme, onSelect, isGroup, onGroup, didUpdate, multiple, }: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const SelectJoinColumn: ({ data, value: _value, theme, onSelect, isGroup, onGroup, didUpdate, multiple, }: PropsType) => React.JSX.Element;
 export default SelectJoinColumn;

package/lib/es/components/dialog/select-join-column-multiple/index.d.ts

@@ -1,4 +1,5 @@
 import './index.less';
+import React from 'react';
 import { ColumnsPopupThemeEnum, SQL_COLUMN_TYPE } from '../../../store/enum';
 import { MetaData_ColumnsType, MetaJoin_TalbeType, MetaJoin_Field } from '../../../store/types';
 import { DatasourceType } from '../../../types';
@@ -44,5 +45,5 @@ interface PropsType {
     didUpdate?: Function;
     multiple?: boolean;
 }
-declare const SelectJoinColumn: ({ data, tableInfo: tableInfo, value: _value, theme, onSelect, isGroup, onGroup, didUpdate, multiple, }: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const SelectJoinColumn: ({ data, tableInfo: tableInfo, value: _value, theme, onSelect, isGroup, onGroup, didUpdate, multiple, }: PropsType) => React.JSX.Element;
 export default SelectJoinColumn;

package/lib/es/components/dialog/select-list/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import './index.less';
 import { OptionItem } from '../../../types';
 interface PropsType {
@@ -6,5 +7,5 @@ interface PropsType {
     list: OptionItem[];
     onChange: (type: any) => void;
 }
-declare const SelectList: ({ value, onChange, list, className }: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const SelectList: ({ value, onChange, list, className }: PropsType) => React.JSX.Element;
 export default SelectList;

package/lib/es/components/dialog/select-permission-table/index.d.ts

@@ -1,4 +1,5 @@
 import './index.less';
+import React from 'react';
 import { MetaData_TableType } from '../../../store/types';
 interface PropsType {
     data: MetaData_TableType[];
@@ -7,5 +8,5 @@ interface PropsType {
     didUpdate?: Function;
     tableEnableAlias: boolean;
 }
-declare const SelectPermissionTable: ({ data, value, onChange, didUpdate, tableEnableAlias, }: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const SelectPermissionTable: ({ data, value, onChange, didUpdate, tableEnableAlias, }: PropsType) => React.JSX.Element;
 export default SelectPermissionTable;

package/lib/es/components/dialog/select-summarize/index.d.ts

@@ -1,4 +1,5 @@
 import './index.less';
+import React from 'react';
 import { DataType, ColumnType } from '../select-column-multiple';
 import { AtomsItem } from '../../../store/types';
 export type ValueType = Partial<ColumnType> & {
@@ -17,5 +18,5 @@ interface PropsType {
     didUpdate?: Function;
     ignoreGroupByType?: boolean;
 }
-declare const SelectSummarize: ({ data, value, onChange, didUpdate, ignoreGroupByType }: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const SelectSummarize: ({ data, value, onChange, didUpdate, ignoreGroupByType }: PropsType) => React.JSX.Element;
 export default SelectSummarize;

package/lib/es/components/dialog/select-table/index.d.ts

@@ -1,4 +1,5 @@
 import './index.less';
+import React from 'react';
 import { MetaData_TableType } from '../../../store/types';
 import { DatasourceType } from '../../../types';
 interface PropsType {
@@ -9,5 +10,5 @@ interface PropsType {
     didUpdate?: Function;
     tableFlat?: boolean;
 }
-declare const SelectTable: ({ data, sourceTable, value, onChange, didUpdate, tableFlat, }: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const SelectTable: ({ data, sourceTable, value, onChange, didUpdate, tableFlat, }: PropsType) => React.JSX.Element;
 export default SelectTable;

package/lib/es/components/icons.d.ts

@@ -1,35 +1,36 @@
+import React from 'react';
 type IconProps = {
     width?: number;
     height?: number;
     style?: object;
 };
-export declare const CloseIcon2: (reset: any) => import("react/jsx-runtime").JSX.Element;
-export declare const FilterIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SummarizeIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const JoinDataIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const GroupIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const PermissionTableIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CustomColumnIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SortIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RowLimitIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const LeftJoinIcon: ({ width, height, style }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const InnerJoinIcon: ({ width, height, style }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const UpArrowIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DownArrowIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CloseIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const AddIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TableIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SearchIcon: ({ width, height }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const NotSelectIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const SelectIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const CircleIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const LetterAaIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const CalendarIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const WellIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const ForeignKeyIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const UpArrowIcon2: () => import("react/jsx-runtime").JSX.Element;
-export declare const DownArrowIcon2: () => import("react/jsx-runtime").JSX.Element;
-export declare const LeftArrowIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const RightArrowIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const DataSourceIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const CloseIcon2: (reset: any) => React.JSX.Element;
+export declare const FilterIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const SummarizeIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const JoinDataIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const GroupIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const PermissionTableIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const CustomColumnIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const SortIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const RowLimitIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const LeftJoinIcon: ({ width, height, style }: IconProps) => React.JSX.Element;
+export declare const InnerJoinIcon: ({ width, height, style }: IconProps) => React.JSX.Element;
+export declare const UpArrowIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const DownArrowIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const CloseIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const AddIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const TableIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const SearchIcon: ({ width, height }: IconProps) => React.JSX.Element;
+export declare const NotSelectIcon: () => React.JSX.Element;
+export declare const SelectIcon: () => React.JSX.Element;
+export declare const CircleIcon: () => React.JSX.Element;
+export declare const LetterAaIcon: () => React.JSX.Element;
+export declare const CalendarIcon: () => React.JSX.Element;
+export declare const WellIcon: () => React.JSX.Element;
+export declare const ForeignKeyIcon: () => React.JSX.Element;
+export declare const UpArrowIcon2: () => React.JSX.Element;
+export declare const DownArrowIcon2: () => React.JSX.Element;
+export declare const LeftArrowIcon: () => React.JSX.Element;
+export declare const RightArrowIcon: () => React.JSX.Element;
+export declare const DataSourceIcon: () => React.JSX.Element;
 export {};

package/lib/es/components/metabase/index.d.ts

@@ -1,4 +1,5 @@
 import './index.less';
+import React from 'react';
 import type { MetabaseProps } from '../../types';
-declare const Metabase: (props: MetabaseProps) => import("react/jsx-runtime").JSX.Element;
+declare const Metabase: (props: MetabaseProps) => React.JSX.Element;
 export default Metabase;

package/lib/es/components/metabase/index.js

@@ -5,7 +5,7 @@ var _templateObject;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './index.less';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { Button, Modal, Toast, Space, Tooltip } from '@gingkoo/pandora';
 import Styled from 'styled-components';
@@ -16,6 +16,7 @@ import modulesMap from '../modules';
 import Popup from '../popup';
 import { useStore } from '../../hooks/use-provider';
 import storage from '../../utils/storage';
+import SqbRightClickMenu, { openSqbRightClickMenu } from '../right-click-menu';
 var VisualBox = Styled.div.attrs({
   className: 'visual-box scroller'
 })(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
@@ -27,7 +28,10 @@ var Metabase = function Metabase(props) {
     onOk = props.onOk,
     metabaseCopy = props.metabaseCopy,
     moduleCopy = props.moduleCopy,
-    popupZIndex = props.popupZIndex;
+    popupZIndex = props.popupZIndex,
+    _props$rightClickMenu = props.rightClickMenu,
+    rightClickMenu = _props$rightClickMenu === void 0 ? [] : _props$rightClickMenu,
+    onRightClickMenuClick = props.onRightClickMenuClick;
   var store = useStore();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -144,6 +148,10 @@ var Metabase = function Metabase(props) {
       return _ref.apply(this, arguments);
     };
   }();
+  useEffect(function () {
+    store.setRightClickMenu(rightClickMenu || []);
+    store.setRightClickMenuClick(onRightClickMenuClick);
+  }, [rightClickMenu, onRightClickMenuClick]);
   var copy = function copy() {
     return _jsxs(Space, {
       children: [moduleCopy && _jsx(_Fragment, {
@@ -206,6 +214,9 @@ var Metabase = function Metabase(props) {
   };
   return _jsx(VisualBox, {
     ref: store.popupContainer,
+    onContextMenu: function onContextMenu(e) {
+      return openSqbRightClickMenu(store, e);
+    },
     children: _jsxs("div", {
       className: 'Sqb',
       children: [_jsx("div", {
@@ -267,6 +278,8 @@ var Metabase = function Metabase(props) {
           });
         },
         children: popupContent2
+      }), _jsx(SqbRightClickMenu, {
+        popupZIndex: popupZIndex
       })]
     })
   });

package/lib/es/components/metabase/index.less

@@ -13,6 +13,40 @@
 .Sqb {
   padding: 0 20px 50px;
   position: relative;
+  &-right-click-menu {
+    position: fixed;
+    min-width: 140px;
+    padding: 4px;
+    border: 1px solid #d9dee8;
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0 8px 24px rgba(31, 35, 41, 0.16);
+  }
+  &-right-click-menu-item {
+    display: block;
+    width: 100%;
+    min-height: 32px;
+    padding: 6px 10px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: #1f2329;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+      background: #f4f6f8;
+    }
+
+    &.disabled,
+    &:disabled {
+      color: #b8bbc3;
+      cursor: not-allowed;
+      background: transparent;
+    }
+  }
   &-fun-btns {
     position: absolute;
     left: 0;

package/lib/es/components/modules/components/Wrapper.d.ts

@@ -3,5 +3,5 @@ interface WrapperType {
     children: React.ReactElement;
     className: string;
 }
-declare const Wrapper: ({ children, className }: WrapperType) => import("react/jsx-runtime").JSX.Element;
+declare const Wrapper: ({ children, className }: WrapperType) => React.JSX.Element;
 export default Wrapper;

package/lib/es/components/modules/components/header.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface HeaderProps {
     title: string;
     className?: string;
@@ -8,5 +9,5 @@ interface HeaderProps {
     meta?: any;
     isDataModule?: boolean;
 }
-declare const Header: (props: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: (props: HeaderProps) => React.JSX.Element;
 export default Header;

package/lib/es/components/modules/components/item-name.d.ts

@@ -4,5 +4,5 @@ interface HeaderProps {
     isError: boolean;
     message?: string;
 }
-declare const ItemName: (props: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ItemName: (props: HeaderProps) => React.JSX.Element;
 export default ItemName;

package/lib/es/components/modules/components/item-wrapper.d.ts

@@ -5,5 +5,5 @@ interface HeaderProps {
     meta?: any;
     children?: React.ReactNode;
 }
-declare const ItemWrapper: (props: HeaderProps) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+declare const ItemWrapper: (props: HeaderProps) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 export default ItemWrapper;

package/lib/es/components/modules/components/meta-icon.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TypeEnum } from '../../../store/enum';
 import { MetaListType } from '../../../store/types';
 interface PropsType {
@@ -11,5 +12,5 @@ type IconInfoType = {
 };
 export declare const IconTypeMap: Map<TypeEnum, IconInfoType>;
 export declare const findNextIcon: (store: any, props: PropsType) => TypeEnum[];
-declare const NextDom: (props: PropsType) => import("react/jsx-runtime").JSX.Element | null;
+declare const NextDom: (props: PropsType) => React.JSX.Element | null;
 export default NextDom;

package/lib/es/components/modules/custom-column.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { MetaCustom } from '../../store/types';
 interface PropsType {
     store?: any;
     meta: MetaCustom;
     groupIndex: number;
 }
-declare const CustomColumn: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const CustomColumn: (props: PropsType) => React.JSX.Element;
 export default CustomColumn;

package/lib/es/components/modules/custom-column.js

@@ -21,6 +21,7 @@ import NextDom from './components/meta-icon';
 import Header from './components/header';
 import ItemWrapper from './components/item-wrapper';
 import ItemName from './components/item-name';
+import RightClickValue from '../right-click-value';
 import { getTopLayerZIndex } from '../../utils/helper-dom';
 import { useStore } from '../../hooks/use-provider';
 var CustomColumn = function CustomColumn(props) {
@@ -310,20 +311,23 @@ var CustomColumn = function CustomColumn(props) {
             children: [meta.customColumn.map(function (v, i) {
               return _jsx(ItemName, {
                 isError: isError(v.formulaList, getColumns()) || isExistsError(v.formulaList, store.existsError),
-                children: _jsxs("div", {
-                  className: cx("Sqb-TableName gray-name"),
-                  onClick: function onClick(e) {
-                    return showSubQuery(e, i);
-                  },
-                  children: [v.name, _jsx("span", {
-                    style: {
-                      fontSize: 0
-                    },
+                children: _jsx(RightClickValue, {
+                  value: v,
+                  children: _jsxs("div", {
+                    className: cx("Sqb-TableName gray-name"),
                     onClick: function onClick(e) {
-                      return handleDel(e, i);
+                      return showSubQuery(e, i);
                     },
-                    children: _jsx(CloseIcon, {})
-                  })]
+                    children: [v.name, _jsx("span", {
+                      style: {
+                        fontSize: 0
+                      },
+                      onClick: function onClick(e) {
+                        return handleDel(e, i);
+                      },
+                      children: _jsx(CloseIcon, {})
+                    })]
+                  })
                 })
               }, i);
             }), _jsx("div", {

package/lib/es/components/modules/filter.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { MetaFilter } from '../../store/types';
 interface PropsType {
     meta: MetaFilter;
     groupIndex: number;
 }
-declare const Filter: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const Filter: (props: PropsType) => React.JSX.Element;
 export default Filter;

package/lib/es/components/modules/join-data.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { MetaJoin } from '../../store/types';
 interface PropsType {
     meta: MetaJoin;
     groupIndex: number;
 }
-declare const JoinData: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const JoinData: (props: PropsType) => React.JSX.Element;
 export default JoinData;