ab-ui-library 1.41.0 → 1.42.0

package/components/MultiTextareaWithChips/MultiTextareaWithChips.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { TMultiTextareaWithChipsProps } from './types';
-export declare const MultiTextareaWithChips: React.FC<TMultiTextareaWithChipsProps>;
+export declare const MultiTextareaWithChips: React.NamedExoticComponent<TMultiTextareaWithChipsProps>;

package/components/MultiTextareaWithChips/MultiTextareaWithChips.js

@@ -1,7 +1,7 @@
 import { _ as _extends } from '../../extends-cc60c71c.js';
-import { _ as _toConsumableArray } from '../../toConsumableArray-d592cd83.js';
+import { _ as _typeof } from '../../typeof-e9310111.js';
 import { _ as _slicedToArray } from '../../slicedToArray-093df980.js';
-import React, { useState, useRef, useMemo, useEffect } from 'react';
+import React, { memo, useState, useRef, useMemo } from 'react';
 import { Chips } from '../Chips/Chips.js';
 import classNames from 'classnames';
 import { ErrorMessage } from '../../helperComponents/ErrorMessage/ErrorMessage.js';
@@ -12,12 +12,15 @@ import '../../hooks/useScreenSize.js';
 import 'react-hook-form';
 import '../Radio/Radio.js';
 import 'react-syntax-highlighter';
