dtable-ui-component 6.0.1140-oal.3 → 7.0.0

package/lib/ActionSheet/index.js

@@ -28,13 +28,12 @@ function createActionSheet(flag, config, callback) {
     prefixCls: 'am-action-sheet',
     cancelButtonText: '取消'
   }, config);
-  const {
-    prefixCls,
-    className,
-    transitionName,
-    maskTransitionName,
-    maskClosable = true
-  } = props;
+  const prefixCls = props.prefixCls,
+    className = props.className,
+    transitionName = props.transitionName,
+    maskTransitionName = props.maskTransitionName,
+    _props$maskClosable = props.maskClosable,
+    maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable;
   const div = document.createElement('div');
   document.body.appendChild(div);
   const root = (0, _client.createRoot)(div);
@@ -62,15 +61,14 @@ function createActionSheet(flag, config, callback) {
       close();
     }
   }
-  const {
-    title,
-    message,
-    options,
-    destructiveButtonIndex,
-    cancelButtonIndex,
-    cancelButtonText,
-    badges = []
-  } = props;
+  const title = props.title,
+    message = props.message,
+    options = props.options,
+    destructiveButtonIndex = props.destructiveButtonIndex,
+    cancelButtonIndex = props.cancelButtonIndex,
+    cancelButtonText = props.cancelButtonText,
+    _props$badges = props.badges,
+    badges = _props$badges === void 0 ? [] : _props$badges;
   const titleMsg = [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
     className: "".concat(prefixCls, "-title"),
     children: title

package/lib/ActivityIndicator/index.js

@@ -14,14 +14,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 class ActivityIndicator extends React.Component {
   render() {
-    const {
-      prefixCls,
-      className,
-      animating,
-      toast,
-      size,
-      text
-    } = this.props;
+    const _this$props = this.props,
+      prefixCls = _this$props.prefixCls,
+      className = _this$props.className,
+      animating = _this$props.animating,
+      toast = _this$props.toast,
+      size = _this$props.size,
+      text = _this$props.text;
     const wrapClass = (0, _classnames.default)(prefixCls, className, {
       ["".concat(prefixCls, "-lg")]: size === 'large',
       ["".concat(prefixCls, "-sm")]: size === 'small',

package/lib/AsyncUserSelect/index.css

@@ -12,6 +12,11 @@
 .dtable-ui-user-select-popover .popover {
   width: 385px;
   max-width: 385px;
+  background: var(--bs-popover-bg);
+	border: 1px solid var(--bs-border-secondary-color);
+	border-radius: 4px;
+	box-shadow: var(--bs-border-secondary-shadow);
+  margin-top: -4px;
 }
 
 .dtable-ui-user-select-container {

package/lib/AsyncUserSelect/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactstrap = require("reactstrap");
@@ -16,22 +17,43 @@ var _keyCodes = _interopRequireDefault(require("../constants/key-codes"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const AsyncUserSelect = _ref => {
-  let {
-    className,
-    emptyPlaceholder = '',
-    searchPlaceholder = '',
-    isMulti = true,
-    enableShowIDInOrgWhenSearchUser = false,
-    selectedUsers = [],
-    loadOptions,
-    modifySelectedUsers
-  } = _ref;
-  const [isPopoverOpen, setIsPopoverOpen] = (0, _react.useState)(false);
-  const [searchValue, setSearchValue] = (0, _react.useState)('');
-  const [searchedUsers, setSearchedUsers] = (0, _react.useState)([]);
-  const [highlightIndex, setHighlightIndex] = (0, _react.useState)(-1);
-  const [maxItemNum, setMaxItemNum] = (0, _react.useState)(0);
-  const [itemHeight, setItemHeight] = (0, _react.useState)(0);
+  let className = _ref.className,
+    _ref$emptyPlaceholder = _ref.emptyPlaceholder,
+    emptyPlaceholder = _ref$emptyPlaceholder === void 0 ? '' : _ref$emptyPlaceholder,
+    _ref$searchPlaceholde = _ref.searchPlaceholder,
+    searchPlaceholder = _ref$searchPlaceholde === void 0 ? '' : _ref$searchPlaceholde,
+    _ref$isMulti = _ref.isMulti,
+    isMulti = _ref$isMulti === void 0 ? true : _ref$isMulti,
+    _ref$enableShowIDInOr = _ref.enableShowIDInOrgWhenSearchUser,
+    enableShowIDInOrgWhenSearchUser = _ref$enableShowIDInOr === void 0 ? false : _ref$enableShowIDInOr,
+    _ref$selectedUsers = _ref.selectedUsers,
+    selectedUsers = _ref$selectedUsers === void 0 ? [] : _ref$selectedUsers,
+    loadOptions = _ref.loadOptions,
+    modifySelectedUsers = _ref.modifySelectedUsers;
+  const _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  const _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
+  const _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    searchedUsers = _useState6[0],
+    setSearchedUsers = _useState6[1];
+  const _useState7 = (0, _react.useState)(-1),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    highlightIndex = _useState8[0],
+    setHighlightIndex = _useState8[1];
+  const _useState9 = (0, _react.useState)(0),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    maxItemNum = _useState0[0],
+    setMaxItemNum = _useState0[1];
+  const _useState1 = (0, _react.useState)(0),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    itemHeight = _useState10[0],
+    setItemHeight = _useState10[1];
   const selectorRef = (0, _react.useRef)(null);
   const userSelectContainerRef = (0, _react.useRef)(null);
   const userListContainerRef = (0, _react.useRef)(null);
@@ -165,9 +187,8 @@ const AsyncUserSelect = _ref => {
   }, [onEnter, onUpArrow, onDownArrow, onEsc]);
   (0, _react.useEffect)(() => {
     if (userSelectContainerRef.current) {
-      const {
-        bottom
-      } = userSelectContainerRef.current.getBoundingClientRect();
+      const _userSelectContainerR = userSelectContainerRef.current.getBoundingClientRect(),
+        bottom = _userSelectContainerR.bottom;
       if (bottom > window.innerHeight) {
         userSelectContainerRef.current.style.top = "".concat(window.innerHeight - bottom, "px");
       }

package/lib/AsyncUserSelect/user-item.js

@@ -10,12 +10,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _lang = require("../lang");
 var _jsxRuntime = require("react/jsx-runtime");
 const UserItem = _ref => {
-  let {
-    className,
-    user,
-    deleteUser,
-    enableShowIDInOrgWhenSearchUser = false
-  } = _ref;
+  let className = _ref.className,
+    user = _ref.user,
+    deleteUser = _ref.deleteUser,
+    _ref$enableShowIDInOr = _ref.enableShowIDInOrgWhenSearchUser,
+    enableShowIDInOrgWhenSearchUser = _ref$enableShowIDInOr === void 0 ? false : _ref$enableShowIDInOr;
   const name = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.name) || '', [user]);
   const avatarUrl = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.avatar_url) || '', [user]);
   const idInOrg = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.id_in_org) || '', [user]);

package/lib/AutoNumberFormatter/index.js

@@ -11,10 +11,9 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class AutoNumberFormatter extends _react.default.Component {
   render() {
-    const {
-      containerClassName,
-      value
-    } = this.props;
+    const _this$props = this.props,
+      containerClassName = _this$props.containerClassName,
+      value = _this$props.value;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: value,

package/lib/Badge/index.js

@@ -17,17 +17,15 @@ class Badge extends React.Component {
   render() {
     // tslint:disable:prefer-const
     let _this$props = this.props,
-      {
-        className,
-        prefixCls,
-        children,
-        text,
-        size,
-        overflowCount,
-        dot,
-        corner,
-        hot
-      } = _this$props,
+      className = _this$props.className,
+      prefixCls = _this$props.prefixCls,
+      children = _this$props.children,
+      text = _this$props.text,
+      size = _this$props.size,
+      overflowCount = _this$props.overflowCount,
+      dot = _this$props.dot,
+      corner = _this$props.corner,
+      hot = _this$props.hot,
       restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     // eslint-disable-next-line no-self-assign
     overflowCount = overflowCount;

package/lib/ButtonFormatter/index.js

@@ -21,14 +21,12 @@ class ButtonFormatter extends _react.default.Component {
     };
   }
   render() {
-    let {
-      data,
-      containerClassName
-    } = this.props;
-    const {
-      button_color,
-      button_name
-    } = data || {};
+    let _this$props = this.props,
+      data = _this$props.data,
+      containerClassName = _this$props.containerClassName;
+    const _ref = data || {},
+      button_color = _ref.button_color,
+      button_name = _ref.button_name;
     const colorObj = _dtableUtils.SELECT_OPTION_COLORS.find(item => item.COLOR === button_color) || _dtableUtils.SELECT_OPTION_COLORS[0];
     const color = colorObj.TEXT_COLOR === WHITE ? WHITE : '#666666';
     const btnStyle = {

package/lib/CTimeFormatter/index.js

@@ -18,10 +18,9 @@ class CTimeFormatter extends _react.default.Component {
     };
   }
   render() {
-    let {
-      value: date,
-      containerClassName
-    } = this.props;
+    let _this$props = this.props,
+      date = _this$props.value,
+      containerClassName = _this$props.containerClassName;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
     if (date) {
       date = this.formatDate(date);

package/lib/CheckboxEditor/index.js

@@ -16,9 +16,7 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["isMobile"];
 const CheckboxEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-      isMobile
-    } = _ref,
+  let isMobile = _ref.isMobile,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     ref: ref

package/lib/CheckboxEditor/mb-editor.js

@@ -15,9 +15,7 @@ class MBCheckboxEditor extends _react.Component {
   constructor(props) {
     super(props);
     this.getValue = () => {
-      const {
-        value
-      } = this.state;
+      const value = this.state.value;
       return value;
     };
     this.updateValue = value => {
@@ -29,18 +27,14 @@ class MBCheckboxEditor extends _react.Component {
       });
     };
     this.onChangeCheckboxValue = event => {
-      const {
-        readOnly
-      } = this.props;
+      const readOnly = this.props.readOnly;
       if (readOnly) return;
       if (event) {
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();
         event.persist();
       }
-      const {
-        value
-      } = this.state;
+      const value = this.state.value;
       const newValue = !value;
       this.setState({
         value: newValue
@@ -63,9 +57,7 @@ class MBCheckboxEditor extends _react.Component {
     };
   }
   componentDidUpdate(prevProps) {
-    const {
-      value
-    } = this.props;
+    const value = this.props.value;
     if (value !== prevProps.value) {
       this.setState({
         value
@@ -74,14 +66,11 @@ class MBCheckboxEditor extends _react.Component {
   }
   render() {
     var _column$data;
-    const {
-      className,
-      style,
-      column
-    } = this.props;
-    const {
-      value
-    } = this.state;
+    const _this$props = this.props,
+      className = _this$props.className,
+      style = _this$props.style,
+      column = _this$props.column;
+    const value = this.state.value;
     let checkboxStyle = column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.checkbox_style;
     if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
       checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;

package/lib/CheckboxEditor/pc-editor.js

@@ -15,10 +15,9 @@ class PCCheckboxEditor extends _react.Component {
   constructor(props) {
     super(props);
     this.onKeyDown = event => {
-      const {
-        isEditorShow,
-        readOnly
-      } = this.props;
+      const _this$props = this.props,
+        isEditorShow = _this$props.isEditorShow,
+        readOnly = _this$props.readOnly;
       if (event.keyCode === _constants.KeyCodes.Enter && isEditorShow && !readOnly) {
         this.setState({
           value: !this.state.value
@@ -26,9 +25,7 @@ class PCCheckboxEditor extends _react.Component {
       }
     };
     this.getValue = () => {
-      const {
-        value
-      } = this.state;
+      const value = this.state.value;
       return value;
     };
     this.updateValue = value => {
@@ -40,18 +37,14 @@ class PCCheckboxEditor extends _react.Component {
       });
     };
     this.onChangeCheckboxValue = event => {
-      const {
-        readOnly
-      } = this.props;
+      const readOnly = this.props.readOnly;
       if (readOnly) return;
       if (event) {
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();
         event.persist();
       }
-      const {
-        value
-      } = this.state;
+      const value = this.state.value;
       const newValue = !value;
       this.setState({
         value: newValue
@@ -82,9 +75,7 @@ class PCCheckboxEditor extends _react.Component {
     document.removeEventListener('keydown', this.onKeyDown);
   }
   componentDidUpdate(prevProps) {
-    const {
-      value
-    } = this.props;
+    const value = this.props.value;
     if (value !== prevProps.value) {
       this.setState({
         value
@@ -93,14 +84,11 @@ class PCCheckboxEditor extends _react.Component {
   }
   render() {
     var _column$data;
-    const {
-      className,
-      style,
-      column
-    } = this.props;
-    const {
-      value
-    } = this.state;
+    const _this$props2 = this.props,
+      className = _this$props2.className,
+      style = _this$props2.style,
+      column = _this$props2.column;
+    const value = this.state.value;
     let checkboxStyle = column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.checkbox_style;
     if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
       checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;

package/lib/CheckboxFormatter/index.js

@@ -26,11 +26,10 @@ class CheckboxFormatter extends _react.default.PureComponent {
     };
   }
   render() {
-    let {
-      value,
-      containerClassName,
-      checkboxStyle
-    } = this.props;
+    let _this$props = this.props,
+      value = _this$props.value,
+      containerClassName = _this$props.containerClassName,
+      checkboxStyle = _this$props.checkboxStyle;
     if (!checkboxStyle || !('type' in checkboxStyle && 'color' in checkboxStyle)) {
       checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;
     }

package/lib/CollaboratorEditor/index.js

@@ -16,10 +16,8 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["isMobile", "value"];
 const CollaboratorEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-      isMobile,
-      value: oldValue
-    } = _ref,
+  let isMobile = _ref.isMobile,
+    oldValue = _ref.value,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const value = Array.isArray(oldValue) ? oldValue : [];
   if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {

package/lib/CollaboratorEditor/mb-editor/index.js

@@ -12,12 +12,10 @@ var _lang = require("../../lang");
 var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const {
-  Search,
-  Option,
-  Options,
-  Empty
-} = _MobileSelector.default;
+const Search = _MobileSelector.default.Search,
+  Option = _MobileSelector.default.Option,
+  Options = _MobileSelector.default.Options,
+  Empty = _MobileSelector.default.Empty;
 class MBCollaboratorEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -26,9 +24,7 @@ class MBCollaboratorEditor extends _react.default.Component {
       this.props.onClose();
     };
     this.onChangeSearch = newValue => {
-      let {
-        searchVal
-      } = this.state;
+      let searchVal = this.state.searchVal;
       if (searchVal === newValue) return;
       this.setState({
         searchVal: newValue
@@ -38,9 +34,8 @@ class MBCollaboratorEditor extends _react.default.Component {
       this.props.onCommit(collaborator);
     };
     this.renderCollaborators = collaborators => {
-      const {
-        value = []
-      } = this.props;
+      const _this$props$value = this.props.value,
+        value = _this$props$value === void 0 ? [] : _this$props$value;
       return collaborators.map(collaborator => {
         const isSelected = value.includes(collaborator.email);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
@@ -64,13 +59,10 @@ class MBCollaboratorEditor extends _react.default.Component {
     window.removeEventListener('popstate', this.handleHistoryBack, false);
   }
   render() {
-    const {
-      column,
-      collaborators
-    } = this.props;
-    const {
-      searchVal
-    } = this.state;
+    const _this$props = this.props,
+      column = _this$props.column,
+      collaborators = _this$props.collaborators;
+    const searchVal = this.state.searchVal;
     const displayCollaborators = searchVal ? (0, _dtableUtils.searchCollaborators)(collaborators, searchVal) : collaborators;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MobileSelector.default, {
       onClose: this.props.onClose,

package/lib/CollaboratorEditor/pc-editor/index.js

@@ -21,9 +21,7 @@ class PCCollaboratorEditor extends _react.default.Component {
     super(props);
     this.onValueChanged = newSearchValue => {
       if (newSearchValue === this.state.searchValue) return;
-      const {
-        collaborators
-      } = this.props;
+      const collaborators = this.props.collaborators;
       this.filteredCollaborators = (0, _dtableUtils.searchCollaborators)(collaborators, newSearchValue);
       this.setState({
         highlightIndex: this.filteredCollaborators.length > 0 ? 0 : -1,
@@ -34,9 +32,7 @@ class PCCollaboratorEditor extends _react.default.Component {
       this.props.onCommit(collaborator);
     };
     this.getFilterCollaborator = () => {
-      const {
-        collaborators
-      } = this.props;
+      const collaborators = this.props.collaborators;
       const searchValue = this.state.searchValue.toLowerCase();
       if (!searchValue) return collaborators;
       return (0, _dtableUtils.searchCollaborators)(collaborators, searchValue);
@@ -77,11 +73,10 @@ class PCCollaboratorEditor extends _react.default.Component {
     this.onUpArrow = e => {
       e.preventDefault();
       e.stopPropagation();
-      let {
-        highlightIndex,
-        maxItemNum,
-        itemHeight
-      } = this.state;
+      let _this$state = this.state,
+        highlightIndex = _this$state.highlightIndex,
+        maxItemNum = _this$state.maxItemNum,
+        itemHeight = _this$state.itemHeight;
       if (highlightIndex > 0) {
         this.setState({
           highlightIndex: highlightIndex - 1
@@ -101,11 +96,10 @@ class PCCollaboratorEditor extends _react.default.Component {
     this.onDownArrow = e => {
       e.preventDefault();
       e.stopPropagation();
-      let {
-        highlightIndex,
-        maxItemNum,
-        itemHeight
-      } = this.state;
+      let _this$state2 = this.state,
+        highlightIndex = _this$state2.highlightIndex,
+        maxItemNum = _this$state2.maxItemNum,
+        itemHeight = _this$state2.itemHeight;
       if (highlightIndex < this.filteredCollaborators.length - 1) {
         this.setState({
           highlightIndex: highlightIndex + 1
@@ -125,12 +119,11 @@ class PCCollaboratorEditor extends _react.default.Component {
     this.onEsc = e => {
       e.preventDefault();
       e.stopPropagation();
-      const {
-        isInModal,
-        value,
-        onCommitCancel,
-        onClose
-      } = this.props;
+      const _this$props = this.props,
+        isInModal = _this$props.isInModal,
+        value = _this$props.value,
+        onCommitCancel = _this$props.onCommitCancel,
+        onClose = _this$props.onClose;
       if (isInModal) {
         onClose && onClose();
         return;
@@ -172,9 +165,8 @@ class PCCollaboratorEditor extends _react.default.Component {
       }
     }
     if (!this.props.isInModal && this.ref) {
-      const {
-        bottom
-      } = this.ref.getBoundingClientRect();
+      const _this$ref$getBounding = this.ref.getBoundingClientRect(),
+        bottom = _this$ref$getBounding.bottom;
       if (bottom > window.innerHeight) {
         this.ref.style.top = "".concat(window.innerHeight - bottom, "px");
       }
@@ -198,15 +190,14 @@ class PCCollaboratorEditor extends _react.default.Component {
     document.removeEventListener('keydown', this.onHotKey, true);
   }
   render() {
-    const {
-      searchValue,
-      highlightIndex
-    } = this.state;
-    const {
-      isInModal,
-      value = [],
-      target
-    } = this.props;
+    const _this$state3 = this.state,
+      searchValue = _this$state3.searchValue,
+      highlightIndex = _this$state3.highlightIndex;
+    const _this$props2 = this.props,
+      isInModal = _this$props2.isInModal,
+      _this$props2$value = _this$props2.value,
+      value = _this$props2$value === void 0 ? [] : _this$props2$value,
+      target = _this$props2.target;
     const dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-editor-container dtable-ui-collaborator-editor-container",
       ref: ref => this.ref = ref,

package/lib/CollaboratorFormatter/index.js

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

package/lib/CollaboratorItem/index.js

@@ -19,11 +19,10 @@ class CollaboratorItem extends _react.default.Component {
     };
   }
   render() {
-    const {
-      className,
-      collaborator,
-      enableDeleteCollaborator
-    } = this.props;
+    const _this$props = this.props,
+      className = _this$props.className,
+      collaborator = _this$props.collaborator,
+      enableDeleteCollaborator = _this$props.enableDeleteCollaborator;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       title: collaborator.name,
       className: (0, _classnames.default)('dtable-ui collaborator-item', className),