dtable-ui-component 6.0.54 → 6.0.55-beta.2

package/lib/Progress/index.js

@@ -18,7 +18,7 @@ class Progress extends React.Component {
     if (this.props.appearTransition) {
       setTimeout(() => {
         if (this.barRef) {
-          this.barRef.style.width = "".concat(this.props.percent, "%");
+          this.barRef.style.width = `${this.props.percent}%`;
         }
       }, 10);
     }
@@ -33,12 +33,12 @@ class Progress extends React.Component {
       barStyle = {}
     } = this.props;
     const percentStyle = {
-      width: this.noAppearTransition || !this.props.appearTransition ? "".concat(this.props.percent, "%") : 0,
+      width: this.noAppearTransition || !this.props.appearTransition ? `${this.props.percent}%` : 0,
       height: 0
     };
-    const wrapCls = (0, _classnames.default)("".concat(prefixCls, "-outer"), className, {
-      ["".concat(prefixCls, "-fixed-outer")]: position === 'fixed',
-      ["".concat(prefixCls, "-hide-outer")]: !unfilled
+    const wrapCls = (0, _classnames.default)(`${prefixCls}-outer`, className, {
+      [`${prefixCls}-fixed-outer`]: position === 'fixed',
+      [`${prefixCls}-hide-outer`]: !unfilled
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: style,
@@ -49,7 +49,7 @@ class Progress extends React.Component {
       "aria-valuemax": 100,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: el => this.barRef = el,
-        className: "".concat(prefixCls, "-bar"),
+        className: `${prefixCls}-bar`,
         style: {
           ...barStyle,
           ...percentStyle

package/lib/Radio/Radio.js

@@ -21,7 +21,7 @@ class Radio extends React.Component {
       prefixCls,
       children
     } = restProps;
-    const wrapCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), className);
+    const wrapCls = (0, _classnames.default)(`${prefixCls}-wrapper`, className);
     if ('class' in restProps) {
       // Todo https://github.com/developit/preact-compat/issues/422
       /* tslint:disable:no-string-literal */

package/lib/Radio/RadioItem.js

@@ -28,8 +28,8 @@ class RadioItem extends React.Component {
       className,
       children
     } = otherProps;
-    const wrapCls = (0, _classnames.default)("".concat(prefixCls, "-item"), className, {
-      ["".concat(prefixCls, "-item-disabled")]: disabled === true
+    const wrapCls = (0, _classnames.default)(`${prefixCls}-item`, className, {
+      [`${prefixCls}-item-disabled`]: disabled === true
     });
 
     // Note: if not omit `onChange`, it will trigger twice on check listitem

package/lib/RateFormatter/index.js

@@ -25,12 +25,12 @@ class RateFormatter extends _react.default.Component {
       const validValue = Math.min(rate_max_number, value);
       let rateList = [];
       for (let i = 0; i < validValue; i++) {
-        rateList.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "dtable-font ".concat(rate_style_type),
+        rateList.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: `dtable-font ${rate_style_type}`,
           style: {
             color: rate_style_color || '#e5e5e5'
           }
-        }, "dtable-ui-component-rate-".concat(i)));
+        }, `dtable-ui-component-rate-${i}`));
       }
       return rateList;
     };

package/lib/RoleStatusEditor/index.js

@@ -61,7 +61,7 @@ const RoleStatusEditor = _ref => {
           children: [label, value === currentOption.value && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
             className: "dtable-font dtable-icon-check-mark ml-2"
           })]
-        }, "item-".concat(value));
+        }, `item-${value}`);
       })
     })]
   });

package/lib/RowExpandDialog/body/index.js

@@ -203,7 +203,7 @@ class Body extends _react.default.Component {
         row
       };
       const CustomChildren = children;
-      if ( /*#__PURE__*/_react.default.isValidElement(CustomChildren)) return /*#__PURE__*/_react.default.cloneElement(CustomChildren, props);
+      if (/*#__PURE__*/_react.default.isValidElement(CustomChildren)) return /*#__PURE__*/_react.default.cloneElement(CustomChildren, props);
       if ((0, _utils.isFunction)(CustomChildren)) return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomChildren, {
         ...props
       });

package/lib/RowExpandDialog/column-content/index.css

@@ -10,13 +10,15 @@
   width: 24px;
 }
 
