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

package/lib/AutoNumberFormatter/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class AutoNumberFormatter extends _react.default.Component {
   render() {
     const {
@@ -15,9 +16,10 @@ class AutoNumberFormatter extends _react.default.Component {
       value
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, value);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: value
+    });
   }
 }
 AutoNumberFormatter.defaultProps = {

package/lib/ButtonFormatter/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");
 const WHITE = '#FFFFFF';
 class ButtonFormatter extends _react.default.Component {
   constructor() {
@@ -34,11 +35,14 @@ class ButtonFormatter extends _react.default.Component {
       borderColor: colorObj.BORDER_COLOR,
       color: colorObj.TEXT_COLOR === WHITE ? WHITE : '#666666'
     };
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-      className: (0, _classnames.default)('dtable-ui cell-formatter-container button-formatter', containerClassName),
-      style: btnStyle,
-      onClick: this.handleClick
-    }, button_name));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: (0, _classnames.default)('dtable-ui cell-formatter-container button-formatter', containerClassName),
+        style: btnStyle,
+        onClick: this.handleClick,
+        children: button_name
+      })
+    });
   }
 }
 var _default = exports.default = ButtonFormatter;

package/lib/CTimeFormatter/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class CTimeFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -25,9 +26,10 @@ class CTimeFormatter extends _react.default.Component {
     if (date) {
       date = this.formatDate(date);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, date);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: date
+    });
   }
 }
 CTimeFormatter.defaultProps = {

package/lib/CheckboxEditor/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class CheckboxEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -42,19 +43,21 @@ class CheckboxEditor extends _react.default.Component {
     let style = {
       cursor: isReadOnly ? 'default' : 'pointer'
     };
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-checkbox-editor",
-      style: style
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      type: "checkbox",
-      className: "raw-checkbox",
-      checked: value,
-      onChange: this.onChange
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "shown-checkbox"
-    }, value && /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-font dtable-icon-check-mark"
-    })));
+      style: style,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: "checkbox",
+        className: "raw-checkbox",
+        checked: value,
+        onChange: this.onChange
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "shown-checkbox",
+        children: value && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "dtable-font dtable-icon-check-mark"
+        })
+      })]
+    });
   }
 }
 CheckboxEditor.defaultProps = {

package/lib/CheckboxFormatter/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class CheckboxFormatter extends _react.default.PureComponent {
   render() {
     let {
@@ -17,11 +18,12 @@ class CheckboxFormatter extends _react.default.PureComponent {
     value = value === true ? true : false;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
     if (value) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classname
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "dtable-font dtable-icon-check-mark checkbox-checked-mark"
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classname,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "dtable-font dtable-icon-check-mark checkbox-checked-mark"
+        })
+      });
     }
     return null;
   }

package/lib/CollaboratorEditor/index.js

