dtable-ui-component 7.0.0 → 7.0.1-beta.2

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

@@ -91,9 +91,9 @@ class FilterItemUtils {
       value: {
         columnOption: option
       },
-      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "select-option-name single-select-option-name",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "single-select-option",
           style: {
             background: option.color,
@@ -102,23 +102,16 @@ class FilterItemUtils {
           title: option.name,
           "aria-label": option.name,
           children: option.name
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "single-select-check-icon",
-          children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
-          })
-        })]
+        })
       })
     };
   }
   static generatorMultipleSelectOption(option, filterTerm) {
     return {
-      value: {
-        columnOption: option
-      },
-      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      value: option,
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "select-option-name multiple-option-name",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "multiple-select-option",
           style: {
             background: option.color,
@@ -127,12 +120,7 @@ class FilterItemUtils {
           title: option.name,
           "aria-label": option.name,
           children: option.name
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "multiple-check-icon",
-          children: filterTerm.indexOf(option.id) > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
-          })
-        })]
+        })
       })
     };
   }

package/lib/DTableFiltersPopover/widgets/collaborator-filter/index.js

@@ -16,16 +16,15 @@ class CollaboratorFilter extends _react.Component {
     super(props);
     this.createCollaboratorOptions = (filterIndex, collaborators, filterTerm) => {
       return collaborators.map(collaborator => {
-        let isSelected = filterTerm.findIndex(item => item === collaborator.email) > -1;
         return {
           value: {
             filterIndex,
             columnOption: collaborator
           },
           label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "select-option-name option-collaborator",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "collaborator-container",
                 children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                   className: "collaborator",
@@ -46,12 +45,7 @@ class CollaboratorFilter extends _react.Component {
                     children: collaborator.name
                   })]
                 })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "collaborator-check-icon",
-                children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                  className: "option-edit dtable-font dtable-icon-check-mark"
-                })
-              })]
+              })
             })
           })
         };
@@ -106,7 +100,9 @@ class CollaboratorFilter extends _react.Component {
         })]
       }, item);
     });
+    let selectCollaborators = Array.isArray(filterTerm) && filterTerm.length > 0 ? collaborators.filter(col => filterTerm.includes(col.email)) : [];
     let value = selectedCollaborators ? {
+      value: selectCollaborators,
       label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: selectedCollaborators
       })

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

@@ -128,8 +128,7 @@ class FilterItem extends _react.default.Component {
       const _this$props5 = this.props,
         index = _this$props5.index,
         filter = _this$props5.filter;
-      const option = value.columnOption;
-      let newFilter = (0, _utils.getUpdatedFilterBySelectMultiple)(filter, option);
+      let newFilter = (0, _utils.getUpdatedFilterBySelectMultiple)(filter, value);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
@@ -137,8 +136,7 @@ class FilterItem extends _react.default.Component {
       const _this$props6 = this.props,
         index = _this$props6.index,
         filter = _this$props6.filter;
-      const collaborator = value.columnOption;
-      let newFilter = (0, _utils.getUpdatedFilterByCollaborator)(filter, collaborator);
+      let newFilter = (0, _utils.getUpdatedFilterByCollaborator)(filter, value);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
@@ -146,7 +144,10 @@ class FilterItem extends _react.default.Component {
       const _this$props7 = this.props,
         index = _this$props7.index,
         filter = _this$props7.filter;
-      const collaborator = value.columnOption;
+      const collaborator = value && (value.columnOption || value.value || value);
+      if (!collaborator || !collaborator.email) {
+        return;
+      }
       let newFilter = (0, _utils.getUpdatedFilterByCreator)(filter, collaborator);
       // the predicate is 'is' or 'is not'
       if (!newFilter) {
@@ -294,11 +295,12 @@ class FilterItem extends _react.default.Component {
       }
       const className = 'select-option-name multiple-select-option';
       let labelArray = [];
+      let valueArray = [];
       if (Array.isArray(options) && Array.isArray(filterTerm)) {
         filterTerm.forEach(item => {
           let inOption = options.find(option => option.id === item);
           let optionStyle = {
-            margin: '0 10px 0 0'
+            margin: '0 4px 0 0'
           };
           let optionName = null;
           if (inOption) {
@@ -309,6 +311,7 @@ class FilterItem extends _react.default.Component {
             optionStyle.background = _constants.DELETED_OPTION_BACKGROUND_COLOR;
             optionName = (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS);
           }
+          valueArray.push(inOption);
           labelArray.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: className,
             style: optionStyle,
@@ -319,6 +322,7 @@ class FilterItem extends _react.default.Component {
         });
       }
       const selectedOptionNames = labelArray.length > 0 ? {
+        value: valueArray,
         label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
           children: labelArray
         })
@@ -425,6 +429,9 @@ class FilterItem extends _react.default.Component {
                 color: selectedOption.textColor || null
               };
               selectedOptionName = {
+                value: {
+                  columnOption: selectedOption
+                },
                 label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: className,
                   style: style,
@@ -507,7 +514,8 @@ class FilterItem extends _react.default.Component {
               collaborators: creators,
               onSelectCollaborator: this.onSelectCreator,
               isInModal: this.props.isInModal,
-              readOnly: readOnly
+              readOnly: readOnly,
+              filter_predicate: filter_predicate
             });
           }
         case _dtableUtils.CellType.RATE:

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

@@ -333,7 +333,7 @@
   display: inline-flex;
   align-items: center;
   height: 20px;
-  margin-right: 10px;
+  margin-right: 4px;
   padding: 0 8px 0 2px;
   font-size: 13px;
   border-radius: 10px;
@@ -412,14 +412,14 @@
 
 .filter-header-icon {
   display: inline-block;
-  padding: 0 0.3125rem;
+  padding-right: 0.5rem;
   margin-left: -0.3125rem;
 }
 
 .filter-header-icon .dtable-font,
 .filter-header-icon .multicolor-icon {
   font-size: 14px;
-  color: #aaa;
+  color: var(--bs-icon-secondary-color);
   cursor: default;
 }
 

package/lib/DTableSelect/dtable-select-label.css

@@ -1,10 +1,10 @@
 .dtable-select-check-icon {
-  width: 20px;
-  height: 20px;
+  width: 14px;
+  height: 14px;
   text-align: center;
 }
 
 .dtable-select-check-icon .dtable-font {
-  font-size: 12px;
-  color: #798d99;
+  font-size: 14px;
+  color: var(--bs-icon-color);
 }

package/lib/DTableSelect/dtable-select-label.js

@@ -22,7 +22,7 @@ function DTableSelectLabel(_ref) {
     }), isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dtable-select-check-icon",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: "dtable-font dtable-icon-check-mark"
+        className: "dtable-font dtable-icon-check"
       })
     })]
   });

