dtable-ui-component 6.0.91 → 6.0.93

package/lib/Radio/Radio.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _rcCheckbox = _interopRequireDefault(require("rc-checkbox"));
 var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 class Radio extends React.Component {
   render() {
     const {
@@ -20,24 +21,27 @@ 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 */
       delete restProps['class'];
     }
-    const mark = /*#__PURE__*/React.createElement("label", {
+    const mark = /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
       className: wrapCls,
-      style: style
-    }, /*#__PURE__*/React.createElement(_rcCheckbox.default, Object.assign({}, restProps, {
-      type: "radio"
-    })), children);
+      style: style,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_rcCheckbox.default, {
+        ...restProps,
+        type: "radio"
+      }), children]
+    });
     if (this.props.wrapLabel) {
       return mark;
     }
-    return /*#__PURE__*/React.createElement(_rcCheckbox.default, Object.assign({}, this.props, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcCheckbox.default, {
+      ...this.props,
       type: "radio"
-    }));
+    });
   }
 }
 exports.default = Radio;

package/lib/Radio/RadioItem.js

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
 var _List = _interopRequireDefault(require("../List"));
 var _Radio = _interopRequireDefault(require("./Radio"));
+var _jsxRuntime = require("react/jsx-runtime");
 const ListItem = _List.default.Item;
 function noop() {}
 class RadioItem extends React.Component {
@@ -27,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
@@ -42,11 +43,16 @@ class RadioItem extends React.Component {
         extraProps[i] = this.props[i];
       }
     });
-    return /*#__PURE__*/React.createElement(ListItem, Object.assign({}, otherProps, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
+      ...otherProps,
       prefixCls: listPrefixCls,
       className: wrapCls,
-      extra: /*#__PURE__*/React.createElement(_Radio.default, Object.assign({}, radioProps, extraProps))
-    }), children);
+      extra: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
+        ...radioProps,
+        ...extraProps
+      }),
+      children: children
+    });
   }
 }
 exports.default = RadioItem;

