dtable-ui-component 6.0.108 → 6.0.110-aik.2

package/lib/Comment/body/comment.js

@@ -140,7 +140,7 @@ class Comment extends _react.PureComponent {
     if (!this.isCommentUserExist(comment)) return null;
     const isShowDropdownMenu = comment.author === username || !comment.resolved;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "dtable-ui-comment-container ".concat(comment.resolved ? 'dtable-ui-comment-container-resolved' : ''),
+      className: `dtable-ui-comment-container ${comment.resolved ? 'dtable-ui-comment-container-resolved' : ''}`,
       id: comment.id,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "dtable-ui-comment-info",

package/lib/Comment/body/index.js

@@ -5,20 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _lang = require("../../lang");
 var _comment = _interopRequireDefault(require("./comment"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["comments", "isFirstLoading"];
 const Body = _ref => {
   let {
-      comments,
-      isFirstLoading
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    comments,
+    isFirstLoading,
+    ...props
+  } = _ref;
   if (comments.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dtable-ui-comments-empty",
@@ -27,10 +24,11 @@ const Body = _ref => {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: comments.map((comment, index) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_comment.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_comment.default, {
+        ...props,
         comment: comment,
         isScrollBottom: index === comments.length - 1 && isFirstLoading
-      }), comment.id);
+      }, comment.id);
     })
   });
 };

package/lib/Comment/footer/index.js

@@ -64,7 +64,7 @@ class Footer extends _react.default.Component {
       let start = 0;
       let newValue = '';
       while ((match = regex.exec(value)) !== null) {
-        let notificationName = "".concat(match[1]);
+        let notificationName = `${match[1]}`;
         let substr = value.substring(start, match.index);
         start = regex.lastIndex;
         newValue += substr + notificationName;

package/lib/Comment/footer/input/index.js

@@ -49,12 +49,12 @@ class Input extends _react.default.Component {
         right,
         left
       } = this.commentRef.getBoundingClientRect();
-      this.commentPopoverRef.style.left = "".concat(caretPosition.x + FONT_SIZE_WIDTH, "px");
-      this.commentPopoverRef.style.top = "".concat(caretPosition.y - this.commentPopoverRef.offsetHeight, "px");
+      this.commentPopoverRef.style.left = `${caretPosition.x + FONT_SIZE_WIDTH}px`;
+      this.commentPopoverRef.style.top = `${caretPosition.y - this.commentPopoverRef.offsetHeight}px`;
       if (caretPosition.x + FONT_SIZE_WIDTH > right - PADDING_WIDTH) {
         // is last code
-        this.commentPopoverRef.style.left = "".concat(left + PADDING_WIDTH + FONT_SIZE_WIDTH, "px");
-        this.commentPopoverRef.style.top = "".concat(caretPosition.y - this.commentPopoverRef.offsetHeight + LINE_HEIGHT, "px");
+        this.commentPopoverRef.style.left = `${left + PADDING_WIDTH + FONT_SIZE_WIDTH}px`;
+        this.commentPopoverRef.style.top = `${caretPosition.y - this.commentPopoverRef.offsetHeight + LINE_HEIGHT}px`;
       }
       if (caretPosition.x + FONT_SIZE_WIDTH + this.commentPopoverRef.offsetWidth > document.body.clientWidth) {
         this.commentPopoverRef.style.right = 0;
@@ -166,7 +166,7 @@ class Input extends _react.default.Component {
         spanNode2 = document.createElement('span');
         spanNode1.className = 'at-text';
         spanNode1.contentEditable = 'false';
-        spanNode1.innerHTML = "@".concat(content.name);
+        spanNode1.innerHTML = `@${content.name}`;
         spanNode2.innerHTML = ' ';
       }
       let frag = document.createDocumentFragment();

package/lib/Comment/footer/input/participant/index.js

@@ -35,7 +35,7 @@ class Participant extends _react.default.Component {
     } = this.props;
     const active = index === activeIndex;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "comment-participant-item ".concat(active ? 'active' : ''),
+      className: `comment-participant-item ${active ? 'active' : ''}`,
       ref: ref => this.participantItem = ref,
       onClick: this.onSelect,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/Comment/footer/participants/participant-select/index.js

@@ -127,12 +127,12 @@ class ParticipantSelect extends _react.Component {
   }
   componentDidMount() {
     let collaboratorListHeight = this.participantsRef.offsetHeight;
-    this.participantsRef.style.top = "".concat(-collaboratorListHeight + 10, "px");
+    this.participantsRef.style.top = `${-collaboratorListHeight + 10}px`;
     this.registerHandlers();
   }
   componentDidUpdate() {
     let collaboratorListHeight = this.participantsRef.offsetHeight;
-    this.participantsRef.style.top = "".concat(-collaboratorListHeight + 10, "px");
+    this.participantsRef.style.top = `${-collaboratorListHeight + 10}px`;
   }
   componentWillUnmount() {
     this.unregisterHandlers();

package/lib/Comment/utils/utilities.js

@@ -74,7 +74,7 @@ class Utilities {
         spanNode2 = document.createElement('span');
         spanNode1.className = 'at-text';
         spanNode1.contentEditable = 'true';
-        spanNode1.innerHTML = "@".concat(content.name);
+        spanNode1.innerHTML = `@${content.name}`;
         spanNode2.innerHTML = ' ';
       }
       let frag = document.createDocumentFragment();

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ColorPickerPortal;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _utils = require("../../utils/utils");
@@ -36,15 +35,18 @@ function ColorPickerPortal(_ref) {
     } = targetRect;
     const portalRectHeight = containerRef.current.clientHeight;
     const newPosition = {
-      left: "".concat(left + 1, "px"),
+      left: `${left + 1}px`,
       visibility: 'visible'
     };
     if (spaceAbove < portalRectHeight) {
-      newPosition.top = "calc(".concat(spaceAbove, "px + 2.375rem)");
+      newPosition.top = `calc(${spaceAbove}px + 2.375rem)`;
     } else {
-      newPosition.top = "calc(".concat(spaceAbove - portalRectHeight, "px)");
+      newPosition.top = `calc(${spaceAbove - portalRectHeight}px)`;
     }
-    setPosition(prev => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), newPosition));
+    setPosition(prev => ({
+      ...prev,
+      ...newPosition
+    }));
     if (!isPositioned) {
       setIsPositioned(true);
     }

package/lib/DTableColorPicker/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _reactColor = require("react-color");
@@ -180,9 +179,10 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setSpecColor(value[specColor]);
       return;
     }
-    const newValue = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
+    const newValue = {
+      ...value,
       [specColor]: val
-    });
+    };
     updateValue(newValue);
   };
   const updateValue = newValue => {
@@ -195,9 +195,10 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setAlphaVal((0, _utils.toPercentage)(value.a));
       return;
     }