+import { useChipManagement } from './hooks/useChipManagement.js';
+import { useChipValidation } from './hooks/useChipValidation.js';
+import { useDropdownLogic } from './hooks/useDropdownLogic.js';
+import { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
 import '../Text/Text.js';
 import '../../utils/helpers.js';
 import '../Chips/types.js';
 import '../SVGIcons/IconDismissCircleFilled.js';
 import '../../defineProperty-109927cc.js';
-import '../../typeof-e9310111.js';
 import '../Chips/consts.js';
 import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
 import '../../helperComponents/IconDynamicComponent/constants.js';
@@ -34,8 +37,9 @@ import '../../hooks/useOnOutsideClick.js';
 import '../Link/Link.js';
 import '../SVGIcons/IconInfo.js';
 import '../../context/types.js';
+import '../../toConsumableArray-d592cd83.js';
 
-var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
+var MultiTextareaWithChipsComponent = function MultiTextareaWithChipsComponent(_ref) {
   var label = _ref.label,
     placeholder = _ref.placeholder,
     helperText = _ref.helperText,
@@ -56,321 +60,212 @@ var MultiTextareaWithChips = function MultiTextareaWithChips(_ref) {
     chipValidationErrorMessage = _ref.chipValidationErrorMessage,
     _ref$allowInvalidChip = _ref.allowInvalidChips,
     allowInvalidChips = _ref$allowInvalidChip === void 0 ? false : _ref$allowInvalidChip,
-    _ref$fieldName = _ref.fieldName,
-    fieldName = _ref$fieldName === void 0 ? 'skills' : _ref$fieldName,
     _ref$searchPlaceholde = _ref.searchPlaceholderText,
     searchPlaceholderText = _ref$searchPlaceholde === void 0 ? 'Search and select...' : _ref$searchPlaceholde,
     _ref$typeAndEnterPlac = _ref.typeAndEnterPlaceholderText,
     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,
-    formProps = _ref.formProps;
+    _ref$fieldName = _ref.fieldName,
+    fieldName = _ref$fieldName === void 0 ? 'skills' : _ref$fieldName,
+    formProps = _ref.formProps,
+    minChipLength = _ref.minChipLength,
+    maxChipLength = _ref.maxChipLength;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
     setInputValue = _useState2[1];
-  var _useState3 = useState(false),
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    showDropdown = _useState4[0],
-    setShowDropdown = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    filteredOptions = _useState6[0],
-    setFilteredOptions = _useState6[1];
-  var _useState7 = useState(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    selectedOption = _useState8[0],
-    setSelectedOption = _useState8[1];
-  var _useState9 = useState(''),
-    _useState0 = _slicedToArray(_useState9, 2),
-    chipError = _useState0[0],
-    setChipError = _useState0[1];
-  var _useState1 = useState(chips),
-    _useState10 = _slicedToArray(_useState1, 2),
-    localChips = _useState10[0],
-    setLocalChips = _useState10[1];
+    chipError = _useState4[0],
+    setChipError = _useState4[1];
   var inputRef = useRef(null);
-  var _useFormProps = useFormProps();
-    _useFormProps.errors;
-    var setValue = _useFormProps.setValue;
-
-  // Memoize chip texts for performance optimization
-  var chipTexts = useMemo(function () {
-    return localChips.map(function (chip) {
-      return typeof chip === 'string' ? chip : chip.text;
-    });
-  }, [localChips]);
-
-  // useEffect(() => {
-  //   if (inputValue.trim() && availableOptions.length > 0) {
-  //     // Use memoized chipTexts for O(1) lookup performance
-  //     const chipTextsSet = new Set(chipTexts)
-
-  //     const filtered = availableOptions.filter(option =>
-  //       option.toLowerCase().includes(inputValue.toLowerCase()) &&
-  //       !chipTextsSet.has(option)
-  //     )
-  //     setFilteredOptions(filtered)
-  //     setShowDropdown(filtered.length > 0)
-  //   } else {
-  //     setShowDropdown(false)
-  //     setFilteredOptions([])
-  //   }
-  // }, [inputValue, availableOptions, chipTexts])
-
-  useEffect(function () {
-    if (formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
-      formProps.setFieldValue(fieldName, localChips);
-    }
-  }, [localChips, fieldName]);
-  var handleKeyDown = function handleKeyDown(e) {
-    if (disabled) return;
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      if (selectedOption) {
-        handleSelectOption(selectedOption);
-      } else if (filteredOptions.length > 0) {
-        handleSelectOption(filteredOptions[0]);
-        setFilteredOptions([]);
-      } else if (allowCustomValues && inputValue.trim()) {
-        handleAddCustomValue(inputValue.trim());
-      }
-    } else if (e.key === ',' && allowCustomValues && inputValue.trim()) {
-      e.preventDefault();
-      handleAddCustomValue(inputValue.trim());
-    } else if (e.key === 'Escape') {
-      var _inputRef$current;
-      setShowDropdown(false);
-      setSelectedOption('');
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
-    } else if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      if (filteredOptions.length > 0) {
-        var currentIndex = selectedOption ? filteredOptions.indexOf(selectedOption) : -1;
-        var nextIndex = currentIndex < filteredOptions.length - 1 ? currentIndex + 1 : 0;
-        setSelectedOption(filteredOptions[nextIndex]);
+  var containerRef = useRef(null);
+  var _useFormProps = useFormProps(),
+    setValue = _useFormProps.setValue;
+  var chipManagement = useChipManagement({
+    initialChips: chips,
+    fieldName: fieldName,
+    formProps: formProps,
+    setValue: setValue,
+    onAddChip: onAddChip,
+    onRemoveChip: onRemoveChip
+  });
+  var chipValidation = useChipValidation({
+    validationSchema: chipValidationSchema,
+    errorMessage: chipValidationErrorMessage,
+    allowInvalidChips: allowInvalidChips,
+    minChipLength: minChipLength,
+    maxChipLength: maxChipLength
+  });
+  var dropdownLogic = useDropdownLogic({
+    availableOptions: availableOptions,
+    chipTexts: chipManagement.getChipTexts(),
+    containerRef: containerRef
+  });
+  var handleSelectOption = function handleSelectOption(option) {
+    if (chipManagement.getChipTexts().includes(option)) return;
+    try {
+      var validatedChip = chipValidation.createValidatedChip(option);
+      chipManagement.addChip(validatedChip);
+      setInputValue('');
+      dropdownLogic.closeDropdown();
+      setChipError('');
+    } catch (error) {
+      if (!allowInvalidChips) {
+        setChipError(error instanceof Error ? error.message : 'Invalid value');
       }
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      if (filteredOptions.length > 0) {
-        var _currentIndex = selectedOption ? filteredOptions.indexOf(selectedOption) : -1;
-        var prevIndex = _currentIndex > 0 ? _currentIndex - 1 : filteredOptions.length - 1;
-        setSelectedOption(filteredOptions[prevIndex]);
+    }
+  };
+  var handleAddCustomValue = function handleAddCustomValue(value) {
+    if (chipManagement.getChipTexts().includes(value)) return;
+    try {
+      var validatedChip = chipValidation.createValidatedChip(value);
+      chipManagement.addChip(validatedChip);
+      setInputValue('');
+      setChipError('');
+    } catch (error) {
+      if (!allowInvalidChips) {
+        setChipError(error instanceof Error ? error.message : 'Invalid value');
       }
-    } else if (e.key === 'Backspace' && !inputValue && localChips.length > 0) {
-      e.preventDefault();
-      var lastChip = localChips[localChips.length - 1];
+    }
+  };
+  var handleRemoveLastChip = function handleRemoveLastChip() {
+    var lastChip = chipManagement.chips[chipManagement.chips.length - 1];
+    if (lastChip) {
       var chipText = typeof lastChip === 'string' ? lastChip : lastChip.text;
-      handleRemoveChip(chipText);
+      chipManagement.removeChip(chipText);
     }
   };
   var handleInputChange = function handleInputChange(e) {
     if (disabled) return;
-    setInputValue(e.target.value);
-    setSelectedOption('');
+    var value = e.target.value;
+    setInputValue(value);
+    dropdownLogic.handleInputChange(value);
   };
   var handleInputFocus = function handleInputFocus() {
-    if (availableOptions.length > 0 && inputValue.trim()) {
-      setShowDropdown(true);
-    }
+    dropdownLogic.handleInputFocus(inputValue);
   };
-  var handleRemoveChip = function handleRemoveChip(chipToRemove) {
-    if (disabled) return;
-    var newChips = localChips.filter(function (c) {
-      var chipText = typeof c === 'string' ? c : c.text;
-      return chipText !== chipToRemove;
-    });
-    setLocalChips(newChips);
-    onRemoveChip === null || onRemoveChip === void 0 || onRemoveChip(chipToRemove);
-    // Sync with form state - only valid chips (strings)
-    if (setValue) {
-      var validChips = newChips.filter(function (chip) {
-        return typeof chip === 'string';
-      });
-      setValue(fieldName, validChips);
-    }
-    setChipError('');
-  };
-  var handleSelectOption = function handleSelectOption(option) {
-    // Check if option already exists in chips using memoized chipTexts
-    if (!chipTexts.includes(option)) {
-      if (chipValidationSchema) {
-        try {
-          chipValidationSchema.validateSync(option);
-        } catch (e) {
-          var message = chipValidationErrorMessage || e.message || 'Invalid value';
-          if (allowInvalidChips) {
-            var item = {
-              text: option,
-              hasError: true,
-              errorMessage: message
-            };
-            var _newChips = [].concat(_toConsumableArray(localChips), [item]);
-            setLocalChips(_newChips);
-            // Sync with form state - only valid chips (strings)
-            if (setValue) {
-              var validChips = _newChips.filter(function (chip) {
-                return typeof chip === 'string';
-              });
-              setValue(fieldName, validChips);
-            }
-            setInputValue('');
-            setShowDropdown(false);
-            setSelectedOption('');
-            return;
-          } else {
-            setChipError(message);
-            return;
-          }
-        }
-      }
-      onAddChip === null || onAddChip === void 0 || onAddChip(option);
-      var newChips = [].concat(_toConsumableArray(localChips), [option]);
-      setLocalChips(newChips);
-      // Sync with form state - only valid chips (strings)
-      if (setValue) {
-        var _validChips = newChips.filter(function (chip) {
-          return typeof chip === 'string';
-        });
-        setValue(fieldName, _validChips);
-      }
-      setInputValue('');
-      setShowDropdown(false);
-      setSelectedOption('');
-      setChipError('');
-    }
-  };
-  var handleAddCustomValue = function handleAddCustomValue(value) {
-    // Check if value already exists in chips
-    var chipTexts = localChips.map(function (chip) {
-      return typeof chip === 'string' ? chip : chip.text;
-    });
-    if (!chipTexts.includes(value)) {
-      // validate value if schema provided
-      if (chipValidationSchema) {
-        try {
-          chipValidationSchema.validateSync(value);
-          var item = {
-            text: value,
-            hasError: false,
-            errorMessage: ''
-          };
-          var newChips = [].concat(_toConsumableArray(localChips), [item]);
-          setLocalChips(newChips);
-          if (formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
-            formProps.setFieldValue(fieldName, newChips);
-          }
-          if (setValue) {
-            var validChips = newChips.filter(function (chip) {
-              return !chip.hasError;
-            });
-            setValue(fieldName, validChips);
-          }
-        } catch (e) {
-          var message = chipValidationErrorMessage || e.message || 'Invalid value';
-          if (allowInvalidChips) {
-            var _item = {
-              text: value,
-              hasError: true,
-              errorMessage: message
-            };
-            var _newChips2 = [].concat(_toConsumableArray(localChips), [_item]);
-            setLocalChips(_newChips2);
-            if (formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
-              formProps === null || formProps === void 0 || formProps.setFieldValue(fieldName, _newChips2);
-            }
-            if (setValue) {
-              var _validChips2 = _newChips2.filter(function (chip) {
-                return !chip.hasError;
-              });
-              setValue(fieldName, _validChips2);
-            }
-          } else {
-            setChipError(message);
-            return;
-          }
-        }
-      } else {
-        var _newChips3 = [].concat(_toConsumableArray(localChips), [value]);
-        setLocalChips(_newChips3);
-        if (setValue) {
-          setValue(fieldName, _newChips3);
-        }
+  var keyboardNavigation = useKeyboardNavigation({
+    disabled: disabled,
+    inputValue: inputValue,
+    allowCustomValues: allowCustomValues,
+    chips: chipManagement.chips,
+    filteredOptions: dropdownLogic.filteredOptions,
+    selectedOption: dropdownLogic.selectedOption,
+    onEnter: function onEnter() {
+      // Default behavior for Enter key when no options are available
+    },
+    onAddCustomValue: handleAddCustomValue,
+    onNavigateOptions: dropdownLogic.navigateOptions,
+    onSelectOption: function onSelectOption(option) {
+      var selected = dropdownLogic.selectOption(option);
+      if (selected) {
+        handleSelectOption(selected);
       }
-      setInputValue('');
-      setChipError('');
-    }
-  };
-  var getInputPlaceholder = function getInputPlaceholder() {
-    if (localChips.length === 0) return placeholder;
+    },
+    onCloseDropdown: dropdownLogic.closeDropdown,
+    onRemoveLastChip: handleRemoveLastChip,
+    inputRef: inputRef
+  });
+  var inputPlaceholder = useMemo(function () {
+    if (chipManagement.chips.length === 0) return placeholder;
     if (availableOptions.length > 0) return searchPlaceholder || searchPlaceholderText;
     if (allowCustomValues) return typeAndEnterPlaceholderText;
     return noOptionsPlaceholderText;
-  };
+  }, [chipManagement.chips.length, placeholder, availableOptions.length, searchPlaceholder, searchPlaceholderText, allowCustomValues, typeAndEnterPlaceholderText, noOptionsPlaceholderText]);
+  var hasError = chipError || chipManagement.hasErrorChips;
+  var errorMessage = chipError || chipManagement.getErrorMessage();
+  var containerClassName = useMemo(function () {
+    return classNames('multi-textarea-chips', className, {
+      'multi-textarea-chips--disabled': disabled,
+      'multi-textarea-chips--error': hasError
+    });
+  }, [className, disabled, hasError]);
+  var inputWrapperClassName = useMemo(function () {
+    return classNames('multi-textarea-input-wrapper', {
+      'with-error-styles': hasError
+    });
+  }, [hasError]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('multi-textarea-chips', className)
-  }, label && /*#__PURE__*/React.createElement("div", {
-    className: "multi-textarea-chips__label"
+    className: containerClassName,
+    ref: containerRef
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: "multi-textarea-chips__label",
+    htmlFor: "".concat(fieldName, "-input")
   }, label), /*#__PURE__*/React.createElement("div", {
-    className: classNames('multi-textarea-input-wrapper', {
-      'with-error-styles': !!chipError
-    })
+    className: inputWrapperClassName
   }, /*#__PURE__*/React.createElement("div", {
     className: "multi-textarea-chips__content"
-  }, localChips.map(function (chip, index) {
-    var isItem = typeof chip !== 'string';
+  }, chipManagement.chips.map(function (chip, index) {
+    var isItem = _typeof(chip) === 'object';
     var text = isItem ? chip.text : chip;
     var hasError = isItem ? Boolean(chip.hasError) : false;
     return /*#__PURE__*/React.createElement(Chips, {
       key: "".concat(text, "-").concat(index),
       text: text,
-      withAction: true,
+      withAction: !disabled,
       onClick: function onClick() {
-        return handleRemoveChip(text);
+        return chipManagement.removeChip(text);
       },
       size: "medium",
       color: hasError ? 'danger' : 'primary',
       type: "accent",
-      disabled: disabled
+      disabled: disabled,
+      "aria-label": "Remove ".concat(text, " chip")
     });
   }), /*#__PURE__*/React.createElement("div", {
     className: "multi-textarea-chips__input-container"
-  }, /*#__PURE__*/React.createElement("input", _extends({}, formProps, {
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    id: "".concat(fieldName, "-input")
+  }, formProps, {
+    autoComplete: "off",
     ref: inputRef,
     type: "text",
     value: inputValue,
     onChange: handleInputChange,
-    onKeyDown: handleKeyDown,
+    onKeyDown: keyboardNavigation.handleKeyDown,
     onFocus: handleInputFocus,
-    placeholder: getInputPlaceholder(),
+    placeholder: inputPlaceholder,
     className: "multi-textarea-chips__input",
-    disabled: disabled
-  })), showDropdown && /*#__PURE__*/React.createElement("div", {
-    className: "multi-textarea-chips__dropdown"
-  }, filteredOptions.map(function (option) {
+    disabled: disabled,
+    "aria-describedby": hasError ? "".concat(fieldName, "-error") : helperText ? "".concat(fieldName, "-helper") : undefined,
+    "aria-invalid": hasError ? 'true' : 'false',
+    "aria-expanded": dropdownLogic.showDropdown,
+    "aria-autocomplete": "list",
+    role: "combobox"
+  })), dropdownLogic.showDropdown && /*#__PURE__*/React.createElement("div", {
+    className: "multi-textarea-chips__dropdown",
+    role: "listbox",
+    "aria-label": "Available options"
+  }, dropdownLogic.filteredOptions.map(function (option) {
     return /*#__PURE__*/React.createElement("div", {
       key: option,
       className: classNames('multi-textarea-chips__dropdown-item', {
-        'multi-textarea-chips__dropdown-item--selected': selectedOption === option
+        'multi-textarea-chips__dropdown-item--selected': dropdownLogic.selectedOption === option
       }),
       onClick: function onClick() {
         return handleSelectOption(option);
-      }
+      },
+      role: "option",
+      "aria-selected": dropdownLogic.selectedOption === option
     }, /*#__PURE__*/React.createElement("div", {
       className: "multi-textarea-chips__radio"
     }, /*#__PURE__*/React.createElement("div", {
       className: classNames('multi-textarea-chips__radio-button', {
-        'multi-textarea-chips__radio-button--selected': selectedOption === option
+        'multi-textarea-chips__radio-button--selected': dropdownLogic.selectedOption === option
       })
     })), /*#__PURE__*/React.createElement("span", {
       className: "multi-textarea-chips__option-text"
     }, option));
-  }))))), !!chipError && /*#__PURE__*/React.createElement(ErrorMessage, {
-    message: chipError
-  }), helperText && !chipError && /*#__PURE__*/React.createElement("div", {
+  }))))), hasError && /*#__PURE__*/React.createElement(ErrorMessage, {
+    message: errorMessage
+  }), helperText && !hasError && /*#__PURE__*/React.createElement("div", {
+    id: "".concat(fieldName, "-helper"),
     className: "multi-textarea-chips__helper"
   }, helperText));
 };
+var MultiTextareaWithChips = /*#__PURE__*/memo(MultiTextareaWithChipsComponent);
 MultiTextareaWithChips.displayName = 'MultiTextareaWithChips';
 
 export { MultiTextareaWithChips };

package/components/MultiTextareaWithChips/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useChipManagement } from './useChipManagement';
+export { useChipValidation } from './useChipValidation';
+export { useDropdownLogic } from './useDropdownLogic';
+export { useKeyboardNavigation } from './useKeyboardNavigation';

