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

package/lib/DTableSelect/utils.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = require("react-select");
-var _jsxRuntime = require("react/jsx-runtime");
 const MenuSelectStyle = exports.MenuSelectStyle = {
   option: (provided, state) => {
     const {
@@ -38,15 +37,12 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
   indicatorSeparator: () => {}
 };
 const DropdownIndicator = props => {
-  return _reactSelect.components.DropdownIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, {
-    ...props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "dtable-font dtable-icon-drop-down",
-      style: {
-        fontSize: '12px'
-      }
-    })
-  });
+  return _reactSelect.components.DropdownIndicator && /*#__PURE__*/_react.default.createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement("span", {
+    className: "dtable-font dtable-icon-drop-down",
+    style: {
+      fontSize: '12px'
+    }
+  }));
 };
 exports.DropdownIndicator = DropdownIndicator;
 const ClearIndicator = _ref => {
@@ -62,26 +58,17 @@ const ClearIndicator = _ref => {
     ...innerProps,
     onMouseDown
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.ClearIndicator, {
-    ...props
-  });
+  return /*#__PURE__*/_react.default.createElement(_reactSelect.components.ClearIndicator, props);
 };
 exports.ClearIndicator = ClearIndicator;
-const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+const MenuList = props => /*#__PURE__*/_react.default.createElement("div", {
   onClick: e => e.nativeEvent.stopImmediatePropagation(),
-  onMouseDown: e => e.nativeEvent.stopImmediatePropagation(),
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.MenuList, {
-    ...props,
-    children: props.children
-  })
-});
+  onMouseDown: e => e.nativeEvent.stopImmediatePropagation()
+}, /*#__PURE__*/_react.default.createElement(_reactSelect.components.MenuList, props, props.children));
 exports.MenuList = MenuList;
 const Option = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: props.data.style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, {
-      ...props
-    })
-  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: props.data.style
+  }, /*#__PURE__*/_react.default.createElement(_reactSelect.components.Option, props));
 };
 exports.Option = Option;

package/lib/DTableSwitch/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
 function DtableSwitch(props) {
   const {
     onChange,
@@ -15,24 +14,21 @@ function DtableSwitch(props) {
     disabled,
     switchClassName
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "dtable-switch position-relative ".concat(switchClassName || ''),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-      className: "custom-switch",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        className: "custom-switch-input",
-        type: "checkbox",
-        checked: checked,
-        onChange: onChange,
-        name: "custom-switch-checkbox",
-        disabled: disabled
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "custom-switch-description text-truncate",
-        children: placeholder
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "custom-switch-indicator"
-      })]
-    })
-  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-switch position-relative ".concat(switchClassName || '')
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    className: "custom-switch"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    className: "custom-switch-input",
+    type: "checkbox",
+    checked: checked,
+    onChange: onChange,
+    name: "custom-switch-checkbox",
+    disabled: disabled
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "custom-switch-description text-truncate"
+  }, placeholder), /*#__PURE__*/_react.default.createElement("span", {
+    className: "custom-switch-indicator"
+  })));
 }
 var _default = exports.default = DtableSwitch;

package/lib/DateEditor/index.js