-    const newValue = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
+    const newValue = {
+      ...value,
       a: parseFloat(alphaVal) / 100
-    });
+    };
     updateValue(newValue);
   };
   const onKeyDown = (event, callBack) => {
@@ -245,18 +246,18 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         children: colors.map((color, index) => {
           const isLight = (0, _utils.isLightColor)(color);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "color-item mr-2 ".concat(isLight ? '' : 'dark'),
+            className: `color-item mr-2 ${isLight ? '' : 'dark'}`,
             onClick: () => onSelectDefaultColor(color),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "colorinput-color d-flex align-items-center justify-content-center",
               style: {
                 backgroundColor: color
               },
-              children: color === "".concat((0, _utils.rgbaToHex)(value)) && alphaVal === 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              children: color === `${(0, _utils.rgbaToHex)(value)}` && alphaVal === 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
                 className: "dtable-icon-color-check dtable-font dtable-icon-check-mark"
               })
             })
-          }, "default-color-".concat(index));
+          }, `default-color-${index}`);
         })
       })]
     });
@@ -270,7 +271,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         color: value,
         onChange: onChangeChromePicker
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "color-setting d-flex align-items-center ".concat(colorMode),
+        className: `color-setting d-flex align-items-center ${colorMode}`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
           className: "mode-btn d-flex",
           onClick: onChangeMode,