package/components/MultiTextareaWithChips/hooks/index.js

@@ -0,0 +1,8 @@
+export { useChipManagement } from './useChipManagement.js';
+export { useChipValidation } from './useChipValidation.js';
+export { useDropdownLogic } from './useDropdownLogic.js';
+export { useKeyboardNavigation } from './useKeyboardNavigation.js';
+import '../../../typeof-e9310111.js';
+import '../../../toConsumableArray-d592cd83.js';
+import '../../../slicedToArray-093df980.js';
+import 'react';

package/components/MultiTextareaWithChips/hooks/useChipManagement.d.ts

@@ -0,0 +1,21 @@
+import type { ChipValue } from '../types';
+interface UseChipManagementProps {
+    initialChips: ChipValue[];
+    fieldName: string;
+    formProps?: {
+        setFieldValue?: (fieldName: string, value: TFormValue) => void;
+        [key: string]: TFormValue | ((fieldName: string, value: TFormValue) => void) | undefined;
+    };
+    setValue?: (fieldName: string, value: TFormValue) => void;
+    onAddChip?: (chip: string) => void;
+    onRemoveChip?: (chip: string) => void;
+}
+export declare const useChipManagement: ({ initialChips, fieldName, formProps, setValue, onAddChip, onRemoveChip }: UseChipManagementProps) => {
+    chips: ChipValue[];
+    addChip: (chip: ChipValue) => void;
+    removeChip: (chipText: string) => void;
+    getChipTexts: () => string[];
+    hasErrorChips: boolean;
+    getErrorMessage: () => string;
+};
+export {};

