dtable-ui-component 5.0.9-beta.1 → 5.0.9-beta.2

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

@@ -19,6 +19,7 @@ var _rateItem = _interopRequireDefault(require("./rate-item"));
 var _filterCalendar = _interopRequireDefault(require("./filter-calendar"));
 var _utils = require("../utils");
 var _lang = require("../../lang");
+var _jsxRuntime = require("react/jsx-runtime");
 const EMPTY_PREDICATE = [_dtableUtils.FILTER_PREDICATE_TYPE.EMPTY, _dtableUtils.FILTER_PREDICATE_TYPE.NOT_EMPTY];
 class FilterItem extends _react.default.Component {
   constructor(_props) {
@@ -222,14 +223,14 @@ class FilterItem extends _react.default.Component {
         filterTerm
       } = this.state;
       if (type === 'text') {
-        return /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
           value: filterTerm,
           onChange: this.onFilterTermTextChanged,
           autoFocus: false,
           className: (0, _classnames.default)('text-truncate')
         });
       } else if (type === 'checkbox') {
-        return /*#__PURE__*/_react.default.createElement("input", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
           type: "checkbox",
           checked: filterTerm,
           onChange: this.onFilterTermCheckboxChanged
@@ -250,7 +251,7 @@ class FilterItem extends _react.default.Component {
         case 1:
           {
             const activeConjunction = _utils.FilterItemUtils.getActiveConjunctionOption(filterConjunction);
-            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
               value: activeConjunction,
               options: conjunctionOptions,
               onSelectOption: this.onSelectConjunction
@@ -258,9 +259,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)
+            });
           }
       }
     };
@@ -290,23 +292,25 @@ class FilterItem extends _react.default.Component {
               background: inOption.color,
               color: inOption.textColor || null
             };
-            labelArray.push( /*#__PURE__*/_react.default.createElement("span", {
+            labelArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: className,
               style: optionStyle,
-              key: 'option_' + item,
               title: inOption.name,
-              "aria-label": inOption.name
-            }, inOption.name));
+              "aria-label": inOption.name,
+              children: inOption.name
+            }, '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 _utils.FilterItemUtils.generatorMultipleSelectOption(option, filterTerm);
       });
-      return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
         className: "selector-multiple-select",
         value: selectedOptionNames,
         options: dataOptions,
@@ -349,7 +353,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,
@@ -398,18 +402,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 _utils.FilterItemUtils.generatorSingleSelectOption(option);
             });
-            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
               className: "selector-single-select",
               value: selectedOptionName,
               options: dataOptions,
@@ -430,14 +435,14 @@ 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,
                 onCommit: this.onSelectMultiple
               });
             }
-            return /*#__PURE__*/_react.default.createElement(_departmentSingleSelectFilter.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_departmentSingleSelectFilter.default, {
               column: filterColumn,
               value: filter_term || '',
               userDepartmentIdsMap: userDepartmentIdsMap,
@@ -450,7 +455,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,
@@ -465,7 +470,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,
@@ -479,8 +484,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,
@@ -490,12 +494,13 @@ class FilterItem extends _react.default.Component {
                 isShowRateItem: true,
                 onChangeRateNumber: this.onChangeRateNumber,
                 editable: true
-              });
+              }, 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:
@@ -559,7 +564,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
@@ -572,7 +577,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,
@@ -583,16 +588,18 @@ class FilterItem extends _react.default.Component {
       return this.getInputComponent('text');
     };
     this.renderErrorMessage = () => {
-      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,
@@ -646,43 +653,52 @@ class FilterItem extends _react.default.Component {
 
     // current predicate is not empty
     const isNeedShowTermModifier = !EMPTY_PREDICATE.includes(filter_predicate);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-item"
-    }, /*#__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')
-    })), /*#__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
-    })), (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
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-term ml-2"
-    }, this.renderFilterTerm(filterColumn)), errMsg && this.renderErrorMessage())));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "filter-item",
+      children: [/*#__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')
+            })
+          }), /*#__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
+            })
+          }), (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
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "filter-term ml-2",
+            children: this.renderFilterTerm(filterColumn)
+          }), errMsg && this.renderErrorMessage()]
+        })]
+      })]
+    });
   }
 }
 var _default = exports.default = FilterItem;

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

@@ -12,6 +12,7 @@ var _dtableUtils = require("dtable-utils");
 var _filterItem = _interopRequireDefault(require("../filter-item"));
 var _utils = require("../../utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class FiltersList extends _react.Component {
   constructor(props) {
     super(props);
@@ -72,8 +73,7 @@ class FiltersList extends _react.Component {
       } = this.props;
       const conjunctionOptions = this.getConjunctionOptions();
       const columnOptions = this.getColumnOptions();
-      return /*#__PURE__*/_react.default.createElement(_filterItem.default, {
-        key: index,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterItem.default, {
         isLocked: isLocked,
         index: index,
         filter: filter,
@@ -90,7 +90,7 @@ class FiltersList extends _react.Component {
         deleteFilter: this.deleteFilter,
         updateFilter: this.updateFilter,
         updateConjunction: this.updateConjunction
-      });
+      }, index);
     };
     this.conjunctionOptions = null;
     this.columnOptions = null;