package/lib/RateFormatter/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class RateFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -24,13 +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__*/_react.default.createElement("i", {
-          key: "dtable-ui-component-rate-".concat(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-${i}`));
       }
       return rateList;
     };
@@ -43,10 +43,11 @@ class RateFormatter extends _react.default.Component {
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container rate-formatter', containerClassName);
     if (!number) return null;
     const rateList = this.getRateList();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: number,
-      className: className
-    }, rateList);
+      className: className,
+      children: rateList
+    });
   }
 }
 RateFormatter.defaultProps = {

package/lib/RoleStatusEditor/index.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const RoleStatusEditor = _ref => {
   let {
     isShowDropdownIcon,
@@ -27,38 +28,42 @@ const RoleStatusEditor = _ref => {
     if (value === currentOption.value) return;
     onChangeOption(value);
   };
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Dropdown, {
     isOpen: isOpen,
     className: "role-status-editor",
-    toggle: () => setIsOpen(!isOpen)
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
-    className: "dropdown-toggle-button d-flex align-items-center",
-    tag: "div"
-  }, currentOption.label, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dropdown-icon-container ml-1"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)('dtable-font dtable-icon-down3', {
-      'hide': !isShowDropdownIcon
-    })
-  }))), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
-    className: "position-fixed",
-    modifiers: [{
-      name: 'preventOverflow',
-      options: {
-        boundary: document.body
-      }
-    }]
-  }, menuOptions.map(option => {
-    const {
-      value,
-      label
-    } = option;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-      key: "item-".concat(value),
-      onClick: () => handleClickMenuOption(option)
-    }, label, value === currentOption.value && /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-check-mark ml-2"
-    }));
-  })));
+    toggle: () => setIsOpen(!isOpen),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownToggle, {
+      className: "dropdown-toggle-button d-flex align-items-center",
+      tag: "div",
+      children: [currentOption.label, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dropdown-icon-container ml-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)('dtable-font dtable-icon-down3', {
+            'hide': !isShowDropdownIcon
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownMenu, {
+      className: "position-fixed",
+      modifiers: [{
+        name: 'preventOverflow',
+        options: {
+          boundary: document.body
+        }
+      }],
+      children: menuOptions.map(option => {
+        const {
+          value,
+          label
+        } = option;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+          onClick: () => handleClickMenuOption(option),
+          children: [label, value === currentOption.value && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "dtable-font dtable-icon-check-mark ml-2"
+          })]
+        }, `item-${value}`);
+      })
+    })]
+  });
 };
 var _default = exports.default = RoleStatusEditor;

package/lib/RowExpand/index.js

@@ -10,15 +10,22 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _RowExpandDialog = _interopRequireDefault(require("../RowExpandDialog"));
 var _RowExpandView = _interopRequireDefault(require("../RowExpandView"));
+var _jsxRuntime = require("react/jsx-runtime");
 const RowExpand = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: '(min-width: 768px)'
-  }, /*#__PURE__*/_react.default.createElement(_RowExpandDialog.default, Object.assign({}, props, {
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: '(max-width: 768px)'
-  }, /*#__PURE__*/_react.default.createElement(_RowExpandView.default, Object.assign({}, props, {
-    ref: ref
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: '(min-width: 768px)',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RowExpandDialog.default, {
+        ...props,
+        ref: ref
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: '(max-width: 768px)',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RowExpandView.default, {
+        ...props,
+        ref: ref
+      })
+    })]
+  });
 });
 var _default = exports.default = RowExpand;

package/lib/RowExpandDialog/body/index.js

@@ -15,6 +15,7 @@ var _RowExpandFormatter = _interopRequireDefault(require("../../RowExpandFormatt
 var _constants = require("../../constants");
 var _utils = require("../../utils/utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Body extends _react.default.Component {
   constructor(_props) {
     super(_props);
@@ -159,7 +160,8 @@ class Body extends _react.default.Component {
         formatter
       } = component || {};
       if (editable) {
-        return /*#__PURE__*/_react.default.createElement(_RowExpandEditor.default, Object.assign({}, props, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RowExpandEditor.default, {
+          ...props,
           column: column,
           row: row,
           component: editor,
@@ -170,22 +172,25 @@ class Body extends _react.default.Component {
           onCommit: value => onChange(column, value),
           onEditorOpen: this.onEditorOpen,
           onEditorClose: this.onEditorClose
-        }));
+        });
       }
-      return /*#__PURE__*/_react.default.createElement(_RowExpandFormatter.default, Object.assign({}, props, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RowExpandFormatter.default, {
+        ...props,
         column: column,
         row: row,
         component: formatter,
         downloadImage: getDownLoadFiles ? this.downloadImage : null
-      }));
+      });
     };
     this.renderColumnContent = (row, column, columnIndex) => {
       const isEditorFocus = columnIndex === this.state.tabIndex && column.editable;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        ref: isEditorFocus ? this.focusDom : null
-      }, /*#__PURE__*/_react.default.createElement(_columnContent.default, {
-        column: column
-      }, this.renderColumnValue(row, column, columnIndex, isEditorFocus)));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: isEditorFocus ? this.focusDom : null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnContent.default, {
+          column: column,
+          children: this.renderColumnValue(row, column, columnIndex, isEditorFocus)
+        })
+      });
     };
     this.renderChildren = () => {
       const {
@@ -198,8 +203,10 @@ class Body extends _react.default.Component {
         row
       };
       const CustomChildren = children;
-      if ( /*#__PURE__*/_react.default.isValidElement(CustomChildren)) return /*#__PURE__*/_react.default.cloneElement(CustomChildren, props);
-      if ((0, _utils.isFunction)(CustomChildren)) return /*#__PURE__*/_react.default.createElement(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
+      });
       return children;
     };
     this.state = {
@@ -227,37 +234,41 @@ class Body extends _react.default.Component {
       row,
       placeholder
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
-      className: "dtable-ui-row-expand-body"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-body-content",
-      ref: ref => this.contentRef = ref
-    }, columns.length === 0 && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder), columns.map((column, index) => {
-      const {
-        type,
-        data
-      } = column;
-      let isHasMore = false;
-      if (type === _dtableUtils.CellType.LINK_FORMULA) {
-        let {
-          array_type
-        } = data || {};
-        const value = this.getCellValue({
-          row,
-          column
-        });
-        const cellValue = (0, _utils.getFormulaArrayValue)(value, !(0, _utils.isArrayFormatColumn)(array_type));
-        if (cellValue.length >= 10) {
-          isHasMore = true;
-        }
-      }
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('dtable-ui-row-expand-item', {
-          'is-has-more': isHasMore
-        }),
-        key: column.key
-      }, this.renderColumnContent(row, column, index));
-    })), this.renderChildren());
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.ModalBody, {
+      className: "dtable-ui-row-expand-body",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-row-expand-body-content",
+        ref: ref => this.contentRef = ref,
+        children: [columns.length === 0 && placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: placeholder
+        }), columns.map((column, index) => {
+          const {
+            type,
+            data
+          } = column;
+          let isHasMore = false;
+          if (type === _dtableUtils.CellType.LINK_FORMULA) {
+            let {
+              array_type
+            } = data || {};
+            const value = this.getCellValue({
+              row,
+              column
+            });
+            const cellValue = (0, _utils.getFormulaArrayValue)(value, !(0, _utils.isArrayFormatColumn)(array_type));
+            if (cellValue.length >= 10) {
+              isHasMore = true;
+            }
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _classnames.default)('dtable-ui-row-expand-item', {
+              'is-has-more': isHasMore
+            }),
+            children: this.renderColumnContent(row, column, index)
+          }, column.key);
+        })]
+      }), this.renderChildren()]
+    });
   }
 }
 var _default = exports.default = Body;

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

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _dtableUtils = require("dtable-utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const ColumnContent = _ref => {
   let {
     column,
@@ -21,30 +22,38 @@ const ColumnContent = _ref => {
     key,
     description
   } = column;
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
-    className: "dtable-ui-row-expand-column-content pb-4"
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
-    md: 3,
-    className: "dtable-ui-row-expand-column-content-info d-flex"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-ui-header-icon",
-    id: "header-icon-".concat(key)
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: _dtableUtils.COLUMNS_ICON_CONFIG[type]
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-ui-row-expand-column-name"
-  }, name || ''), description && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-font dtable-icon-description dtable-ui-column-tip-icon ml-2",
-    ref: descriptionRef
-  }), descriptionRef.current && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
-    innerClassName: "dtable-ui-column-description-tip",
-    popperClassName: "dtable-ui-row-expand-column-tip",
-    target: descriptionRef.current,
-    placement: "bottom",
-    fade: false
-  }, description))), /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
-    md: 9,
-    className: "d-flex align-items-center dtable-ui-row-expand-column-content-value"
-  }, children));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Row, {
+    className: "dtable-ui-row-expand-column-content pb-4",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Col, {
+      md: 3,
+      className: "dtable-ui-row-expand-column-content-info d-flex",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-ui-header-icon",
+        id: `header-icon-${key}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: _dtableUtils.COLUMNS_ICON_CONFIG[type]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-ui-row-expand-column-name",
+        children: name || ''
+      }), description && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "dtable-font dtable-icon-description dtable-ui-column-tip-icon ml-2",
+          ref: descriptionRef
+        }), descriptionRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+          innerClassName: "dtable-ui-column-description-tip",
+          popperClassName: "dtable-ui-row-expand-column-tip",
+          target: descriptionRef.current,
+          placement: "bottom",
+          fade: false,
+          children: description
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Col, {
+      md: 9,
+      className: "d-flex align-items-center dtable-ui-row-expand-column-content-value",
+      children: children
+    })]
+  });
 };
 var _default = exports.default = ColumnContent;

