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

package/lib/DTableSelect/utils.js

@@ -7,6 +7,7 @@ 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 {
@@ -37,12 +38,15 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
   indicatorSeparator: () => {}
 };
 const DropdownIndicator = props => {
-  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'
-    }
-  }));
+  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'
+      }
+    })
+  });
 };
 exports.DropdownIndicator = DropdownIndicator;
 const ClearIndicator = _ref => {
@@ -58,17 +62,26 @@ const ClearIndicator = _ref => {
     ...innerProps,
     onMouseDown
   };
-  return /*#__PURE__*/_react.default.createElement(_reactSelect.components.ClearIndicator, props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.ClearIndicator, {
+    ...props
+  });
 };
 exports.ClearIndicator = ClearIndicator;
-const MenuList = props => /*#__PURE__*/_react.default.createElement("div", {
+const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
   onClick: e => e.nativeEvent.stopImmediatePropagation(),
-  onMouseDown: e => e.nativeEvent.stopImmediatePropagation()
-}, /*#__PURE__*/_react.default.createElement(_reactSelect.components.MenuList, props, props.children));
+  onMouseDown: e => e.nativeEvent.stopImmediatePropagation(),
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.MenuList, {
+    ...props,
+    children: props.children
+  })
+});
 exports.MenuList = MenuList;
 const Option = props => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: props.data.style
-  }, /*#__PURE__*/_react.default.createElement(_reactSelect.components.Option, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: props.data.style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, {
+      ...props
+    })
+  });
 };
 exports.Option = Option;

package/lib/DTableSwitch/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 function DtableSwitch(props) {
   const {
     onChange,
@@ -14,21 +15,24 @@ function DtableSwitch(props) {
     disabled,
     switchClassName
   } = props;
-  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"
-  })));
+  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"
+      })]
+    })
+  });
 }
 var _default = exports.default = DtableSwitch;

package/lib/DateEditor/index.js

@@ -15,6 +15,7 @@ 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);
@@ -85,13 +86,15 @@ class DateEditor extends _react.default.Component {
   }
   render() {
     if (!this.state.isDateInit) {
-      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"
-      })));
+      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"
+          })
+        })
+      });
     }
     let {
       lang,
@@ -104,35 +107,42 @@ class DateEditor extends _react.default.Component {
       dateFormat,
       showHourAndMinute
     } = this.state;
-    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
-    }))));
+    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
+          })
+        })]
+      })]
+    });
   }
 }
 DateEditor.defaultProps = {

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

@@ -17,6 +17,7 @@ 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);
@@ -97,7 +98,7 @@ class DateEditorPopover extends _react.default.PureComponent {
         className
       } = this.props;
       let defaultValue = (0, _dayjs.default)().clone();
-      return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileCalendar.default, {
         className: (0, _classnames.default)('dtable-rc-calendar', className),
         locale: (0, _editorUtils.initDateEditorLanguage)(lang),
         format: dateFormat,
@@ -121,7 +122,7 @@ class DateEditorPopover extends _react.default.PureComponent {
         datePickerValue
       } = this.state;
       let calendar = this.getCalender();
-      return /*#__PURE__*/_react.default.createElement(SeaDatePicker, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(SeaDatePicker, {
         open: true,
         style: {
           width: '100%'
@@ -129,27 +130,29 @@ class DateEditorPopover extends _react.default.PureComponent {
         calendar: calendar,
         value: datePickerValue,
         getCalendarContainer: this.getCalendarContainer,
-        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'
-          }
-        }));
+        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'
+              }
+            })]
+          });
+        }
       });
     };
     this.state = {
@@ -177,48 +180,62 @@ class DateEditorPopover extends _react.default.PureComponent {
     const {
       datePickerValue
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: this.setEditorPopover,
       className: "dtable-ui-mb-editor-popover mb-date-editor-popover",
-      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')))));
+      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')
+          })
+        })]
+      })]
+    });
   }
 }
 var _default = exports.default = DateEditorPopover;

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

@@ -13,6 +13,7 @@ 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);
@@ -59,7 +60,7 @@ class PCDateEditorPopover extends _react.default.Component {
         className
       } = this.props;
       let defaultValue = (0, _dayjs.default)().clone();
-      return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileCalendar.default, {
         className: (0, _classnames.default)('dtable-rc-calendar', className),
         locale: (0, _editorUtils.initDateEditorLanguage)(lang),
         style: {
@@ -89,7 +90,7 @@ class PCDateEditorPopover extends _react.default.Component {
       datePickerValue
     } = this.state;
     const calendar = this.getCalender();
-    return /*#__PURE__*/_react.default.createElement(_Picker.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
       open: open,
       value: datePickerValue,
       animation: "slide-up",
@@ -99,26 +100,28 @@ class PCDateEditorPopover extends _react.default.Component {
       calendar: calendar,
       getCalendarContainer: this.getCalendarContainer,
       onChange: this.onChange,
-      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
-      }));
+      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
+          })]
+        });
+      }
     });
   }
 }

package/lib/DateFormatter/index.js

@@ -9,6 +9,7 @@ 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 {
@@ -20,9 +21,10 @@ class DateFormatter extends _react.default.Component {
     if (date !== '') {
       date = (0, _dtableUtils.getDateDisplayString)(date, format);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, date);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: date
+    });
   }
 }
 DateFormatter.defaultProps = {

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

@@ -11,6 +11,7 @@ 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,
@@ -89,25 +90,27 @@ function DepartmentMultipleSelect(props) {
       paddingLeft: hasChild ? '' : '16px'
     };
     const inputChecked = value.includes(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));
+    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);
   }
   function renderSearchedDepartments() {
     return validDepartmentsRef.current.map(department => {
@@ -119,32 +122,36 @@ 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__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: departmentContainerRef,
       onClick: onStopPropagation,
       onMouseDown: onStopPropagation,
-      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)));
+      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)]
+      })]
+    });
   }
   return renderDepartments();
 }