@@ -344,7 +345,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           children: currentUsedColors.map((color, index) => {
             const isLight = (0, _utils.isLightColor)(color);
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "color-item mr-2 ".concat(isLight ? '' : 'dark'),
+              className: `color-item mr-2 ${isLight ? '' : 'dark'}`,
               onClick: () => onSelectDefaultColor(color),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "colorinput-color d-flex align-items-center justify-content-center",
@@ -352,7 +353,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
                   backgroundColor: color
                 }
               })
-            }, "default-color-".concat(index));
+            }, `default-color-${index}`);
           })
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "blank-placeholder d-flex align-items-center justify-content-center",

package/lib/DTableColorPicker/utils.js

@@ -54,7 +54,7 @@ const rgbaToHex = function (color) {
     return hex.length === 1 ? '0' + hex : hex;
   };
   const alpha = a !== undefined && a !== 1 ? toHex(Math.round(a * 255)) : '';
-  return "".concat(isNeedPrefix ? '#' : '').concat(toHex(r)).concat(toHex(g)).concat(toHex(b)).concat(isNeedAlpha ? alpha : '');
+  return `${isNeedPrefix ? '#' : ''}${toHex(r)}${toHex(g)}${toHex(b)}${isNeedAlpha ? alpha : ''}`;
 };
 exports.rgbaToHex = rgbaToHex;
 const isLightColor = color => {

package/lib/DTableCommonAddTool/index.js

@@ -18,11 +18,11 @@ function DTableCommonAddTool(_ref) {
     style
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "dtable-ui add-item-btn ".concat(className ? className : ''),
+    className: `dtable-ui add-item-btn ${className ? className : ''}`,
     style: style,
     onClick: e => callBack(e),
     children: [!hideIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "dtable-font dtable-icon-add-table ".concat(addIconClassName || '')
+      className: `dtable-font dtable-icon-add-table ${addIconClassName || ''}`
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "add-new-option text-truncate",
       children: footerName

package/lib/DTableFiltersPopover/index.js

@@ -156,7 +156,7 @@ var _jsxRuntime = require("react/jsx-runtime");
           firstDayOfWeek: firstDayOfWeek,
           updateFilters: this.updateFilters
         }), !isSupportAdvanced && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCommonAddTool.default, {
-          className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
+          className: `popover-add-tool ${canAddFilter ? '' : 'disabled'}`,
           callBack: canAddFilter ? () => this.addFilter() : () => {},
           footerName: (0, _lang.getLocale)('Add_filter'),
           addIconClassName: "popover-add-icon"

package/lib/DTableFiltersPopover/utils/index.js

@@ -407,7 +407,7 @@ const getMediaUrl = () => {
 };
 const generateDefaultUser = name => {
   const mediaUrl = getMediaUrl();
-  const defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
+  const defaultAvatarUrl = `${mediaUrl}avatars/default.png`;
   return {
     name,
     email: name,

package/lib/DTableFiltersPopover/widgets/filter-group.js

@@ -146,7 +146,7 @@ class FilterGroup extends _react.Component {
           updateConjunction: this.modifyConjunctionInGroup,
           deleteFilter: this.deleteFilterInGroup,
           updateFilter: this.updateFilterInGroup
-        }, "filter-in-group-".concat(groupIndex, "-").concat(subFilterIndex));
+        }, `filter-in-group-${groupIndex}-${subFilterIndex}`);
       });
     };
   }
@@ -157,7 +157,7 @@ class FilterGroup extends _react.Component {
       readOnly
     } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level)),
+      className: (0, _classnames.default)('filter-item', 'filter-group', `level-${level}`),
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "delete-filter",
         onClick: this.deleteFilterGroup,

package/lib/DTableFiltersPopover/widgets/filter-item.js

