dtable-ui-component 6.0.49 → 6.0.50

package/lib/DTableFiltersPopover/index.js

@@ -16,6 +16,7 @@ var _DTablePopover = _interopRequireDefault(require("../DTablePopover"));
 var _constants = require("./constants");
 var _lang = require("../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * filter data structure
  * let filter = {
@@ -24,8 +25,7 @@ require("./index.css");
  *  filter_term: '',
  *  filter_term_modifier: '',
  * }
- */
-class DTableFiltersPopover extends _react.Component {
+ */class DTableFiltersPopover extends _react.Component {
   constructor(props) {
     super(props);
     this.updateFilters = _ref => {
@@ -131,70 +131,80 @@ class DTableFiltersPopover extends _react.Component {
       filterConjunction
     } = this.state;
     const canAddFilter = columns.length > 0;
-    return /*#__PURE__*/_react.default.createElement(_DTablePopover.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTablePopover.default, {
       target: target,
       placement: placement,
       popoverClassName: "dtable-ui-filter-popover",
       hideDTablePopover: this.props.hidePopover,
       hideDTablePopoverWithEsc: this.props.hidePopover,
-      boundariesElement: document.body
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.dtablePopoverRef = ref,
-      onClick: this.onPopoverInsideClick,
-      className: this.props.className
-    }, /*#__PURE__*/_react.default.createElement(_filterList.default, {
-      isInModal: true,
-      filterConjunction: filterConjunction,
-      filters: filters,
-      columns: columns,
-      emptyPlaceholder: (0, _lang.getLocale)('No_filters'),
-      collaborators: this.props.collaborators,
-      readOnly: readOnly,
-      userDepartmentIdsMap: userDepartmentIdsMap,
-      departments: departments,
-      lang: lang,
-      firstDayOfWeek: firstDayOfWeek,
-      updateFilters: this.updateFilters
-    }), !isSupportAdvanced && !readOnly && /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
-      className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
-      callBack: canAddFilter ? () => this.addFilter() : () => {},
-      footerName: (0, _lang.getLocale)('Add_filter'),
-      addIconClassName: "popover-add-icon"
-    }), isSupportAdvanced && !readOnly && /*#__PURE__*/_react.default.createElement("div", {
-      className: "add-buttons"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "btn-add-filter mr-4",
-      onClick: canAddFilter ? () => this.addFilter() : () => {},
-      role: "button",
-      tabIndex: 0,
-      "aria-label": (0, _lang.getLocale)('Add_filter')
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      "aria-hidden": "true",
-      className: "dtable-font dtable-icon-add-table popover-add-icon"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "add-new-option"
-    }, (0, _lang.getLocale)('Add_filter'))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "btn-add-filter-group",
-      onClick: canAddFilter ? () => this.addFilterGroup() : () => {},
-      role: "button",
-      tabIndex: 0,
-      "aria-label": (0, _lang.getLocale)('Add_filter_group')
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      "aria-hidden": "true",
-      className: "dtable-font dtable-icon-add-table popover-add-icon"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "add-new-option"
-    }, (0, _lang.getLocale)('Add_filter_group')))), this.isNeedSubmit && /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-popover-footer"
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-      disabled: readOnly,
-      className: "mr-2",
-      onClick: this.onClosePopover
-    }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-      disabled: this.state.isSubmitDisabled || readOnly,
-      color: "primary",
-      onClick: this.onSubmitFilters
-    }, (0, _lang.getLocale)('Submit')))));
+      boundariesElement: document.body,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: ref => this.dtablePopoverRef = ref,
+        onClick: this.onPopoverInsideClick,
+        className: this.props.className,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_filterList.default, {
+          isInModal: true,
+          filterConjunction: filterConjunction,
+          filters: filters,
+          columns: columns,
+          emptyPlaceholder: (0, _lang.getLocale)('No_filters'),
+          collaborators: this.props.collaborators,
+          readOnly: readOnly,
+          userDepartmentIdsMap: userDepartmentIdsMap,
+          departments: departments,
+          lang: lang,
+          firstDayOfWeek: firstDayOfWeek,
+          updateFilters: this.updateFilters
+        }), !isSupportAdvanced && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCommonAddTool.default, {
+          className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
+          callBack: canAddFilter ? () => this.addFilter() : () => {},
+          footerName: (0, _lang.getLocale)('Add_filter'),
+          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",
+            onClick: canAddFilter ? () => this.addFilter() : () => {},
+            role: "button",
+            tabIndex: 0,
+            "aria-label": (0, _lang.getLocale)('Add_filter'),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              "aria-hidden": "true",
+              className: "dtable-font dtable-icon-add-table popover-add-icon"
+            }), /*#__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",
+            onClick: canAddFilter ? () => this.addFilterGroup() : () => {},
+            role: "button",
+            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"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "add-new-option",
+              children: (0, _lang.getLocale)('Add_filter_group')
+            })]
+          })]
+        }), this.isNeedSubmit && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "filter-popover-footer",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+            disabled: readOnly,
+            className: "mr-2",
+            onClick: this.onClosePopover,
+            children: (0, _lang.getLocale)('Cancel')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+            disabled: this.state.isSubmitDisabled || readOnly,
+            color: "primary",
+            onClick: this.onSubmitFilters,
+            children: (0, _lang.getLocale)('Submit')
+          })]
+        })]
+      })
+    });
   }
 }
 DTableFiltersPopover.defaultProps = {

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _lang = require("../../lang");
+var _jsxRuntime = require("react/jsx-runtime");
 class FilterItemUtils {
   static generatorColumnOption(column) {
     if (!column) return null;
@@ -19,15 +20,19 @@ class FilterItemUtils {
       value: {
         column
       },
-      label: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: "filter-header-icon"
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        className: _dtableUtils.COLUMNS_ICON_CONFIG[type]
-      })), /*#__PURE__*/_react.default.createElement("span", {
-        className: "select-option-name",
-        title: name,
-        "aria-label": name
-      }, name))
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "filter-header-icon",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: _dtableUtils.COLUMNS_ICON_CONFIG[type]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "select-option-name",
+          title: name,
+          "aria-label": name,
+          children: name
+        })]
+      })
     };
   }
   static generatorPredicateOption(filterPredicate) {
@@ -35,9 +40,10 @@ class FilterItemUtils {
       value: {
         filterPredicate
       },
-      label: /*#__PURE__*/_react.default.createElement("span", {
-        className: "select-option-name"
-      }, (0, _lang.getLocale)(filterPredicate))
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "select-option-name",
+        children: (0, _lang.getLocale)(filterPredicate)
+      })
     };
   }
   static generatorTermModifierOption(filterTermModifier) {
@@ -68,9 +74,10 @@ class FilterItemUtils {
       value: {
         filterTermModifier
       },
-      label: /*#__PURE__*/_react.default.createElement("span", {
-        className: "select-option-name"
-      }, FILTER_TERM_MODIFIER_SHOW[filterTermModifier])
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "select-option-name",
+        children: FILTER_TERM_MODIFIER_SHOW[filterTermModifier]
+      })
     };
   }
   static generatorSingleSelectOption(option, selectedOption) {
@@ -78,21 +85,24 @@ class FilterItemUtils {
       value: {
         columnOption: option
       },
-      label: /*#__PURE__*/_react.default.createElement("div", {
-        className: "select-option-name single-select-option-name"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "single-select-option",
-        style: {
-          background: option.color,
-          color: option.textColor || null
-        },
-        title: option.name,
-        "aria-label": option.name
-      }, option.name), /*#__PURE__*/_react.default.createElement("div", {
-        className: "single-select-check-icon"
-      }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id && /*#__PURE__*/_react.default.createElement("i", {
-        className: "option-edit dtable-font dtable-icon-check-mark"
-      })))
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "select-option-name single-select-option-name",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "single-select-option",
+          style: {
+            background: option.color,
+            color: option.textColor || null
+          },
+          title: option.name,
+          "aria-label": option.name,
+          children: option.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "single-select-check-icon",
+          children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "option-edit dtable-font dtable-icon-check-mark"
+          })
+        })]
+      })
     };
   }
   static generatorMultipleSelectOption(option, filterTerm) {
@@ -100,21 +110,24 @@ class FilterItemUtils {
       value: {
         columnOption: option
       },
-      label: /*#__PURE__*/_react.default.createElement("div", {
-        className: "select-option-name multiple-option-name"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "multiple-select-option",
-        style: {
-          background: option.color,
-          color: option.textColor
-        },
-        title: option.name,
-        "aria-label": option.name
-      }, option.name), /*#__PURE__*/_react.default.createElement("div", {
-        className: "multiple-check-icon"
-      }, filterTerm.indexOf(option.id) > -1 && /*#__PURE__*/_react.default.createElement("i", {
-        className: "option-edit dtable-font dtable-icon-check-mark"
-      })))
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "select-option-name multiple-option-name",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "multiple-select-option",
+          style: {
+            background: option.color,
+            color: option.textColor
+          },
+          title: option.name,
+          "aria-label": option.name,
+          children: option.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "multiple-check-icon",
+          children: filterTerm.indexOf(option.id) > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "option-edit dtable-font dtable-icon-check-mark"
+          })
+        })]
+      })
     };
   }
   static generatorConjunctionOptions() {
@@ -122,16 +135,18 @@ class FilterItemUtils {
       value: {
         filterConjunction: 'And'
       },
-      label: /*#__PURE__*/_react.default.createElement("span", {
-        className: "select-option-name"
-      }, (0, _lang.getLocale)('And'))
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "select-option-name",
+        children: (0, _lang.getLocale)('And')
+      })
     }, {
       value: {
         filterConjunction: 'Or'
       },
-      label: /*#__PURE__*/_react.default.createElement("span", {
-        className: "select-option-name"
-      }, (0, _lang.getLocale)('Or'))
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "select-option-name",
+        children: (0, _lang.getLocale)('Or')
+      })
     }];
   }
   static getActiveConjunctionOption(conjunction) {
@@ -140,18 +155,20 @@ class FilterItemUtils {
         value: {
           filterConjunction: 'And'
         },
-        label: /*#__PURE__*/_react.default.createElement("span", {
-          className: "select-option-name"
-        }, (0, _lang.getLocale)('And'))
+        label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "select-option-name",
+          children: (0, _lang.getLocale)('And')
+        })
       };
     }
     return {
       value: {
         filterConjunction: 'Or'
       },
-      label: /*#__PURE__*/_react.default.createElement("span", {
-        className: "select-option-name"
-      }, (0, _lang.getLocale)('Or'))
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "select-option-name",
+        children: (0, _lang.getLocale)('Or')
+      })
     };
   }
 }

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

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _DTableCustomizeSelect = _interopRequireDefault(require("../../../DTableCustomizeSelect"));
 var _lang = require("../../../lang");
