ab-ui-library 1.39.0-alpha.2 → 1.39.0-alpha.4

package/components/MultiTextareaWithChips/MultiTextareaWithChips.js

@@ -2,7 +2,7 @@ import { _ as _extends } from '../../extends-d0c248d6.js';
 import { _ as _typeof } from '../../typeof-f5583e42.js';
 import { _ as _toConsumableArray } from '../../toConsumableArray-96c5590c.js';
 import { _ as _slicedToArray } from '../../slicedToArray-31c0261f.js';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { Chips } from '../Chips/Chips.js';
 import classNames from 'classnames';
 import { ErrorMessage } from '../../helperComponents/ErrorMessage/ErrorMessage.js';
@@ -62,6 +62,8 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
     typeAndEnterPlaceholderText = _ref$typeAndEnterPlac === void 0 ? 'Type and press Enter...' : _ref$typeAndEnterPlac,
     _ref$noOptionsPlaceho = _ref.noOptionsPlaceholderText,
     noOptionsPlaceholderText = _ref$noOptionsPlaceho === void 0 ? 'No more options available' : _ref$noOptionsPlaceho,
+    _ref$fieldName = _ref.fieldName,
+    fieldName = _ref$fieldName === void 0 ? 'skills' : _ref$fieldName,
     formProps = _ref.formProps;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
@@ -88,6 +90,7 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
     localChips = _useState10[0],
     setLocalChips = _useState10[1];
   var inputRef = useRef(null);
+  var containerRef = useRef(null);
   var _useFormProps = useFormProps(),
     setValue = _useFormProps.setValue;
   var chipTexts = localChips.map(function (chip) {
@@ -101,9 +104,38 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
   }, [chips]);
   useEffect(function () {
     if (isUserInteraction.current && formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
-      formProps.setFieldValue('skills', localChips);
+      formProps.setFieldValue(fieldName, localChips);
     }
-  }, [localChips]);
+  }, [localChips, fieldName]);
+
+  // Helper function to filter options
+  var filterOptions = useCallback(function (value) {
+    if (availableOptions.length > 0) {
+      var currentChipTexts = localChips.map(function (chip) {
+        return typeof chip === 'string' ? chip : chip.text;
+      });
+      var filtered = availableOptions.filter(function (option) {
+        return option.toLowerCase().includes(value.toLowerCase()) && !currentChipTexts.includes(option);
+      });
+      setFilteredOptions(filtered);
+    }
+  }, [availableOptions, localChips]);
+
+  // Handle click outside to close dropdown
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setShowDropdown(false);
+        setSelectedOption('');
+      }
+    };
+    if (showDropdown) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showDropdown]);
   var handleKeyDown = function handleKeyDown(e) {
     if (disabled) return;
     if (e.key === 'Enter') {
@@ -150,12 +182,23 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
   };
   var handleInputChange = function handleInputChange(e) {
     if (disabled) return;
-    setInputValue(e.target.value);
+    var value = e.target.value;
+    setInputValue(value);
     setSelectedOption('');
+
+    // Filter available options based on input
+    filterOptions(value);
+    setShowDropdown(availableOptions.length > 0 && value.trim().length > 0);
   };
   var handleInputFocus = function handleInputFocus() {
-    if (availableOptions.length > 0 && inputValue.trim()) {
-      setShowDropdown(true);
+    if (availableOptions.length > 0) {
+      if (inputValue.trim()) {
+        setShowDropdown(true);
+      } else {
+        // Show all available options when focusing without input
+        filterOptions('');
+        setShowDropdown(true);
+      }
     }
   };
   var handleRemoveChip = function handleRemoveChip(chipToRemove) {
@@ -167,13 +210,20 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
     });
     setLocalChips(newChips);
     onRemoveChip === null || onRemoveChip === void 0 || onRemoveChip(chipToRemove);
+
+    // Update form values consistently
+    if (formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
+      formProps.setFieldValue(fieldName, newChips);
+    }
     if (setValue) {
-      var validChips = newChips.filter(function (chip) {
-        return typeof chip === 'string';
-      });
-      setValue('skills', validChips);
+      setValue(fieldName, newChips);
     }
     setChipError('');
+
+    // Refresh filtered options when chip is removed
+    if (showDropdown) {
+      filterOptions(inputValue);
+    }
   };
   var handleSelectOption = function handleSelectOption(option) {
     isUserInteraction.current = true;
@@ -184,18 +234,20 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
         } catch (e) {
           var message = chipValidationErrorMessage || e.message || 'Invalid value';
           if (allowInvalidChips) {
-            var item = {
+            var _item = {
               text: option,
               hasError: true,
               errorMessage: message
             };
-            var _newChips = [].concat(_toConsumableArray(localChips), [item]);
+            var _newChips = [].concat(_toConsumableArray(localChips), [_item]);
             setLocalChips(_newChips);
+
+            // Update form values consistently
+            if (formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
+              formProps.setFieldValue(fieldName, _newChips);
+            }
             if (setValue) {
-              var validChips = _newChips.filter(function (chip) {
-                return typeof chip === 'string';
-              });
-              setValue('skills', validChips);
+              setValue(fieldName, _newChips);
             }
             setInputValue('');
             setShowDropdown(false);
@@ -208,13 +260,22 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
         }
       }
       onAddChip === null || onAddChip === void 0 || onAddChip(option);
-      var newChips = [].concat(_toConsumableArray(localChips), [option]);
+
+      // Create consistent chip item structure
+      var item = {
+        text: option,
+        hasError: false,
+        errorMessage: ''
+      };
+      var newChips = [].concat(_toConsumableArray(localChips), [item]);
       setLocalChips(newChips);
+
+      // Update form values consistently
+      if (formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
+        formProps.setFieldValue(fieldName, newChips);
+      }
       if (setValue) {
-        var _validChips = newChips.filter(function (chip) {
-          return typeof chip === 'string';
-        });
-        setValue('skills', _validChips);
+        setValue(fieldName, newChips);
       }
       setInputValue('');
       setShowDropdown(false);
@@ -238,33 +299,29 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
           };
           var newChips = [].concat(_toConsumableArray(localChips), [item]);
           setLocalChips(newChips);
