dtable-ui-component 6.0.49 → 6.0.50

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

@@ -25,6 +25,7 @@ var _utils = require("../utils");
 var _constants = require("../constants");
 var _columnUtils = require("../../utils/column-utils");
 var _lang = require("../../lang");
+var _jsxRuntime = require("react/jsx-runtime");
 class FilterItem extends _react.default.Component {
   constructor(_props) {
     var _this;
@@ -244,7 +245,7 @@ class FilterItem extends _react.default.Component {
         filterTerm
       } = this.state;
       if (type === _constants.INPUT_CMP_TYPE_MAP.TEXT) {
-        return /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
           value: filterTerm,
           onChange: this.onFilterTermTextChanged,
           autoFocus: false,
@@ -252,18 +253,19 @@ class FilterItem extends _react.default.Component {
           disabled: readOnly
         });
       } else if (type === _constants.INPUT_CMP_TYPE_MAP.CHECKBOX) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: "checkbox-filter-term"
-        }, /*#__PURE__*/_react.default.createElement(_CheckboxEditor.default, {
-          ref: ref => this.checkboxEditor = ref,
-          column: filterColumn,
-          value: filterTerm,
-          className: "dtable-ui-filter-item-checkbox",
-          onChange: this.onFilterTermCheckboxChanged,
-          readOnly: readOnly
-        }));
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "checkbox-filter-term",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxEditor.default, {
+            ref: ref => this.checkboxEditor = ref,
+            column: filterColumn,
+            value: filterTerm,
+            className: "dtable-ui-filter-item-checkbox",
+            onChange: this.onFilterTermCheckboxChanged,
+            readOnly: readOnly
+          })
+        });
       } else if (type === _constants.INPUT_CMP_TYPE_MAP.NUMBER) {
-        return /*#__PURE__*/_react.default.createElement(_NumberEditor.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberEditor.default, {
           ref: ref => this.numberEditor = ref,
           column: filterColumn,
           value: filterTerm,
@@ -271,7 +273,7 @@ class FilterItem extends _react.default.Component {
           readOnly: readOnly
         });
       } else if (type === _constants.INPUT_CMP_TYPE_MAP.DURATION) {
-        return /*#__PURE__*/_react.default.createElement(_DurationEditor.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DurationEditor.default, {
           ref: ref => this.durationEditor = ref,
           className: "filter-popover-duration-editor",
           isInModal: isInModal,
@@ -299,7 +301,7 @@ class FilterItem extends _react.default.Component {
         case 1:
           {
             const activeConjunction = _filterItemUtils.default.getActiveConjunctionOption(filterConjunction);
-            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
               value: activeConjunction,
               options: conjunctionOptions,
               onSelectOption: this.onSelectConjunction,
@@ -309,9 +311,10 @@ class FilterItem extends _react.default.Component {
           }
         default:
           {
-            return /*#__PURE__*/_react.default.createElement("span", {
-              className: "selected-conjunction-show"
-            }, (0, _lang.getLocale)(filterConjunction));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "selected-conjunction-show",
+              children: (0, _lang.getLocale)(filterConjunction)
+            });
           }
       }
     };
@@ -348,22 +351,24 @@ class FilterItem extends _react.default.Component {
             optionStyle.background = _constants.DELETED_OPTION_BACKGROUND_COLOR;
             optionName = (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS);
           }
-          labelArray.push( /*#__PURE__*/_react.default.createElement("span", {
+          labelArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: className,
             style: optionStyle,
-            key: 'option_' + item,
             title: optionName,
-            "aria-label": optionName
-          }, optionName));
+            "aria-label": optionName,
+            children: optionName
+          }, 'option_' + item));
         });
       }
       const selectedOptionNames = labelArray.length > 0 ? {
-        label: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, labelArray)
+        label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+          children: labelArray
+        })
       } : {};
       const dataOptions = options.map(option => {
         return _filterItemUtils.default.generatorMultipleSelectOption(option, filterTerm);
       });
-      return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
         className: "dtable-ui-multiple-select-selector",
         value: selectedOptionNames,
         options: dataOptions,