@@ -15,6 +15,7 @@ var _EditEditorButton = _interopRequireDefault(require("../EditEditorButton"));
 var _pcCollaboratorEditorPopover = _interopRequireDefault(require("./pc-collaborator-editor-popover"));
 var _mbCollaboratorEditorPopover = _interopRequireDefault(require("./mb-collaborator-editor-popover"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class CollaboratorEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -174,44 +175,52 @@ class CollaboratorEditor extends _react.default.Component {
     } = this.state;
     let selectedCollaborators = this.getFormattedCollaborators();
     let enableDeleteCollaborator = !isReadOnly;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: this.setEditorContainerRef,
-      className: "dtable-ui-collaborator-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: this.setEditorRef,
-      className: "dtable-ui-collaborator-editor-container ".concat(isShowEditButton ? '' : 'dtable-ui-collaborator-editor-container-no-btn'),
-      onClick: this.onClickContainer
-    }, isShowEditButton && /*#__PURE__*/_react.default.createElement(_EditEditorButton.default, {
-      text: (0, _lang.getLocale)('Add_a_collaborator'),
-      onClick: this.togglePopover
-    }), selectedCollaborators.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "collaborators-container ".concat(isShowEditButton ? 'mt-2' : '')
-    }, selectedCollaborators.map(collaborator => {
-      return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-        key: collaborator.email,
-        collaborator: collaborator,
-        enableDeleteCollaborator: enableDeleteCollaborator,
-        onDeleteCollaborator: this.onDeleteCollaborator
-      });
-    }))), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-      query: '(min-width: 768px)'
-    }, /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement(_pcCollaboratorEditorPopover.default, {
-      popoverPosition: popoverPosition,
-      isReadOnly: this.props.isReadOnly,
-      selectedCollaborators: selectedCollaborators,
-      collaborators: collaborators,
-      onCollaboratorItemToggle: this.onCollaboratorItemToggle,
-      setPopoverRef: this.setPopoverRef
-    }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-      query: '(max-width: 767.8px)'
-    }, /*#__PURE__*/_react.default.createElement(_mbCollaboratorEditorPopover.default, {
-      isReadOnly: this.props.isReadOnly,
-      value: this.state.newValue,
-      column: this.props.column,
-      collaborators: this.props.collaborators,
-      onCollaboratorItemToggle: this.onCollaboratorItemToggle,
-      onClosePopover: this.onClosePopover
-    }))));
+      className: "dtable-ui-collaborator-editor",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: this.setEditorRef,
+        className: "dtable-ui-collaborator-editor-container ".concat(isShowEditButton ? '' : 'dtable-ui-collaborator-editor-container-no-btn'),
+        onClick: this.onClickContainer,
+        children: [isShowEditButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditEditorButton.default, {
+          text: (0, _lang.getLocale)('Add_a_collaborator'),
+          onClick: this.togglePopover
+        }), selectedCollaborators.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "collaborators-container ".concat(isShowEditButton ? 'mt-2' : ''),
+          children: selectedCollaborators.map(collaborator => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
+              collaborator: collaborator,
+              enableDeleteCollaborator: enableDeleteCollaborator,
+              onDeleteCollaborator: this.onDeleteCollaborator
+            }, collaborator.email);
+          })
+        })]
+      }), isPopoverShow && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+          query: '(min-width: 768px)',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalPortal.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcCollaboratorEditorPopover.default, {
+              popoverPosition: popoverPosition,
+              isReadOnly: this.props.isReadOnly,
+              selectedCollaborators: selectedCollaborators,
+              collaborators: collaborators,
+              onCollaboratorItemToggle: this.onCollaboratorItemToggle,
+              setPopoverRef: this.setPopoverRef
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+          query: '(max-width: 767.8px)',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbCollaboratorEditorPopover.default, {
+            isReadOnly: this.props.isReadOnly,
+            value: this.state.newValue,
+            column: this.props.column,
+            collaborators: this.props.collaborators,
+            onCollaboratorItemToggle: this.onCollaboratorItemToggle,
+            onClosePopover: this.onClosePopover
+          })
+        })]
+      })]
+    });
   }
 }
 CollaboratorEditor.defaultProps = {

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

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _lang = require("../../lang");
 var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class MBCollaboratorEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -68,24 +69,27 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
       } = this.props;
       return collaborators.map((collaborator, index) => {
         let isSelect = value.some(item => item === collaborator.email);
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "mb-collaborator-option-item",
-          key: index,
-          onMouseDown: this.onSelectCollaborator.bind(this, collaborator)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "mb-collaborator-info"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "collaborator-avatar"
-        }, /*#__PURE__*/_react.default.createElement("img", {
-          src: collaborator.avatar_url,
-          width: "24",
-          height: "24",
-          alt: "avatar"
-        })), /*#__PURE__*/_react.default.createElement("span", {
-          className: "collaborator-name"
-        }, collaborator.name)), isSelect && /*#__PURE__*/_react.default.createElement("i", {
-          className: "mb-collaborator-checked dtable-font dtable-icon-check-mark"
-        }));
+          onMouseDown: this.onSelectCollaborator.bind(this, collaborator),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "mb-collaborator-info",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "collaborator-avatar",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: collaborator.avatar_url,
+                width: "24",
+                height: "24",
+                alt: "avatar"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "collaborator-name",
+              children: collaborator.name
+            })]
+          }), isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "mb-collaborator-checked dtable-font dtable-icon-check-mark"
+          })]
+        }, index);
       });
     };
     this.setEditorPopover = editorPopover => {
@@ -110,38 +114,47 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
       searchVal
     } = this.state;
     let filteredCollaborators = this.getFilteredCollaborators();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: this.setEditorPopover,
       className: "dtable-ui-mb-editor-popover mb-collaborator-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-collaborator-editor-body"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-search-collaborator-items"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      className: "form-control",