+
+          // Update form values consistently
           if (formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
-            formProps.setFieldValue('skills', newChips);
+            formProps.setFieldValue(fieldName, newChips);
           }
           if (setValue) {
-            var validChips = newChips.filter(function (chip) {
-              return !chip.hasError;
-            });
-            setValue('skills', validChips);
+            setValue(fieldName, newChips);
           }
         } catch (e) {
           var message = chipValidationErrorMessage || e.message || 'Invalid value';
           if (allowInvalidChips) {
-            var _item = {
+            var _item2 = {
               text: value,
               hasError: true,
               errorMessage: message
             };
-            var _newChips2 = [].concat(_toConsumableArray(localChips), [_item]);
+            var _newChips2 = [].concat(_toConsumableArray(localChips), [_item2]);
             setLocalChips(_newChips2);
             if (formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
-              formProps === null || formProps === void 0 || formProps.setFieldValue('skills', _newChips2);
+              formProps === null || formProps === void 0 || formProps.setFieldValue(fieldName, _newChips2);
             }
             if (setValue) {
-              var _validChips2 = _newChips2.filter(function (chip) {
-                return !chip.hasError;
-              });
-              setValue('skills', _validChips2);
+              setValue(fieldName, _newChips2);
             }
           } else {
             setChipError(message);
@@ -274,8 +331,13 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
       } else {
         var _newChips3 = [].concat(_toConsumableArray(localChips), [value]);
         setLocalChips(_newChips3);
+
+        // Update form values consistently
+        if (formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
+          formProps.setFieldValue(fieldName, _newChips3);
+        }
         if (setValue) {
-          setValue('skills', _newChips3);
+          setValue(fieldName, _newChips3);
         }
       }
       setInputValue('');
@@ -301,7 +363,8 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
     return noOptionsPlaceholderText;
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('multi-textarea-chips', className)
+    className: classNames('multi-textarea-chips', className),
+    ref: containerRef
   }, label && /*#__PURE__*/React.createElement("div", {
     className: "multi-textarea-chips__label"
   }, label), /*#__PURE__*/React.createElement("div", {

package/components/MultiTextareaWithChips/types.d.ts

@@ -27,6 +27,7 @@ export interface TMultiTextareaWithChipsProps extends IFormCompProps {
     typeAndEnterPlaceholderText?: string;
     noOptionsPlaceholderText?: string;
     autoFormIntegration?: boolean;
+    fieldName?: string;
     formProps?: {
         setFieldValue?: (fieldName: string, value: TFormValue, shouldValidate?: {
             shouldValidate: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ab-ui-library",
-  "version": "1.39.0-alpha.2",
+  "version": "1.39.0-alpha.4",
   "description": "UI library for AM",
   "main": "./index.js",
   "module": "./index.js",