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

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/Comment/body/comment.js

@@ -10,6 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _seafileEditor = require("@seafile/seafile-editor");
 var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
+var _DTableDropdownMenu = _interopRequireDefault(require("../../DTableDropdownMenu"));
+var _DTableDropdownItem = _interopRequireDefault(require("../../DTableDropdownItem"));
 var _lang = require("../../lang");
 var _jsxRuntime = require("react/jsx-runtime");
 class Comment extends _react.PureComponent {
@@ -161,24 +163,20 @@ class Comment extends _react.PureComponent {
               title: moreOperationsText,
               "aria-label": moreOperationsText
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownMenu, {
-            className: "dtable-dropdown-menu dropdown-menu dtable-ui-comment-dropdown-list",
-            children: [!comment.resolved && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DTableDropdownMenu.default, {
+            className: "dtable-ui-comment-dropdown-list",
+            children: [!comment.resolved && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownItem.default, {
               onClick: event => onResolve(event, comment.id),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-icon dtable-font dtable-icon-mark mr-2"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-text",
-                children: (0, _lang.getLocale)('Mark_as_resolved')
-              })]
-            }), comment.author === username && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "comment-icon dtable-font dtable-icon-mark"
+              }),
+              content: (0, _lang.getLocale)('Mark_as_resolved')
+            }), comment.author === username && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownItem.default, {
               onClick: event => onDelete(event, comment.id),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-icon dtable-font dtable-icon-delete mr-2"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-text",
-                children: (0, _lang.getLocale)('Delete')
-              })]
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "comment-icon dtable-font dtable-icon-delete"
+              }),
+              content: (0, _lang.getLocale)('Delete')
             })]
           })]
         })]

package/lib/Comment/footer/participants/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../../DTableToolTip"));
 var _participant = _interopRequireDefault(require("./participant"));
 var _participantSelect = _interopRequireDefault(require("./participant-select"));
 var _lang = require("../../../lang");
@@ -50,11 +50,7 @@ class Participants extends _react.default.Component {
           "aria-hidden": "true",
           className: "dtable-font dtable-icon-add"
         })
-      }), this.addIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
-        delay: {
-          show: 0,
-          hide: 0
-        },
+      }), this.addIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
         target: this.addIcon,
         placement: "bottom",
         children: (0, _lang.getLocale)('Add_participants')

package/lib/Comment/footer/participants/participant/index.js

@@ -1,12 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../../../DTableToolTip"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const Participant = _ref => {
@@ -21,11 +22,7 @@ const Participant = _ref => {
       className: "avatar",
       ref: ref,
       alt: "avatar"
-    }), ref.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
-      delay: {
-        show: 0,
-        hide: 0
-      },
+    }), ref.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
       target: ref,
       placement: "bottom",
       children: participant.name

package/lib/Comment/footer/participants/participant-select/index.js

@@ -89,7 +89,7 @@ class ParticipantSelect extends _react.Component {
         return filteredParticipants.map(participant => {
           let selectedIndex = participants.findIndex(item => item.email === participant.email);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dropdown-item dtable-ui-participant-item",
+            className: "dtable-ui-participant-item",
             onClick: this.onSelectParticipant.bind(this, participant),
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "dtable-ui-participant-container",

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -72,7 +72,7 @@ function ColorPickerPortal(_ref) {
   }, [target, scrollContainerId, throttleDelay, updatePosition]);
   if (!target) return null;
   return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "dtable-color-picker-portal",
+    className: "dtable-color-picker-portal dtable-popover-container",
     style: {
       position: 'fixed',
       zIndex: '1049',

package/lib/DTableColorPicker/index.css

@@ -2,12 +2,10 @@
   width: 240px;
   height: 370px;
   background-color: #fff;
-  border-radius: 3px;
   z-index: 100;
   padding: 0.75rem;
   line-height: 16px;
   position: absolute;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 4px;
 }
 
 .dtable-color-picker .chrome-picker {

package/lib/DTableColorPicker/index.js

@@ -368,7 +368,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: popoverStyle,
       ref: colorPickerRef,
-      className: "dtable-color-picker",
+      className: "dtable-color-picker dtable-popover-container",
       children: [renderDefaultContainer(), renderCustomContainer(), renderUsedContainer()]
     })
   });