package/lib/DTableSelect/index.js

@@ -39,10 +39,11 @@ class DTableSelect extends _react.default.Component {
       MenuList: _utils.MenuList,
       ClearIndicator: _utils.ClearIndicator
     }, userComponents);
+    const processedOptions = (0, _utils.processOptionsWithClear)(options, isClearable);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
-      onChange: onChange,
-      options: options,
+      onChange: (0, _utils.createHandleChange)(onChange),
+      options: processedOptions,
       isMulti: isMulti,
       className: className,
       classNamePrefix: classNamePrefix,
@@ -50,7 +51,6 @@ class DTableSelect extends _react.default.Component {
       components: mergedComponents,
       placeholder: placeholder,
       isSearchable: isSearchable,
-      isClearable: isClearable,
       menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
       ,
       menuShouldScrollIntoView: true,

package/lib/DTableSelect/select-dropdown-indicator/index.css

@@ -0,0 +1,16 @@
+.select-dropdown-indicator {
+  position: absolute;
+  top: 50%;
+  right: 18px;
+  transform: translateY(-50%);
+  margin-left: -2px;
+}
+
+.select-dropdown-indicator svg {
+  width: 12px;
+  height: 12px;
+}
+
+.dis-multicolor-icon-down {
+  opacity: 0.65 !important;
+}

package/lib/DTableSelect/select-dropdown-indicator/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const SelectDropdownIndicator = _ref => {
+  let isDisabled = _ref.isDisabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "select-dropdown-indicator d-flex align-items-center",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+      symbol: "down",
+      color: "var(--bs-icon-color)",
+      className: isDisabled ? 'dis-multicolor-icon-down' : ''
+    })
+  });
+};
+var _default = exports.default = SelectDropdownIndicator;

package/lib/DTableSelect/user-select.css

