dtable-ui-component 6.0.126 → 7.0.0-xia.1

package/lib/CreatorFormatter/index.js

@@ -20,9 +20,10 @@ class CreatorFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
     this.getCollaborators = () => {
-      let _this$props = this.props,
-        value = _this$props.value,
-        collaborators = _this$props.collaborators;
+      let {
+        value,
+        collaborators
+      } = this.props;
       if (!Array.isArray(value)) {
         value = [value];
       }
@@ -42,9 +43,10 @@ class CreatorFormatter extends _react.default.PureComponent {
     };
   }
   render() {
-    const _this$props2 = this.props,
-      containerClassName = _this$props2.containerClassName,
-      value = _this$props2.value;
+    const {
+      containerClassName,
+      value
+    } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container creator-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -7,37 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ColorPickerPortal;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _utils = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function ColorPickerPortal(_ref) {
-  let target = _ref.target,
-    scrollContainerId = _ref.scrollContainerId,
-    _ref$throttleDelay = _ref.throttleDelay,
-    throttleDelay = _ref$throttleDelay === void 0 ? 16 : _ref$throttleDelay,
-    children = _ref.children;
+  let {
+    target,
+    scrollContainerId,
+    throttleDelay = 16,
+    children
+  } = _ref;
   const containerRef = (0, _react.useRef)(null);
-  const _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isPositioned = _useState2[0],
-    setIsPositioned = _useState2[1];
-  const _useState3 = (0, _react.useState)(() => {
-      return {
-        top: '-9999px',
-        left: '-9999px',
-        visibility: 'hidden'
-      };
-    }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    position = _useState4[0],
-    setPosition = _useState4[1];
+  const [isPositioned, setIsPositioned] = (0, _react.useState)(false);
+  const [position, setPosition] = (0, _react.useState)(() => {
+    return {
+      top: '-9999px',
+      left: '-9999px',
+      visibility: 'hidden'
+    };
+  });
   const updatePosition = (0, _react.useCallback)(() => {
     if (!target || !containerRef.current) return;
     const targetRect = target.getBoundingClientRect();
-    const spaceAbove = targetRect.top,
-      left = targetRect.left;
+    const {
+      top: spaceAbove,
+      left
+    } = targetRect;
     const portalRectHeight = containerRef.current.clientHeight;
     const newPosition = {
       left: "".concat(left + 1, "px"),

package/lib/DTableColorPicker/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _reactColor = require("react-color");
@@ -30,46 +29,25 @@ const RGB_COLORS_MAP = {
 };
 const LOCAL_STORAGE_KEY = 'dtable-color-picker';
 const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let onToggle = _ref.onToggle,
-    popoverStyle = _ref.popoverStyle,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#ffffff' : _ref$color,
-    defaultColors = _ref.defaultColors,
-    useProtal = _ref.useProtal,
-    target = _ref.target,
-    scrollContainerId = _ref.scrollContainerId,
-    _ref$throttleDelay = _ref.throttleDelay,
-    throttleDelay = _ref$throttleDelay === void 0 ? 20 : _ref$throttleDelay,
-    onSubmit = _ref.onSubmit;
+  let {
+    onToggle,
+    popoverStyle,
+    color = '#ffffff',
+    defaultColors,
+    useProtal,
+    target,
+    scrollContainerId,
+    throttleDelay = 20,
+    onSubmit
+  } = _ref;
   const initialRgbaColor = (0, _utils.hexToRgba)(color);
-  const _useState = (0, _react.useState)(initialRgbaColor),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  const _useState3 = (0, _react.useState)((0, _utils.getInitialHexVal)(color)),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    hexVal = _useState4[0],
-    setHexVal = _useState4[1];
-  const _useState5 = (0, _react.useState)((0, _utils.toPercentage)(initialRgbaColor.a)),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    alphaVal = _useState6[0],
-    setAlphaVal = _useState6[1];
-  const _useState7 = (0, _react.useState)(initialRgbaColor.r),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    redVal = _useState8[0],
-    setRedVal = _useState8[1];
-  const _useState9 = (0, _react.useState)(initialRgbaColor.g),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    greenVal = _useState0[0],
-    setGreenVal = _useState0[1];
-  const _useState1 = (0, _react.useState)(initialRgbaColor.b),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    blueVal = _useState10[0],
-    setBlueVal = _useState10[1];
-  const _useState11 = (0, _react.useState)(COLOR_PICKER_MODE.HEX),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    colorMode = _useState12[0],
-    setColorMode = _useState12[1]; // hex or rgb
+  const [value, setValue] = (0, _react.useState)(initialRgbaColor);
+  const [hexVal, setHexVal] = (0, _react.useState)((0, _utils.getInitialHexVal)(color));
+  const [alphaVal, setAlphaVal] = (0, _react.useState)((0, _utils.toPercentage)(initialRgbaColor.a));
+  const [redVal, setRedVal] = (0, _react.useState)(initialRgbaColor.r);
+  const [greenVal, setGreenVal] = (0, _react.useState)(initialRgbaColor.g);
+  const [blueVal, setBlueVal] = (0, _react.useState)(initialRgbaColor.b);
+  const [colorMode, setColorMode] = (0, _react.useState)(COLOR_PICKER_MODE.HEX); // hex or rgb
   const colorPickerRef = (0, _react.useRef)(null);
   let currentUsedColors = [];
   const currentUsedColorsStr = window.localStorage.getItem(LOCAL_STORAGE_KEY);
@@ -92,10 +70,12 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     rgba.a = Math.round(rgba.a * 100) / 100;
     const transferedHex = (0, _utils.rgbaToHex)(rgba);
     const hexVal = transferedHex.substring(1, 7);
-    const r = rgba.r,
-      g = rgba.g,
-      b = rgba.b,
-      a = rgba.a;
+    const {
+      r,
+      g,
+      b,
+      a
+    } = rgba;
     setAlphaVal((0, _utils.toPercentage)(a));
     updateValue(rgba);
     if (colorMode === COLOR_PICKER_MODE.HEX) {
@@ -111,9 +91,11 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (colorMode === COLOR_PICKER_MODE.HEX) {
       newMode = COLOR_PICKER_MODE.RGBA;
       const rgba = (0, _utils.hexToRgba)(color);
-      const r = rgba.r,
-        g = rgba.g,
-        b = rgba.b;
+      const {
+        r,
+        g,
+        b
+      } = rgba;
       setRedVal(r);
       setGreenVal(g);
       setBlueVal(b);
@@ -140,10 +122,11 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       newHexVal = newHexVal.split('').map(char => char + char).join('');
     }
     setHexVal(newHexVal);
-    const _hexToRgba = (0, _utils.hexToRgba)(newHexVal),
-      r = _hexToRgba.r,
-      g = _hexToRgba.g,
-      b = _hexToRgba.b;
+    const {
+      r,
+      g,
+      b
+    } = (0, _utils.hexToRgba)(newHexVal);
     const newValue = {
       r,
       g,
@@ -226,10 +209,12 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
   const onSelectDefaultColor = color => {
     const rgba = (0, _utils.hexToRgba)(color);
-    const r = rgba.r,
-      g = rgba.g,
-      b = rgba.b,
-      a = rgba.a;
+    const {
+      r,
+      g,
+      b,
+      a
+    } = rgba;
     const alphaVal = (0, _utils.toPercentage)(a);
     if (colorMode === COLOR_PICKER_MODE.RGBA) {
       setRedVal(r);

package/lib/DTableColorPicker/utils.js

@@ -43,10 +43,12 @@ const rgbaToHex = function (color) {
   let isNeedPrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   let isNeedAlpha = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   if (hexRegex.test(color)) return color;
-  const r = color.r,
-    g = color.g,
-    b = color.b,
-    a = color.a;
+  const {
+    r,
+    g,
+    b,
+    a
+  } = color;
   const toHex = value => {
     const hex = value.toString(16);
     return hex.length === 1 ? '0' + hex : hex;

package/lib/DTableColumnIcon/index.js

@@ -45,12 +45,13 @@ const COLUMN_DISPLAY_TYPE_ICON_CONFIG = {
   }
 };
 const DTableColumnIcon = _ref => {
-  let column = _ref.column,
-    color = _ref.color,
-    className = _ref.className,
-    _ref$ariaHidden = _ref.ariaHidden,
-    ariaHidden = _ref$ariaHidden === void 0 ? false : _ref$ariaHidden,
-    getSvg = _ref.getSvg;
+  let {
+    column,
+    color,
+    className,
+    ariaHidden = false,
+    getSvg
+  } = _ref;
   const columnType = column === null || column === void 0 ? void 0 : column.type;
   if (!columnType) return null;
   const columnDisplayType = (0, _dtableUtils.getColumnDisplayType)(column);

package/lib/DTableCommonAddTool/index.js

@@ -9,12 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function DTableCommonAddTool(_ref) {
-  let callBack = _ref.callBack,
-    footerName = _ref.footerName,
-    className = _ref.className,
-    addIconClassName = _ref.addIconClassName,
-    hideIcon = _ref.hideIcon,
-    style = _ref.style;
+  let {
+    callBack,
+    footerName,
+    className,
+    addIconClassName,
+    hideIcon,
+    style
+  } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "dtable-ui add-item-btn ".concat(className ? className : ''),
     style: style,

package/lib/DTableCustomFooter/index.js

@@ -10,7 +10,9 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 // DTableCustomFooter is used in geolocation editor and digital sign editor
 const DTableCustomFooter = _ref => {
-  let children = _ref.children;
+  let {
+    children
+  } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "dtable-custom-footer",
     children: children

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -47,22 +47,24 @@ class CollaboratorSelect extends _react.Component {
       });
     };
     this.getFilterOptions = searchValue => {
-      const _this$props = this.props,
-        options = _this$props.options,
-        searchable = _this$props.searchable;
+      const {
+        options,
+        searchable
+      } = this.props;
       if (!searchable) return options || [];
       return (0, _dtableUtils.searchCollaborators)(options, searchValue);
     };
     this.renderOptionGroup = () => {
-      const _this$props2 = this.props,
-        value = _this$props2.value,
-        options = _this$props2.options,
-        searchable = _this$props2.searchable,
-        searchPlaceholder = _this$props2.searchPlaceholder,
-        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
-        top = _this$props2.top,
-        left = _this$props2.left,
-        isUsePopover = _this$props2.isUsePopover;
+      const {
+        value,
+        options,
+        searchable,
+        searchPlaceholder,
+        noOptionsPlaceholder,
+        top,
+        left,
+        isUsePopover
+      } = this.props;
       if (!isUsePopover) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
           value: value,
@@ -121,11 +123,12 @@ class CollaboratorSelect extends _react.Component {
     document.removeEventListener('mousedown', this.onMousedown);
   }
   render() {
-    let _this$props3 = this.props,
-      className = _this$props3.className,
-      value = _this$props3.value,
-      placeholder = _this$props3.placeholder,
-      isLocked = _this$props3.isLocked;
+    let {
+      className,
+      value,
+      placeholder,
+      isLocked
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
       ref: node => this.selector = node,
       className: (0, _classnames.default)('dtable-select custom-select collaborator-select', {

package/lib/DTableCustomizeSelect/index.js

@@ -45,20 +45,24 @@ class DTableCustomizeSelect extends _react.Component {
     };
     this.getSelectedOptionTop = () => {
       if (!this.selector) return 38;
-      const _this$selector$getBou = this.selector.getBoundingClientRect(),
-        height = _this$selector$getBou.height;
+      const {
+        height
+      } = this.selector.getBoundingClientRect();
       return height;
     };
     this.getFilterOptions = searchValue => {
-      const _this$props = this.props,
-        options = _this$props.options,
-        searchable = _this$props.searchable;
+      const {
+        options,
+        searchable
+      } = this.props;
       if (!searchable) return options || [];
       const validSearchVal = searchValue.trim().toLowerCase();
       if (!validSearchVal) return options || [];
       return options.filter(option => {
-        const value = option.value,
-          name = option.name;
+        const {
+          value,
+          name
+        } = option;
         if (typeof name === 'string') {
           return name.toLowerCase().indexOf(validSearchVal) > -1;
         }
@@ -79,18 +83,19 @@ class DTableCustomizeSelect extends _react.Component {
     };
   }
   render() {
-    let _this$props2 = this.props,
-      className = _this$props2.className,
-      value = _this$props2.value,
-      options = _this$props2.options,
-      placeholder = _this$props2.placeholder,
-      searchable = _this$props2.searchable,
-      searchPlaceholder = _this$props2.searchPlaceholder,
-      noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
-      isLocked = _this$props2.isLocked,
-      isInModal = _this$props2.isInModal,
-      addOptionAble = _this$props2.addOptionAble,
-      component = _this$props2.component;
+    let {
+      className,
+      value,
+      options,
+      placeholder,
+      searchable,
+      searchPlaceholder,
+      noOptionsPlaceholder,
+      isLocked,
+      isInModal,
+      addOptionAble,
+      component
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: node => this.selector = node,
       className: (0, _classnames.default)('dtable-select custom-select', {

package/lib/DTableDropdownItem/index.js

@@ -13,22 +13,24 @@ var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
 var _svgIcon = _interopRequireDefault(require("../DTableIcon/svg-icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableDropdownItem = _ref => {
-  let className = _ref.className,
-    divider = _ref.divider,
-    id = _ref.id,
-    toggle = _ref.toggle,
-    disabled = _ref.disabled,
-    tooltip = _ref.tooltip,
-    itemProps = _ref.itemProps,
-    showChecked = _ref.showChecked,
-    checked = _ref.checked,
-    leftSlotContent = _ref.leftSlotContent,
-    rightSlotContent = _ref.rightSlotContent,
-    icon = _ref.icon,
-    content = _ref.content,
-    onClick = _ref.onClick,
-    style = _ref.style,
-    tabIndex = _ref.tabIndex;
+  let {
+    className,
+    divider,
+    id,
+    toggle,
+    disabled,
+    tooltip,
+    itemProps,
+    showChecked,
+    checked,
+    leftSlotContent,
+    rightSlotContent,
+    icon,
+    content,
+    onClick,
+    style,
+    tabIndex
+  } = _ref;
   if (divider) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemProps), {}, {
       divider: true,

package/lib/DTableDropdownMenu/index.js

@@ -10,14 +10,16 @@ var _reactstrap = require("reactstrap");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableDropdownMenu = _ref => {
-  let id = _ref.id,
-    className = _ref.className,
-    container = _ref.container,
-    modifiers = _ref.modifiers,
-    flip = _ref.flip,
-    style = _ref.style,
-    menuProps = _ref.menuProps,
-    children = _ref.children;
+  let {
+    id,
+    className,
+    container,
+    modifiers,
+    flip,
+    style,
+    menuProps,
+    children
+  } = _ref;
   let customMenuProps = (0, _objectSpread2.default)({}, menuProps);
   customMenuProps.modifiers = [{
     name: 'preventOverflow',

package/lib/DTableEmptyTip/index.js

@@ -10,10 +10,11 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DTableEmptyTip extends _react.default.Component {
   render() {
-    const _this$props = this.props,
-      text = _this$props.text,
-      title = _this$props.title,
-      type = _this$props.type;
+    const {
+      text,
+      title,
+      type
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "empty-tip",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {

package/lib/DTableFiltersPopover/index.js

@@ -29,8 +29,10 @@ var _jsxRuntime = require("react/jsx-runtime");
   constructor(props) {
     super(props);
     this.updateFilters = _ref => {
-      let filter_conjunction = _ref.filter_conjunction,
-        filters = _ref.filters;
+      let {
+        filter_conjunction,
+        filters
+      } = _ref;
       const filterConjunction = filter_conjunction || this.state.filterConjunction;
       if (this.isNeedSubmit) {
         const isSubmitDisabled = false;
@@ -52,8 +54,12 @@ var _jsxRuntime = require("react/jsx-runtime");
       });
     };
     this.addFilter = () => {
-      const columns = this.props.columns;
-      const filters = this.state.filters;
+      const {
+        columns
+      } = this.props;
+      const {
+        filters
+      } = this.state;
       const newFilter = (0, _utils.getDefaultFilter)(columns);
       if (!newFilter) {
         return;
@@ -63,8 +69,12 @@ var _jsxRuntime = require("react/jsx-runtime");
       });
     };
     this.addFilterGroup = () => {
-      const columns = this.props.columns;
-      const filters = this.state.filters;
+      const {
+        columns
+      } = this.props;
+      const {
+        filters
+      } = this.state;
       const newFilterGroup = (0, _utils.getDefaultFilterGroup)(columns);
       if (!newFilterGroup) {
         return;
@@ -77,9 +87,10 @@ var _jsxRuntime = require("react/jsx-runtime");
       this.props.hidePopover();
     };
     this.onSubmitFilters = () => {
-      const _this$state = this.state,
-        filters = _this$state.filters,
-        filterConjunction = _this$state.filterConjunction;
+      const {
+        filters,
+        filterConjunction
+      } = this.state;
       const update = {
         filters,
         filter_conjunction: filterConjunction
@@ -90,10 +101,12 @@ var _jsxRuntime = require("react/jsx-runtime");
     this.onPopoverInsideClick = e => {
       e.stopPropagation();
     };
-    const _filterConjunction = props.filterConjunction,
-      _filters = props.filters,
-      _columns = props.columns,
-      isNeedSubmit = props.isNeedSubmit;
+    const {
+      filterConjunction: _filterConjunction,
+      filters: _filters,
+      columns: _columns,
+      isNeedSubmit
+    } = props;
     this.state = {
       filters: (0, _dtableUtils.getValidFilters)(_filters, _columns),
       filterConjunction: _constants.SUPPORT_CONJUNCTIONS.includes(_filterConjunction) ? _filterConjunction : _dtableUtils.FILTER_CONJUNCTION_TYPE.AND,
@@ -102,19 +115,21 @@ var _jsxRuntime = require("react/jsx-runtime");
     this.isNeedSubmit = isNeedSubmit;
   }
   render() {
-    const _this$props = this.props,
-      target = _this$props.target,
-      columns = _this$props.columns,
-      placement = _this$props.placement,
-      isSupportAdvanced = _this$props.isSupportAdvanced,
-      departments = _this$props.departments,
-      lang = _this$props.lang,
-      readOnly = _this$props.readOnly,
-      userDepartmentIdsMap = _this$props.userDepartmentIdsMap,
-      firstDayOfWeek = _this$props.firstDayOfWeek;
-    const _this$state2 = this.state,
-      filters = _this$state2.filters,
-      filterConjunction = _this$state2.filterConjunction;
+    const {
+      target,
+      columns,
+      placement,
+      isSupportAdvanced,
+      departments,
+      lang,
+      readOnly,
+      userDepartmentIdsMap,
+      firstDayOfWeek
+    } = this.props;
+    const {
+      filters,
+      filterConjunction
+    } = this.state;
     const canAddFilter = columns.length > 0;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTablePopover.default, {
       target: target,
@@ -147,28 +162,29 @@ var _jsxRuntime = require("react/jsx-runtime");
           addIconClassName: "popover-add-icon"
         }), isSupportAdvanced && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "add-buttons",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "btn-add-filter mr-4",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
+            className: "mr-4",
             onClick: canAddFilter ? () => this.addFilter() : () => {},
-            role: "button",
             tabIndex: 0,
             "aria-label": (0, _lang.getLocale)('Add_filter'),
+            color: "filled",
+            size: "middle",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-add-table popover-add-icon"
+              className: "dtable-font dtable-icon-add-table"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "add-new-option",
               children: (0, _lang.getLocale)('Add_filter')
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "btn-add-filter-group",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
             onClick: canAddFilter ? () => this.addFilterGroup() : () => {},
-            role: "button",
+            color: "filled",
+            size: "middle",
             tabIndex: 0,
             "aria-label": (0, _lang.getLocale)('Add_filter_group'),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-add-table popover-add-icon"
+              className: "dtable-font dtable-icon-add-table"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "add-new-option",
               children: (0, _lang.getLocale)('Add_filter_group')

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

@@ -13,7 +13,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 class FilterItemUtils {
   static generatorColumnOption(column) {
     if (!column) return null;
-    const name = column.name;
+    const {
+      name
+    } = column;
     return {
       value: {
         column