package/components/MultiTextareaWithChips/hooks/useChipManagement.js

@@ -0,0 +1,81 @@
+import { _ as _typeof } from '../../../typeof-e9310111.js';
+import { _ as _toConsumableArray } from '../../../toConsumableArray-d592cd83.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-093df980.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+var useChipManagement = function useChipManagement(_ref) {
+  var initialChips = _ref.initialChips,
+    fieldName = _ref.fieldName,
+    formProps = _ref.formProps,
+    setValue = _ref.setValue,
+    onAddChip = _ref.onAddChip,
+    onRemoveChip = _ref.onRemoveChip;
+  var _useState = useState(initialChips),
+    _useState2 = _slicedToArray(_useState, 2),
+    chips = _useState2[0],
+    setChips = _useState2[1];
+  var isUserInteraction = useRef(false);
+  useEffect(function () {
+    if (!isUserInteraction.current) {
+      setChips(initialChips);
+    }
+  }, [initialChips]);
+  var updateFormValue = useCallback(function (newChips) {
+    if (isUserInteraction.current) {
+      if (formProps !== null && formProps !== void 0 && formProps.setFieldValue) {
+        formProps.setFieldValue(fieldName, newChips);
+      }
+      if (setValue) {
+        setValue(fieldName, newChips);
+      }
+    }
+  }, [formProps, setValue, fieldName]);
+  var addChip = useCallback(function (chip) {
+    isUserInteraction.current = true;
+    var newChips = [].concat(_toConsumableArray(chips), [chip]);
+    setChips(newChips);
+    updateFormValue(newChips);
+    if (typeof chip === 'string') {
+      onAddChip === null || onAddChip === void 0 || onAddChip(chip);
+    } else {
+      onAddChip === null || onAddChip === void 0 || onAddChip(chip.text);
+    }
+  }, [chips, updateFormValue, onAddChip]);
+  var removeChip = useCallback(function (chipText) {
+    isUserInteraction.current = true;
+    var newChips = chips.filter(function (chip) {
+      var text = typeof chip === 'string' ? chip : chip.text;
+      return text !== chipText;
+    });
+    setChips(newChips);
+    updateFormValue(newChips);
+    onRemoveChip === null || onRemoveChip === void 0 || onRemoveChip(chipText);
+  }, [chips, updateFormValue, onRemoveChip]);
+  var getChipTexts = useCallback(function () {
+    return chips.map(function (chip) {
+      return typeof chip === 'string' ? chip : chip.text;
+    });
+  }, [chips]);
+  var hasErrorChips = chips.some(function (chip) {
+    return _typeof(chip) === 'object' && chip.hasError;
+  });
+  var getErrorMessage = useCallback(function () {
+    var errorChips = chips.filter(function (chip) {
+      return _typeof(chip) === 'object' && chip.hasError;
+    });
+    var firstError = errorChips.find(function (chip) {
+      return chip.errorMessage;
+    });
+    return (firstError === null || firstError === void 0 ? void 0 : firstError.errorMessage) || '';
+  }, [chips]);
+  return {
+    chips: chips,
+    addChip: addChip,
+    removeChip: removeChip,
+    getChipTexts: getChipTexts,
+    hasErrorChips: hasErrorChips,
+    getErrorMessage: getErrorMessage
+  };
+};
+
+export { useChipManagement };