-.dtable-ui-header-icon .dtable-font {
+.dtable-ui-header-icon .dtable-font,
+.dtable-ui-header-icon .multicolor-icon {
   font-size: 14px;
   color: #aaa;
   cursor: default;
 }
 
-.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-header-icon .dtable-font {
+.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-header-icon .dtable-font,
+.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-header-icon .multicolor-icon {
   color: #212529a6;
 }
 

package/lib/RowExpandDialog/column-content/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -7,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _dtableUtils = require("dtable-utils");
+var _DTableColumnIcon = _interopRequireDefault(require("../../DTableColumnIcon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const ColumnContent = _ref => {
@@ -20,6 +21,7 @@ const ColumnContent = _ref => {
     name,
     type,
     key,
+    data,
     description
   } = column;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Row, {
@@ -29,9 +31,10 @@ const ColumnContent = _ref => {
       className: "dtable-ui-row-expand-column-content-info d-flex",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "dtable-ui-header-icon",
-        id: "header-icon-".concat(key),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: _dtableUtils.COLUMNS_ICON_CONFIG[type]
+        id: `header-icon-${key}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableColumnIcon.default, {
+          columnType: type,
+          columnDisplayType: data === null || data === void 0 ? void 0 : data.display_type
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "dtable-ui-row-expand-column-name",

package/lib/RowExpandDialog/header/index.js

@@ -28,7 +28,7 @@ const Header = _ref => {
       row
     };
     const CustomTitle = title;
-    if ( /*#__PURE__*/_react.default.isValidElement(CustomTitle)) return /*#__PURE__*/_react.default.cloneElement(CustomTitle, props);
+    if (/*#__PURE__*/_react.default.isValidElement(CustomTitle)) return /*#__PURE__*/_react.default.cloneElement(CustomTitle, props);
     if ((0, _utils.isFunction)(CustomTitle)) return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomTitle, {
       ...props
     });

package/lib/RowExpandDialog/index.js

@@ -167,9 +167,9 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         marginLeft,
         height
       } = style;
-      dom.style.width = "".concat(width, "px");
-      dom.style.maxWidth = "".concat(maxWidth, "px");
-      dom.style.marginLeft = "".concat(marginLeft, "px");
+      dom.style.width = `${width}px`;
+      dom.style.maxWidth = `${maxWidth}px`;
+      dom.style.marginLeft = `${marginLeft}px`;
       dom.style.height = height;
       dom.style.marginRight = 'unset';
       dom.style.marginTop = '28px';

package/lib/RowExpandEditor/digital-sign-editor/mb-editor/index.js

@@ -81,7 +81,7 @@ class RowExpandMBDigitalSignEditor extends _react.default.Component {
           onClick: this.toggleEditor,
           deleteImage: this.deleteImage,
           disableImageTooltip: true
-        }, "sing-image-".concat(key, "-").concat(index));
+        }, `sing-image-${key}-${index}`);
       });
     };
     this.state = {

package/lib/RowExpandEditor/digital-sign-editor/pc-editor/index.js

@@ -120,7 +120,7 @@ class RowExpandPCDigitalSignEditor extends _react.default.Component {
           onClick: this.setLargeImageIndex,
           deleteImage: this.deleteImage,
           disableImageTooltip: true
-        }, "sing-image-".concat(key, "-").concat(index));
+        }, `sing-image-${key}-${index}`);
       });
     };
     this.state = {

package/lib/RowExpandEditor/email-editor/mb-editor/index.js

@@ -36,7 +36,7 @@ class RowExpandMBEmailEditor extends _react.default.Component {
         value
       } = this.state;
       let newValue = value.trim();
-      window.location.href = "mailto:".concat(newValue);
+      window.location.href = `mailto:${newValue}`;
     };
     const {
       row,

package/lib/RowExpandEditor/email-editor/pc-editor/index.js

@@ -66,7 +66,7 @@ class RowExpandPCEmailEditor extends _react.default.Component {
         value
       } = this.state;
       let newValue = value.trim();
-      window.location.href = "mailto:".concat(newValue);
+      window.location.href = `mailto:${newValue}`;
     };
     const {
       row,

package/lib/RowExpandEditor/image-editor/mb-editor/index.js

@@ -55,7 +55,7 @@ class RowExpandMBImageEditor extends _react.default.Component {
           config: config,
           onClick: this.toggleEditor,
           deleteImage: this.deleteImage
-        }, "image-".concat(index));
+        }, `image-${index}`);
       });
     };
     const {

package/lib/RowExpandEditor/image-editor/pc-editor/index.js

@@ -95,7 +95,7 @@ class RowExpandPCImageEditor extends _react.default.Component {
           onClick: this.setLargeImageIndex,
           deleteImage: this.deleteImage,
           config: config
-        }, "image-".concat(index));
+        }, `image-${index}`);
       });
     };
     this.state = {

package/lib/RowExpandEditor/multiple-select-editor/mb-editor/index.js

@@ -90,7 +90,7 @@ class RowExpandMBMultipleSelectEditor extends _react.default.Component {
             onRemove: this.removeOption.bind(this, {
               [this.key]: optionId
             })
-          }, "deleted-".concat(index));
+          }, `deleted-${index}`);
         }));
       }
       if (displayOptions.length === 0) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_addBtn.default, {

package/lib/RowExpandEditor/multiple-select-editor/pc-editor/index.js

@@ -146,7 +146,7 @@ class RowExpandPCMultipleSelectEditor extends _react.default.Component {
               })
             })
           })]
-        }, "deleted-multiple-select-".concat(index));
+        }, `deleted-multiple-select-${index}`);
       }));
     };
     this.renderOptions = () => {
@@ -163,19 +163,19 @@ class RowExpandPCMultipleSelectEditor extends _react.default.Component {
         ref: ref => this.multipleSelectOptionsRef = ref,
         className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
           'focus': isEditorFocus,
-          ["".concat(classNamePrefix, "-select-editor")]: classNamePrefix
+          [`${classNamePrefix}-select-editor`]: classNamePrefix
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _classnames.default)('dtable-ui-row-expand-select-editor-inner', {
-            ["".concat(classNamePrefix, "-select-editor-inner")]: classNamePrefix
+            [`${classNamePrefix}-select-editor-inner`]: classNamePrefix
           }),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: (0, _classnames.default)('', {
-              ["".concat(classNamePrefix, "-select-editor-inner-container")]: classNamePrefix
+              [`${classNamePrefix}-select-editor-inner-container`]: classNamePrefix
             }),
             children: [options.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: (0, _classnames.default)('dtable-ui-row-expand-select-options', {
-                ["".concat(classNamePrefix, "-select-editor-options")]: classNamePrefix
+                [`${classNamePrefix}-select-editor-options`]: classNamePrefix
               }),
               children: options
             }), options.length === 0 && placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {

package/lib/RowExpandEditor/rate-editor/mb-editor.js

@@ -49,7 +49,7 @@ class RowExpandMBRateEditor extends _react.default.Component {
             'rate-item-active': value >= rateItemIndex
           }),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "dtable-font ".concat(rateShowType)
+            className: `dtable-font ${rateShowType}`
           })
         }, i);
         rateList.push(rateItem);

package/lib/RowExpandEditor/rate-editor/pc-editor.js

@@ -93,7 +93,7 @@ class RowExpandPCRateEditor extends _react.default.Component {
           style: style,
           className: value >= rateItemIndex ? 'rate-item-active' : '',
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "dtable-font ".concat(rateShowType)
+            className: `dtable-font ${rateShowType}`
           })
         }, i);
         rateList.push(rateItem);
@@ -142,7 +142,7 @@ class RowExpandPCRateEditor extends _react.default.Component {
       style: style,
       onKeyDown: this.onKeyDown,
       onFocus: this.props.updateTabIndex.bind(this, this.props.columnIndex),
-      "aria-label": "".concat(this.state.value, ", ").concat((0, _lang.getLocale)('Press_the_number_keys_to_enter_the_corresponding_value')),
+      "aria-label": `${this.state.value}, ${(0, _lang.getLocale)('Press_the_number_keys_to_enter_the_corresponding_value')}`,
       className: (0, _classnames.default)('form-control dtable-ui dtable-ui-row-expand-rate-editor', {
         'disabled': !this.canEdit
       }),

package/lib/RowExpandEditor/single-select-editor/pc-editor/index.js

@@ -114,15 +114,15 @@ class RowExpandPCSingleSelectEditor extends _react.default.Component {
         ref: ref => this.selectRef = ref,
         className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
           'focus': isEditorFocus,
-          ["".concat(classNamePrefix, "-select-editor")]: classNamePrefix
+          [`${classNamePrefix}-select-editor`]: classNamePrefix
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _classnames.default)('dtable-ui-row-expand-select-editor-inner', {
-            ["".concat(classNamePrefix, "-select-editor-inner")]: classNamePrefix
+            [`${classNamePrefix}-select-editor-inner`]: classNamePrefix
           }),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: (0, _classnames.default)('', {
-              ["".concat(classNamePrefix, "-select-editor-inner-container")]: classNamePrefix
+              [`${classNamePrefix}-select-editor-inner-container`]: classNamePrefix
             }),
             children: [value && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "dtable-ui-select-option",

package/lib/RowExpandEditor/url-editor/mb-editor/index.js

@@ -39,7 +39,7 @@ class RowExpandMBUrlEditor extends _react.default.Component {
       } = this.state;
       let newValue = value.trim();
       if (!(0, _utils.isValidUrl)(newValue)) {
-        newValue = "http://".concat(newValue);
+        newValue = `http://${newValue}`;
       }
       try {
         (0, _utils.openUrlLink)(newValue);

package/lib/RowExpandEditor/url-editor/pc-editor/index.js

@@ -69,7 +69,7 @@ class RowExpandPCUrlEditor extends _react.default.Component {
       } = this.state;
       let newValue = value.trim();
       if (!(0, _utils.isValidUrl)(newValue)) {
-        newValue = "http://".concat(newValue);
+        newValue = `http://${newValue}`;
       }
       try {
         (0, _utils.openUrlLink)(newValue);

package/lib/RowExpandFormatter/constants.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DEFAULT_FORMATTER = void 0;
 var _dtableUtils = require("dtable-utils");
-var _TextFormatter = _interopRequireDefault(require("../TextFormatter"));
+var _text = _interopRequireDefault(require("./text"));
 var _NumberFormatter = _interopRequireDefault(require("../NumberFormatter"));
 var _CheckboxFormatter = _interopRequireDefault(require("../CheckboxFormatter"));
 var _DateFormatter = _interopRequireDefault(require("../DateFormatter"));
@@ -32,7 +32,7 @@ var _linkFormatter = _interopRequireDefault(require("./link-formatter"));
 var _formulaFormatter = _interopRequireDefault(require("./formula-formatter"));
 var _departmentFormatter = _interopRequireDefault(require("./department-formatter"));
 const DEFAULT_FORMATTER = exports.DEFAULT_FORMATTER = {
-  [_dtableUtils.CellType.TEXT]: _TextFormatter.default,
+  [_dtableUtils.CellType.TEXT]: _text.default,
   [_dtableUtils.CellType.NUMBER]: _NumberFormatter.default,
   [_dtableUtils.CellType.CHECKBOX]: _CheckboxFormatter.default,
   [_dtableUtils.CellType.DATE]: _DateFormatter.default,

package/lib/RowExpandFormatter/email-formatter/index.css

@@ -1,30 +1,2 @@
 @import url('../../css/cell-formatter.css');
-
-.dtable-ui-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
-.dtable-ui-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {
-  text-decoration: underline;
-  width: 95%;
-  display: inline-flex;
-}
-
-.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link {
-  display: inline-flex;
-  align-items: center;
-  font-size: 14px;
-  height: 22px;
-  position: absolute;
-  top: 8px;
-  right: 22px;
-  border: 1px solid #eee;
-  padding: 0 4px;
-  color: #999;
-  border-radius: 2px;
-  background: #fff;
-  cursor: pointer;
-  box-shadow: 0 0 1px;
-}
-
-.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
-  background: #eee;
-  border: 1px solid #c9c9c9;
-}
+@import url('../../css/row-expand.css');

package/lib/RowExpandFormatter/email-formatter/index.js

@@ -18,7 +18,7 @@ class RowExpandEmailFormatter extends _react.default.Component {
         value
       } = this.props;
       let newValue = value.trim();
-      window.location.href = "mailto:".concat(newValue);
+      window.location.href = `mailto:${newValue}`;
     };
   }
   render() {
@@ -26,14 +26,14 @@ class RowExpandEmailFormatter extends _react.default.Component {
       containerClassName,
       value
     } = this.props;
-    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container email-formatter', containerClassName);
+    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container email-formatter row-expand-jump-link-container', containerClassName);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classname,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "email-formatter-value text-truncate",
+        className: "email-formatter-value row-expand-jump-link-value text-truncate",
         children: value
       }), (0, _editorUtils.getTrimmedString)(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-email row-expand-jump-link",
+        className: "dtable-font dtable-icon-email row-expand-jump-link-btn",
         onClick: this.onOpenEmailLink
       })]
     });

