@bigbinary/neetoui/dist/MultiEmailInput.js

neetoUI drives the experience at all neeto products

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _extends from '@babel/runtime/helpers/extends';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default, { useRef, useEffect, forwardRef, useState } from 'react';
import classnames from 'classnames';
import { assoc, pluck, mergeLeft, isEmpty } from 'ramda';
import { c as components, C as CreatableSelect } from './react-select-creatable.esm-Dx_vEnyD.js';
import { h as hyphenize, n as noop } from './index-Dxaw6gl9.js';
import _toArray from '@babel/runtime/helpers/toArray';
import { Close } from '@bigbinary/neeto-icons';
import Tag from './Tag.js';
import { isPresent } from '@bigbinary/neeto-cist';
import Label from './Label.js';
import '@babel/runtime/helpers/esm/extends';
import '@babel/runtime/helpers/esm/objectSpread2';
import '@babel/runtime/helpers/esm/classCallCheck';
import '@babel/runtime/helpers/esm/createClass';
import '@babel/runtime/helpers/esm/inherits';
import '@babel/runtime/helpers/esm/createSuper';
import '@babel/runtime/helpers/esm/toConsumableArray';
import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
import '@babel/runtime/helpers/esm/objectWithoutProperties';
import '@babel/runtime/helpers/esm/slicedToArray';
import '@babel/runtime/helpers/esm/typeof';
import '@babel/runtime/helpers/esm/defineProperty';
import 'react-dom';
import '@babel/runtime/helpers/objectSpread2';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/inherits';
import '@babel/runtime/helpers/createSuper';
import '@babel/runtime/helpers/taggedTemplateLiteral';
import '@babel/runtime/helpers/typeof';
import 'qs';
import './en-CIkXIYyl.js';
import 'dayjs';
import 'dayjs/plugin/localeData';
import 'dayjs/plugin/utc';
import 'dayjs/plugin/weekday';
import 'dayjs/plugin/weekOfYear';
import './Button.js';
import 'react-router-dom';
import './Spinner.js';
import './Tooltip.js';
import '@tippyjs/react';
import 'tippy.js';
import './Popover.js';
import './Typography.js';