package/components/MultiTextareaWithChips/hooks/useChipValidation.d.ts

@@ -0,0 +1,13 @@
+import type { AnySchema } from 'yup';
+import type { TChipItem } from '../types';
+interface UseChipValidationProps {
+    validationSchema?: AnySchema;
+    errorMessage?: string;
+    allowInvalidChips?: boolean;
+    minChipLength?: number;
+    maxChipLength?: number;
+}
+export declare const useChipValidation: ({ validationSchema, errorMessage, allowInvalidChips, minChipLength, maxChipLength }: UseChipValidationProps) => {
+    createValidatedChip: (chipText: string) => TChipItem;
+};
+export {};

package/components/MultiTextareaWithChips/hooks/useChipValidation.js

@@ -0,0 +1,65 @@
+import { useCallback } from 'react';
+
+var useChipValidation = function useChipValidation(_ref) {
+  var validationSchema = _ref.validationSchema,
+    errorMessage = _ref.errorMessage,
+    _ref$allowInvalidChip = _ref.allowInvalidChips,
+    allowInvalidChips = _ref$allowInvalidChip === void 0 ? false : _ref$allowInvalidChip,
+    minChipLength = _ref.minChipLength,
+    maxChipLength = _ref.maxChipLength;
+  var createValidatedChip = useCallback(function (chipText) {
+    var trimmedText = chipText.trim();
+    if (minChipLength && trimmedText.length < minChipLength) {
+      var message = "Chip must be at least ".concat(minChipLength, " characters long");
+      if (!allowInvalidChips) {
+        throw new Error(message);
+      }
+      return {
+        text: trimmedText,
+        hasError: true,
+        errorMessage: message
+      };
+    }
+    if (maxChipLength && trimmedText.length > maxChipLength) {
+      var _message = "Chip must be no more than ".concat(maxChipLength, " characters long");
+      if (!allowInvalidChips) {
+        throw new Error(_message);
+      }
+      return {
+        text: trimmedText,
+        hasError: true,
+        errorMessage: _message
+      };
+    }
+    if (validationSchema) {
+      try {
+        validationSchema.validateSync(trimmedText);
+        return {
+          text: trimmedText,
+          hasError: false,
+          errorMessage: ''
+        };
+      } catch (error) {
+        var _message2 = errorMessage || error.message || 'Invalid value';
+        if (!allowInvalidChips) {
+          throw new Error(_message2);
+        }
+        return {
+          text: trimmedText,
+          hasError: true,
+          errorMessage: _message2
+        };
+      }
+    }
+    return {
+      text: trimmedText,
+      hasError: false,
+      errorMessage: ''
+    };
+  }, [validationSchema, errorMessage, allowInvalidChips, minChipLength, maxChipLength]);
+  return {
+    createValidatedChip: createValidatedChip
+  };
+};
+
+export { useChipValidation };