package/lib/DTableCommonAddTool/index.css

@@ -4,11 +4,9 @@
   height: 40px;
   font-size: 14px;
   font-weight: 500;
-  border-top: 1px solid #dedede;
+  border-top: 1px solid var(--bs-border-secondary-color);
   background: #fff;
   padding: 0 1rem;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
   position: relative;
 }
 

package/lib/DTableCustomFooter/index.css

@@ -4,9 +4,7 @@
   align-items: center;
   justify-content: flex-end;
   padding: 0.75rem;
-  border-top: 1px solid rgba(0, 40, 100, 0.12);
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border-top: 1px solid var(--bs-border-secondary-color) !important;
 }
 
 .dtable-custom-footer>* {

package/lib/DTableDropdownItem/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
+var _svgIcon = _interopRequireDefault(require("../DTableIcon/svg-icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+const DTableDropdownItem = _ref => {
+  let {
+    className,
+    divider,
+    id,
+    toggle,
+    disabled,
+    tooltip,
+    itemProps,
+    showChecked,
+    checked,
+    leftSlotContent,
+    rightSlotContent,
+    icon,
+    content,
+    onClick,
+    style,
+    tabIndex
+  } = _ref;
+  if (divider) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemProps), {}, {
+      divider: true,
+      className: className
+    }));
+  }
+  const renderedIcon = () => {
+    if (!icon || ! /*#__PURE__*/_react.default.isValidElement(icon)) return null;
+    return /*#__PURE__*/_react.default.cloneElement(icon, {
+      className: (0, _classnames.default)(icon.props.className, 'item-icon'),
+      'aria-hidden': 'true'
+    });
+  };
+  let customItemProps = (0, _objectSpread2.default)({}, itemProps);
+  if (typeof onClick === 'function') {
+    customItemProps.onClick = onClick;
+  }
+  if (typeof toggle === 'boolean') {
+    customItemProps.toggle = toggle;
+  }
+  if (style) {
+    customItemProps.style = style;
+  }
+  if (typeof tabIndex === 'number') {
+    customItemProps.tabIndex = tabIndex;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    className: className,
+    disabled: disabled,
+    id: id
+  }, customItemProps), {}, {
+    children: [(leftSlotContent || showChecked) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: "dtable-dropdown-item-left-slot",
+      children: [checked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcon.default, {
+        symbol: "check-mark",
+        className: "item-icon"
+      }), leftSlotContent || null]
+    }), renderedIcon(), typeof content === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "item-text text-truncate",
+      title: content,
+      "aria-label": content,
+      children: content
+    }), typeof content !== 'string' && (content || ''), rightSlotContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "dtable-dropdown-item-right-slot ml-2",
+      children: rightSlotContent
+    }), tooltip && id && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
+      target: id,
+      placement: "right",
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 8]
+        }
+      }],
+      children: tooltip
+    })]
+  }));
+};
+var _default = exports.default = DTableDropdownItem;

package/lib/DTableDropdownMenu/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+const DTableDropdownMenu = _ref => {
+  let {
+    id,
+    className,
+    container,
+    modifiers,
+    flip,
+    style,
+    menuProps,
+    children
+  } = _ref;
+  let customMenuProps = (0, _objectSpread2.default)({}, menuProps);
+  customMenuProps.modifiers = [{
+    name: 'preventOverflow',
+    options: {
+      boundary: document.body
+    }
+  }, ...((customMenuProps === null || customMenuProps === void 0 ? void 0 : customMenuProps.modifiers) || [])];
+  if (container) {
+    customMenuProps.container = container;
+  }
+  if (style) {
+    customMenuProps.style = style;
+  }
+  if (Array.isArray(modifiers)) {
+    customMenuProps.modifiers = modifiers;
+  }
+  if (typeof flip === 'boolean') {
+    customMenuProps.flip = flip;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownMenu, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    id: id,
+    className: (0, _classnames.default)('dtable-dropdown-menu', className)
+  }, customMenuProps), {}, {
+    children: children
+  }));
+};
+var _default = exports.default = DTableDropdownMenu;

package/lib/DTableFiltersPopover/index.css

@@ -29,8 +29,6 @@
   font-weight: 500;
   background: #fff;
   color: #666;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
   position: relative;
 }
 