var _excluded$2 = ["children"],
  _excluded2 = ["children"];
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var STYLES = {
  border: {
    "default": "1px solid rgb(var(--neeto-ui-gray-400))",
    error: "1px solid rgb(var(--neeto-ui-error-800)) !important"
  },
  color: {
    "default": "rgb(var(--neeto-ui-gray-800))",
    error: "rgb(var(--neeto-ui-error-800)) !important"
  }
};
var CustomControl = function CustomControl(_ref) {
  var children = _ref.children,
    props = _objectWithoutProperties(_ref, _excluded$2);
  var getValue = props.getValue;
  var _props$selectProps = props.selectProps,
    isFocused = _props$selectProps.isFocused,
    prefix = _props$selectProps.prefix;
  var prevValue = useRef([]);
  var controlRef = useRef(null);
  var value = getValue();
  var scrollToBottom = function scrollToBottom() {
    var scrollContainer = controlRef.current;
    if (!scrollContainer) return;
    var scrollHeight = scrollContainer.scrollHeight,
      clientHeight = scrollContainer.clientHeight;
    scrollContainer.scrollTo({
      top: scrollHeight - clientHeight
    });
  };
  useEffect(function () {
    var isItemAdded = value.length > prevValue.current.length;
    var isItemDeleted = value.length < prevValue.current.length;
    if (isFocused && !isItemDeleted || isItemAdded) scrollToBottom();
    prevValue.current = value;
  }, [isFocused, value]);
  return /*#__PURE__*/React__default.createElement(components.Control, _extends({}, props, {
    innerProps: _objectSpread$2(_objectSpread$2({}, props.innerProps), {}, {
      ref: controlRef
    })
  }), prefix && /*#__PURE__*/React__default.createElement("div", {
    className: "neeto-ui-email-input__prefix"
  }, prefix), children);
};
var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
  var suffix = props.selectProps.suffix;
  return suffix ? /*#__PURE__*/React__default.createElement(components.DropdownIndicator, props, /*#__PURE__*/React__default.createElement("div", {
    className: "neeto-ui-email-input__suffix"
  }, suffix)) : null;
};
var MultiValueRemove = function MultiValueRemove(props) {
  return /*#__PURE__*/React__default.createElement(components.MultiValueRemove, _extends({}, props, {
    innerProps: _objectSpread$2(_objectSpread$2({}, props.innerProps), {}, _defineProperty({}, "data-cy", "".concat(hyphenize(props.data.label), "-remove-icon")))
  }), /*#__PURE__*/React__default.createElement(Close, {
    size: 16
  }));
};
var CustomValueContainer = function CustomValueContainer(_ref2) {
  var children = _ref2.children,
    props = _objectWithoutProperties(_ref2, _excluded2);
  var getValue = props.getValue,
    _props$selectProps2 = props.selectProps,
    isFocused = _props$selectProps2.isFocused,
    visibleEmailsCount = _props$selectProps2.visibleEmailsCount,
    isAlwaysExpanded = _props$selectProps2.isAlwaysExpanded;
  var value = getValue();
  var _children = _toArray(children),
    firstChild = _children[0],
    rest = _children.slice(1);
  var shouldCollapse = !isAlwaysExpanded && !isFocused && value.length > visibleEmailsCount;
  return /*#__PURE__*/React__default.createElement(components.ValueContainer, _extends({}, props, {
    innerProps: _objectSpread$2(_objectSpread$2({}, props.innerProps), {}, _defineProperty({}, "data-cy", "multi-email-input-container"))
  }), shouldCollapse ? firstChild.slice(0, visibleEmailsCount) : firstChild, shouldCollapse && /*#__PURE__*/React__default.createElement(Tag, {
    label: "".concat(value.length - visibleEmailsCount, " more"),
    style: "secondary"
  }), rest);
};
var CustomClearIndicator = function CustomClearIndicator(props) {
  return /*#__PURE__*/React__default.createElement(components.ClearIndicator, _extends({}, props, {
    innerProps: _objectSpread$2(_objectSpread$2({}, props.innerProps), {}, _defineProperty({}, "data-cy", "clear-all-button"))
  }), /*#__PURE__*/React__default.createElement(Close, {
    className: "cursor-pointer",
    size: 16
  }));
};
var SelectContainer = function SelectContainer(props) {
  return /*#__PURE__*/React__default.createElement(components.SelectContainer, _extends({}, props, {
    innerProps: _objectSpread$2(_objectSpread$2({}, props.innerProps), {}, _defineProperty({}, "data-cy", "multi-email-select-container"))
  }));
};
var Input = function Input(props) {
  var handlePaste = function handlePaste(event) {
    var handleEmailChange = props.selectProps.handleEmailChange;
    var text = event.clipboardData.getData("Text");
    if (!EMAIL_REGEX.test(text)) return;
    event === null || event === void 0 || event.preventDefault();
    setTimeout(function () {
      return handleEmailChange(text);
    });
  };
  return /*#__PURE__*/React__default.createElement(components.Input, _extends({}, props, {
    "data-cy": "email-select-input-field",
    onPaste: handlePaste
  }));
};
var EMAIL_REGEX = new RegExp("^[A-Z0-9._%+-]+@[A-Z0-9-]+(?:\\.[A-Z0-9-]+)*\\.[A-Z]{2,}$", "i");
var UNSTRICT_EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/g;
var EMAIL_SEPARATION_REGEX = /[^\s,]+/g;
var CUSTOM_STYLES = {
  input: assoc("overflow", "hidden"),
  multiValue: function multiValue(styles, _ref3) {
    var valid = _ref3.data.valid;
    return _objectSpread$2(_objectSpread$2({}, styles), {}, {
      border: valid ? STYLES.border["default"] : STYLES.border.error,
      color: valid ? STYLES.color["default"] : STYLES.color.error
    });
  }
};
var CUSTOM_COMPONENTS = {
  DropdownIndicator: CustomDropdownIndicator,
  Control: CustomControl,
  MultiValueRemove: MultiValueRemove,
  ValueContainer: CustomValueContainer,
  ClearIndicator: CustomClearIndicator,
  SelectContainer: SelectContainer,
  Input: Input
};