-      type: "text",
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
-      value: searchVal,
-      onChange: this.onChangeSearch,
-      onClick: this.onInputClick
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-collaborators-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "title"
-    }, (0, _lang.getLocale)('Choose_a_collaborator')), /*#__PURE__*/_react.default.createElement("div", {
-      className: "content"
-    }, filteredCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "search-result-none"
-    }, (0, _lang.getLocale)('No_collaborators_avaliable')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
+      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-collaborator-editor-body",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "mb-search-collaborator-items",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            className: "form-control",
+            type: "text",
+            placeholder: (0, _lang.getLocale)('Search_collaborator'),
+            value: searchVal,
+            onChange: this.onChangeSearch,
+            onClick: this.onInputClick
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "mb-collaborators-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "title",
+            children: (0, _lang.getLocale)('Choose_a_collaborator')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "content",
+            children: [filteredCollaborators.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "search-result-none",
+              children: (0, _lang.getLocale)('No_collaborators_avaliable')
+            }), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)]
+          })]
+        })]
+      })]
+    });
   }
 }
 MBCollaboratorEditorPopover.defaultProps = {

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

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _lang = require("../../lang");
 var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class PCCollaboratorEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -59,39 +60,44 @@ class PCCollaboratorEditorPopover extends _react.default.Component {
     }, {
       position: 'absolute'
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-editor-popover dtable-ui-collaborator-editor-popover",
       style: popoverStyle,
-      ref: this.props.setPopoverRef
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "collaborator-search-container"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      className: "form-control",
-      value: searchValue,
-      onChange: this.onValueChanged,
-      onClick: this.onInputClick,
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
-      ref: this.editorInputRef
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "collaborator-list-container"
-    }, collaborators.length > 0 && collaborators.map((collaborator, index) => {
-      const isSelect = selectedCollaborators.some(selectedCollaborator => {
-        return selectedCollaborator.email === collaborator.email;
-      });
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: index,
-        className: "collaborator-item-container",
-        onClick: this.onCollaboratorItemToggle.bind(this, collaborator)
-      }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-        collaborator: collaborator
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: "collaborator-checked"
-      }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-check-mark"
-      })));
-    }), collaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "no-search-result"
-    }, (0, _lang.getLocale)('No_collaborators_available'))));
+      ref: this.props.setPopoverRef,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "collaborator-search-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          className: "form-control",
+          value: searchValue,
+          onChange: this.onValueChanged,
+          onClick: this.onInputClick,
+          placeholder: (0, _lang.getLocale)('Search_collaborator'),
+          ref: this.editorInputRef
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "collaborator-list-container",
+        children: [collaborators.length > 0 && collaborators.map((collaborator, index) => {
+          const isSelect = selectedCollaborators.some(selectedCollaborator => {
+            return selectedCollaborator.email === collaborator.email;
+          });
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "collaborator-item-container",
+            onClick: this.onCollaboratorItemToggle.bind(this, collaborator),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
+              collaborator: collaborator
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "collaborator-checked",
+              children: isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "dtable-font dtable-icon-check-mark"
+              })
+            })]
+          }, index);
+        }), collaborators.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "no-search-result",
+          children: (0, _lang.getLocale)('No_collaborators_available')
+        })]
+      })]
+    });
   }
 }
 var _default = exports.default = PCCollaboratorEditorPopover;