@@ -410,7 +415,7 @@ class FilterItem extends _react.default.Component {
         const inputRangeLabel = [_dtableUtils.FILTER_TERM_MODIFIER_TYPE.EXACT_DATE, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS];
         if (inputRangeLabel.indexOf(filter_term_modifier) > -1) {
           if (filter_term_modifier === 'exact_date') {
-            return /*#__PURE__*/_react.default.createElement(_filterCalendar.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterCalendar.default, {
               lang: lang,
               value: this.state.filterTerm,
               filterColumn: filterColumn,
@@ -467,18 +472,19 @@ class FilterItem extends _react.default.Component {
                 color: selectedOption.textColor || null
               };
               selectedOptionName = {
-                label: /*#__PURE__*/_react.default.createElement("span", {
+                label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: className,
                   style: style,
                   title: selectedOption.name,
-                  "aria-label": selectedOption.name
-                }, selectedOption.name)
+                  "aria-label": selectedOption.name,
+                  children: selectedOption.name
+                })
               };
             }
             let dataOptions = options.map(option => {
               return _filterItemUtils.default.generatorSingleSelectOption(option);
             });
-            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
               className: "dtable-ui-single-select-selector",
               value: selectedOptionName,
               options: dataOptions,
@@ -501,7 +507,7 @@ class FilterItem extends _react.default.Component {
         case _dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT:
           {
             if ([_dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF].includes(filter_predicate)) {
-              return /*#__PURE__*/_react.default.createElement(_departmentMultipleSelectFilter.default, {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_departmentMultipleSelectFilter.default, {
                 value: filter_term || [],
                 userDepartmentIdsMap: userDepartmentIdsMap,
                 departments: departments,
@@ -510,7 +516,7 @@ class FilterItem extends _react.default.Component {
                 readOnly: readOnly
               });
             }
-            return /*#__PURE__*/_react.default.createElement(_departmentSingleSelectFilter.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_departmentSingleSelectFilter.default, {
               column: filterColumn,
               value: filter_term || '',
               userDepartmentIdsMap: userDepartmentIdsMap,
@@ -525,7 +531,7 @@ class FilterItem extends _react.default.Component {
             if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.INCLUDE_ME) {
               return null;
             }
-            return /*#__PURE__*/_react.default.createElement(_collaboratorFilter.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collaboratorFilter.default, {
               filterIndex: index,
               filterTerm: filter_term || [],
               filter_predicate: filter_predicate,
@@ -542,7 +548,7 @@ class FilterItem extends _react.default.Component {
               return null;
             }
             const creators = collaborators.concat([(0, _utils.generateDefaultUser)('anonymous')]);
-            return /*#__PURE__*/_react.default.createElement(_collaboratorFilter.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collaboratorFilter.default, {
               filterIndex: index,
               filterTerm: filter_term || [],
               collaborators: creators,
@@ -558,8 +564,7 @@ class FilterItem extends _react.default.Component {
             } = filterColumn.data || {};
             let rateList = [];
             for (let i = 0; i < rate_max_number; i++) {
-              let rateItem = /*#__PURE__*/_react.default.createElement(_rateItem.default, {
-                key: i,
+              let rateItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_rateItem.default, {
                 enterRateItemIndex: this.state.enterRateItemIndex,
                 rateItemIndex: i + 1,
                 onMouseEnterRateItem: this.onMouseEnterRateItem,
@@ -569,12 +574,13 @@ class FilterItem extends _react.default.Component {
                 isShowRateItem: true,
                 onChangeRateNumber: this.onChangeRateNumber,
                 editable: !readOnly
-              });
+              }, i);
               rateList.push(rateItem);
             }
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "filter-rate-list"
-            }, rateList);
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "filter-rate-list",
+              children: rateList
+            });
           }
         case _dtableUtils.CellType.FORMULA:
         case _dtableUtils.CellType.LINK_FORMULA:
@@ -648,7 +654,7 @@ class FilterItem extends _react.default.Component {
         return this.renderMultipleSelectOption(options, filterTerm);
       }
       if (array_type === _dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT) {
-        return /*#__PURE__*/_react.default.createElement(_departmentMultipleSelectFilter.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_departmentMultipleSelectFilter.default, {
           value: filterTerm || [],
           departments: departments,
           onCommit: this.onSelectMultiple,
@@ -663,7 +669,7 @@ class FilterItem extends _react.default.Component {
         if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.INCLUDE_ME) {
           return null;
         }
-        return /*#__PURE__*/_react.default.createElement(_collaboratorFilter.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collaboratorFilter.default, {
           filterIndex: index,
           filterTerm: filterTerm || [],
           collaborators: collaborators,
@@ -685,16 +691,18 @@ class FilterItem extends _react.default.Component {
       if (!this.isRenderErrorTips()) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "ml-2"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        ref: this.invalidFilterTip,
-        className: "dtable-font dtable-icon-exclamation-triangle invalid-filter"
-      }), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
-        target: this.invalidFilterTip,
-        placement: "bottom",
-        fade: false
-      }, (0, _lang.getLocale)('Invalid_filter')));
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "ml-2",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          ref: this.invalidFilterTip,
+          className: "dtable-font dtable-icon-exclamation-triangle invalid-filter"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+          target: this.invalidFilterTip,
+          placement: "bottom",
+          fade: false,
+          children: (0, _lang.getLocale)('Invalid_filter')
+        })]
+      });
     };
     this.state = {
       filterTerm: _props.filter.filter_term,
@@ -756,62 +764,73 @@ class FilterItem extends _react.default.Component {
 
     // current predicate is not empty
     const isNeedShowTermModifier = !_constants.EMPTY_PREDICATE.includes(filter_predicate);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-item"
-    }, !readOnly && /*#__PURE__*/_react.default.createElement("div", {
-      className: "delete-filter",
-      onClick: this.onDeleteFilter
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-fork-number"
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "condition"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-conjunction"
-    }, this.renderConjunction()), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-column"
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
-      value: activeColumn,
-      options: filterColumnOptions,
-      onSelectOption: this.onSelectColumn,
-      searchable: true,
-      searchPlaceholder: (0, _lang.getLocale)('Search_column'),
-      noOptionsPlaceholder: (0, _lang.getLocale)('No_results'),
-      isInModal: this.props.isInModal,
-      isLocked: readOnly
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-predicate ml-2 ".concat(_isCheckboxColumn ? 'filter-checkbox-predicate' : '')
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
-      value: activePredicate,
-      options: filterPredicateOptions,
-      onSelectOption: this.onSelectPredicate,
-      isInModal: this.props.isInModal,
-      isLocked: readOnly
-    })), (0, _dtableUtils.isDateColumn)(filterColumn) && isNeedShowTermModifier && /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-term-modifier ml-2"
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
-      value: activeTermModifier,
-      options: filterTermModifierOptions,
-      onSelectOption: this.onSelectTermModifier,
-      isInModal: this.props.isInModal,
-      isLocked: readOnly
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-term ml-2"
-    }, this.renderFilterTerm(filterColumn)), showToolTip && /*#__PURE__*/_react.default.createElement("div", {
-      className: "ml-2"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      ref: this.filterToolTip,
-      id: "filter_tool_tip",
-      "aria-hidden": "true",
-      className: "dtable-font dtable-icon-exclamation-triangle",
-      style: {
-        color: '#FFC92C'
-      }
-    }), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
-      placement: "bottom",
-      target: this.filterToolTip
-    }, (0, _lang.getLocale)('filter_tip_message'))), this.renderErrorMessage())));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "filter-item",
+      children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "delete-filter",
+        onClick: this.onDeleteFilter,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "dtable-font dtable-icon-fork-number"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "condition",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "filter-conjunction",
+          children: this.renderConjunction()
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "filter-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "filter-column",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
+              value: activeColumn,
+              options: filterColumnOptions,
+              onSelectOption: this.onSelectColumn,
+              searchable: true,
+              searchPlaceholder: (0, _lang.getLocale)('Search_column'),
+              noOptionsPlaceholder: (0, _lang.getLocale)('No_results'),
+              isInModal: this.props.isInModal,
+              isLocked: readOnly
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "filter-predicate ml-2 ".concat(_isCheckboxColumn ? 'filter-checkbox-predicate' : ''),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
+              value: activePredicate,
+              options: filterPredicateOptions,
+              onSelectOption: this.onSelectPredicate,
+              isInModal: this.props.isInModal,
+              isLocked: readOnly
+            })
+          }), (0, _dtableUtils.isDateColumn)(filterColumn) && isNeedShowTermModifier && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "filter-term-modifier ml-2",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
+              value: activeTermModifier,
+              options: filterTermModifierOptions,
+              onSelectOption: this.onSelectTermModifier,
+              isInModal: this.props.isInModal,
+              isLocked: readOnly
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "filter-term ml-2",
+            children: this.renderFilterTerm(filterColumn)
+          }), showToolTip && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "ml-2",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              ref: this.filterToolTip,
+              id: "filter_tool_tip",
+              "aria-hidden": "true",
+              className: "dtable-font dtable-icon-exclamation-triangle",
+              style: {
+                color: '#FFC92C'
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+              placement: "bottom",
+              target: this.filterToolTip,
+              children: (0, _lang.getLocale)('filter_tip_message')
+            })]
+          }), this.renderErrorMessage()]
+        })]
+      })]
+    });
   }
 }
 var _default = exports.default = FilterItem;

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