@@ -15,7 +15,6 @@ var _mbDateEditorPopover = _interopRequireDefault(require("./mb-date-editor-popo
 require("dayjs/locale/zh-cn");
 require("dayjs/locale/en-gb");
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class DateEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -86,15 +85,13 @@ class DateEditor extends _react.default.Component {
   }
   render() {
     if (!this.state.isDateInit) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "cell-editor date-editor",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "date-editor-container",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "control-form"
-          })
-        })
-      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "cell-editor date-editor"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "date-editor-container"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "control-form"
+      })));
     }
     let {
       lang,
@@ -107,42 +104,35 @@ class DateEditor extends _react.default.Component {
       dateFormat,
       showHourAndMinute
     } = this.state;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "cell-editor dtable-ui-date-editor",
-      children: [!isPopoverShow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "dtable-ui-date-editor-container",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "form-control",
-          onClick: this.onDateEditorToggle,
-          children: (0, _dtableUtils.getDateDisplayString)(newValue, dateFormat)
-        })
-      }), isPopoverShow && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
-          query: '(min-width: 768px)',
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcDateEditorPopover.default, {
-            className: className,
-            lang: lang,
-            value: newValue,
-            dateFormat: dateFormat,
-            showHourAndMinute: showHourAndMinute,
-            onValueChanged: this.onValueChanged
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
-          query: '(max-width: 767.8px)',
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbDateEditorPopover.default, {
-            className: className,
-            isReadOnly: this.props.isReadOnly,
-            lang: lang,
-            value: newValue,
-            dateFormat: dateFormat,
-            showHourAndMinute: showHourAndMinute,
-            column: column,
-            onValueChanged: this.onValueChanged,
-            onClosePopover: this.onClosePopover
-          })
-        })]
-      })]
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "cell-editor dtable-ui-date-editor"
+    }, !isPopoverShow && /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-date-editor-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "form-control",
+      onClick: this.onDateEditorToggle
+    }, (0, _dtableUtils.getDateDisplayString)(newValue, dateFormat))), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+      query: '(min-width: 768px)'
+    }, /*#__PURE__*/_react.default.createElement(_pcDateEditorPopover.default, {
+      className: className,
+      lang: lang,
+      value: newValue,
+      dateFormat: dateFormat,
+      showHourAndMinute: showHourAndMinute,
+      onValueChanged: this.onValueChanged
+    })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+      query: '(max-width: 767.8px)'
+    }, /*#__PURE__*/_react.default.createElement(_mbDateEditorPopover.default, {
+      className: className,
+      isReadOnly: this.props.isReadOnly,
+      lang: lang,
+      value: newValue,
+      dateFormat: dateFormat,
+      showHourAndMinute: showHourAndMinute,
+      column: column,
+      onValueChanged: this.onValueChanged,
+      onClosePopover: this.onClosePopover
+    }))));
   }
 }
 DateEditor.defaultProps = {

package/lib/DateEditor/mb-date-editor-popover/index.js

@@ -17,7 +17,6 @@ var _editorUtils = require("../../utils/editor-utils");
 var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
 require("@seafile/seafile-calendar/assets/index.css");
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class DateEditorPopover extends _react.default.PureComponent {
   constructor(props) {
     super(props);
@@ -98,7 +97,7 @@ class DateEditorPopover extends _react.default.PureComponent {
         className
       } = this.props;
       let defaultValue = (0, _dayjs.default)().clone();
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileCalendar.default, {
+      return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
         className: (0, _classnames.default)('dtable-rc-calendar', className),
         locale: (0, _editorUtils.initDateEditorLanguage)(lang),
         format: dateFormat,
@@ -122,7 +121,7 @@ class DateEditorPopover extends _react.default.PureComponent {
         datePickerValue
       } = this.state;
       let calendar = this.getCalender();
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(SeaDatePicker, {
+      return /*#__PURE__*/_react.default.createElement(SeaDatePicker, {
         open: true,
         style: {
           width: '100%'
@@ -130,29 +129,27 @@ class DateEditorPopover extends _react.default.PureComponent {
         calendar: calendar,
         value: datePickerValue,
         getCalendarContainer: this.getCalendarContainer,
-        onChange: this.onChange,
-        children: _ref => {
-          let {
-            value
-          } = _ref;
-          value = value && value.format(dateFormat);
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            tabIndex: "0",
-            onFocus: this.onReadOnlyFocus,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-              placeholder: (0, _lang.getLocale)('Please_select'),
-              readOnly: true,
-              tabIndex: "-1",
-              className: "form-control",
-              value: value || ''
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              ref: this.calendarContainerRef,
-              style: {
-                height: '22rem'
-              }
-            })]
-          });
-        }
+        onChange: this.onChange
+      }, _ref => {
+        let {
+          value
+        } = _ref;
+        value = value && value.format(dateFormat);
+        return /*#__PURE__*/_react.default.createElement("div", {
+          tabIndex: "0",
+          onFocus: this.onReadOnlyFocus
+        }, /*#__PURE__*/_react.default.createElement("input", {
+          placeholder: (0, _lang.getLocale)('Please_select'),
+          readOnly: true,
+          tabIndex: "-1",
+          className: "form-control",
+          value: value || ''
+        }), /*#__PURE__*/_react.default.createElement("div", {
+          ref: this.calendarContainerRef,
+          style: {
+            height: '22rem'
+          }
+        }));
       });
     };
     this.state = {
@@ -180,62 +177,48 @@ class DateEditorPopover extends _react.default.PureComponent {
     const {
       datePickerValue
     } = this.state;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       ref: this.setEditorPopover,
       className: "dtable-ui-mb-editor-popover mb-date-editor-popover",
-      onClick: this.onContainerClick,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MBEditorHeader.default, {
-        title: column.name,
-        leftContent: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "dtable-font dtable-icon-return"
-        }),
-        rightContent: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: (0, _lang.getLocale)('Done')
-        }),
-        onLeftClick: this.props.onClosePopover,
-        onRightClick: this.props.onClosePopover
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "dtable-ui-mb-editor-body dtable-ui-mb-date-editor-body",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "mb-date-editor-input",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "date-input",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_datePicker.default, {
-              mode: "date",
-              locale: (0, _editorUtils.initDateEditorLanguage)(lang),
-              value: this.state.value,
-              onChange: this.handleDateChange,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "date-input-day",
-                children: datePickerValue && datePickerValue.format(leftFormat)
-              })
-            })
-          }), showHourAndMinute && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "date-input",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_datePicker.default, {
-              mode: "time",
-              locale: (0, _editorUtils.initDateEditorLanguage)(lang),
-              value: this.state.value,
-              onChange: this.handleTimeChange,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "date-input-day",
-                children: datePickerValue && datePickerValue.format(rightFormat)
-              })
-            })
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "dtable-ui mb-date-editor-picker",
-          children: this.renderDataPicker()
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "mb-date-editor-clear",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            onClick: this.deleteDate,
-            className: "clear-date",
-            children: (0, _lang.getLocale)('Clear')
-          })
-        })]
-      })]
-    });
+      onClick: this.onContainerClick
+    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
+      title: column.name,
+      leftContent: /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-return"
+      }),
+      rightContent: /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Done')),
+      onLeftClick: this.props.onClosePopover,
+      onRightClick: this.props.onClosePopover
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mb-editor-body dtable-ui-mb-date-editor-body"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-date-editor-input"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input"
+    }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
+      mode: "date",
+      locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+      value: this.state.value,
+      onChange: this.handleDateChange
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input-day"
+    }, datePickerValue && datePickerValue.format(leftFormat)))), showHourAndMinute && /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input"
+    }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
+      mode: "time",
+      locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+      value: this.state.value,
+      onChange: this.handleTimeChange
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input-day"
+    }, datePickerValue && datePickerValue.format(rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui mb-date-editor-picker"
+    }, this.renderDataPicker()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-date-editor-clear"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      onClick: this.deleteDate,
+      className: "clear-date"
+    }, (0, _lang.getLocale)('Clear')))));
   }
 }
 var _default = exports.default = DateEditorPopover;

