@orfium/ictinus 4.64.0 → 4.65.0

package/dist/components/Select/Select.d.ts

@@ -12,6 +12,7 @@ export declare type SelectOption = {
     helperText?: string;
     tooltipInfo?: string;
     options?: SelectOption[];
+    isCreated?: boolean;
 } & SelectOptionValues;
 export declare type Props = {
     /** The function that is used to return the selected options */
@@ -48,6 +49,11 @@ export declare type Props = {
     /** The selected options in case of multiSelect */
     /** @TODO merge selectedOption with selectedOptions in v5 */
     selectedOptions?: SelectOption[];
+    /**
+     * If true, then in the case of a searched option that is not found in the Options list of MultiSelect,
+     * the user can create this option.
+     * */
+    creatable?: boolean;
 } & TextFieldProps;
 declare const Select: React.ForwardRefExoticComponent<{
     /** The function that is used to return the selected options */
@@ -84,6 +90,11 @@ declare const Select: React.ForwardRefExoticComponent<{
     /** The selected options in case of multiSelect */
     /** @TODO merge selectedOption with selectedOptions in v5 */
     selectedOptions?: SelectOption[] | undefined;
+    /**
+     * If true, then in the case of a searched option that is not found in the Options list of MultiSelect,
+     * the user can create this option.
+     * */
+    creatable?: boolean | undefined;
 } & {
     id?: string | undefined;
     onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;

package/dist/components/Select/Select.js

@@ -35,7 +35,7 @@ var _PositionInScreen = _interopRequireDefault(require("../utils/PositionInScree
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["handleSelectedOption", "defaultValue", "selectedOption", "multi", "options", "isAsync", "isLoading", "asyncSearch", "status", "minCharactersToSearch", "highlightSearch", "isSearchable", "isVirtualized", "styleType", "disabled", "locked", "dataTestId", "onClear", "onOptionDelete", "selectedOptions"];
+var _excluded = ["handleSelectedOption", "defaultValue", "selectedOption", "multi", "options", "isAsync", "isLoading", "asyncSearch", "status", "minCharactersToSearch", "highlightSearch", "isSearchable", "isVirtualized", "styleType", "disabled", "locked", "dataTestId", "onClear", "onOptionDelete", "selectedOptions", "creatable"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -88,6 +88,8 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       onOptionDelete = _ref.onOptionDelete,
       _ref$selectedOptions = _ref.selectedOptions,
       selectedOptions = _ref$selectedOptions === void 0 ? [] : _ref$selectedOptions,
+      _ref$creatable = _ref.creatable,
+      creatable = _ref$creatable === void 0 ? false : _ref$creatable,
       restInputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var theme = (0, _useTheme["default"])();
@@ -135,7 +137,14 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     if (multi) {
       handleMultiSelectOptionClick(option);
     } else {
-      setInputValue(option);
+      if (option.isCreated) {
+        setInputValue(_extends({}, option, {
+          label: option.value.toString()
+        }));
+      } else {
+        setInputValue(option);
+      }
+
       setOpen(false);
     }
 
@@ -180,27 +189,45 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
 
   var filteredOptions = (0, _react.useMemo)(function () {
     var optionsToBeFiltered = multi ? availableMultiSelectOptions : options;
+    var finalOptions = [];
 
     if (isAsync) {
-      return optionsToBeFiltered;
-    }
-
-    return optionsToBeFiltered.filter(function (option) {
-      var _option$options;
+      finalOptions.push.apply(finalOptions, optionsToBeFiltered);
+    } else {
+      finalOptions.push.apply(finalOptions, optionsToBeFiltered.filter(function (option) {
+        var _option$options;
 
-      return !searchValue || option.label.toLowerCase().includes(searchValue.toLowerCase()) || !!((_option$options = option.options) != null && _option$options.find(function (option) {
-        return option.label.toLowerCase().includes(searchValue.toLowerCase());
+        return !searchValue || option.label.toLowerCase().includes(searchValue.toLowerCase()) || !!((_option$options = option.options) != null && _option$options.find(function (option) {
+          return option.label.toLowerCase().includes(searchValue.toLowerCase());
+        }));
+      }).map(function (option) {
+        var _option$options2;
+
+        return option.label.toLowerCase().includes(searchValue.toLowerCase()) ? option : _extends({}, option, {
+          options: (_option$options2 = option.options) == null ? void 0 : _option$options2.filter(function (option) {
+            return option.label.toLowerCase().includes(searchValue.toLowerCase());
+          })
+        });
       }));
-    }).map(function (option) {
-      var _option$options2;
+    }
 
-      return option.label.toLowerCase().includes(searchValue.toLowerCase()) ? option : _extends({}, option, {
-        options: (_option$options2 = option.options) == null ? void 0 : _option$options2.filter(function (option) {
-          return option.label.toLowerCase().includes(searchValue.toLowerCase());
-        })
-      });
-    });
-  }, [isAsync, multi, availableMultiSelectOptions, options, searchValue]);
+    if (creatable) {
+      /** Check if the searchValue has an exact result (so no need for "Create..." option) */
+      var hasDistinctResult = finalOptions.map(function (item) {
+        return item.label.toLowerCase();
+      }).includes(searchValue.toLowerCase());
+
+      if (!hasDistinctResult && searchValue.length > 0) {
+        finalOptions.push({
+          value: searchValue,
+          label: "Create \"" + searchValue + "\"",
+          isCreated: true
+        });
+      }
+    }
+
+    return finalOptions;
+  }, [multi, availableMultiSelectOptions, options, isAsync, creatable, searchValue]);
   var rightIconNameSelector = (0, _react.useMemo)(function () {
     if (isSearchable) {
       return searchValue || inputValue.value ? 'close' : 'search';
@@ -250,7 +277,13 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       combinedRefs == null ? void 0 : (_combinedRefs$current2 = combinedRefs.current) == null ? void 0 : _combinedRefs$current2.blur();
     }
   };
+  /**
+   * Boolean flag for the case where we have no options but create functionality - so
+   * we can hide the Select All option in that case
+   */
+
 
+  var hasNoOptionsAndIsCreatable = creatable && filteredOptions.length === 1 && filteredOptions[0].isCreated;
   return (0, _react2.jsx)(_ClickAwayListener["default"], {
     onClick: function onClick() {
       setOpen(false);
@@ -305,7 +338,7 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isLoading: isLoading,
     isVirtualized: isVirtualized,
     searchTerm: highlightSearch ? searchValue : undefined,
-    hasSelectAllOption: multi
+    hasSelectAllOption: multi && !hasNoOptionsAndIsCreatable
   }))));
 });
 

package/dist/components/Select/hooks/useMultiselectUtils.js

@@ -59,7 +59,10 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
       setMultiSelectedOpts(multiSelectedOptions.filter(function (opt) {
         return opt.value !== (option == null ? void 0 : option.value);
       }));
-      setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, [option]));
+
+      if (!option.isCreated) {
+        setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, [option]));
+      }
 
       if (onOptionDelete) {
         onOptionDelete(option);
@@ -70,13 +73,18 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
         setMultiSelectedOpts(multiSelectedOptions.filter(function (opt) {
           return opt.value !== lastItem.value;
         }));
-        setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, [lastItem]));
+
+        if (!lastItem.isCreated) {
+          setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, [lastItem]));
+        }
       }
     }
   };
 
   var handleClearAllOptions = function handleClearAllOptions() {
-    setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, multiSelectedOptions));
+    setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, multiSelectedOptions.filter(function (item) {
+      return !item.isCreated;
+    })));
     setMultiSelectedOpts([]);
 
     if (onClear) {
@@ -101,6 +109,14 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
       setMultiSelectedOpts([].concat(multiSelectedOptions, selected));
       setAvailableMultiSelectOptions(remaining);
       setOpen(false);
+    } else if (option.isCreated) {
+      /** If the option is created internally */
+      var newOption = {
+        value: option.value,
+        label: option.value.toString(),
+        isCreated: true
+      };
+      setMultiSelectedOpts([].concat(multiSelectedOptions, [newOption]));
     } else {
       setMultiSelectedOpts([].concat(multiSelectedOptions, [option]));
       setAvailableMultiSelectOptions(availableMultiSelectOptions.filter(function (opt) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "4.64.0",
+  "version": "4.65.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",