+var _jsxRuntime = require("react/jsx-runtime");
 class CollaboratorFilter extends _react.Component {
   constructor(props) {
     super(props);
@@ -21,30 +22,38 @@ class CollaboratorFilter extends _react.Component {
             filterIndex,
             columnOption: collaborator
           },
-          label: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-            className: "select-option-name option-collaborator"
-          }, /*#__PURE__*/_react.default.createElement("div", {
-            className: "collaborator-container"
-          }, /*#__PURE__*/_react.default.createElement("div", {
-            className: "collaborator"
-          }, /*#__PURE__*/_react.default.createElement("span", {
-            className: "collaborator-avatar-container"
-          }, /*#__PURE__*/_react.default.createElement("img", {
-            className: "collaborator-avatar",
-            alt: collaborator.name,
-            src: collaborator.avatar_url
-          })), /*#__PURE__*/_react.default.createElement("span", {
-            className: "collaborator-name text-truncate",
-            style: {
-              maxWidth: '200px'
-            },
-            title: collaborator.name,
-            "aria-label": collaborator.name
-          }, collaborator.name))), /*#__PURE__*/_react.default.createElement("div", {
-            className: "collaborator-check-icon"
-          }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
-          }))))
+          label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "select-option-name option-collaborator",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "collaborator-container",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  className: "collaborator",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "collaborator-avatar-container",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                      className: "collaborator-avatar",
+                      alt: collaborator.name,
+                      src: collaborator.avatar_url
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "collaborator-name text-truncate",
+                    style: {
+                      maxWidth: '200px'
+                    },
+                    title: collaborator.name,
+                    "aria-label": collaborator.name,
+                    children: collaborator.name
+                  })]
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "collaborator-check-icon",
+                children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                  className: "option-edit dtable-font dtable-icon-check-mark"
+                })
+              })]
+            })
+          })
         };
       });
     };