@@ -790,7 +790,7 @@ class FilterItem extends _react.default.Component {
               isLocked: readOnly
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "filter-predicate ml-2 ".concat(_isCheckboxColumn ? 'filter-checkbox-predicate' : ''),
+            className: `filter-predicate ml-2 ${_isCheckboxColumn ? 'filter-checkbox-predicate' : ''}`,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
               value: activePredicate,
               options: filterPredicateOptions,

package/lib/DTableFiltersPopover/widgets/filter-list/index.js

@@ -261,7 +261,7 @@ class FiltersList extends _react.Component {
           modifyConjunctionInGroup: this.modifyConjunctionInGroup,
           deleteFilterInGroup: this.deleteFilterInGroup,
           updateFilterInGroup: this.updateFilterInGroup
-        }, "filter-group-".concat(index));
+        }, `filter-group-${index}`);
       }
       const {
         error_message

package/lib/DTableFiltersPopover/widgets/rate-item.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -57,19 +56,20 @@ class RateItem extends _react.default.Component {
     };
     let style = itemStyle;
     if (enterRateItemIndex >= rateItemIndex) {
-      style = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemStyle), {}, {
+      style = {
+        ...itemStyle,
         color: rate_style_color,
         opacity: 0.4
-      });
+      };
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       onMouseEnter: this.onMouseEnterRateItem,
       onMouseLeave: this.onMouseLeaveRateItem,
       style: style,
       onClick: this.onChangeRateNumber,
-      className: "rate-item ".concat(value >= rateItemIndex ? 'rate-item-active' : ''),
+      className: `rate-item ${value >= rateItemIndex ? 'rate-item-active' : ''}`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font ".concat(rateShowType),
+        className: `dtable-font ${rateShowType}`,
         ref: this.tooltipRef
       }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
         placement: "bottom",

package/lib/DTableGroupSelect/index.css

@@ -4,7 +4,7 @@
 
 .group-select.custom-select {
   display: flex;
-  padding: 5px 10px;
+  padding: 7px 8px !important;
   border-radius: 3px;
   align-items: center;
   justify-content: space-between;
@@ -79,18 +79,55 @@
 }
 
 .group-select .selected-option-show .selected-option-item {
-  background-color: rgb(240, 240, 240);
-  border-radius: 16px;
+  background-color: #F7F7F5;
+  border-radius: 4px !important;
   display: flex;
   align-items: center;
+  height: 24px;
 }
 
 .group-select .selected-option-show .selected-option-item .selected-option-item-name {
-  font-size: 13px;
+  font-size: 14px !important;
   color: #212529;
+  margin-left: 6px;
 }
 
 .group-select .selected-option-show .selected-option-item .dtable-icon-x {
   cursor: pointer;
-  color: rgb(103, 103, 103);
+  color: #666666;
+  font-size: 12px;
+  margin-right: 6px;
+}
+
+.seatable-group-select .option-group-search {
+  padding: 0 !important;
+}
+
+.seatable-group-select .form-control {
+  border: none;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  border-radius: 4px 4px 0 0;
+  padding: .375rem .5rem !important;
+  height: 32px;
+}
+
+.seatable-group-select .form-control:focus {
+  border-color: transparent !important;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  box-shadow: none !important;
+}
+
+.seatable-group-select .option-group-content .dtable-icon-check {
+  color: #666666;
+  font-size: 14px;
+}
+
+.seatable-group-select .clear-search-text {
+  position: absolute;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  line-height: 12px;
+  top: 4px;
+  right: 24px;
 }

package/lib/DTableGroupSelect/select-option-group.css

@@ -2,7 +2,6 @@
   display: block;
   width: 100%;
   line-height: 24px;
-  padding: 6px 10px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -14,6 +13,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0.25rem 8px !important;
 }
 
 .group-selector .option .dtable-icon-check-mark {
@@ -22,8 +22,8 @@
 }
 
 .group-selector .option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
+  background-color: #f5f5f5 !important;
+  color: #212529 !important;
   cursor: pointer;
 }
 

package/lib/DTableGroupSelect/select-option-group.js

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 var _option = _interopRequireDefault(require("./option"));
 var _KeyCodes = _interopRequireDefault(require("../SelectOptionGroup/KeyCodes"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _lang = require("../lang");
 require("./select-option-group.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const OPTION_HEIGHT = 32;
@@ -154,7 +156,7 @@ class SelectOptionGroup extends _react.Component {
           }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
             className: "dtable-font dtable-icon-check-mark"
           })]
