trotl-filter 1.0.5 → 1.0.7

package/dist/index.esm.js

@@ -2,6 +2,16 @@ import * as React from 'react';
 import React__default, { useState, useCallback, forwardRef, useContext, useLayoutEffect, useRef, useMemo, createContext, Component, Fragment, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
+function _extends$1() {
+  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1.apply(null, arguments);
+}
+
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -202,14 +212,14 @@ function useStateManager(_ref) {
   });
 }
 
-function _extends$1() {
-  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1.apply(null, arguments);
+  }, _extends.apply(null, arguments);
 }
 
 function _classCallCheck(a, n) {
@@ -3441,7 +3451,7 @@ var Menu = function Menu(props) {
   var children = props.children,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'menu', {
+  return jsx("div", _extends({}, getStyleProps(props, 'menu', {
     menu: true
   }), {
     ref: innerRef
@@ -3472,7 +3482,7 @@ var MenuList = function MenuList(props) {
     innerProps = props.innerProps,
     innerRef = props.innerRef,
     isMulti = props.isMulti;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'menuList', {
+  return jsx("div", _extends({}, getStyleProps(props, 'menuList', {
     'menu-list': true,
     'menu-list--is-multi': isMulti
   }), {
@@ -3502,7 +3512,7 @@ var NoOptionsMessage = function NoOptionsMessage(_ref6) {
     children = _ref6$children === void 0 ? 'No options' : _ref6$children,
     innerProps = _ref6.innerProps,
     restProps = _objectWithoutProperties(_ref6, _excluded$3);
-  return jsx("div", _extends$1({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children: children,
     innerProps: innerProps
   }), 'noOptionsMessage', {
@@ -3515,7 +3525,7 @@ var LoadingMessage = function LoadingMessage(_ref7) {
     children = _ref7$children === void 0 ? 'Loading...' : _ref7$children,
     innerProps = _ref7.innerProps,
     restProps = _objectWithoutProperties(_ref7, _excluded2$1);
-  return jsx("div", _extends$1({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children: children,
     innerProps: innerProps
   }), 'loadingMessage', {
@@ -3600,7 +3610,7 @@ var MenuPortal = function MenuPortal(props) {
   if (!appendTo && menuPosition !== 'fixed' || !computedPosition) return null;
 
   // same wrapper element whether fixed or portalled
-  var menuWrapper = jsx("div", _extends$1({
+  var menuWrapper = jsx("div", _extends({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -3634,7 +3644,7 @@ var SelectContainer = function SelectContainer(props) {
     innerProps = props.innerProps,
     isDisabled = props.isDisabled,
     isRtl = props.isRtl;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'container', {
+  return jsx("div", _extends({}, getStyleProps(props, 'container', {
     '--is-disabled': isDisabled,
     '--is-rtl': isRtl
   }), innerProps), children);
@@ -3666,7 +3676,7 @@ var ValueContainer = function ValueContainer(props) {
     innerProps = props.innerProps,
     isMulti = props.isMulti,
     hasValue = props.hasValue;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'valueContainer', {
+  return jsx("div", _extends({}, getStyleProps(props, 'valueContainer', {
     'value-container': true,
     'value-container--is-multi': isMulti,
     'value-container--has-value': hasValue
@@ -3688,7 +3698,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS() {
 var IndicatorsContainer = function IndicatorsContainer(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'indicatorsContainer', {
+  return jsx("div", _extends({}, getStyleProps(props, 'indicatorsContainer', {
     indicators: true
   }), innerProps), children);
 };
@@ -3713,7 +3723,7 @@ var _ref2$2 = process.env.NODE_ENV === "production" ? {
 var Svg = function Svg(_ref) {
   var size = _ref.size,
     props = _objectWithoutProperties(_ref, _excluded$2);
-  return jsx("svg", _extends$1({
+  return jsx("svg", _extends({
     height: size,
     width: size,
     viewBox: "0 0 20 20",
@@ -3723,14 +3733,14 @@ var Svg = function Svg(_ref) {
   }, props));
 };
 var CrossIcon = function CrossIcon(props) {
-  return jsx(Svg, _extends$1({
+  return jsx(Svg, _extends({
     size: 20
   }, props), jsx("path", {
     d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
   }));
 };
 var DownChevron = function DownChevron(props) {
-  return jsx(Svg, _extends$1({
+  return jsx(Svg, _extends({
     size: 20
   }, props), jsx("path", {
     d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
@@ -3762,7 +3772,7 @@ var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'dropdownIndicator', {
+  return jsx("div", _extends({}, getStyleProps(props, 'dropdownIndicator', {
     indicator: true,
     'dropdown-indicator': true
   }), innerProps), children || jsx(DownChevron, null));
@@ -3771,7 +3781,7 @@ var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'clearIndicator', {
+  return jsx("div", _extends({}, getStyleProps(props, 'clearIndicator', {
     indicator: true,
     'clear-indicator': true
   }), innerProps), children || jsx(CrossIcon, null));
@@ -3798,7 +3808,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator(props) {
   var innerProps = props.innerProps;
-  return jsx("span", _extends$1({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
+  return jsx("span", _extends({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
     'indicator-separator': true
   })));
 };
@@ -3851,7 +3861,7 @@ var LoadingIndicator = function LoadingIndicator(_ref7) {
     _ref7$size = _ref7.size,
     size = _ref7$size === void 0 ? 4 : _ref7$size,
     restProps = _objectWithoutProperties(_ref7, _excluded2);
-  return jsx("div", _extends$1({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps: innerProps,
     isRtl: isRtl,
     size: size
@@ -3907,7 +3917,7 @@ var Control = function Control(props) {
     innerRef = props.innerRef,
     innerProps = props.innerProps,
     menuIsOpen = props.menuIsOpen;
-  return jsx("div", _extends$1({
+  return jsx("div", _extends({
     ref: innerRef
   }, getStyleProps(props, 'control', {
     control: true,
@@ -3939,9 +3949,9 @@ var Group = function Group(props) {
     label = props.label,
     theme = props.theme,
     selectProps = props.selectProps;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'group', {
+  return jsx("div", _extends({}, getStyleProps(props, 'group', {
     group: true
-  }), innerProps), jsx(Heading, _extends$1({}, headingProps, {
+  }), innerProps), jsx(Heading, _extends({}, headingProps, {
     selectProps: selectProps,
     theme: theme,
     getStyles: getStyles,
@@ -3971,7 +3981,7 @@ var GroupHeading = function GroupHeading(props) {
   var _cleanCommonProps = cleanCommonProps(props);
     _cleanCommonProps.data;
     var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
-  return jsx("div", _extends$1({}, getStyleProps(props, 'groupHeading', {
+  return jsx("div", _extends({}, getStyleProps(props, 'groupHeading', {
     'group-heading': true
   }), innerProps));
 };
@@ -4034,11 +4044,11 @@ var Input = function Input(props) {
     isHidden = _cleanCommonProps.isHidden,
     inputClassName = _cleanCommonProps.inputClassName,
     innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$5);
-  return jsx("div", _extends$1({}, getStyleProps(props, 'input', {
+  return jsx("div", _extends({}, getStyleProps(props, 'input', {
     'input-container': true
   }), {
     "data-value": value || ''
-  }), jsx("input", _extends$1({
+  }), jsx("input", _extends({
     className: cx({
       input: true
     }, inputClassName),
@@ -4111,7 +4121,7 @@ var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children,
     innerProps = _ref5.innerProps;
-  return jsx("div", _extends$1({
+  return jsx("div", _extends({
     role: "button"
   }, innerProps), children || jsx(CrossIcon, {
     size: 14
@@ -4185,7 +4195,7 @@ var Option = function Option(props) {
     isSelected = props.isSelected,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'option', {
+  return jsx("div", _extends({}, getStyleProps(props, 'option', {
     option: true,
     'option--is-disabled': isDisabled,
     'option--is-focused': isFocused,
@@ -4213,7 +4223,7 @@ var placeholderCSS = function placeholderCSS(_ref, unstyled) {
 var Placeholder = function Placeholder(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'placeholder', {
+  return jsx("div", _extends({}, getStyleProps(props, 'placeholder', {
     placeholder: true
   }), innerProps), children);
 };
@@ -4241,7 +4251,7 @@ var SingleValue = function SingleValue(props) {
   var children = props.children,
     isDisabled = props.isDisabled,
     innerProps = props.innerProps;
-  return jsx("div", _extends$1({}, getStyleProps(props, 'singleValue', {
+  return jsx("div", _extends({}, getStyleProps(props, 'singleValue', {
     'single-value': true,
     'single-value--is-disabled': isDisabled
   }), innerProps), children);
@@ -4342,7 +4352,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText(props) {
-  return jsx("span", _extends$1({
+  return jsx("span", _extends({
     css: _ref
   }, props));
 };
@@ -4859,7 +4869,7 @@ function DummyInput(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   // Remove animation props not meant for HTML elements
   var filteredProps = removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
-  return jsx("input", _extends$1({
+  return jsx("input", _extends({
     ref: innerRef
   }, filteredProps, {
     css: /*#__PURE__*/css$2({
@@ -6441,7 +6451,7 @@ var Select = /*#__PURE__*/function (_Component) {
       });
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
-        return /*#__PURE__*/React.createElement(DummyInput, _extends$1({
+        return /*#__PURE__*/React.createElement(DummyInput, _extends({
           id: id,
           innerRef: this.getInputRef,
           onBlur: this.onInputBlur,
@@ -6454,7 +6464,7 @@ var Select = /*#__PURE__*/function (_Component) {
           value: ""
         }, ariaAttributes));
       }
-      return /*#__PURE__*/React.createElement(Input, _extends$1({}, commonProps, {
+      return /*#__PURE__*/React.createElement(Input, _extends({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",
         autoCorrect: "off",
@@ -6495,7 +6505,7 @@ var Select = /*#__PURE__*/function (_Component) {
         focusedValue = _this$state5.focusedValue,
         isFocused = _this$state5.isFocused;
       if (!this.hasValue() || !controlShouldRenderValue) {
-        return inputValue ? null : /*#__PURE__*/React.createElement(Placeholder, _extends$1({}, commonProps, {
+        return inputValue ? null : /*#__PURE__*/React.createElement(Placeholder, _extends({}, commonProps, {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
@@ -6508,7 +6518,7 @@ var Select = /*#__PURE__*/function (_Component) {
         return selectValue.map(function (opt, index) {
           var isOptionFocused = opt === focusedValue;
           var key = "".concat(_this3.getOptionLabel(opt), "-").concat(_this3.getOptionValue(opt));
-          return /*#__PURE__*/React.createElement(MultiValue, _extends$1({}, commonProps, {
+          return /*#__PURE__*/React.createElement(MultiValue, _extends({}, commonProps, {
             components: {
               Container: MultiValueContainer,
               Label: MultiValueLabel,
@@ -6537,7 +6547,7 @@ var Select = /*#__PURE__*/function (_Component) {
         return null;
       }
       var singleValue = selectValue[0];
-      return /*#__PURE__*/React.createElement(SingleValue, _extends$1({}, commonProps, {
+      return /*#__PURE__*/React.createElement(SingleValue, _extends({}, commonProps, {
         data: singleValue,
         isDisabled: isDisabled
       }), this.formatOptionLabel(singleValue, 'value'));
@@ -6560,7 +6570,7 @@ var Select = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React.createElement(ClearIndicator, _extends$1({}, commonProps, {
+      return /*#__PURE__*/React.createElement(ClearIndicator, _extends({}, commonProps, {
         innerProps: innerProps,
         isFocused: isFocused
       }));
@@ -6579,7 +6589,7 @@ var Select = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends$1({}, commonProps, {
+      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -6597,7 +6607,7 @@ var Select = /*#__PURE__*/function (_Component) {
       var commonProps = this.commonProps;
       var isDisabled = this.props.isDisabled;
       var isFocused = this.state.isFocused;
-      return /*#__PURE__*/React.createElement(IndicatorSeparator, _extends$1({}, commonProps, {
+      return /*#__PURE__*/React.createElement(IndicatorSeparator, _extends({}, commonProps, {
         isDisabled: isDisabled,
         isFocused: isFocused
       }));
@@ -6616,7 +6626,7 @@ var Select = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React.createElement(DropdownIndicator, _extends$1({}, commonProps, {
+      return /*#__PURE__*/React.createElement(DropdownIndicator, _extends({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -6681,7 +6691,7 @@ var Select = /*#__PURE__*/function (_Component) {
           'aria-selected': _this4.state.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
         };
 
-        return /*#__PURE__*/React.createElement(Option, _extends$1({}, commonProps, {
+        return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
           innerProps: innerProps,
           data: data,
           isDisabled: isDisabled,
@@ -6703,7 +6713,7 @@ var Select = /*#__PURE__*/function (_Component) {
               groupIndex = item.index;
             var groupId = "".concat(_this4.getElementId('group'), "-").concat(groupIndex);
             var headingId = "".concat(groupId, "-heading");
-            return /*#__PURE__*/React.createElement(Group, _extends$1({}, commonProps, {
+            return /*#__PURE__*/React.createElement(Group, _extends({}, commonProps, {
               key: groupId,
               data: _data,
               options: options,
@@ -6740,12 +6750,12 @@ var Select = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
-      var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends$1({}, commonProps, menuPlacementProps), function (_ref4) {
+      var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
           placement = _ref4$placerProps.placement,
           maxHeight = _ref4$placerProps.maxHeight;
-        return /*#__PURE__*/React.createElement(Menu, _extends$1({}, commonProps, menuPlacementProps, {
+        return /*#__PURE__*/React.createElement(Menu, _extends({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
@@ -6759,7 +6769,7 @@ var Select = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          return /*#__PURE__*/React.createElement(MenuList, _extends$1({}, commonProps, {
+          return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
               scrollTargetRef(instance);
@@ -6779,7 +6789,7 @@ var Select = /*#__PURE__*/function (_Component) {
       // positioning behaviour is almost identical for portalled and fixed,
       // so we use the same component. the actual portalling logic is forked
       // within the component based on `menuPosition`
-      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React.createElement(MenuPortal, _extends$1({}, commonProps, {
+      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React.createElement(MenuPortal, _extends({}, commonProps, {
         appendTo: menuPortalTarget,
         controlElement: this.controlRef,
         menuPlacement: menuPlacement,
@@ -6849,7 +6859,7 @@ var Select = /*#__PURE__*/function (_Component) {
         isFocused = _this$state6.isFocused,
         selectValue = _this$state6.selectValue;
       var focusableOptions = this.getFocusableOptions();
-      return /*#__PURE__*/React.createElement(LiveRegion$1, _extends$1({}, commonProps, {
+      return /*#__PURE__*/React.createElement(LiveRegion$1, _extends({}, commonProps, {
         id: this.getElementId('live-region'),
         ariaSelection: ariaSelection,
         focusedOption: focusedOption,
@@ -6875,7 +6885,7 @@ var Select = /*#__PURE__*/function (_Component) {
         menuIsOpen = _this$props14.menuIsOpen;
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
-      return /*#__PURE__*/React.createElement(SelectContainer, _extends$1({}, commonProps, {
+      return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
         className: className,
         innerProps: {
           id: id,
@@ -6883,7 +6893,7 @@ var Select = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends$1({}, commonProps, {
+      }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
@@ -6892,9 +6902,9 @@ var Select = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         isFocused: isFocused,
         menuIsOpen: menuIsOpen
-      }), /*#__PURE__*/React.createElement(ValueContainer, _extends$1({}, commonProps, {
+      }), /*#__PURE__*/React.createElement(ValueContainer, _extends({}, commonProps, {
         isDisabled: isDisabled
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends$1({}, commonProps, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
@@ -6966,7 +6976,7 @@ Select.defaultProps = defaultProps;
 
 var StateManagedSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   var baseSelectProps = useStateManager(props);
-  return /*#__PURE__*/React.createElement(Select, _extends$1({
+  return /*#__PURE__*/React.createElement(Select, _extends({
     ref: ref
   }, baseSelectProps));
 });
@@ -6981,7 +6991,9 @@ const MultiSelectDropdown = ({
   placeholder = "Select...",
   required = false,
   closeMenuOnSelect = false,
-  pushUrlParamObj = false // pushUrlParamObj={"ids"}
+  pushUrlParamObj = false,
+  // pushUrlParamObj={"ids"}
+  addItem = undefined
 }) => {
   const containerRef = useRef(null);
   const [maxVisible, setMaxVisible] = useState(1);
@@ -7063,6 +7075,71 @@ const MultiSelectDropdown = ({
     }
     window.history.replaceState({}, "", url);
   };
+
+  // For custom input: track input value and show add button as inline option
+  const [inputValue, setInputValue] = useState("");
+  const inputExists = useMemo(() => {
+    return options.some(opt => String(opt.label).toLowerCase() === inputValue.trim().toLowerCase());
+  }, [inputValue, options]);
+
+  // Add special option for +Add if inputValue is non-empty and not in options
+  const menuOptions = useMemo(() => {
+    if (inputValue && !inputExists && typeof addItem === 'function') {
+      return [...options, {
+        label: `+ Add "${inputValue.trim()}"`,
+        value: '__add_new__',
+        __isAddNew: true
+      }];
+    }
+    return options;
+  }, [options, inputValue, inputExists, addItem]);
+  const handleAddNew = () => {
+    if (!inputValue.trim()) return;
+    const newLabel = inputValue.trim();
+    // Prevent duplicate by value or label (case-insensitive)
+    const exists = options.some(opt => String(opt.value).toLowerCase() === newLabel.toLowerCase() || String(opt.label).toLowerCase() === newLabel.toLowerCase());
+    if (exists) {
+      setInputValue("");
+      return;
+    }
+    const newOption = {
+      label: newLabel,
+      value: newLabel
+    };
+    if (typeof addItem === 'function') {
+      addItem(newOption);
+      // return;
+    }
+    if (isMulti) {
+      onChange([...(selected || []), newOption.value]);
+      if (pushUrlParamObj) setUrlParam([...(selected || []), newOption.value].join(","));
+    } else {
+      onChange([newOption.value]);
+      if (pushUrlParamObj) setUrlParam(newOption.value);
+    }
+    setInputValue("");
+  };
+
+  // Custom Option to handle +Add
+  const Option = props => {
+    if (props.data.__isAddNew) {
+      return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props.innerProps, {
+        style: {
+          padding: '8px 12px',
+          cursor: 'pointer',
+          color: '#1677ff',
+          fontWeight: 500,
+          background: props.isFocused ? '#e6f4ff' : '#fff'
+        },
+        onMouseDown: e => {
+          e.preventDefault();
+          handleAddNew();
+          props.selectOption(props.data);
+        }
+      }), props.data.label);
+    }
+    return /*#__PURE__*/React__default.createElement(components.Option, props);
+  };
   const handleChange = selectedItems => {
     if (isMulti) {
       const values = selectedItems ? selectedItems.map(item => item.value) : [];
@@ -7189,17 +7266,29 @@ const MultiSelectDropdown = ({
     className: showRequiredError ? "select-required-error" : ""
   }, /*#__PURE__*/React__default.createElement(StateManagedSelect$1, {
     isMulti: isMulti,
-    options: options,
+    options: menuOptions,
     value: selectedOptions,
-    onChange: handleChange,
+    onChange: (val, action) => {
+      // If user selects the +Add option, handle it
+      if (action && action.action === 'select-option' && val && val.length && val[val.length - 1]?.__isAddNew) {
+        handleAddNew();
+        return;
+      }
+      handleChange(val);
+    },
     placeholder: placeholder,
     styles: selectStyle,
     components: {
-      MultiValue
+      MultiValue,
+      Option
     },
     menuPortalTarget: document.body,
     closeMenuOnSelect: closeMenuOnSelect,
-    "aria-required": required
+    "aria-required": required,
+    inputValue: inputValue,
+    onInputChange: (val, action) => {
+      if (action.action === "input-change") setInputValue(val);
+    }
   }), showRequiredError && /*#__PURE__*/React__default.createElement("div", {
     className: "error-text"
   }, "This field is required."));
@@ -7218,8 +7307,23 @@ const DebounceSelect = ({
   objValue,
   style,
   isMulti = false,
-  pushUrlParamObj = false
+  pushUrlParamObj = false,
+  addItem = undefined,
+  fetchAll = true,
+  t
 }) => {
+  let translate;
+  if (t) {
+    translate = t;
+  } else {
+    translate = key => {
+      const translations = {
+        add: "Add",
+        cancel: "Cancel"
+      };
+      return translations[key] || key;
+    };
+  }
   const [input, setInput] = useState("");
   const [options, setOptions] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -7287,8 +7391,9 @@ const DebounceSelect = ({
     clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(async () => {
       try {
-        // If input is '...', fetch all options
-        const query = input === "..." ? "" : input;
+        // If fetchAll is true and input is '...', fetch all options
+        // If fetchAll is false, '...' will be treated as regular search
+        const query = fetchAll && input === "..." ? "" : input;
         const results = await fetchOptions(query);
         setOptions(results);
       } catch (err) {
@@ -7299,7 +7404,7 @@ const DebounceSelect = ({
       }
     }, debounceDelay);
     return () => clearTimeout(timeoutRef.current);
-  }, [input, fetchOptions, debounceDelay]);
+  }, [input, fetchOptions, debounceDelay, fetchAll]);
   const setUrlParam = value => {
     const url = new URL(window.location);
     if (value === null || value === undefined || value === "") {
@@ -7344,6 +7449,37 @@ const DebounceSelect = ({
       setUrlParam(updated.length ? updated.map(item => item.value).join(",") : "");
     }
   };
+
+  // Check if input value exists in options
+  const inputExists = input.trim() && options.some(opt => String(opt.label).toLowerCase() === input.trim().toLowerCase() || String(opt.value).toLowerCase() === input.trim().toLowerCase());
+  const handleAddNew = () => {
+    if (!input.trim()) return;
+    const newOption = {
+      label: input.trim(),
+      value: input.trim()
+    };
+    if (typeof addItem === 'function') {
+      addItem(newOption);
+    }
+    handleSelect(newOption.value, newOption.label);
+  };
+
+  // Handle double-click to fetch all when fetchAll is false
+  const handleDoubleClick = async () => {
+    if (!fetchAll && !disabled) {
+      setLoading(true);
+      setOpen(true);
+      try {
+        const results = await fetchOptions("");
+        setOptions(results);
+      } catch (err) {
+        console.error("Failed to fetch options", err);
+        setOptions([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'relative'
@@ -7376,6 +7512,7 @@ const DebounceSelect = ({
     placeholder: placeholder,
     onFocus: () => setOpen(true),
     onBlur: () => setTimeout(() => setOpen(false), 200),
+    onDoubleClick: handleDoubleClick,
     disabled: disabled,
     style: style
   }), (input || !isMulti && selectedItems.length > 0) && !disabled && /*#__PURE__*/React__default.createElement("button", {
@@ -7406,28 +7543,32 @@ const DebounceSelect = ({
     className: "basic-input-dropdown-menu"
   }, loading ? /*#__PURE__*/React__default.createElement("div", {
     className: "loading-dropdown-item"
-  }, "Loading...") : options?.length > 0 ? options.map(({
+  }, "Loading...") : options?.length > 0 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, options.map(({
     label,
     value
   }) => /*#__PURE__*/React__default.createElement("div", {
     key: value,
     className: "basic-input-dropdown-item",
     onMouseDown: () => handleSelect(value, label)
-  }, label)) : /*#__PURE__*/React__default.createElement("div", {
+  }, translate(label))), input.trim() && !inputExists && typeof addItem === 'function' && /*#__PURE__*/React__default.createElement("div", {
+    className: "basic-input-dropdown-item",
+    style: {
+      color: '#1677ff',
+      fontWeight: 500
+    },
+    onMouseDown: handleAddNew
+  }, "+ ", translate("add"), " \"", input.trim(), "\"")) : input.trim() && !loading && typeof addItem === 'function' ? /*#__PURE__*/React__default.createElement("div", {
+    className: "basic-input-dropdown-item",
+    style: {
+      color: '#1677ff',
+      fontWeight: 500
+    },
+    onMouseDown: handleAddNew
+  }, "+ ", translate("add"), " \"", input.trim(), "\"") : /*#__PURE__*/React__default.createElement("div", {
     className: "no-results-dropdown-item"
   }, "No results")));
 };
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
 function SearchInput({
   pushUrlParamObj = null,
   ...props
@@ -7476,7 +7617,7 @@ function SearchInput({
       height: "34px",
       verticalAlign: "middle"
     }
-  }, /*#__PURE__*/React__default.createElement("input", _extends({
+  }, /*#__PURE__*/React__default.createElement("input", _extends$1({
     className: "basic-input",
     value: value,
     style: {
@@ -8995,7 +9136,7 @@ function DateTimeInput({
     window.addEventListener('mousedown', onClick);
     return () => window.removeEventListener('mousedown', onClick);
   }, [open]);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends$1({
     className: `datetime-input-wrapper ${className}`,
     style: {
       position: 'relative',