package/lib/RowExpandFormatter/file-formatter/row-expand-file-item-formatter.js

@@ -65,7 +65,7 @@ class RowExpandFileItemFormatter extends _react.Component {
         id: id,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: fileIconUrl,
-          id: "item-file-".concat(index),
+          id: `item-file-${index}`,
           alt: file.name
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-file-icons-choice",
@@ -83,7 +83,7 @@ class RowExpandFileItemFormatter extends _react.Component {
             })
           })]
         })]
-      }, "file-".concat(index)), this.state.isDeleteTipOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteTip.default, {
+      }, `file-${index}`), this.state.isDeleteTipOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteTip.default, {
         position: this.position,
         toggle: this.closeDeleteTip,
         handleDelete: this.onDelete,

package/lib/RowExpandFormatter/formula-formatter/index.css

@@ -0,0 +1,2 @@
+@import url('../../css/cell-formatter.css');
+@import url('../../css/row-expand.css');

package/lib/RowExpandFormatter/formula-formatter/index.js

@@ -10,12 +10,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 var _baseFormatterConfig = _interopRequireDefault(require("../../formatterConfig/base-formatter-config"));
 var _TextFormatter = _interopRequireDefault(require("../../TextFormatter"));
+var _PhoneNumberLink = _interopRequireDefault(require("../../PhoneNumberLink"));
 var _utils = require("../../FormulaFormatter/utils");
 var _utils2 = require("../../utils/utils");
 var _cellValueValidator = _interopRequireDefault(require("../../FormulaFormatter/cell-value-validator"));
 var _toaster = _interopRequireDefault(require("../../toaster"));
 var _lang = require("../../lang");
 require("../../FormulaFormatter/index.css");
+require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandFormulaFormatter extends _react.default.Component {
   constructor() {
@@ -35,7 +37,7 @@ class RowExpandFormulaFormatter extends _react.default.Component {
     };
     this.onOpenUrlLink = url => {
       if (!(0, _utils2.isValidUrl)(url)) {
-        url = "http://".concat(url);
+        url = `http://${url}`;
       }
       try {
         (0, _utils2.openUrlLink)(url);
@@ -44,7 +46,7 @@ class RowExpandFormulaFormatter extends _react.default.Component {
       }
     };
     this.onOpenEmailLink = email => {
-      window.location.href = "mailto:".concat(email.trim());
+      window.location.href = `mailto:${email.trim()}`;
     };
     this.renderBorder = dom => {
       const {
@@ -61,13 +63,6 @@ class RowExpandFormulaFormatter extends _react.default.Component {
           width: '320px'
         };
       }
-      const columnType = (0, _dtableUtils.getColumnType)(column);
-      if ([_dtableUtils.CellType.URL, _dtableUtils.CellType.EMAIL].includes(columnType)) {
-        style = {
-          ...style,
-          position: 'relative'
-        };
-      }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "d-flex align-items-center form-control disabled h-auto",
         style: style,
@@ -79,8 +74,8 @@ class RowExpandFormulaFormatter extends _react.default.Component {
         containerClassName
       } = this.props;
       const customClassName = this.getGridCellClassName(resultType);
-      const className = "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName, " ").concat(customClassName);
-      return this.renderBorder( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      const className = `dtable-ui cell-formatter-container formula-formatter ${containerClassName} ${customClassName}`;
+      return this.renderBorder(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: className,
         title: cellValue,
         "aria-label": cellValue,
@@ -125,7 +120,12 @@ class RowExpandFormulaFormatter extends _react.default.Component {
         formulaEmail = cellValue[0];
         formulaEmail = formulaEmail ? formulaEmail.trim() : '';
       }
-      return this.renderBorder( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      let formulaPhoneNumber = '';
+      if ((0, _dtableUtils.checkIsDisplayAsPhoneNumberColumn)(column)) {
+        formulaPhoneNumber = cellValue[0];
+        formulaPhoneNumber = formulaPhoneNumber ? formulaPhoneNumber.trim() : '';
+      }
+      return this.renderBorder(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "dtable-ui formula-formatter multiple",
         children: cellValue.map((v, index) => {
           formatterProps.value = v;
@@ -133,18 +133,21 @@ class RowExpandFormulaFormatter extends _react.default.Component {
             className: (0, _classnames.default)('formula-formatter-content-item', {
               'simple-cell-formatter': (0, _utils.isSimpleCellFormatter)(array_type)
             }, {
-              'formula-url-formatter-column': formulaUrl || formulaEmail
+              'row-expand-jump-link-container': !!(formulaUrl || formulaEmail || formulaPhoneNumber)
             }),
-            children: [formulaUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: [!!formulaUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-url formula-url-link",
+              className: "dtable-font dtable-icon-url formula-url-link row-expand-jump-link-btn",
               onClick: this.onOpenUrlLink.bind(this, formulaUrl)
-            }), formulaEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            }), !!formulaEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-email formula-email-link",
+              className: "dtable-font dtable-icon-email formula-email-link row-expand-jump-link-btn",
               onClick: this.onOpenEmailLink.bind(this, formulaEmail)
+            }), !!formulaPhoneNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PhoneNumberLink.default, {
+              phoneNumber: formulaPhoneNumber,
+              className: "row-expand-jump-link-btn"
             }), this.createColumnFormatter(Formatter, formatterProps)]
-          }, "formula-formatter-content-item-".concat(index));
+          }, `formula-formatter-content-item-${index}`);
         })
       }));
     };