@@ -15,6 +15,7 @@ var _utils = require("../../utils");
 var _constants = require("../../constants");
 var _filterGroup = _interopRequireDefault(require("../filter-group"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class FiltersList extends _react.Component {
   constructor(props) {
     super(props);
@@ -240,8 +241,7 @@ class FiltersList extends _react.Component {
       const conjunctionOptions = this.getConjunctionOptions();
       const columnOptions = this.getColumnOptions();
       if ((0, _dtableUtils.checkIsFilterGroup)(filter)) {
-        return /*#__PURE__*/_react.default.createElement(_filterGroup.default, {
-          key: "filter-group-".concat(index),
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterGroup.default, {
           isInModal: isInModal,
           lang: lang,
           columns: columns,
@@ -261,13 +261,12 @@ class FiltersList extends _react.Component {
           modifyConjunctionInGroup: this.modifyConjunctionInGroup,
           deleteFilterInGroup: this.deleteFilterInGroup,
           updateFilterInGroup: this.updateFilterInGroup
-        });
+        }, "filter-group-".concat(index));
       }
       const {
         error_message
       } = _dtableUtils.ValidateFilter.validate(filter, columns);
-      return /*#__PURE__*/_react.default.createElement(_filterItem.default, {
-        key: index,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterItem.default, {
         isInModal: isInModal,
         lang: lang,
         index: index,
@@ -285,7 +284,7 @@ class FiltersList extends _react.Component {
         updateConjunction: this.modifyFilterConjunction,
         firstDayOfWeek: firstDayOfWeek,
         readOnly: readOnly
-      });
+      }, index);
     };
     this.conjunctionOptions = null;
     this.columnOptions = null;
@@ -303,21 +302,23 @@ class FiltersList extends _react.Component {
       columns
     } = this.props;
     const isEmpty = filters.length === 0;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('dtable-ui-filters-list', {
         'empty-filters-container': isEmpty
       }, {
         [className]: className
-      })
-    }, isEmpty && /*#__PURE__*/_react.default.createElement("div", {
-      className: "empty-filters-list"
-    }, emptyPlaceholder), !isEmpty && filters.map((filter, index) => {
-      const {
-        column_key
-      } = filter;
-      const filterColumn = (0, _utils.getColumnByKey)(column_key, columns) || {};
-      return this.renderFilter(filter, index, filterColumn);
-    }));
+      }),
+      children: [isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "empty-filters-list",
+        children: emptyPlaceholder
+      }), !isEmpty && filters.map((filter, index) => {
+        const {
+          column_key
+        } = filter;
+        const filterColumn = (0, _utils.getColumnByKey)(column_key, columns) || {};
+        return this.renderFilter(filter, index, filterColumn);
+      })]
+    });
   }
 }
 var _default = exports.default = FiltersList;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