@@ -108,24 +108,26 @@ 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)('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 {
-        error_message
-      } = _dtableUtils.ValidateFilter.validateColumn(column_key, columns);
-      const filterColumn = (0, _utils.getColumnByKey)(columns, column_key) || {};
-      return this.renderFilterItem(filter, index, error_message, filterColumn);
-    }));
+      }),
+      children: [isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "empty-filters-list",
+        children: emptyPlaceholder
+      }), !isEmpty && filters.map((filter, index) => {
+        const {
+          column_key
+        } = filter;
+        const {
+          error_message
+        } = _dtableUtils.ValidateFilter.validateColumn(column_key, columns);
+        const filterColumn = (0, _utils.getColumnByKey)(columns, column_key) || {};
+        return this.renderFilterItem(filter, index, error_message, 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/DTablePopover/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _utils = require("../utils/utils");
+var _jsxRuntime = require("react/jsx-runtime");
 class DTablePopover extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -62,7 +63,7 @@ class DTablePopover extends _react.default.Component {
       modifiers,
       placement
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
       placement: placement,
       isOpen: true,
       target: target,
@@ -70,11 +71,13 @@ class DTablePopover extends _react.default.Component {
       hideArrow: hideArrow,
       innerClassName: innerClassName,
       className: popoverClassName,
-      modifiers: modifiers
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.dtablePopoverRef = ref,
-      onClick: this.onPopoverInsideClick
-    }, this.props.children));
+      modifiers: modifiers,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref => this.dtablePopoverRef = ref,
+        onClick: this.onPopoverInsideClick,
+        children: this.props.children
+      })
+    });
   }
 }
 DTablePopover.defaultProps = {

package/lib/DTableRadio/index.js

@@ -8,30 +8,33 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 function DTableRadio(props) {
   const {
     className
   } = props;
-  return /*#__PURE__*/_react.default.createElement("label", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
     className: (0, _classnames.default)('dtable-radio w-100 align-items-center', {
       'dtable-radio-disable': props.disabled,
       [className]: className
-    })
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    type: "radio",
-    className: "dtable-radio-input position-absolute",
-    checked: props.isChecked,
-    onChange: props.disabled ? () => {} : props.onCheckedChange,
-    name: props.name,
-    value: props.value
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)('dtable-radio-indicator position-relative', {
-      'dtable-radio-selected-indicator': props.isChecked,
-      'dtable-radio-indicator-disable': props.disabled
-    })
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-radio-description text-truncate ml-2"
-  }, props.label));
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      type: "radio",
+      className: "dtable-radio-input position-absolute",
+      checked: props.isChecked,
+      onChange: props.disabled ? () => {} : props.onCheckedChange,
+      name: props.name,
+      value: props.value
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)('dtable-radio-indicator position-relative', {
+        'dtable-radio-selected-indicator': props.isChecked,
+        'dtable-radio-indicator-disable': props.disabled
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "dtable-radio-description text-truncate ml-2",
+      children: props.label
+    })]
+  });
 }
 DTableRadio.defaultProps = {
   disabled: false,

package/lib/DTableSearchInput/index.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
 class DtableSearchInput extends _react.Component {
   constructor(props) {
     super(props);
@@ -71,14 +72,15 @@ class DtableSearchInput extends _react.Component {
           clearValue: this.clearSearch
         });
       } else if ((0, _utils.isFunction)(ClearIndicator)) {
-        return /*#__PURE__*/_react.default.createElement(ClearIndicator, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearIndicator, {
           clearValue: this.clearSearch
         });
       }
-      return /*#__PURE__*/_react.default.createElement("i", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
         className: (0, _classnames.default)('search-text-clear input-icon-addon', clearClassName),
-        onClick: this.clearSearch
-      }, "\xD7");
+        onClick: this.clearSearch,
+        children: "\xD7"
+      });
     };
     this.state = {
       searchValue: props.value
@@ -111,20 +113,22 @@ class DtableSearchInput extends _react.Component {
     const {
       searchValue
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
-      type: "text",
-      value: searchValue,
-      className: (0, _classnames.default)('form-control', className),
-      onChange: this.onChange,
-      autoFocus: autoFocus,
-      placeholder: placeholder,
-      onCompositionStart: this.onCompositionStart,
-      onCompositionEnd: this.onCompositionEnd,
-      onKeyDown: onKeyDown,
-      disabled: disabled,
-      style: style,
-      ref: ref => this.inputRef = ref
-    }), this.renderClear());
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: "text",
+        value: searchValue,
+        className: (0, _classnames.default)('form-control', className),
+        onChange: this.onChange,
+        autoFocus: autoFocus,
+        placeholder: placeholder,
+        onCompositionStart: this.onCompositionStart,
+        onCompositionEnd: this.onCompositionEnd,
+        onKeyDown: onKeyDown,
+        disabled: disabled,
+        style: style,
+        ref: ref => this.inputRef = ref
+      }), this.renderClear()]
+    });
   }
 }
 DtableSearchInput.defaultProps = {

package/lib/DTableSelect/dtable-select-label.js

@@ -7,19 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./dtable-select-label.css");
+var _jsxRuntime = require("react/jsx-runtime");
 function DTableSelectLabel(_ref) {
   let {
     classname,
     name,
     isSelect
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(classname, " w-100 d-flex justify-content-between")
-  }, /*#__PURE__*/_react.default.createElement("span", null, name), isSelect && /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-select-check-icon"
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "dtable-font dtable-icon-check-mark"
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "".concat(classname, " w-100 d-flex justify-content-between"),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: name
+    }), isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-select-check-icon",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      })
+    })]
+  });
 }
 DTableSelectLabel.defaultProps = {
   classname: '',

package/lib/DTableSelect/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = _interopRequireDefault(require("react-select"));
 var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
 class DTableSelect extends _react.default.Component {
   render() {
     const {
@@ -28,7 +29,7 @@ class DTableSelect extends _react.default.Component {
       customFilterOption,
       autoFocus
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
       onChange: onChange,
       options: options,