var _excluded$1 = ["label", "value"];
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var getEmailsMap = function getEmailsMap() {
  var inputEmails = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  var emails = [].concat(_toConsumableArray(inputEmails), _toConsumableArray(options));
  var emailsMap = new Map();
  emails.forEach(function (option) {
    var _emailsMap$get;
    var hasPersistedEntry = isPresent((_emailsMap$get = emailsMap.get(option.value)) === null || _emailsMap$get === void 0 ? void 0 : _emailsMap$get.id);
    if (!hasPersistedEntry) emailsMap.set(option.value, option);
  });
  return emailsMap;
};
var processEmailOptions = function processEmailOptions() {
  var inputEmails = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  var emailsMap = getEmailsMap(inputEmails, options);
  return function (email) {
    var emailDetails = emailsMap.get(email) || {
      value: email
    };
    return formatEmailInputOption(emailDetails);
  };
};
var formatEmailInputOption = function formatEmailInputOption(_ref) {
  var label = _ref.label,
    value = _ref.value,
    otherDetails = _objectWithoutProperties(_ref, _excluded$1);
  return _objectSpread$1(_objectSpread$1({
    label: label !== null && label !== void 0 ? label : value,
    value: value
  }, otherDetails), {}, {
    valid: EMAIL_REGEX.test(value)
  });
};
var pruneDuplicates = function pruneDuplicates(inputValues, options) {
  var emailProcessor = processEmailOptions(inputValues, options);
  var emails = pluck("value", inputValues);
  var uniqueValuesSet = new Set();
  var duplicates = [];
  emails.forEach(function (pristineEmail) {
    var email = pristineEmail.toLowerCase();
    if (uniqueValuesSet.has(email)) duplicates.push(pristineEmail);
    uniqueValuesSet.add(email);
  });
  var uniqueValues = Array.from(uniqueValuesSet);
  var uniqueEmails = uniqueValues.map(emailProcessor);
  return {
    uniqueEmails: uniqueEmails,
    duplicates: duplicates
  };
};
var renderValidEmails = function renderValidEmails(values) {
  return values.filter(function (email) {
    return email.valid && email;
  });
};
var getValidEmailsCount = function getValidEmailsCount(values) {
  return renderValidEmails(values).length;
};
var renderDefaultText = function renderDefaultText(count) {
  return count === 1 ? "email" : "emails";
};
var renderDuplicateEmailsWarningMessage = function renderDuplicateEmailsWarningMessage(duplicateEmails) {
  var count = duplicateEmails.length;
  return "Removed ".concat(count, " duplicate ").concat(renderDefaultText(count), " from the list: ").concat(duplicateEmails.join(", "));
};

