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

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

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["value"],
  _excluded2 = ["value"];
/* eslint-disable react/prop-types */
import { Children } from 'react';
import AtomInput from '@s-ui/react-atom-input';
import MoleculeDropdownList from '@s-ui/react-molecule-dropdown-list';
import InputWithClearUI from '../InputWithClearUI/index.js';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var MoleculeAutosuggestSingleSelection = function MoleculeAutosuggestSingleSelection(_ref) {
  var autoFocus = _ref.autoFocus,
    ariaLabel = _ref.ariaLabel,
    _ref$autoComplete = _ref.autoComplete,
    autoComplete = _ref$autoComplete === void 0 ? 'nope' : _ref$autoComplete,
    children = _ref.children,
    design = _ref.design,
    disabled = _ref.disabled,
    iconClear = _ref.iconClear,
    id = _ref.id,
    _ref$innerRefInput = _ref.innerRefInput,
    refInput = _ref$innerRefInput === void 0 ? {} : _ref$innerRefInput,
    inputMode = _ref.inputMode,
    isOpen = _ref.isOpen,
    leftIcon = _ref.leftIcon,
    maxLength = _ref.maxLength,
    minLength = _ref.minLength,
    onChange = _ref.onChange,
    onClear = _ref.onClear,
    onClickRightIcon = _ref.onClickRightIcon,
    onInputKeyDown = _ref.onInputKeyDown,
    onKeyDown = _ref.onKeyDown,
    onSelect = _ref.onSelect,
    onToggle = _ref.onToggle,
    placeholder = _ref.placeholder,
    required = _ref.required,
    rightButton = _ref.rightButton,
    rightIcon = _ref.rightIcon,
    shape = _ref.shape,
    size = _ref.size,
    tabIndex = _ref.tabIndex,
    type = _ref.type,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? '' : _ref$value,
    noBorder = _ref.noBorder;
  var handleSelection = function handleSelection(ev, _ref2) {
    var value = _ref2.value,
      args = _objectWithoutPropertiesLoose(_ref2, _excluded);
    typeof onChange === 'function' && onChange(ev, _extends({
      value: value
    }, args));
    typeof onSelect === 'function' && onSelect(ev, _extends({
      value: value
    }, args));
    typeof onToggle === 'function' && onToggle(ev, {
      isOpen: false
    });
  };
  var handleChange = function handleChange(ev, _ref3) {
    var value = _ref3.value,
      args = _objectWithoutPropertiesLoose(_ref3, _excluded2);
    typeof onChange === 'function' && onChange(ev, _extends({
      value: value
    }, args));
    typeof onToggle === 'function' && onToggle(ev, {
      isOpen: true
    });
  };
  var handleClear = function handleClear(ev, args) {
    if (args === void 0) {
      args = {};
    }
    if (!disabled) {
      typeof onChange === 'function' && onChange(null, _extends({}, args, {
        value: ''
      }));
      typeof onClear === 'function' && onClear(ev);
    }
  };
  var handleRightClick = function handleRightClick(ev, args) {
    if (args === void 0) {
      args = {};
    }
    typeof onClickRightIcon === 'function' && onClickRightIcon(ev, _extends({}, args, {
      value: value
    }));
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(InputWithClearUI, {
      ariaLabel: ariaLabel,
      autoComplete: autoComplete,
      autoFocus: autoFocus,
      button: rightButton,
      disabled: disabled,
      iconClear: !disabled && iconClear,
      id: id,
      reference: refInput,
      inputMode: inputMode,
      isVisibleClear: value,
      leftIcon: leftIcon,
      maxLength: maxLength,
      minLength: minLength,
      onChange: handleChange,
      onClickClear: handleClear,
      onClickRightIcon: handleRightClick,
      onKeyDown: onInputKeyDown,
      placeholder: placeholder,
      required: required,
      rightIcon: rightIcon,
      shape: shape,
      tabIndex: tabIndex,
      type: type,
      value: value,
      noBorder: noBorder,
      children: /*#__PURE__*/_jsx(AtomInput, {})
    }), (value || isOpen) && /*#__PURE__*/_jsx(MoleculeDropdownList, {
      size: size,
      onSelect: handleSelection,
      visible: isOpen && Children.count(children) > 0,
      value: value,
      highlightQuery: value,
      onKeyDown: onKeyDown,
      design: design,
      children: children
    })]
  });
};
MoleculeAutosuggestSingleSelection.displayName = 'MoleculeAutosuggestSingleSelection';
export default MoleculeAutosuggestSingleSelection;