package/lib/DTableFiltersPopover/index.js

@@ -162,28 +162,29 @@ var _jsxRuntime = require("react/jsx-runtime");
           addIconClassName: "popover-add-icon"
         }), isSupportAdvanced && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "add-buttons",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "btn-add-filter mr-4",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
+            className: "mr-4",
             onClick: canAddFilter ? () => this.addFilter() : () => {},
-            role: "button",
             tabIndex: 0,
             "aria-label": (0, _lang.getLocale)('Add_filter'),
+            color: "filled",
+            size: "middle",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-add-table popover-add-icon"
+              className: "dtable-font dtable-icon-add-table"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "add-new-option",
               children: (0, _lang.getLocale)('Add_filter')
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "btn-add-filter-group",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
             onClick: canAddFilter ? () => this.addFilterGroup() : () => {},
-            role: "button",
+            color: "filled",
+            size: "middle",
             tabIndex: 0,
             "aria-label": (0, _lang.getLocale)('Add_filter_group'),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-add-table popover-add-icon"
+              className: "dtable-font dtable-icon-add-table"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "add-new-option",
               children: (0, _lang.getLocale)('Add_filter_group')

package/lib/DTableFiltersPopover/widgets/filter-group.js

@@ -159,7 +159,7 @@ class FilterGroup extends _react.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level)),
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "delete-filter",
+        className: "delete-filter seatable-icon-btn",
         onClick: this.deleteFilterGroup,
         role: "button",
         tabIndex: 0,

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../DTableToolTip"));
 var _dtableUtils = require("dtable-utils");
 var _DTableCustomizeSelect = _interopRequireDefault(require("../../DTableCustomizeSelect"));
 var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
@@ -694,10 +694,9 @@ class FilterItem extends _react.default.Component {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           ref: this.invalidFilterTip,
           className: "dtable-font dtable-icon-exclamation-triangle invalid-filter"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
           target: this.invalidFilterTip,
           placement: "bottom",
-          fade: false,
           children: (0, _lang.getLocale)('Invalid_filter')
         })]
       });
@@ -765,7 +764,7 @@ class FilterItem extends _react.default.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "filter-item",
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "delete-filter",
+        className: "delete-filter seatable-icon-btn",
         onClick: this.onDeleteFilter,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
           className: "dtable-font dtable-icon-fork-number"
@@ -820,7 +819,7 @@ class FilterItem extends _react.default.Component {
               style: {
                 color: '#FFC92C'
               }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
               placement: "bottom",
               target: this.filterToolTip,
               children: (0, _lang.getLocale)('filter_tip_message')

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -289,8 +289,8 @@
 }
 
 .dtable-ui-filters-list .delete-filter {
-  width: 12px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   margin-right: 14px;
   text-align: center;
 }
@@ -301,8 +301,8 @@
 
 .dtable-ui-filters-list .delete-filter .dtable-icon-fork-number {
   display: inline-block;
-  font-size: 12px;
-  color: #999;
+  font-size: 16px;
+  color: var(--bs-icon-color);
 }
 
 .dtable-ui-filters-list .multiple-option-name {
@@ -388,7 +388,7 @@
 }
 
 .dtable-ui-filters-list .filter-item .dtable-icon-fork-number:hover {
-  color: #555555;
+  color: var(--bs-icon-color);
 }
 
 .dtable-ui-filters-list .filter-container-readonly .dtable-select .selected-option-show,