package/lib/CollaboratorFormatter/index.js

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
 var _default_avatar = _interopRequireDefault(require("../assets/images/avatar/default_avatar.png"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 // there will be there conditions
 // 1 value is not exist, typeof value is array, but it's length is 0
 // 2 value is exist, but can't find in collaborators
@@ -36,12 +37,11 @@ class CollaboratorFormatter extends _react.default.PureComponent {
             avatar_url: _default_avatar.default
           };
         }
-        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-          key: index,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
           collaborator: collaborator,
           enableDeleteCollaborator: enableDeleteCollaborator,
           onDeleteCollaborator: onDeleteCollaborator
-        });
+        }, index);
       });
     };
   }
@@ -52,14 +52,15 @@ class CollaboratorFormatter extends _react.default.PureComponent {
     } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container collaborator-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: classname
       });
     }
     const collaborators = this.getCollaborators();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, collaborators);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: collaborators
+    });
   }
 }
 CollaboratorFormatter.defaultProps = {

package/lib/CollaboratorItem/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class CollaboratorItem extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -19,22 +20,26 @@ class CollaboratorItem extends _react.default.Component {
       collaborator,
       enableDeleteCollaborator
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui collaborator-item"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "collaborator-avatar"
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      className: "collaborator-avatar-icon",
-      alt: collaborator.name,
-      src: collaborator.avatar_url
-    })), /*#__PURE__*/_react.default.createElement("span", {
-      className: "collaborator-name"
-    }, collaborator.name), enableDeleteCollaborator && /*#__PURE__*/_react.default.createElement("span", {
-      className: "collaborator-remove",
-      onClick: this.onDeleteCollaborator
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-fork-number"
-    })));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "dtable-ui collaborator-item",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "collaborator-avatar",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          className: "collaborator-avatar-icon",
+          alt: collaborator.name,
+          src: collaborator.avatar_url
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "collaborator-name",
+        children: collaborator.name
+      }), enableDeleteCollaborator && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "collaborator-remove",
+        onClick: this.onDeleteCollaborator,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "dtable-font dtable-icon-fork-number"
+        })
+      })]
+    });
   }
 }
 CollaboratorItem.defaultProps = {

package/lib/CollapsibleSettingLayout/index.css

@@ -0,0 +1,22 @@
+.collapsible-setting-layout-header {
+  justify-content: space-between;
+  font-size: 14px;
+  color: #202428;
+}
+
+.collapsible-setting-layout-header:hover {
+  cursor: pointer;
+}
+
+.collapsible-setting-layout-header .dtable-font {
+  font-size: 10px;
+  color: #ccc;
+}
+
+.collapsible-setting-layout-header .dtable-font:hover {
+  color: #666;
+}
+
+.collapsible-setting-layout-header .dtable-font.dtable-icon-spin {
+  transform: rotate(90deg);
+}

package/lib/CollapsibleSettingLayout/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const CollapsibleSettingLayout = props => {
+  const {
+    className,
+    title,
+    children
+  } = props;
+  const [isShowSettings, setIsShowSettings] = (0, _react.useState)(true);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('collapsible-setting-layout', className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "collapsible-setting-layout-header w-100 d-flex align-items-center",
+      onClick: () => setIsShowSettings(!isShowSettings),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "collapsible-setting-layout-title",
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "dtable-font dtable-icon-right".concat(isShowSettings ? ' dtable-icon-spin' : '')
+      })]
+    }), isShowSettings && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "collapsible-setting-layout-body mt-3 pl-2",
+      children: children || ''
+    })]
+  });
+};
+var _default = exports.default = CollapsibleSettingLayout;