var _excluded = ["label", "placeholder", "helpText", "value", "onChange", "error", "onBlur", "filterInvalidEmails", "counter", "disabled", "maxHeight", "required", "labelProps", "visibleEmailsCount", "isCreateable", "isAlwaysExpanded"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var MultiEmailInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _ref$label = _ref.label,
    label = _ref$label === void 0 ? "Email(s)" : _ref$label,
    _ref$placeholder = _ref.placeholder,
    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
    _ref$helpText = _ref.helpText,
    helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? [] : _ref$value,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
    _ref$error = _ref.error,
    error = _ref$error === void 0 ? "" : _ref$error,
    _ref$onBlur = _ref.onBlur,
    onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur,
    filterInvalidEmails = _ref.filterInvalidEmails,
    counter = _ref.counter,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$maxHeight = _ref.maxHeight,
    maxHeight = _ref$maxHeight === void 0 ? 200 : _ref$maxHeight,
    _ref$required = _ref.required,
    required = _ref$required === void 0 ? false : _ref$required,
    labelProps = _ref.labelProps,
    _ref$visibleEmailsCou = _ref.visibleEmailsCount,
    visibleEmailsCount = _ref$visibleEmailsCou === void 0 ? 3 : _ref$visibleEmailsCou,
    _ref$isCreateable = _ref.isCreateable,
    isCreateable = _ref$isCreateable === void 0 ? true : _ref$isCreateable,
    _ref$isAlwaysExpanded = _ref.isAlwaysExpanded,
    isAlwaysExpanded = _ref$isAlwaysExpanded === void 0 ? false : _ref$isAlwaysExpanded,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(""),
    _useState2 = _slicedToArray(_useState, 2),
    inputValue = _useState2[0],
    setInputValue = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isFocused = _useState4[0],
    setIsFocused = _useState4[1];
  var _useState5 = useState([]),
    _useState6 = _slicedToArray(_useState5, 2),
    duplicateEmails = _useState6[0],
    setDuplicateEmails = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    isMenuOpen = _useState8[0],
    setIsMenuOpen = _useState8[1];
  var isCounterVisible = !!counter && (!counter.startsFrom || getValidEmailsCount(value) >= counter.startsFrom);
  var isOptionsPresent = !!otherProps.options;
  var handleFilterEmails = function handleFilterEmails() {
    return onChange(renderValidEmails(value));
  };
  var handleEmailChange = function handleEmailChange(inputValue) {
    if (!isCreateable) return;
    var inputValues = inputValue.match(EMAIL_SEPARATION_REGEX);
    var emailMatches = inputValue.match(UNSTRICT_EMAIL_REGEX) || inputValues || [];
    var emails = emailMatches.map(function (email) {
      return {
        value: email
      };
    });
    var _pruneDuplicates = pruneDuplicates([].concat(_toConsumableArray(value), _toConsumableArray(emails)), otherProps.options),
      uniqueEmails = _pruneDuplicates.uniqueEmails,
      duplicates = _pruneDuplicates.duplicates;
    onChange(uniqueEmails);
    setDuplicateEmails(duplicates);
    setInputValue("");
    setIsMenuOpen(false);
  };
  var handleKeyDown = function handleKeyDown(event) {
    if (!inputValue) return;
    switch (event.key) {
      case "Enter":
        {
          handleEmailChange(inputValue);
          !isOptionsPresent && event.preventDefault();
          event.stopPropagation();
          return;
        }
      case "Tab":
      case ",":
      case " ":
        {
          handleEmailChange(inputValue);
          event.preventDefault();
          event.stopPropagation();
        }
    }
  };
  var onCreateOption = function onCreateOption(input) {
    var _otherProps$onCreateO;
    var _pruneDuplicates2 = pruneDuplicates([].concat(_toConsumableArray(value), [{
        value: input
      }]), otherProps.options),
      uniqueEmails = _pruneDuplicates2.uniqueEmails,
      duplicates = _pruneDuplicates2.duplicates;
    onChange(uniqueEmails);
    setDuplicateEmails(duplicates);
    otherProps === null || otherProps === void 0 || (_otherProps$onCreateO = otherProps.onCreateOption) === null || _otherProps$onCreateO === void 0 || _otherProps$onCreateO.call(otherProps, input);
  };
  var handleBlur = function handleBlur(event) {
    inputValue ? handleEmailChange(inputValue) : onBlur(event);
    setIsFocused(false);
    setDuplicateEmails([]);
  };
  var overrideProps = {};
  if (isOptionsPresent) {
    var isValidNewOption = function isValidNewOption(inputValue, _, selectOptions) {
      if (!isCreateable) return false;
      var isInputEmpty = isEmpty(inputValue.trim());
      var doesInputContainSeparator = inputValue.includes(",") || inputValue.includes(" ");
      var isInputPresentInOptions = selectOptions.find(function (option) {
        return option.value === inputValue.toLowerCase();
      });
      return !(isInputEmpty || doesInputContainSeparator || isInputPresentInOptions);
    };
    overrideProps = {
      onCreateOption: onCreateOption,
      isValidNewOption: isValidNewOption
    };
  }
  var isFilterEmailsLinkVisible = !!filterInvalidEmails && value.length > getValidEmailsCount(value);
  return /*#__PURE__*/React__default.createElement("div", {
    className: "neeto-ui-input__wrapper neeto-ui-email-input__wrapper"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "neeto-ui-email-input__label-wrapper"
  }, label && /*#__PURE__*/React__default.createElement(Label, _extends({
    required: required,
    className: "neeto-ui-email-input__label",
    "data-cy": "".concat(hyphenize(label), "-input-label")
  }, labelProps), label), isCounterVisible && /*#__PURE__*/React__default.createElement("p", {
    className: "neeto-ui-email-input__counter",
    "data-cy": "".concat(hyphenize(label), "-email-counter")
  }, getValidEmailsCount(value), " ", counter.label ? counter.label : renderDefaultText(getValidEmailsCount(value)))), /*#__PURE__*/React__default.createElement(CreatableSelect, _extends({
    isMulti: true,
    required: true,
    classNamePrefix: "neeto-ui-react-select",
    components: CUSTOM_COMPONENTS,
    isDisabled: disabled,
    menuIsOpen: isMenuOpen,
    className: classnames("neeto-ui-react-select__container neeto-ui-react-select__container--medium neeto-ui-email-input__select", {
      "neeto-ui-react-select__container--error": !!error
    }),
    styles: _objectSpread(_objectSpread({}, CUSTOM_STYLES), {}, {
      control: mergeLeft({
        maxHeight: "".concat(maxHeight, "px"),
        overflowY: "auto"
      })
    }),
    onBlur: handleBlur,
    onFocus: function onFocus() {
      return setIsFocused(true);
    },
    onKeyDown: handleKeyDown,
    onInputChange: function onInputChange(inputValue) {
      setIsMenuOpen(Boolean(inputValue));
      setInputValue(inputValue);
    }
  }, _objectSpread(_objectSpread(_objectSpread({
    handleEmailChange: handleEmailChange,
    inputValue: inputValue,
    isAlwaysExpanded: isAlwaysExpanded,
    isFocused: isFocused,
    onChange: onChange,
    placeholder: placeholder,
    ref: ref,
    value: value,
    visibleEmailsCount: visibleEmailsCount
  }, !isOptionsPresent && {
    menuIsOpen: false
  }), otherProps), overrideProps))), !!error && /*#__PURE__*/React__default.createElement("p", {
    className: "neeto-ui-input__error",
    "data-cy": "".concat(hyphenize(label), "-input-error")
  }, error, isFilterEmailsLinkVisible && /*#__PURE__*/React__default.createElement("span", {
    className: "neeto-ui-font-semibold cursor-pointer",
    onClick: handleFilterEmails
  }, "\xA0", filterInvalidEmails.label ? filterInvalidEmails.label : "Click here to remove invalid emails.")), !!helpText && /*#__PURE__*/React__default.createElement("p", {
    className: "neeto-ui-input__help-text",
    "data-cy": "".concat(hyphenize(label), "-input-help")
  }, helpText), !!duplicateEmails.length && /*#__PURE__*/React__default.createElement("p", {
    className: "neeto-ui-input__error",
    "data-cy": "".concat(hyphenize(label), "-duplicate-emails-warning")
  }, renderDuplicateEmailsWarningMessage(duplicateEmails)));
});
MultiEmailInput.displayName = "MultiEmailInput";

export { MultiEmailInput as default };
//# sourceMappingURL=MultiEmailInput.js.map