package/lib/RowExpandDialog/header/index.js

@@ -12,6 +12,7 @@ var _lang = require("../../lang");
 var _utils = require("../../utils/utils");
 var _IconButton = _interopRequireDefault(require("../../IconButton"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const Header = _ref => {
   let {
     title,
@@ -27,29 +28,35 @@ const Header = _ref => {
       row
     };
     const CustomTitle = title;
-    if ( /*#__PURE__*/_react.default.isValidElement(CustomTitle)) return /*#__PURE__*/_react.default.cloneElement(CustomTitle, props);
-    if ((0, _utils.isFunction)(CustomTitle)) return /*#__PURE__*/_react.default.createElement(CustomTitle, props);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-header-title text-truncate"
-    }, title);
+    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
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-ui-row-expand-header-title text-truncate",
+      children: title
+    });
   }, [columns, row, title]);
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, {
     className: "d-print-none dtable-ui-row-expand-header",
-    close: /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-header-right-btns"
-    }, copyURL && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      icon: "url",
-      onClick: () => copyURL(),
-      "aria-label": (0, _lang.getLocale)('Get_URL'),
-      title: (0, _lang.getLocale)('Get_URL')
-    }), children, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      icon: "x",
-      onClick: onToggle,
-      title: (0, _lang.getLocale)('Close_expanded_record'),
-      "aria-label": (0, _lang.getLocale)('Close_expanded_record')
-    }))
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-row-expand-header-left-btns"
-  }, renderTitle()));
+    close: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "dtable-ui-row-expand-header-right-btns",
+      children: [copyURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        icon: "url",
+        onClick: () => copyURL(),
+        "aria-label": (0, _lang.getLocale)('Get_URL'),
+        title: (0, _lang.getLocale)('Get_URL')
+      }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        icon: "x",
+        onClick: onToggle,
+        title: (0, _lang.getLocale)('Close_expanded_record'),
+        "aria-label": (0, _lang.getLocale)('Close_expanded_record')
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-ui-row-expand-header-left-btns",
+      children: renderTitle()
+    })
+  });
 };
 var _default = exports.default = Header;

