@s-ui/react-molecule-autosuggest/lib/components/MultipleSelection/index.js

`MoleculeAutosuggest` is an input that will display a list of suggestions while values are entered It allows Single and Multiple Selection

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
var _excluded = ["tags", "value"],
  _excluded2 = ["value"];
/* eslint-disable react/prop-types */
import { Children, useRef } from 'react';
import isEqual from 'lodash.isequal';
import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs';
import MoleculeDropdownList from '@s-ui/react-molecule-dropdown-list';
import MoleculeInputTags from '@s-ui/react-molecule-input-tags';
import InputWithClearUI from '../InputWithClearUI/index.js';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var MoleculeAutosuggestFieldMultiSelection = function MoleculeAutosuggestFieldMultiSelection(_ref) {
  var allowDuplicates = _ref.allowDuplicates,
    autoFocus = _ref.autoFocus,
    _ref$autoComplete = _ref.autoComplete,
    autoComplete = _ref$autoComplete === void 0 ? 'nope' : _ref$autoComplete,
    children = _ref.children,
    design = _ref.design,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    iconClear = _ref.iconClear,
    _ref$iconCloseTag = _ref.iconCloseTag,
    iconCloseTag = _ref$iconCloseTag === void 0 ? /*#__PURE__*/_jsx("span", {}) : _ref$iconCloseTag,
    id = _ref.id,
    _ref$innerRefInput = _ref.innerRefInput,
    refInput = _ref$innerRefInput === void 0 ? {} : _ref$innerRefInput,
    inputMode = _ref.inputMode,
    isOpen = _ref.isOpen,
    maxLength = _ref.maxLength,
    minLength = _ref.minLength,
    onChange = _ref.onChange,
    onChangeTags = _ref.onChangeTags,
    onClear = _ref.onClear,
    onInputKeyDown = _ref.onInputKeyDown,
    onSelect = _ref.onSelect,
    onKeyDown = _ref.onKeyDown,
    onToggle = _ref.onToggle,
    placeholder = _ref.placeholder,
    required = _ref.required,
    shape = _ref.shape,
    size = _ref.size,
    tabIndex = _ref.tabIndex,
    _ref$tags = _ref.tags,
    tags = _ref$tags === void 0 ? [] : _ref$tags,
    type = _ref.type,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? '' : _ref$value;
  var innerRefInput = useRef();
  var moleculeInputRef = useMergeRefs(innerRefInput, refInput);
  var handleMultiSelection = function handleMultiSelection(ev, args) {
    if (args === void 0) {
      args = {};
    }
    var _args = args,
      value = _args.value;
    var newTags = [].concat(tags);
    var existsTag = tags.some(function (tagValue) {
      return isEqual(tagValue, value);
    });
    if (existsTag) {
      // delete
      newTags = tags.filter(function (tagValue) {
        return !isEqual(tagValue, value);
      });
    } else {
      // add
      newTags.push(value);
    }
    typeof onChangeTags === 'function' && onChangeTags(ev, _extends({}, args, {
      value: '',
      tags: newTags
    }));
    typeof onSelect === 'function' && onSelect(ev, _extends({}, args, {
      value: '',
      tags: newTags
    }));
    typeof onToggle === 'function' && onToggle(ev, {
      isOpen: false
    });
    innerRefInput.current && innerRefInput.current.focus();
  };
  var handleChangeTags = function handleChangeTags(ev, _ref2) {
    var tags = _ref2.tags,
      value = _ref2.value,
      args = _objectWithoutPropertiesLoose(_ref2, _excluded);
    var isOpen = Boolean(value);
    typeof onChangeTags === 'function' && onChangeTags(ev, _extends({
      tags: tags,
      value: value
    }, args));
    typeof onToggle === 'function' && onToggle(ev, {
      isOpen: isOpen
    });
    innerRefInput.current && innerRefInput.current.focus();
  };
  var handleChange = function handleChange(ev, _ref3) {
    var value = _ref3.value,
      args = _objectWithoutPropertiesLoose(_ref3, _excluded2);
    var isOpen = Boolean(value);
    typeof onChange === 'function' && onChange(ev, _extends({
      value: value
    }, args));
    typeof onToggle === 'function' && onToggle(ev, {
      isOpen: isOpen
    });
  };
  var handleClear = function handleClear(ev) {
    if (!disabled) {
      typeof onChange === 'function' && onChange(null, {
        value: ''
      });
      typeof onChangeTags === 'function' && onChangeTags(null, {
        tags: []
      });
      typeof onClear === 'function' && onClear(ev);
    }
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(InputWithClearUI, {
      allowDuplicates: allowDuplicates,
      autoComplete: autoComplete,
      autoFocus: autoFocus,
      disabled: disabled,
      iconClear: iconClear,
      id: id,
      innerRefInput: moleculeInputRef,
      inputMode: inputMode,
      isOpen: isOpen,
      isVisibleClear: !disabled && tags.length,
      maxLength: maxLength,
      minLength: minLength,
      noBorder: true,
      onChange: handleChange,
      onChangeTags: handleChangeTags,
      onClick: onToggle,
      onClickClear: handleClear,
      onKeyDown: onInputKeyDown,
      placeholder: !tags.length ? placeholder : '',
      required: required,
      shape: shape,
      tabIndex: tabIndex,
      tags: tags,
      tagsCloseIcon: iconCloseTag,
      type: type,
      value: value,
      children: /*#__PURE__*/_jsx(MoleculeInputTags, {})
    }), isOpen && /*#__PURE__*/_jsx(MoleculeDropdownList, {
      checkbox: true,
      highlightQuery: value,
      onSelect: handleMultiSelection,
      onKeyDown: onKeyDown,
      size: size,
      value: tags,
      visible: isOpen && Children.count(children) > 0,
      design: design,
      children: children
    })]
  });
};
MoleculeAutosuggestFieldMultiSelection.displayName = 'MoleculeAutosuggestFieldMultiSelection';
export default MoleculeAutosuggestFieldMultiSelection;