package/components/MultiTextareaWithChips/hooks/useDropdownLogic.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+interface UseDropdownLogicProps {
+    availableOptions: string[];
+    chipTexts: string[];
+    containerRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const useDropdownLogic: ({ availableOptions, chipTexts, containerRef }: UseDropdownLogicProps) => {
+    showDropdown: boolean;
+    filteredOptions: string[];
+    selectedOption: string;
+    handleInputFocus: (inputValue: string) => void;
+    handleInputChange: (inputValue: string) => void;
+    navigateOptions: (direction: 'up' | 'down') => void;
+    selectOption: (option?: string) => string | null;
+    closeDropdown: () => void;
+};
+export {};

package/components/MultiTextareaWithChips/hooks/useDropdownLogic.js

@@ -0,0 +1,91 @@
+import { _ as _slicedToArray } from '../../../slicedToArray-093df980.js';
+import { useState, useCallback, useEffect } from 'react';
+
+var useDropdownLogic = function useDropdownLogic(_ref) {
+  var availableOptions = _ref.availableOptions,
+    chipTexts = _ref.chipTexts,
+    containerRef = _ref.containerRef;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showDropdown = _useState2[0],
+    setShowDropdown = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filteredOptions = _useState4[0],
+    setFilteredOptions = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedOption = _useState6[0],
+    setSelectedOption = _useState6[1];
+  var filterOptions = useCallback(function (inputValue) {
+    if (availableOptions.length === 0) return;
+    var filtered = availableOptions.filter(function (option) {
+      return option.toLowerCase().includes(inputValue.toLowerCase()) && !chipTexts.includes(option);
+    });
+    setFilteredOptions(filtered);
+  }, [availableOptions, chipTexts]);
+  var handleInputFocus = useCallback(function (inputValue) {
+    if (availableOptions.length > 0) {
+      if (inputValue.trim()) {
+        setShowDropdown(true);
+      } else {
+        filterOptions('');
+        setShowDropdown(true);
+      }
+    }
+  }, [availableOptions.length, filterOptions]);
+  var handleInputChange = useCallback(function (inputValue) {
+    setSelectedOption('');
+    filterOptions(inputValue);
+    setShowDropdown(availableOptions.length > 0 && inputValue.trim().length > 0);
+  }, [filterOptions, availableOptions.length]);
+  var navigateOptions = useCallback(function (direction) {
+    if (filteredOptions.length === 0) return;
+    var currentIndex = selectedOption ? filteredOptions.indexOf(selectedOption) : -1;
+    var nextIndex;
+    if (direction === 'down') {
+      nextIndex = currentIndex < filteredOptions.length - 1 ? currentIndex + 1 : 0;
+    } else {
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : filteredOptions.length - 1;
+    }
+    setSelectedOption(filteredOptions[nextIndex]);
+  }, [filteredOptions, selectedOption]);
+  var selectOption = useCallback(function (option) {
+    var optionToSelect = option || selectedOption || filteredOptions[0];
+    if (optionToSelect) {
+      setShowDropdown(false);
+      setSelectedOption('');
+      return optionToSelect;
+    }
+    return null;
+  }, [selectedOption, filteredOptions]);
+  var closeDropdown = useCallback(function () {
+    setShowDropdown(false);
+    setSelectedOption('');
+  }, []);
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        closeDropdown();
+      }
+    };
+    if (showDropdown) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showDropdown, closeDropdown, containerRef]);
+  return {
+    showDropdown: showDropdown,
+    filteredOptions: filteredOptions,
+    selectedOption: selectedOption,
+    handleInputFocus: handleInputFocus,
+    handleInputChange: handleInputChange,
+    navigateOptions: navigateOptions,
+    selectOption: selectOption,
+    closeDropdown: closeDropdown
+  };
+};
+
+export { useDropdownLogic };

package/components/MultiTextareaWithChips/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,23 @@
+import type { KeyboardEvent } from 'react';
+interface UseKeyboardNavigationProps {
+    disabled: boolean;
+    inputValue: string;
+    allowCustomValues: boolean;
+    chips: Array<string | {
+        text: string;
+        [key: string]: unknown;
+    }>;
+    filteredOptions: string[];
+    selectedOption: string;
+    onEnter: () => void;
+    onAddCustomValue: (value: string) => void;
+    onNavigateOptions: (direction: 'up' | 'down') => void;
+    onSelectOption: (option?: string) => void;
+    onCloseDropdown: () => void;
+    onRemoveLastChip: () => void;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+}
+export declare const useKeyboardNavigation: ({ disabled, inputValue, allowCustomValues, chips, filteredOptions, selectedOption, onEnter, onAddCustomValue, onNavigateOptions, onSelectOption, onCloseDropdown, onRemoveLastChip, inputRef }: UseKeyboardNavigationProps) => {
+    handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+};
+export {};