@@ -70,35 +79,41 @@ class CollaboratorFilter extends _react.Component {
     let selectedCollaborators = Array.isArray(filterTerm) && filterTerm.length > 0 && filterTerm.map(item => {
       let collaborator = collaborators.find(c => c.email === item);
       if (!collaborator) return null;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: item,
-        className: "collaborator"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "collaborator-avatar-container"
-      }, /*#__PURE__*/_react.default.createElement("img", {
-        className: "collaborator-avatar",
-        alt: collaborator.name,
-        src: collaborator.avatar_url
-      })), /*#__PURE__*/_react.default.createElement("span", {
-        className: "collaborator-name text-truncate",
-        title: collaborator.name,
-        "aria-label": collaborator.name
-      }, collaborator.name), /*#__PURE__*/_react.default.createElement("span", {
-        className: "remove-container"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "remove-icon",
-        onClick: e => {
-          this.onClick(e, collaborator);
-        }
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-fork-number"
-      }))));
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "collaborator",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "collaborator-avatar-container",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            className: "collaborator-avatar",
+            alt: collaborator.name,
+            src: collaborator.avatar_url
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "collaborator-name text-truncate",
+          title: collaborator.name,
+          "aria-label": collaborator.name,
+          children: collaborator.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "remove-container",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "remove-icon",
+            onClick: e => {
+              this.onClick(e, collaborator);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              className: "dtable-font dtable-icon-fork-number"
+            })
+          })
+        })]
+      }, item);
     });
     let value = selectedCollaborators ? {
-      label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selectedCollaborators)
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: selectedCollaborators
+      })
     } : {};
     let options = Array.isArray(filterTerm) ? this.createCollaboratorOptions(filterIndex, collaborators, filterTerm) : [];