-        }, "".concat(option.id, "-").concat(index));
+        }, `${option.id}-${index}`);
       });
     };
     this.state = {
@@ -187,7 +189,8 @@ class SelectOptionGroup extends _react.Component {
       minWidth,
       isInModal,
       position,
-      className
+      className,
+      components
     } = this.props;
     let {
       searchVal
@@ -207,7 +210,7 @@ class SelectOptionGroup extends _react.Component {
       style = {
         position: 'fixed',
         left: position.x,
-        top: position.y + position.height,
+        top: position.y + position.height + 4,
         minWidth: position.width,
         opacity: 0
       };
@@ -218,12 +221,27 @@ class SelectOptionGroup extends _react.Component {
       style: style,
       onMouseDown: this.onMouseDown,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "option-group-search position-relative",
+        className: "position-relative",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
           className: "option-search-control",
           placeholder: searchPlaceholder,
           onChange: this.onChangeSearch,
-          ref: this.searchInputRef
+          ref: this.searchInputRef,
+          isClearable: true,
+          clearValue: this.clearValue,
+          components: {
+            ClearIndicator: props => {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "clear-search-text",
+                onClick: props.clearValue,
+                title: (0, _lang.getLocale)('Clear_search_text'),
+                "aria-label": (0, _lang.getLocale)('Clear_search_text'),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                  icon: "x"
+                })
+              });
+            }
+          }
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "option-group-content",

package/lib/DTableIcon/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _svgIcon = _interopRequireDefault(require("./svg-icon"));
 require("./index.css");
@@ -24,14 +23,15 @@ const DTableIcon = _ref => {
     if (ariaHidden) {
       customProps['aria-hidden'] = ariaHidden;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", (0, _objectSpread2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
       className: (0, _classnames.default)(symbol, className, {
         'dtable-font': !symbol.includes('dtable-font')
       }),
       style: {
         color
-      }
-    }, customProps));
+      },
+      ...customProps
+    });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcon.default, {
     symbol: symbol,

package/lib/DTableIcon/svg-icon.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 let svgIconComponents = null;
@@ -49,8 +48,9 @@ const SvgIcon = _ref => {
     IconComponent = getSvg(symbol);
   }
   if (!IconComponent) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, (0, _objectSpread2.default)({
-    className: (0, _classnames.default)('multicolor-icon', className, "multicolor-icon-".concat(symbol))
-  }, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+    className: (0, _classnames.default)('multicolor-icon', className, `multicolor-icon-${symbol}`),
+    ...props
+  });
 };
 var _default = exports.default = SvgIcon;

package/lib/DTableModalHeader/index.js

@@ -5,19 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children"];
 const DTableModalHeader = _ref => {
   let {
-      children
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    children,
+    ...props
+  } = _ref;
   const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
     type: "button",
     className: "close dtable-modal-close",
@@ -29,9 +26,10 @@ const DTableModalHeader = _ref => {
       className: "dtable-modal-close-inner"
     })
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, {
+    ...props,
     close: customCloseBtn,
     children: children
-  }));
+  });
 };
 var _default = exports.default = DTableModalHeader;

package/lib/DTableRadioGroup/index.js

@@ -49,7 +49,7 @@ class DTableRadioGroup extends _react.default.Component {
       options
     } = this.props;
     if (!this.btn || !this.slider || !Array.isArray(options)) return;
-    this.slider.style.width = "".concat(100 / options.length, "%");
+    this.slider.style.width = `${100 / options.length}%`;
     this.setSliderTransition();
   }
   componentDidUpdate(prevProps) {
@@ -77,13 +77,13 @@ class DTableRadioGroup extends _react.default.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "radio-group-wrapper",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "radio-group-options ".concat(readOnly ? 'read-only' : ''),
+        className: `radio-group-options ${readOnly ? 'read-only' : ''}`,
         children: [options.map(option => {
           const isActive = activeOption === option ? true : false;
           const displayOption = optionsDisplay && optionsDisplay[option] || '';
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             ref: ref => this.btn = ref,
-            className: "radio-group-button ".concat(isActive ? 'active' : ''),
+            className: `radio-group-button ${isActive ? 'active' : ''}`,
             "data-option": option,
             onClick: this.onSelectChanged,
             children: displayOption