package/components/MultiTextareaWithChips/hooks/useKeyboardNavigation.js

@@ -0,0 +1,72 @@
+import { useCallback } from 'react';
+
+var useKeyboardNavigation = function useKeyboardNavigation(_ref) {
+  var disabled = _ref.disabled,
+    inputValue = _ref.inputValue,
+    allowCustomValues = _ref.allowCustomValues,
+    chips = _ref.chips,
+    filteredOptions = _ref.filteredOptions,
+    selectedOption = _ref.selectedOption,
+    onEnter = _ref.onEnter,
+    onAddCustomValue = _ref.onAddCustomValue,
+    onNavigateOptions = _ref.onNavigateOptions,
+    onSelectOption = _ref.onSelectOption,
+    onCloseDropdown = _ref.onCloseDropdown,
+    onRemoveLastChip = _ref.onRemoveLastChip,
+    inputRef = _ref.inputRef;
+  var handleKeyDown = useCallback(function (e) {
+    var _inputRef$current;
+    if (disabled) return;
+    var trimmedInput = inputValue.trim();
+    switch (e.key) {
+      case 'Enter':
+        e.preventDefault();
+        if (selectedOption) {
+          onSelectOption(selectedOption);
+        } else if (filteredOptions.length > 0) {
+          onSelectOption(filteredOptions[0]);
+        } else if (allowCustomValues && trimmedInput) {
+          onAddCustomValue(trimmedInput);
+        } else {
+          onEnter();
+        }
+        break;
+      case ',':
+        if (allowCustomValues && trimmedInput) {
+          e.preventDefault();
+          onAddCustomValue(trimmedInput);
+        }
+        break;
+      case ' ':
+      case 'Space':
+        if (allowCustomValues && trimmedInput) {
+          e.preventDefault();
+          onAddCustomValue(trimmedInput);
+        }
+        break;
+      case 'Escape':
+        onCloseDropdown();
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        onNavigateOptions('down');
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        onNavigateOptions('up');
+        break;
+      case 'Backspace':
+        if (!inputValue && chips.length > 0) {
+          e.preventDefault();
+          onRemoveLastChip();
+        }
+        break;
+    }
+  }, [disabled, inputValue, allowCustomValues, chips.length, filteredOptions, selectedOption, onEnter, onAddCustomValue, onNavigateOptions, onSelectOption, onCloseDropdown, onRemoveLastChip, inputRef]);
+  return {
+    handleKeyDown: handleKeyDown
+  };
+};
+
+export { useKeyboardNavigation };

package/components/MultiTextareaWithChips/index.d.ts

@@ -1,3 +1,3 @@
 export * from './MultiTextareaWithChips';
-export * from './InputWrapper';
 export * from './types';
+export * from './hooks';

package/components/MultiTextareaWithChips/index.js

@@ -1,7 +1,10 @@
 export { MultiTextareaWithChips } from './MultiTextareaWithChips.js';