package/lib/DTableFiltersPopover/widgets/rate-item.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../DTableToolTip"));
 var _jsxRuntime = require("react/jsx-runtime");
 class RateItem extends _react.default.Component {
   constructor(props) {
@@ -71,7 +71,7 @@ class RateItem extends _react.default.Component {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "dtable-font ".concat(rateShowType),
         ref: this.tooltipRef
-      }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+      }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
         placement: "bottom",
         target: this.tooltipRef,
         children: rateItemIndex

package/lib/DTableModalHeader/index.css

@@ -1,22 +1,5 @@
-.modal-header .dtable-modal-close.close {
-  padding: 14px 16px;
-  opacity: 1;
-  margin: -1rem -1rem -1rem auto;
-  background-color: transparent;
-  border: 0;
-  float: right;
-  font-size: 1.40625rem;
-  font-weight: 700;
-  line-height: 1;
-  color: #000;
-}
-
-.modal-header .dtable-modal-close.close:not(:disabled):not(.disabled):hover {
-  opacity: 1;
-}
-
 .modal-header .dtable-modal-close .dtable-modal-close-inner {
-  width: 28px;
-  height: 28px;
-  font-size: 22.5px; /* same with Seafile close icon */
+  width: 24px;
+  height: 24px;
+  font-size: 16px; /* same with Seafile close icon */
 }

package/lib/DTablePopover/index.js

@@ -70,11 +70,12 @@ class DTablePopover extends _react.default.Component {
       fade: false,
       hideArrow: hideArrow,
       innerClassName: innerClassName,
-      className: popoverClassName,
+      className: "dtable-popove ".concat(popoverClassName),
       modifiers: modifiers,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: ref => this.dtablePopoverRef = ref,
         onClick: this.onPopoverInsideClick,
+        className: "dtable-popover-container",
         children: this.props.children
       })
     });

package/lib/DTableSelect/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = _interopRequireDefault(require("react-select"));
 var _utils = require("./utils");
@@ -28,8 +29,17 @@ class DTableSelect extends _react.default.Component {
       form,
       customFilterOption,
       autoFocus,
-      className
+      className,
+      closeMenuOnSelect,
+      onMenuClose,
+      components: userComponents
     } = this.props;
+    const mergedComponents = (0, _objectSpread2.default)({
+      Option: _utils.Option,
+      DropdownIndicator: _utils.DropdownIndicator,
+      MenuList: _utils.MenuList,
+      ClearIndicator: _utils.ClearIndicator
+    }, userComponents);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
       onChange: onChange,
@@ -38,12 +48,7 @@ class DTableSelect extends _react.default.Component {
       className: className,
       classNamePrefix: classNamePrefix,
       styles: style || _utils.MenuSelectStyle,
-      components: {
-        Option: _utils.Option,
-        DropdownIndicator: _utils.DropdownIndicator,
-        MenuList: _utils.MenuList,
-        ClearIndicator: _utils.ClearIndicator
-      },
+      components: mergedComponents,
       placeholder: placeholder,
       isSearchable: isSearchable,
       isClearable: isClearable,
@@ -52,6 +57,8 @@ class DTableSelect extends _react.default.Component {
       menuShouldScrollIntoView: true,
       menuPortalTarget: document.querySelector(this.props.menuPortalTarget),
       captureMenuScroll: false,
+      closeMenuOnSelect: closeMenuOnSelect,
+      onMenuClose: onMenuClose,
       hideSelectedOptions: false,
       noOptionsMessage: noOptionsMessage,
       isDisabled: isDisabled,
@@ -72,6 +79,7 @@ DTableSelect.defaultProps = {
   placeholder: '',
   isMulti: false,
   autoFocus: false,
+  closeMenuOnSelect: true,
   menuPortalTarget: '.modal',
   noOptionsMessage: () => {
     return null;

package/lib/DTableSubDropdownMenu/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _DTableDropdownMenu = _interopRequireDefault(require("../DTableDropdownMenu"));
+var _jsxRuntime = require("react/jsx-runtime");
+const DTableSubDropdownMenu = _ref => {
+  let {
+    id,
+    className,
+    container,
+    modifiers,
+    flip,
+    style,
+    menuProps,
+    children
+  } = _ref;
+  let customMenuProps = (0, _objectSpread2.default)({}, menuProps);
+  if (container) {
+    customMenuProps.container = container;
+  }
+  if (style) {
+    customMenuProps.style = style;
+  }
+  if (Array.isArray(modifiers)) {
+    customMenuProps.modifiers = modifiers;
+  }
+  if (typeof flip === 'boolean') {
+    customMenuProps.flip = flip;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownMenu.default, {
+    id: id,
+    className: (0, _classnames.default)('dtable-sub-dropdown-menu', className),
+    menuProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, customMenuProps), {}, {
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [-8, -1]
+        }
+      }, ...((customMenuProps === null || customMenuProps === void 0 ? void 0 : customMenuProps.modifiers) || [])]
+    }),
+    children: children
+  });
+};
+var _default = exports.default = DTableSubDropdownMenu;