package/lib/RowExpandDialog/index.js

@@ -17,6 +17,7 @@ var _body = _interopRequireDefault(require("./body"));
 var _lang = require("../lang");
 var _cellComparer = require("../utils/cell-comparer");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     saveImmediately = true,
@@ -166,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';
@@ -198,7 +199,7 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       });
     }
   }), [row, columns]);
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Modal, {
     isOpen: true,
     toggle: onToggle,
     className: (0, _classnames.default)('dtable-ui-row-expand-dialog', className),
@@ -208,32 +209,44 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     modalClassName: "dtable-ui-row-expand-modal",
     fade: false,
     innerRef: modalRef,
-    keyboard: false
-  }, isAnimationEnd && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "w-100 -h-100 d-flex align-items-center justify-content-center"
-  }, /*#__PURE__*/_react.default.createElement(_Loading.default, null)) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-row-expand-details"
-  }, /*#__PURE__*/_react.default.createElement(_header.default, {
-    title: title,
-    row: row,
-    columns: columns,
-    copyURL: copyURL,
-    onToggle: toggle
-  }, children[0]), /*#__PURE__*/_react.default.createElement(_body.default, Object.assign({}, otherProps, {
-    row: row,
-    columns: columns,
-    valueKey: valueKey,
-    onChange: onChange,
-    uploadFile: uploadFile,
-    onToggle: onToggle
-  }), children[1]), (!saveImmediately || isInsertingRow) && /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-    onClick: toggle,
-    color: "secondary"
-  }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-    onClick: onSubmit,
-    disabled: isSaving || !isChangedRef.current,
-    color: "primary"
-  }, (0, _lang.getLocale)('Submit'))))));
+    keyboard: false,
+    children: isAnimationEnd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "w-100 -h-100 d-flex align-items-center justify-content-center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {})
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-row-expand-details",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+          title: title,
+          row: row,
+          columns: columns,
+          copyURL: copyURL,
+          onToggle: toggle,
+          children: children[0]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
+          ...otherProps,
+          row: row,
+          columns: columns,
+          valueKey: valueKey,
+          onChange: onChange,
+          uploadFile: uploadFile,
+          onToggle: onToggle,
+          children: children[1]
+        }), (!saveImmediately || isInsertingRow) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.ModalFooter, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+            onClick: toggle,
+            color: "secondary",
+            children: (0, _lang.getLocale)('Cancel')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+            onClick: onSubmit,
+            disabled: isSaving || !isChangedRef.current,
+            color: "primary",
+            children: (0, _lang.getLocale)('Submit')
+          })]
+        })]
+      })
+    })
+  });
 });
 RowExpandDialog.Header = _header.default;
 RowExpandDialog.Body = _body.default;