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

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

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["value", "children", "isOpen", "onToggle", "onTriggerClick", "onChange", "leftIcon", "iconArrowDown", "refMoleculeSelect", "refSearch", "selectSize", "placeholder", "id", "disabled", "optionsData", "required", "tabIndex", "size"];
import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import AtomInput, { inputTypes } from '@s-ui/react-atom-input';
import MoleculeDropdownList from '@s-ui/react-molecule-dropdown-list';
import { SELECT_DROPDOWN_LIST_SIZES as dropdownListSizes, SELECT_INPUT_SIZES as inputSizes, 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 MoleculeSelectSingleSelection = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
  var _ref$value = _ref.value,
    value = _ref$value === void 0 ? '' : _ref$value,
    children = _ref.children,
    isOpen = _ref.isOpen,
    onToggle = _ref.onToggle,
    onTriggerClick = _ref.onTriggerClick,
    onChange = _ref.onChange,
    leftIcon = _ref.leftIcon,
    iconArrowDown = _ref.iconArrowDown,
    refMoleculeSelect = _ref.refMoleculeSelect,
    refSearch = _ref.refSearch,
    selectSize = _ref.selectSize,
    placeholder = _ref.placeholder,
    id = _ref.id,
    disabled = _ref.disabled,
    _ref$optionsData = _ref.optionsData,
    optionsData = _ref$optionsData === void 0 ? {} : _ref$optionsData,
    required = _ref.required,
    tabIndex = _ref.tabIndex,
    size = _ref.size,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useDropdown = useDropdown(),
    hasSearch = _useDropdown.hasSearch,
    isFirstOptionFocused = _useDropdown.isFirstOptionFocused,
    inputSearch = _useDropdown.inputSearch,
    focusedFirstOption = _useDropdown.focusedFirstOption,
    setFocusedFirstOption = _useDropdown.setFocusedFirstOption;
  var handleSelection = function handleSelection(ev, _ref2) {
    var _forwardedRef$current;
    var value = _ref2.value;
    onChange(ev, {
      value: value
    });
    onToggle(ev, {
      isOpen: false
    });
    forwardedRef == null ? void 0 : (_forwardedRef$current = forwardedRef.current) == null ? void 0 : _forwardedRef$current.focus();
  };
  var handleKeyDown = function handleKeyDown(ev) {
    var _forwardedRef$current2, _forwardedRef$current3;
    if (isFirstOptionFocused()) {
      setFocusedFirstOption(true);
    } else {
      setFocusedFirstOption(false);
    }
    switch (ev == null ? void 0 : ev.key) {
      case 'Escape':
        onToggle(ev, {
          isOpen: false
        });
        forwardedRef == null ? void 0 : (_forwardedRef$current2 = forwardedRef.current) == null ? void 0 : _forwardedRef$current2.focus();
        break;
      case 'Tab':
        onToggle(ev, {
          isOpen: false
        });
        forwardedRef == null ? void 0 : (_forwardedRef$current3 = forwardedRef.current) == null ? void 0 : _forwardedRef$current3.focus();
        break;
      case 'ArrowUp':
        focusedFirstOption && setTimeout(function () {
          return inputSearch == null ? void 0 : inputSearch.focus();
        });
        break;
      default:
        break;
    }
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(MoleculeInputSelect, {
      disabled: disabled,
      id: id,
      isOpen: isOpen,
      value: optionsData[value] || '',
      onClick: onTriggerClick,
      leftIcon: leftIcon,
      iconArrowDown: iconArrowDown,
      placeholder: placeholder,
      autoComplete: "off",
      required: required,
      size: selectSize,
      tabIndex: tabIndex,
      children: /*#__PURE__*/_jsx(AtomInput, _extends({
        ref: forwardedRef,
        inputMode: inputTypes.NONE,
        noBorder: true
      }, props))
    }), /*#__PURE__*/_jsxs("div", {
      className: CLASS_SEARCH_CONTAINER,
      children: [hasSearch && /*#__PURE__*/_jsx(Search, {
        ref: refSearch
      }), /*#__PURE__*/_jsx(MoleculeDropdownList, {
        size: size,
        visible: isOpen,
        onSelect: handleSelection,
        value: value,
        onKeyDown: handleKeyDown,
        children: children
      })]
    })]
  });
});
MoleculeSelectSingleSelection.displayName = 'MoleculeSelectSingleSelection';
export default MoleculeSelectSingleSelection;