@@ -1,51 +1,12 @@
-.user-select .select-module-container {
-  display: flex;
-  align-items: center;
+/* hide checkbox in select value container */
+.seatable-select-value-container .seatable-multicolor-icon-check {
+  display: none;
 }
 
-.user-select .select-module.select-module-avatar {
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
+.seatable-select-value-container .select-option-label {
+  font-size: 14px !important;
 }
 
-.user-select .select-module.select-module-name {
-  color: #212529;
-  font-size: 14px;
-}
-
-.user-select .true__value-container .select-module-container {
-  display: block;
-}
-
-.user-select .true__value-container .select-module.select-module-avatar {
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-}
-
-.user-select .true__value-container .true__multi-value__label {
-  padding: 0px;
-}
-
-.user-select .true__value-container .true__multi-value__label .select-module.select-module-avatar {
-  transform: translateY(-2px);
-}
-
-.user-select .true__value-container .select-module.select-module-name {
-  font-size: 13px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1 1;
-  line-height: 20px;
-  margin-left: 5px;
-}
-
-.user-select .true__control.true__control--is-focused,
-.user-select .true__control.true__control--is-focused:hover {
-  background-color: #ffffff;
-  border-color: #1991eb;
-  outline: 0;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+.seatable-check-color {
+  color: var(--bs-icon-secondary-color);
 }

package/lib/DTableSelect/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
+exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
@@ -12,108 +12,146 @@ var _reactSelect = require("react-select");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["innerProps"]; // DtableSelect is based on seatable-ui.css, so use the following content to override the default react-select style
 const DEFAULT_CONTROL_STYLE = {
-  border: '1px solid rgba(0, 40, 100, 0.12) !important'
+  fontSize: '14px',
+  padding: '0 4px 0 8px',
+  border: '1px solid var(--bs-border-color) !important',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-popover-bg)',
+  borderRadius: '4px',
+  outline: '0'
 };
-const FOCUS_CONTROL_STYLE = {
+const DISABLED_CONTROL_STYLE = {
   fontSize: '14px',
-  backgroundColor: '#ffffff',
-  borderColor: '#1991eb',
+  padding: '0 4px 0 8px',
+  border: '1px solid rgba(0, 40, 100, 0.12)',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-bg-color)',
+  borderRadius: '4px',
   outline: '0',
-  boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)'
+  cursor: 'default',
+  opacity: 0.65
+};
+const FOCUS_CONTROL_STYLE = {
+  fontSize: '14px',
+  padding: '0 4px 0 8px',
+  border: '1px solid var(--bs-bg-border-color)',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-popover-bg)',
+  borderRadius: '4px',
+  outline: '0'
+};
+const HEADER_ICON_STYLE = {
+  padding: '0 0.5rem !important'
 };
-const noneCallback = () => ({
-  display: 'none'
-});
 const controlCallback = (provided, state) => {
   const isDisabled = state.isDisabled,
     isFocused = state.isFocused;
-  if (isFocused && !isDisabled) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), {}, {
-      '&:hover': (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE)
-    });
+  const headerIconStyle = {
+    '.header-icon': HEADER_ICON_STYLE,
+    '.header-icon .dtable-font': {
+      color: 'var(--bs-icon-secondary-color) !important'
+    }
+  };
+  if (isDisabled) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DISABLED_CONTROL_STYLE), {}, {
+      ':active': {
+        border: '1px solid var(--bs-bg-border-color)'
+      }
+    }, headerIconStyle);
+  }
+  if (isFocused) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), headerIconStyle);
   }
   return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
     fontSize: '14px',
     lineHeight: '1.5',
     cursor: 'pointer'
-  }, DEFAULT_CONTROL_STYLE), {}, {
-    '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
-  });
+  }, DEFAULT_CONTROL_STYLE), headerIconStyle);
 };
-const UserSelectStyle = exports.UserSelectStyle = {
+const MenuSelectStyle = exports.MenuSelectStyle = {
+  menu: base => {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+      padding: '8px',
+      backgroundColor: 'var(--bs-popover-bg)',
+      border: '1px solid var(--bs-border-secondary-color)',
+      borderRadius: '4px',
+      boxShadow: 'var(--bs-border-secondary-shadow)',
+      marginTop: '4px',
+      marginBottom: 0
+    });
+  },
+  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    padding: 0
+  }),
   option: (provided, state) => {
-    const isDisabled = state.isDisabled,
-      isFocused = state.isFocused;
+    const isDisabled = state.isDisabled;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      color: 'var(--bs-body-color)',
+      borderRadius: '4px',
+      minHeight: '32px',
+      padding: '8px',
       cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? '#f5f5f5' : '#fff'
+      backgroundColor: 'var(--bs-popover-bg)',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      ':hover': {
+        backgroundColor: 'rgba(0, 0, 0, 0.04)'
+      },
+      '.header-icon': HEADER_ICON_STYLE
     });
   },
   control: controlCallback,
-  indicatorSeparator: noneCallback,
-  dropdownIndicator: noneCallback,
-  clearIndicator: noneCallback,
-  multiValue: provided => {
+  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+    zIndex: 9999,
+    backgroundColor: 'var(--bs-popover-bg)',
+    color: 'var(--bs-body-color)',
+    borderColor: 'var(--bs-border-secondary-color)'
+  }),
+  singleValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      display: 'inline-flex',
-      alignItems: 'center',
-      background: '#eaeaea',
-      borderRadius: '10px',
-      margin: '0 10px 0 0',
-      padding: '0 0 0 2px'
+      color: 'var(--bs-body-color)'
     });
   },
