design-system-govbr-rnp/dist/components/Select/Select.js

## Padrão Digital de Governo - React Biblioteca de componentes React que implementa o [Padrão Visual digital do governo](https://www.gov.br/ds/). O objetivo da biblioteca é facilitar a implementação e promover a padronização das interfaces de sistemas do

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _CheckboxGroup = _interopRequireDefault(require("../CheckBox/CheckboxGroup"));
var _Types = require("./Types");
var _UseKeyPress = require("./UseKeyPress");
var _styles = require("./styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var Select = function Select(_ref) {
  var width = _ref.width,
    typeForSelection = _ref.typeForSelection,
    label = _ref.label,
    options = _ref.options,
    name = _ref.name;
  var _useState = (0, _react.useState)(options),
    _useState2 = _slicedToArray(_useState, 2),
    optionsList = _useState2[0],
    setOptionsList = _useState2[1];
  var _useState3 = (0, _react.useState)(""),
    _useState4 = _slicedToArray(_useState3, 2),
    value = _useState4[0],
    setValue = _useState4[1];
  var _useState5 = (0, _react.useState)(""),
    _useState6 = _slicedToArray(_useState5, 2),
    classNameList = _useState6[0],
    setClassNameList = _useState6[1];
  var _useState7 = (0, _react.useState)(""),
    _useState8 = _slicedToArray(_useState7, 2),
    classNameRotate = _useState8[0],
    setClassNameRotate = _useState8[1];
  var refList = (0, _react.useRef)();
  var refSelectBox = (0, _react.useRef)();
  var refIconButton = (0, _react.useRef)();
  var refSelectInput = (0, _react.useRef)();
  var removeDisplay = (0, _react.useCallback)(function () {
    var _refList$current;
    var options = (_refList$current = refList.current) === null || _refList$current === void 0 ? void 0 : _refList$current.querySelectorAll("".concat(typeForSelection === _Types.CheckBox ? "label" : "li"));
    var _iterator = _createForOfIteratorHelper(options),
      _step;
    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var option = _step.value;
        if (option.style.display === "none") option.style.display = "";
      }
    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }
  }, [typeForSelection]);
  var showList = function showList() {
    setClassNameList("show");
    setClassNameRotate("rotate");
  };
  var hiddenList = (0, _react.useCallback)(function () {
    setClassNameList("");
    setClassNameRotate("");
    removeDisplay();
  }, [removeDisplay]);
  var handleValueSelect = (0, _react.useCallback)(function () {
    var optionsSelected = optionsList.filter(function (option) {
      return option.checked;
    });
    setValue(optionsSelected.length > 0 ? "".concat(optionsSelected[0].label, " + (").concat(optionsSelected.length - 1, ")") : refSelectInput.current.value = "");
  }, [optionsList]);
  var handleSelect = (0, _react.useCallback)(function (e) {
    var currentInput;
    var currentInputIndex;
    var newOptions = _toConsumableArray(options);
    var _options$filter = options.filter(function (item) {
      return item.id === e.id;
    });
    var _options$filter2 = _slicedToArray(_options$filter, 1);
    currentInput = _options$filter2[0];
    currentInput.checked = !currentInput.checked;
    currentInputIndex = options.map(function (option) {
      return option.id;
    }).indexOf(e === null || e === void 0 ? void 0 : e.id);
    newOptions[currentInputIndex] = currentInput;
    setOptionsList(newOptions);
    handleValueSelect();
  }, [handleValueSelect, options]);
  var handleSelectAll = (0, _react.useCallback)(function (event) {
    if (event.checked) {
      setOptionsList(optionsList.map(function (option) {
        option.checked = true;
        return option;
      }));
    } else {
      setOptionsList(optionsList.map(function (option) {
        option.checked = false;
        return option;
      }));
    }
    handleValueSelect();
  }, [handleValueSelect, optionsList]);
  var handleChangeBackgroundOption = (0, _react.useCallback)(function (e, selectAll) {
    handleValueSelect();
    if (e.checked) {
      e.labels[0].classList.add("checked");
    } else {
      e.labels[0].classList.remove("checked");
    }
    if (selectAll && e.checked) {
      var _refList$current2;
      var _options = (_refList$current2 = refList.current) === null || _refList$current2 === void 0 ? void 0 : _refList$current2.querySelectorAll("label");
      var _iterator2 = _createForOfIteratorHelper(_options),
        _step2;
      try {
        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
          var option = _step2.value;
          option.classList.add("checked");
        }
      } catch (err) {
        _iterator2.e(err);
      } finally {
        _iterator2.f();
      }
    }
    if (selectAll && !e.checked) {
      var _refList$current3;
      var _options2 = (_refList$current3 = refList.current) === null || _refList$current3 === void 0 ? void 0 : _refList$current3.querySelectorAll("label");
      var _iterator3 = _createForOfIteratorHelper(_options2),
        _step3;
      try {
        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
          var _option = _step3.value;
          _option.classList.remove("checked");
        }
      } catch (err) {
        _iterator3.e(err);
      } finally {
        _iterator3.f();
      }
    }
  }, [handleValueSelect]);
  var handleOnClickButtonArrow = function handleOnClickButtonArrow() {
    var _refList$current4;
    if (!((_refList$current4 = refList.current) !== null && _refList$current4 !== void 0 && _refList$current4.classList.contains("show"))) {
      showList();
    } else {
      hiddenList();
    }
  };
  var handlerOpenAndFocus = (0, _react.useCallback)(function (e) {
    // Abre a lista com arrowDown e da focus para primeira opção
    if (e.key === "ArrowDown") {
      var _refList$current5, _optionsVisible$;
      var Options = (_refList$current5 = refList.current) === null || _refList$current5 === void 0 ? void 0 : _refList$current5.querySelectorAll("".concat(typeForSelection === _Types.CheckBox ? "label" : "li"));
      var _iterator4 = _createForOfIteratorHelper(Options),
        _step4;
      try {
        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
          var option = _step4.value;
          option.tabIndex = "0";
        }
      } catch (err) {
        _iterator4.e(err);
      } finally {
        _iterator4.f();
      }
      showList();
      var optionsVisible = [];
      var _iterator5 = _createForOfIteratorHelper(Options),
        _step5;
      try {
        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
          var _option2 = _step5.value;
          if (_option2.style.display === "") optionsVisible.push(_option2);
        }
      } catch (err) {
        _iterator5.e(err);
      } finally {
        _iterator5.f();
      }
      (_optionsVisible$ = optionsVisible[0]) === null || _optionsVisible$ === void 0 ? void 0 : _optionsVisible$.focus();
      e.preventDefault();
    }
  }, [typeForSelection]);
  var handlerInputShowList = (0, _react.useCallback)(function (e) {
    // Abre a lista com qualquer valor inserido no input
    if (e.key !== "Shift" && e.key !== "Escape" && e.key !== "Enter" && e.key !== "Tab") {
      showList();
    }
    if (e.key === "Enter" && e.srcElement === (refSelectInput === null || refSelectInput === void 0 ? void 0 : refSelectInput.current)) {
      showList();
    }
    handlerOpenAndFocus(e);
  }, [handlerOpenAndFocus]);
  var handler = (0, _react.useCallback)(function (e) {
    // Fecha lista ao apertar "Esc"
    if (e.key === "Escape" && e.key !== "Enter") {
      var _refSelectInput$curre;
      hiddenList();
      (_refSelectInput$curre = refSelectInput.current) === null || _refSelectInput$curre === void 0 ? void 0 : _refSelectInput$curre.focus();
    }
  }, [hiddenList]);
  var hiddenListEvent = (0, _react.useCallback)(function (e) {
    var _refSelectBox$current;
    // Fecha lista ao clicar fora
    if (!((_refSelectBox$current = refSelectBox.current) !== null && _refSelectBox$current !== void 0 && _refSelectBox$current.contains(e.srcElement))) {
      hiddenList();
    }
  }, [hiddenList]);
  var handlerMoveOption = (0, _react.useCallback)(function (e) {
    var _refList$current6;
    // Permite a movimentação entre as opções com arrow keys
    var nextItem;
    var previousItem;
    var includeInOptions = false;
    var optionVisible = [];
    var Options = (_refList$current6 = refList.current) === null || _refList$current6 === void 0 ? void 0 : _refList$current6.querySelectorAll("".concat(typeForSelection === _Types.CheckBox ? "label" : "li"));
    var _iterator6 = _createForOfIteratorHelper(options),
      _step6;
    try {
      for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
        var option = _step6.value;
        option.tabIndex = "0";
      }
    } catch (err) {
      _iterator6.e(err);
    } finally {
      _iterator6.f();
    }
    var _iterator7 = _createForOfIteratorHelper(Options),
      _step7;
    try {
      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
        var _option3 = _step7.value;
        if ((_option3 === null || _option3 === void 0 ? void 0 : _option3.style.display) !== "none") {
          optionVisible.push(_option3);
        }
        if (_option3 === e.srcElement) includeInOptions = true;
      }
    } catch (err) {
      _iterator7.e(err);
    } finally {
      _iterator7.f();
    }
    for (var i = 0; i < optionVisible.length; i++) {
      if (optionVisible[i] === e.srcElement) {
        nextItem = optionVisible[i + 1];
        previousItem = optionVisible[i - 1];
      }
    }
    if (e.key === "Tab" && refList !== null && refList !== void 0 && refList.current.contains(e.srcElement)) {
      e.preventDefault();
    }
    if (e.key === "ArrowDown" && includeInOptions) {
      var _nextItem;
      (_nextItem = nextItem) === null || _nextItem === void 0 ? void 0 : _nextItem.focus();
    }
    if (e.key === "ArrowUp" && includeInOptions) {
      var _previousItem;
      (_previousItem = previousItem) === null || _previousItem === void 0 ? void 0 : _previousItem.focus();
    }
    var input = e.srcElement.querySelector("input");
    var label = e.srcElement.querySelector("label");
    if (e.srcElement !== refIconButton.current) {
      // Select
      if (e.key === "Enter" && input !== null && input !== void 0 && input.id.match(/option/)) {
        if (typeForSelection === _Types.CheckBox) {
          handleSelect(input);
          handleChangeBackgroundOption(input);
        } else {
          input.checked = true;
          removeDisplay();
          setValue(label.innerText);
        }
      }

      // Select all
      if (e.key === "Enter" && !(input !== null && input !== void 0 && input.id.match(/option/))) {
        var checked = e.srcElement.querySelector("input").checked;
        e.srcElement.querySelector("input").checked = !checked;
        handleSelectAll(input);
        removeDisplay();
        handleChangeBackgroundOption(input, true);
      }
    }
  }, [handleChangeBackgroundOption, handleSelect, handleSelectAll, options, removeDisplay, typeForSelection]);
  (0, _UseKeyPress.useKeyPress)("click", hiddenListEvent);
  (0, _UseKeyPress.useKeyPress)("keydown", handler, refSelectBox === null || refSelectBox === void 0 ? void 0 : refSelectBox.current);
  (0, _UseKeyPress.useKeyPress)("keydown", handlerInputShowList, refSelectInput === null || refSelectInput === void 0 ? void 0 : refSelectInput.current);
  (0, _UseKeyPress.useKeyPress)("keydown", handlerMoveOption, refList === null || refList === void 0 ? void 0 : refList.current);
  (0, _UseKeyPress.useKeyPress)("keydown", handlerOpenAndFocus, refIconButton === null || refIconButton === void 0 ? void 0 : refIconButton.current);
  (0, _react.useEffect)(function () {
    setValue("");
    if (typeForSelection === _Types.Radio) {
      var _iterator8 = _createForOfIteratorHelper(options),
        _step8;
      try {
        for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
          var option = _step8.value;
          if (option.checked) {
            setValue(option.label);
          }
        }
      } catch (err) {
        _iterator8.e(err);
      } finally {
        _iterator8.f();
      }
    }
  }, [options, typeForSelection]);
  var filterFunction = function filterFunction(e) {
    var _refList$current7;
    setValue(e.target.value);
    var filter = e.target.value.toUpperCase();
    var options = (_refList$current7 = refList.current) === null || _refList$current7 === void 0 ? void 0 : _refList$current7.querySelectorAll("".concat(typeForSelection === _Types.CheckBox ? "label" : "li"));
    for (var i = 0; i < options.length; i++) {
      var txtValue = options[i].textContent || options[i].innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        options[i].style.display = "";
      } else {
        options[i].style.display = "none";
      }
    }
  };
  var renderSelect = function renderSelect(options) {
    return /*#__PURE__*/_react.default.createElement(_styles.Container, {
      width: width
    }, /*#__PURE__*/_react.default.createElement("label", {
      htmlFor: "select"
    }, label), /*#__PURE__*/_react.default.createElement(_styles.SelectBox, {
      ref: refSelectBox,
      id: "inpBox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      ref: refSelectInput,
      autoComplete: "off",
      id: "select",
      onChange: function onChange(e) {
        filterFunction(e);
      },
      onClick: function onClick() {
        showList();
      },
      type: "text",
      placeholder: typeForSelection === _Types.CheckBox ? "Selecione os itens" : "Selecione o item",
      value: value
    }), /*#__PURE__*/_react.default.createElement(_styles.ButtonIcon, {
      ref: refIconButton,
      className: classNameRotate,
      id: "button",
      title: "buttonArrow",
      onClick: function onClick() {
        return handleOnClickButtonArrow();
      }
    }, /*#__PURE__*/_react.default.createElement(_styles.SelectIcon, {
      id: "svg",
      icon: _freeSolidSvgIcons.faAngleDown
    })), /*#__PURE__*/_react.default.createElement(_styles.List, {
      tabIndex: "0",
      ref: refList,
      className: "".concat(classNameList),
      id: "list",
      maxHeight: "250px"
    }, typeForSelection === "radio" ? renderListRadio(options, name) : renderListCheckbox(options, name))));
  };
  var renderListRadio = function renderListRadio(options, name) {
    return /*#__PURE__*/_react.default.createElement("ul", null, options.map(function (option) {
      return /*#__PURE__*/_react.default.createElement("li", {
        key: option.id
      }, /*#__PURE__*/_react.default.createElement("input", {
        value: option.value,
        type: _Types.Radio,
        id: option.id,
        checked: option.checked,
        onClick: function onClick(event) {
          if (event.target.checked) {
            setValue(option.label);
            removeDisplay();
          }
        },
        onChange: function onChange(event) {
          if (event.target.checked) {
            setValue(option.label);
            removeDisplay();
          }
        },
        name: name
      }), /*#__PURE__*/_react.default.createElement("label", {
        className: "option",
        htmlFor: option.id
      }, option.label));
    }));
  };
  var renderListCheckbox = function renderListCheckbox(options) {
    return /*#__PURE__*/_react.default.createElement(_CheckboxGroup.default, {
      selectAllOptions: {
        label: "Selecionar Tudo",
        onChange: function onChange(event) {
          handleChangeBackgroundOption(event.target, true);
          removeDisplay();
        }
      },
      onChange: function onChange(e) {
        handleValueSelect();
        handleChangeBackgroundOption(e.target);
        removeDisplay();
      },
      options: options
    });
  };
  return renderSelect(optionsList);
};
Select.propTypes = {
  typeForSelection: _propTypes.default.string,
  label: _propTypes.default.string,
  options: _propTypes.default.array,
  name: _propTypes.default.string.isRequired
};
var _default = Select;
exports.default = _default;