package/lib/DateEditor/pc-date-editor-popover.js

@@ -13,7 +13,6 @@ var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar
 var _editorUtils = require("../utils/editor-utils");
 require("@seafile/seafile-calendar/assets/index.css");
 var _lang = require("../lang");
-var _jsxRuntime = require("react/jsx-runtime");
 class PCDateEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -60,7 +59,7 @@ class PCDateEditorPopover extends _react.default.Component {
         className
       } = this.props;
       let defaultValue = (0, _dayjs.default)().clone();
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileCalendar.default, {
+      return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
         className: (0, _classnames.default)('dtable-rc-calendar', className),
         locale: (0, _editorUtils.initDateEditorLanguage)(lang),
         style: {
@@ -90,7 +89,7 @@ class PCDateEditorPopover extends _react.default.Component {
       datePickerValue
     } = this.state;
     const calendar = this.getCalender();
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.default, {
       open: open,
       value: datePickerValue,
       animation: "slide-up",
@@ -100,28 +99,26 @@ class PCDateEditorPopover extends _react.default.Component {
       calendar: calendar,
       getCalendarContainer: this.getCalendarContainer,
       onChange: this.onChange,
-      onOpenChange: this.onOpenChange,
-      children: _ref => {
-        let {
-          value
-        } = _ref;
-        value = value && value.format(dateFormat);
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          className: "dtable-ui-date-editor-container",
-          tabIndex: "0",
-          onFocus: this.onFocusDatePicker,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-            readOnly: true,
-            tabIndex: "-1",
-            className: "form-control",
-            placeholder: (0, _lang.getLocale)('Please_select'),
-            value: value || '',
-            onMouseDown: this.handleMouseDown
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            ref: this.calendarContainerRef
-          })]
-        });
-      }
+      onOpenChange: this.onOpenChange
+    }, _ref => {
+      let {
+        value
+      } = _ref;
+      value = value && value.format(dateFormat);
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "dtable-ui-date-editor-container",
+        tabIndex: "0",
+        onFocus: this.onFocusDatePicker
+      }, /*#__PURE__*/_react.default.createElement("input", {
+        readOnly: true,
+        tabIndex: "-1",
+        className: "form-control",
+        placeholder: (0, _lang.getLocale)('Please_select'),
+        value: value || '',
+        onMouseDown: this.handleMouseDown
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.calendarContainerRef
+      }));
     });
   }
 }