+var _jsxRuntime = require("react/jsx-runtime");
 class RateItem extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -61,19 +62,21 @@ class RateItem extends _react.default.Component {
         opacity: 0.4
       };
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    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' : '')
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-font ".concat(rateShowType),
-      ref: this.tooltipRef
-    }), editable && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
-      placement: "bottom",
-      target: this.tooltipRef
-    }, rateItemIndex));
+      className: "rate-item ".concat(value >= rateItemIndex ? 'rate-item-active' : ''),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-font ".concat(rateShowType),
+        ref: this.tooltipRef
+      }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+        placement: "bottom",
+        target: this.tooltipRef,
+        children: rateItemIndex
+      })]
+    });
   }
 }
 var _default = exports.default = RateItem;

package/lib/DTableGroupSelect/index.js

@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
 var _selectOptionGroup = _interopRequireDefault(require("./select-option-group"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class DTableGroupSelect extends _react.Component {
   constructor(props) {
     super(props);
@@ -74,54 +75,61 @@ class DTableGroupSelect extends _react.Component {
       noOptionsPlaceholder,
       isInModal
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: node => this.selector = node,
       className: (0, _classnames.default)('group-select custom-select', {
         'focus': this.state.isShowSelectOptions
       }, className),
-      onClick: this.onSelectToggle
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "selected-option"
-    }, selectedOptions.length > 0 ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "selected-option-show"
-    }, selectedOptions.map(item => /*#__PURE__*/_react.default.createElement("span", {
-      key: item.id,
-      className: "selected-option-item mr-1 pr-1 pl-2"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "selected-option-item-name"
-    }, item.name), /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-x ml-1",
-      onClick: () => {
-        this.props.onDeleteOption(item);
-      }
-    })))) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "select-placeholder"
-    }, placeholder), /*#__PURE__*/_react.default.createElement("i", {
-      className: "sf3-font-down sf3-font"
-    })), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/_react.default.createElement(_selectOptionGroup.default, {
-      selectedOptions: selectedOptions,
-      top: this.getSelectedOptionTop(),
-      options: options,
-      onSelectOption: this.props.onSelectOption,
-      searchPlaceholder: searchPlaceholder,
-      noOptionsPlaceholder: noOptionsPlaceholder,
-      onClickOutside: this.onClickOutside,
-      closeSelect: this.closeSelect,
-      getFilterOptions: this.getFilterOptions
-    }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_selectOptionGroup.default, {
-      className: className,
-      selectedOptions: selectedOptions,
-      position: this.selector.getBoundingClientRect(),
-      isInModal: isInModal,
-      top: this.getSelectedOptionTop(),
-      options: options,
-      onSelectOption: this.props.onSelectOption,
-      searchPlaceholder: searchPlaceholder,
-      noOptionsPlaceholder: noOptionsPlaceholder,
-      onClickOutside: this.onClickOutside,
-      closeSelect: this.closeSelect,
-      getFilterOptions: this.getFilterOptions
-    })));
+      onClick: this.onSelectToggle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "selected-option",
+        children: [selectedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "selected-option-show",
+          children: selectedOptions.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "selected-option-item mr-1 pr-1 pl-2",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "selected-option-item-name",
+              children: item.name
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              className: "dtable-font dtable-icon-x ml-1",
+              onClick: () => {
+                this.props.onDeleteOption(item);
+              }
+            })]
+          }, item.id))
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "select-placeholder",
+          children: placeholder
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "sf3-font-down sf3-font"
+        })]
+      }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
+        selectedOptions: selectedOptions,
+        top: this.getSelectedOptionTop(),
+        options: options,
+        onSelectOption: this.props.onSelectOption,
+        searchPlaceholder: searchPlaceholder,
+        noOptionsPlaceholder: noOptionsPlaceholder,
+        onClickOutside: this.onClickOutside,
+        closeSelect: this.closeSelect,
+        getFilterOptions: this.getFilterOptions
+      }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
+          className: className,
+          selectedOptions: selectedOptions,
+          position: this.selector.getBoundingClientRect(),
+          isInModal: isInModal,
+          top: this.getSelectedOptionTop(),
+          options: options,
+          onSelectOption: this.props.onSelectOption,
+          searchPlaceholder: searchPlaceholder,
+          noOptionsPlaceholder: noOptionsPlaceholder,
+          onClickOutside: this.onClickOutside,
+          closeSelect: this.closeSelect,
+          getFilterOptions: this.getFilterOptions
+        })
+      })]
+    });
   }
 }
 var _default = exports.default = DTableGroupSelect;

package/lib/DTableGroupSelect/option.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
 class Option extends _react.Component {
   constructor() {
     super(...arguments);
@@ -27,14 +28,15 @@ class Option extends _react.Component {
     };
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('d-flex option', {
         'option-active': this.props.isActive
       }),
       onClick: this.onSelectOption,
       onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave
-    }, this.props.children);
+      onMouseLeave: this.onMouseLeave,
+      children: this.props.children
+    });
   }
 }
 var _default = exports.default = Option;