-export { InputWrapper } from './InputWrapper.js';
+export { useChipManagement } from './hooks/useChipManagement.js';
+export { useChipValidation } from './hooks/useChipValidation.js';
+export { useDropdownLogic } from './hooks/useDropdownLogic.js';
+export { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
 import '../../extends-cc60c71c.js';
-import '../../toConsumableArray-d592cd83.js';
+import '../../typeof-e9310111.js';
 import '../../slicedToArray-093df980.js';
 import 'react';
 import '../Chips/Chips.js';
@@ -12,7 +15,6 @@ import 'dayjs';
 import '../Chips/types.js';
 import '../SVGIcons/IconDismissCircleFilled.js';
 import '../../defineProperty-109927cc.js';
-import '../../typeof-e9310111.js';
 import '../Chips/consts.js';
 import '../../helperComponents/ErrorMessage/ErrorMessage.js';
 import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
@@ -36,3 +38,4 @@ import '../SVGIcons/IconInfo.js';
 import 'react-syntax-highlighter';
 import '../../hooks/useFormProps.js';
 import '../../context/types.js';
+import '../../toConsumableArray-d592cd83.js';

package/components/MultiTextareaWithChips/types.d.ts

@@ -1,15 +1,32 @@
 import type { AnySchema } from 'yup';
+export interface TChipItem {
+    text: string;
+    hasError?: boolean;
+    errorMessage?: string;
+    id?: string | number;
+    [key: string]: unknown;
+}
+export type ChipValue = string | TChipItem;
 export interface TMultiTextareaWithChipsProps extends IFormCompProps {
-    allowCustomValues?: boolean;
-    allowInvalidChips?: boolean;
-    autoFormIntegration?: boolean;
-    availableOptions?: string[];
-    chipValidationErrorMessage?: string;
-    chipValidationSchema?: AnySchema;
-    chips?: Array<string | TChipItem>;
+    label: string;
+    placeholder: string;
+    helperText?: string;
+    chips?: ChipValue[];
+    onAddChip?: (chip: string) => void;
+    onRemoveChip?: (chip: string) => void;
     className?: string;
     disabled?: boolean;
-    error?: string;
+    availableOptions?: string[];
+    allowCustomValues?: boolean;
+    searchPlaceholder?: string;
+    chipValidationSchema?: AnySchema;
+    chipValidationErrorMessage?: string;
+    allowInvalidChips?: boolean;
+    minChipLength?: number;
+    maxChipLength?: number;
+    searchPlaceholderText?: string;
+    typeAndEnterPlaceholderText?: string;
+    noOptionsPlaceholderText?: string;
     fieldName?: string;
     formProps?: {
         setFieldValue?: (fieldName: string, value: TFormValue, shouldValidate?: {
@@ -19,27 +36,4 @@ export interface TMultiTextareaWithChipsProps extends IFormCompProps {
             shouldValidate: boolean;
         }) => void) | undefined;
     };
-    helperText?: string;
-    label: string;
-    maxChipLength?: number;
-    maxChips?: number;
-    minChipLength?: number;
-    minChips?: number;
-    noOptionsPlaceholderText?: string;
-    onAddChip?: (chip: string) => void;
-    onAddChipItem?: (chip: TChipItem) => void;
-    onRemoveChip?: (chip: string) => void;
-    onRemoveChipItem?: (chip: TChipItem) => void;
-    placeholder: string;
-    required?: boolean;
-    searchPlaceholder?: string;
-    searchPlaceholderText?: string;
-    typeAndEnterPlaceholderText?: string;
-    validateChip?: (chip: string) => void;
 }
-export type TChipItem = {
-    text: string;
-    hasError?: boolean;
-    errorMessage?: string;
-    id?: string | number;
-};

package/components/Select/Select/Select.js

@@ -94,6 +94,8 @@ var Select = function Select(props) {
     isSearchable = _props$isSearchable === void 0 ? false : _props$isSearchable,
     _props$isDynamicSearc = props.isDynamicSearchable,
     isDynamicSearchable = _props$isDynamicSearc === void 0 ? false : _props$isDynamicSearc,
+    _props$trimSearchValu = props.trimSearchValue,
+    trimSearchValue = _props$trimSearchValu === void 0 ? false : _props$trimSearchValu,
     disabled = props.disabled,
     _props$dataId = props.dataId,
     dataId = _props$dataId === void 0 ? '' : _props$dataId,
@@ -212,8 +214,9 @@ var Select = function Select(props) {
     if (!searchValue) {
       return options;
     }
+    var processedSearchValue = trimSearchValue ? searchValue.trim().toLowerCase() : searchValue.toLowerCase();
     return options.filter(function (dataItem) {
-      return typeof dataItem.label === 'string' && dataItem.label.toLowerCase().includes(searchValue.toLowerCase());
+      return typeof dataItem.label === 'string' && dataItem.label.toLowerCase().includes(processedSearchValue);
     });
   }, [searchValue, options]);
   var onItemSelect = function onItemSelect(value) {

package/components/Select/types.d.ts

@@ -127,6 +127,7 @@ export interface TSingleSelectPropTypes extends IFormCompProps, TSelectBaseProps
     onInputFormatting?: (value: string) => string;
     isSearchable?: boolean;
     isDynamicSearchable?: boolean;
+    trimSearchValue?: boolean;
     outerHelperText?: string;
     innerHelperText?: string;
     labelAddons?: JSX.Element;

package/index.js

@@ -473,7 +473,10 @@ export { IconArrowCircleDownSplit } from './components/SVGIcons/IconArrowCircleD
 export { OneTimePassword } from './components/OneTimePassword/OneTimePassword.js';
 export { OptionItem } from './helperComponents/OptionItem/OptionItem.js';
 export { MultiTextareaWithChips } from './components/MultiTextareaWithChips/MultiTextareaWithChips.js';
-export { InputWrapper } from './components/MultiTextareaWithChips/InputWrapper.js';
+export { useChipManagement } from './components/MultiTextareaWithChips/hooks/useChipManagement.js';
+export { useChipValidation } from './components/MultiTextareaWithChips/hooks/useChipValidation.js';
+export { useDropdownLogic } from './components/MultiTextareaWithChips/hooks/useDropdownLogic.js';
+export { useKeyboardNavigation } from './components/MultiTextareaWithChips/hooks/useKeyboardNavigation.js';
 export { FormContext } from './context/types.js';
 import 'react';
 export { useFormProps } from './hooks/useFormProps.js';

package/package.json

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

package/stories/MultiTextareaWithChips.stories.d.ts

@@ -1,7 +1,7 @@
 import React, { JSX } from 'react';
 declare const _default: {
     title: string;
-    component: React.FC<import("../components/MultiTextareaWithChips").TMultiTextareaWithChipsProps>;
+    component: React.NamedExoticComponent<import("../components/MultiTextareaWithChips").TMultiTextareaWithChipsProps>;
     parameters: {
         docs: {
             description: {
@@ -11,14 +11,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: () => JSX.Element;
-export declare const WithInitialChips: () => JSX.Element;
-export declare const WithLongChips: () => JSX.Element;
-export declare const Disabled: () => JSX.Element;
-export declare const WithSearchAndSelect: () => JSX.Element;
-export declare const WithCustomValuesAllowed: () => JSX.Element;
-export declare const WithEmailValidation: () => JSX.Element;
-export declare const WithInvalidChipsAllowed: () => JSX.Element;
-export declare const PerformanceTest: () => JSX.Element;
-export declare const WithHdmSerialNumberValidation: () => JSX.Element;
 export declare const SimpleFormUsage: () => JSX.Element;

package/components/MultiTextareaWithChips/InputWrapper.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface TInputWrapperProps {
-    children: React.ReactNode;
-    className?: string;
-}
-export declare const InputWrapper: React.FC<TInputWrapperProps>;
-export {};

package/components/MultiTextareaWithChips/InputWrapper.js

@@ -1,13 +0,0 @@
-import React from 'react';
-
-var InputWrapper = function InputWrapper(_ref) {
-  var children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "bg-gray-50 border border-gray-300 rounded-lg p-3 min-h-12 ".concat(className)
-  }, children);
-};
-InputWrapper.displayName = 'InputWrapper';
-
-export { InputWrapper };