package/lib/DateFormatter/index.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class DateFormatter extends _react.default.Component {
   render() {
     let {
@@ -21,10 +20,9 @@ class DateFormatter extends _react.default.Component {
     if (date !== '') {
       date = (0, _dtableUtils.getDateDisplayString)(date, format);
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: classname,
-      children: date
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, date);
   }
 }
 DateFormatter.defaultProps = {

package/lib/Department-editor/department-multiple-select/index.js

@@ -11,7 +11,6 @@ var _utils = require("../utils");
 var _selectedDepartments = _interopRequireDefault(require("../selected-departments"));
 var _lang = require("../../lang");
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 function DepartmentMultipleSelect(props) {
   const {
     value,
@@ -90,27 +89,25 @@ function DepartmentMultipleSelect(props) {
       paddingLeft: hasChild ? '' : '16px'
     };
     const inputChecked = value.includes(id);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "dropdown-item d-flex align-items-center",
-        onClick: event => onSelectDepartment(event, id),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-          type: "checkbox",
-          className: "vam department-select-input",
-          checked: inputChecked,
-          style: inputStyle,
-          onChange: () => {}
-        }), hasChild && !searchVal && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "dtable-font expand dtable-icon-".concat(isExpanded ? 'drop-down' : 'right-slide', " pr-1"),
-          onClick: event => onExpand(event, id, isExpanded)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: searchVal ? {} : nameStyle,
-          title: name,
-          className: "text-truncate",
-          children: name
-        })]
-      }), isExpanded && hasChild && renderSubDepartments(id, subDepartments, newLevel)]
-    }, id);
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: id
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dropdown-item d-flex align-items-center",
+      onClick: event => onSelectDepartment(event, id)
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "checkbox",
+      className: "vam department-select-input",
+      checked: inputChecked,
+      style: inputStyle,
+      onChange: () => {}
+    }), hasChild && !searchVal && /*#__PURE__*/_react.default.createElement("span", {
+      className: "dtable-font expand dtable-icon-".concat(isExpanded ? 'drop-down' : 'right-slide', " pr-1"),
+      onClick: event => onExpand(event, id, isExpanded)
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      style: searchVal ? {} : nameStyle,
+      title: name,
+      className: "text-truncate"
+    }, name)), isExpanded && hasChild && renderSubDepartments(id, subDepartments, newLevel));
   }
   function renderSearchedDepartments() {
     return validDepartmentsRef.current.map(department => {
@@ -122,36 +119,32 @@ function DepartmentMultipleSelect(props) {
     const subDepartments = departments.filter(department => department.parent_id !== -1);
     const topDepartment = departments.find(department => department.parent_id === -1);
     if (!topDepartment) return null;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       ref: departmentContainerRef,
       onClick: onStopPropagation,
       onMouseDown: onStopPropagation,
-      className: "dropdown-menu show departments-container dtable-ui ".concat(classNamePrefix),
-      children: [isShowSelectedDepartments && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "selected-departments dtable-ui",
-        onClick: onClick,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectedDepartments.default, {
-          value: value,
-          removeDepartment: onCommit,
-          isShowRemoveIcon: true,
-          departments: departments
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "search-departments",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-          className: "form-control",
-          type: "text",
-          autoFocus: true,
-          placeholder: (0, _lang.getLocale)('Search_department'),
-          value: searchVal,
-          onChange: onChangeSearch,
-          onClick: onClick
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "department-item-container",
-        children: [!searchVal && renderUserDepartmentOptions && renderUserDepartmentOptions(), validDepartmentsRef.current.length > 0 && searchVal && renderSearchedDepartments(), !searchVal && renderDepartment(topDepartment, subDepartments, level)]
-      })]
-    });
+      className: "dropdown-menu show departments-container dtable-ui ".concat(classNamePrefix)
+    }, isShowSelectedDepartments && /*#__PURE__*/_react.default.createElement("div", {
+      className: "selected-departments dtable-ui",
+      onClick: onClick
+    }, /*#__PURE__*/_react.default.createElement(_selectedDepartments.default, {
+      value: value,
+      removeDepartment: onCommit,
+      isShowRemoveIcon: true,
+      departments: departments
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-departments"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "form-control",
+      type: "text",
+      autoFocus: true,
+      placeholder: (0, _lang.getLocale)('Search_department'),
+      value: searchVal,
+      onChange: onChangeSearch,
+      onClick: onClick
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "department-item-container"
+    }, !searchVal && renderUserDepartmentOptions && renderUserDepartmentOptions(), validDepartmentsRef.current.length > 0 && searchVal && renderSearchedDepartments(), !searchVal && renderDepartment(topDepartment, subDepartments, level)));
   }
   return renderDepartments();
 }