@@ -191,7 +194,7 @@ class RowExpandFormulaFormatter extends _react.default.Component {
     };
   }
   createColumnFormatter(Formatter, formatterProps) {
-    if ( /*#__PURE__*/_react.default.isValidElement(Formatter)) {
+    if (/*#__PURE__*/_react.default.isValidElement(Formatter)) {
       return /*#__PURE__*/_react.default.cloneElement(Formatter, {
         ...formatterProps
       });

package/lib/RowExpandFormatter/image-formatter/row-expand-image-item-formatter.js

@@ -72,7 +72,7 @@ class RowExpandImageItemFormatter extends _react.Component {
         onClick: this.onClickImage,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: url,
-          id: "item-image-".concat(index),
+          id: `item-image-${index}`,
           alt: name
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-image-icons-choice",
@@ -90,7 +90,7 @@ class RowExpandImageItemFormatter extends _react.Component {
             })
           })]
         })]
-      }, "image-".concat(index)), this.state.isDeleteTipOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteTip.default, {
+      }, `image-${index}`), this.state.isDeleteTipOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteTip.default, {
         position: this.position,
         toggle: this.closeDeleteTip,
         handleDelete: this.onDelete,

package/lib/RowExpandFormatter/index.css

@@ -25,6 +25,7 @@
   height: 2.375rem;
   line-height: 2.375rem;
   width: 100%;
+  text-decoration: none;
 }
 
 .dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.multiple-select-formatter .dtable-ui.select-item {
@@ -46,6 +47,7 @@
 }
 
 .dtable-ui.dtable-ui-row-expand-formatter .form-control {
+  position: relative;
   background-color: #f8f9fa;
   padding: 0 10px;
   height: fit-content;

package/lib/RowExpandFormatter/index.js

@@ -66,7 +66,7 @@ class RowExpandFormatter extends _react.default.Component {
       const {
         collaborators
       } = this.state;
-      const containerClassName = "dtable-ui-row-expand-".concat(columnType, "-formatter");
+      const containerClassName = `dtable-ui-row-expand-${columnType}-formatter`;
       let cellValue = row[column[valueKey]];
       const Formatter = this.component[columnType];
       if (!Formatter) return null;
@@ -77,6 +77,7 @@ class RowExpandFormatter extends _react.default.Component {
               className: "form-control d-flex align-items-center w-100",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
                 value: cellValue,
+                column: column,
                 containerClassName: containerClassName
               })
             });

package/lib/RowExpandFormatter/link-formatter/collaborator-item-formatter.js

@@ -42,7 +42,7 @@ class CollaboratorItemFormatter extends _react.Component {
       }
       if (!context) return;
       const mediaUrl = context.getSetting('mediaUrl');
-      const defaultAvatarUrl = "".concat(mediaUrl, "/avatars/default.png");
+      const defaultAvatarUrl = `${mediaUrl}/avatars/default.png`;
       if (cellValue === 'anonymous') {
         collaborator = {
           name: 'anonymous',