-    return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
       className: "dtable-ui-collaborator-selector",
       value: value,
       onSelectOption: this.props.onSelectCollaborator,

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-multiple-select-filter.js

@@ -14,6 +14,7 @@ var _DepartmentMultipleSelectEditor = _interopRequireDefault(require("../../../D
 var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
 var _departments = require("../../../constants/departments");
+var _jsxRuntime = require("react/jsx-runtime");
 function DepartmentMultipleSelectFilter(props) {
   const {
     value,
@@ -34,18 +35,19 @@ function DepartmentMultipleSelectFilter(props) {
         type,
         name
       } = option;
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "department-item",
-        key: index,
-        onClick: event => selectDepartment(event, type)
-      }, /*#__PURE__*/_react.default.createElement("input", {
-        type: "checkbox",
-        className: "vam department-select-input",
-        checked: selectedDepartments.includes(type),
-        onChange: () => {}
-      }), /*#__PURE__*/_react.default.createElement("span", {
-        className: "text-truncate department-name"
-      }, (0, _lang.getLocale)(name)));
+        onClick: event => selectDepartment(event, type),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "checkbox",
+          className: "vam department-select-input",
+          checked: selectedDepartments.includes(type),
+          onChange: () => {}
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "text-truncate department-name",
+          children: (0, _lang.getLocale)(name)
+        })]
+      }, index);
     });
   }
   function onSelectToggle(event) {
@@ -71,40 +73,46 @@ function DepartmentMultipleSelectFilter(props) {
       columnOption
     });
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: selectorRef,
     className: (0, _classnames.default)('dtable-select custom-select', {
       'focus': isShowSelector
     }),
     onClick: onSelectToggle,
-    id: "filter-department-editor"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "selected-option"
-  }, selectedDepartments.length > 0 ? /*#__PURE__*/_react.default.createElement("span", {
-    className: "selected-option-show"
-  }, /*#__PURE__*/_react.default.createElement(_SelectedDepartments.default, {
-    value: selectedDepartments,
-    departments: departments
-  })) : /*#__PURE__*/_react.default.createElement("span", {
-    className: "select-placeholder"
-  }, (0, _lang.getLocale)('Select_department')), !readOnly && /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-font dtable-icon-down3"
-  })), isShowSelector && !isInModal && /*#__PURE__*/_react.default.createElement(_DepartmentMultipleSelectEditor.default, {
-    isShowSelectedDepartments: false,
-    classNamePrefix: "filter",
-    value: selectedDepartments,
-    departments: departments,
-    onCommit: selectDepartment,
-    renderUserDepartmentOptions: renderUserDepartmentOptions
-  }), isShowSelector && isInModal && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_DepartmentMultipleSelectEditor.default, {
-    isInModal: isInModal,
-    isShowSelectedDepartments: false,
-    classNamePrefix: "filter",
-    value: selectedDepartments,
-    departments: departments,
-    position: selectorRef.current.getBoundingClientRect(),
-    onCommit: selectDepartment,
-    renderUserDepartmentOptions: renderUserDepartmentOptions
-  })));
+    id: "filter-department-editor",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "selected-option",
+      children: [selectedDepartments.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "selected-option-show",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedDepartments.default, {
+          value: selectedDepartments,
+          departments: departments
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "select-placeholder",
+        children: (0, _lang.getLocale)('Select_department')
+      }), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-font dtable-icon-down3"
+      })]
+    }), isShowSelector && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DepartmentMultipleSelectEditor.default, {
+      isShowSelectedDepartments: false,
+      classNamePrefix: "filter",
+      value: selectedDepartments,
+      departments: departments,
+      onCommit: selectDepartment,
+      renderUserDepartmentOptions: renderUserDepartmentOptions
+    }), isShowSelector && isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DepartmentMultipleSelectEditor.default, {
+        isInModal: isInModal,
+        isShowSelectedDepartments: false,
+        classNamePrefix: "filter",
+        value: selectedDepartments,
+        departments: departments,
+        position: selectorRef.current.getBoundingClientRect(),
+        onCommit: selectDepartment,
+        renderUserDepartmentOptions: renderUserDepartmentOptions
+      })
+    })]
+  });
 }
 var _default = exports.default = DepartmentMultipleSelectFilter;