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

`MoleculeSelect` is a customized `select` created from a combination of `AtomInput`, `MoleculeInputTags`, `MoleculeDropdownList` and `MoleculeDropdownOption`

import { Children, cloneElement, forwardRef, useMemo } from 'react';
import PropTypes from 'prop-types';
import { inputTypes } from '@s-ui/react-atom-input';
import MoleculeDropdownList from '@s-ui/react-molecule-dropdown-list';
import MoleculeInputTags from '@s-ui/react-molecule-input-tags';
import { SELECT_DROPDOWN_LIST_SIZES, SELECT_INPUT_SIZES, SELECT_TAG_SIZES, useDropdown } from '../config.js';
import { CLASS_SEARCH_CONTAINER } from './config.js';
import MoleculeInputSelect from './MoleculeInputSelect.js';
import Search from './Search.js';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
var MoleculeSelectFieldMultiSelection = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
  /* eslint-disable react/prop-types */
  var children = props.children,
    disabled = props.disabled,
    isOpen = props.isOpen,
    onToggle = props.onToggle,
    onChange = props.onChange,
    iconArrowDown = props.iconArrowDown,
    iconCloseTag = props.iconCloseTag,
    refSearch = props.refSearch,
    _props$value = props.value,
    values = _props$value === void 0 ? [] : _props$value,
    placeholder = props.placeholder,
    keysSelection = props.keysSelection,
    id = props.id,
    size = props.size,
    tagSize = props.tagSize,
    required = props.required,
    _props$optionsData = props.optionsData,
    optionsData = _props$optionsData === void 0 ? {} : _props$optionsData,
    selectSize = props.selectSize,
    tabIndex = props.tabIndex,
    maxTags = props.maxTags,
    responsive = props.responsive,
    onTriggerClick = props.onTriggerClick;
  var tags = values.map(function (value) {
    return optionsData[value];
  });
  var _useDropdown = useDropdown(),
    hasSearch = _useDropdown.hasSearch,
    isFirstOptionFocused = _useDropdown.isFirstOptionFocused,
    inputSearch = _useDropdown.inputSearch,
    focusedFirstOption = _useDropdown.focusedFirstOption,
    setFocusedFirstOption = _useDropdown.setFocusedFirstOption;
  var isFull = maxTags && (tags == null ? void 0 : tags.length) >= maxTags;
  var handleMultiSelection = function handleMultiSelection(ev, _ref) {
    var valueOptionSelected = _ref.value;
    var handleToggle = function handleToggle(ev) {
      var key = ev.key;
      var isKeySelection = keysSelection.includes(key);
      if (ev.key !== undefined && !isKeySelection) onToggle(ev, {
        isOpen: false
      });
    };
    var isValueSelectedAlreadySelected = function isValueSelectedAlreadySelected() {
      return values.includes(valueOptionSelected);
    };
    var removeFromValues = function removeFromValues() {
      return values.filter(function (value) {
        return value !== valueOptionSelected;
      });
    };
    var addToValues = function addToValues() {
      return [].concat(values, [valueOptionSelected]);
    };
    if (isValueSelectedAlreadySelected()) {
      onChange(ev, {
        value: removeFromValues()
      });
    } else if (!isFull) {
      onChange(ev, {
        value: addToValues()
      });
    }
    handleToggle(ev);
  };
  var handleChangeTags = function handleChangeTags(ev, _ref2) {
    var value = _ref2.tags;
    onChange(ev, {
      value: value
    });
    // refMoleculeSelect.current.focus()
  };
  var handleKeyDown = function handleKeyDown(ev) {
    if (isFirstOptionFocused()) {
      setFocusedFirstOption(true);
    } else {
      setFocusedFirstOption(false);
    }
    switch (ev.key) {
      case 'Escape':
        onToggle(ev, {
          isOpen: false
        });
        forwardedRef.current.focus();
        break;
      case 'Tab':
        onToggle(ev, {
          isOpen: false
        });
        isOpen && forwardedRef.current.focus();
        break;
      case 'ArrowUp':
        focusedFirstOption && setTimeout(function () {
          return inputSearch == null ? void 0 : inputSearch.focus();
        });
        break;
    }
  };
  var extendedChildren = useMemo(function () {
    return Children.toArray(children).filter(Boolean).map(function (child) {
      return /*#__PURE__*/cloneElement(child, {
        disabled: !values.includes(child.props.value) && isFull
      });
    });
  }, [children, isFull, values]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(MoleculeInputSelect, {
      disabled: disabled,
      id: id,
      tags: tags,
      onClick: onTriggerClick,
      tagsCloseIcon: iconCloseTag,
      iconArrowDown: iconArrowDown,
      onChangeTags: handleChangeTags,
      isOpen: isOpen,
      placeholder: !values.length ? placeholder : '',
      optionsData: optionsData,
      autoComplete: "off",
      isBorderless: true,
      required: required,
      size: selectSize,
      tabIndex: tabIndex,
      maxTags: maxTags,
      value: "",
      children: /*#__PURE__*/_jsx(MoleculeInputTags, {
        innerRefInput: forwardedRef,
        responsive: responsive,
        inputMode: inputTypes.NONE,
        tagSize: tagSize
      })
    }), /*#__PURE__*/_jsxs("div", {
      className: CLASS_SEARCH_CONTAINER,
      children: [hasSearch && /*#__PURE__*/_jsx(Search, {
        ref: refSearch
      }), /*#__PURE__*/_jsx(MoleculeDropdownList, {
        checkbox: "true",
        size: size,
        visible: isOpen,
        alwaysRender: true,
        onSelect: handleMultiSelection,
        onKeyDown: handleKeyDown,
        value: values,
        children: extendedChildren
      })]
    })]
  });
});
MoleculeSelectFieldMultiSelection.displayName = 'MoleculeSelectFieldMultiSelection';
export default MoleculeSelectFieldMultiSelection;