-  multiValueLabel: provided => {
+  multiValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      padding: '0px'
+      color: 'var(--bs-body-color)'
     });
   },
-  multiValueRemove: provided => {
+  multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+    '.dtable-font': {
+      color: 'var(--bs-icon-color)'
+    },
+    '.dtable-font:hover': {
+      backgroundColor: 'transparent',
+      color: 'var(--bs-icon-color)'
+    }
+  }),
+  input: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+    color: 'var(--bs-body-color)'
+  }),
+  placeholder: (provided, state) => {
+    const isDisabled = state.isDisabled;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: '#666',
-      ':hover': {
-        backgroundColor: 'transparent',
-        color: '#555555'
-      }
+      color: 'var(--bs-bg-placeholder-color)',
+      opacity: isDisabled ? 0.65 : 1
     });
   },
-  singleValue: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      display: 'inline-flex',
-      alignItems: 'center',
-      background: '#eaeaea',
-      borderRadius: '10px',
-      margin: '0',
-      padding: '0 2px',
-      width: 'fit-content'
-    });
-  }
-};
-const MenuSelectStyle = exports.MenuSelectStyle = {
-  option: (provided, state) => {
-    const isDisabled = state.isDisabled,
-      isFocused = state.isFocused;
+  indicatorSeparator: (styles, state) => {
+    return {
+      'display': 'none'
+    };
+  },
+  dropdownIndicator: (provided, state) => {
+    const isDisabled = state.isDisabled;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      fontSize: '13px',
-      color: '#212529',
-      cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? '#f5f5f5' : '#fff',
-      ':active': {
-        backgroundColor: '#f5f5f5'
-      },
-      '.header-icon .dtable-font': {
-        color: '#aaa'
-      },
-      '.header-icon .multicolor-icon': {
-        color: '#aaa'
+      paddingRight: '12px',
+      '.dtable-font': {
+        color: 'var(--bs-icon-color) !important',
+        opacity: isDisabled ? 0.65 : 1
       }
     });
-  },
-  control: controlCallback,
-  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
-    zIndex: 9999
-  }),
-  indicatorSeparator: noneCallback
+  }
 };
 const DropdownIndicator = props => {
   return _reactSelect.components.DropdownIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
@@ -121,7 +159,9 @@ const DropdownIndicator = props => {
       className: "dtable-font dtable-icon-down3",
       style: {
         fontSize: '12px',
-        marginLeft: '-2px'
+        marginLeft: '-2px',
+        color: 'var(--bs-icon-color)',
+        paddingRight: 0
       }
     })
   }));
@@ -142,7 +182,8 @@ const ClearIndicator = _ref => {
       className: "dtable-font dtable-icon-fork-number",
       style: {
         fontSize: '12px',
-        marginRight: '-2px'
+        marginRight: '-2px',
+        color: 'var(--bs-icon-color)'
       }
     })
   }));
@@ -157,9 +198,54 @@ const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
 });
 exports.MenuList = MenuList;
 const Option = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: props.data.style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)({}, props))
-  });
+  const isSelected = props.isSelected,
+    label = props.label;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        whiteSpace: 'pre-line'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: label
+      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-font dtable-icon-check",
+        style: {
+          fontSize: '14px',
+          color: 'var(--bs-icon-color)',
+          paddingLeft: '16px'
+        }
+      })]
+    })
+  }));
+};
+exports.Option = Option;
+const processOptionsWithClear = (options, isClearable) => {
+  if (isClearable && options && options.length > 0) {
+    return [{
+      label: '--',
+      value: '__clear__'
+    }, ...options];
+  }
+  return options;
+};
+exports.processOptionsWithClear = processOptionsWithClear;
+const handleSelectChange = (selectedOption, actionMeta, onChangeCallback) => {
+  if (selectedOption && selectedOption.value === '__clear__') {
+    onChangeCallback(null, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionMeta), {}, {
+      action: 'clear'
+    }));
+  } else {
+    onChangeCallback(selectedOption, actionMeta);
+  }
+};
+exports.handleSelectChange = handleSelectChange;
+const createHandleChange = onChange => {
+  return (selectedOption, actionMeta) => {
+    handleSelectChange(selectedOption, actionMeta, onChange);
+  };
 };
-exports.Option = Option;
+exports.createHandleChange = createHandleChange;