@bigbinary/neetoui/dist/MultiEmailInput.js

neetoUI drives the experience at all neeto products

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { 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-opiJTCqo.js';
import { h as hyphenize, n as noop } from './index-DzZtLRHp.js';
import _toArray from '@babel/runtime/helpers/toArray';
import Close from '@bigbinary/neeto-icons/Close';
import Tag from './Tag.js';
import { jsx, jsxs } from 'react/jsx-runtime';
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/extends';
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-DVlE9xuu.js';
import './index-DyUNP5G9.js';
import 'dayjs';
import 'dayjs/plugin/localeData';
import 'dayjs/plugin/utc';
import 'dayjs/plugin/weekday';
import 'dayjs/plugin/weekOfYear';
import 'i18next';
import '@bigbinary/neeto-icons/Help';
import './Button.js';
import 'react-router-dom';
import './Spinner.js';
import './Tooltip.js';
import '@tippyjs/react';
import 'tippy.js';
import '@bigbinary/neeto-hotkeys';
import './overlayManager.js';
import './usePrefersReducedMotion-n4ZJtExQ.js';
import './Popover.js';
import './Typography.js';

var _excluded$2 = ["children"],
  _excluded2 = ["children"];
function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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__*/jsxs(components.Control, _objectSpread$2(_objectSpread$2({}, props), {}, {
    innerProps: _objectSpread$2(_objectSpread$2({}, props.innerProps), {}, {
      ref: controlRef
    }),
    children: [prefix && /*#__PURE__*/jsx("div", {
      className: "neeto-ui-email-input__prefix",
      children: prefix
    }), children]
  }));
};
var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
  var suffix = props.selectProps.suffix;
  return suffix ? /*#__PURE__*/jsx(components.DropdownIndicator, _objectSpread$2(_objectSpread$2({}, props), {}, {
    children: /*#__PURE__*/jsx("div", {
      className: "neeto-ui-email-input__suffix",
      children: suffix
    })
  })) : null;
};
var MultiValueRemove = function MultiValueRemove(props) {
  return /*#__PURE__*/jsx(components.MultiValueRemove, _objectSpread$2(_objectSpread$2({}, props), {}, {
    innerProps: _objectSpread$2(_objectSpread$2({}, props.innerProps), {}, _defineProperty({}, "data-testid", "".concat(hyphenize(props.data.label), "-remove-icon"))),
    children: /*#__PURE__*/jsx(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__*/jsxs(components.ValueContainer, _objectSpread$2(_objectSpread$2({}, props), {}, {
    innerProps: _objectSpread$2(_objectSpread$2({}, props.innerProps), {}, _defineProperty({}, "data-testid", "multi-email-input-container")),
    children: [shouldCollapse ? firstChild.slice(0, visibleEmailsCount) : firstChild, shouldCollapse && /*#__PURE__*/jsx(Tag, {
      label: "".concat(value.length - visibleEmailsCount, " more"),
      style: "secondary"
    }), rest]
  }));
};
var CustomClearIndicator = function CustomClearIndicator(props) {
  return /*#__PURE__*/jsx(components.ClearIndicator, _objectSpread$2(_objectSpread$2({}, props), {}, {
    innerProps: _objectSpread$2(_objectSpread$2({}, props.innerProps), {}, _defineProperty({}, "data-testid", "clear-all-button")),
    children: /*#__PURE__*/jsx(Close, {
      className: "cursor-pointer",
      size: 16
    })
  }));
};
var SelectContainer = function SelectContainer(props) {
  return /*#__PURE__*/jsx(components.SelectContainer, _objectSpread$2(_objectSpread$2({}, props), {}, {
    innerProps: _objectSpread$2(_objectSpread$2({}, props.innerProps), {}, _defineProperty({}, "data-testid", "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 ? void 0 : event.preventDefault();
    setTimeout(function () {
      return handleEmailChange(text);
    });
  };
  return /*#__PURE__*/jsx(components.Input, _objectSpread$2(_objectSpread$2({}, props), {}, {
    "data-testid": "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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 ? void 0 : (_otherProps$onCreateO = otherProps.onCreateOption) === null || _otherProps$onCreateO === void 0 ? 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__*/jsxs("div", {
    className: "neeto-ui-input__wrapper neeto-ui-email-input__wrapper",
    "data-testid": "email-input-wrapper",
    children: [/*#__PURE__*/jsxs("div", {
      className: "neeto-ui-email-input__label-wrapper",
      children: [label && /*#__PURE__*/jsx(Label, _objectSpread(_objectSpread({
        required: required,
        className: "neeto-ui-email-input__label",
        "data-testid": "".concat(hyphenize(label), "-input-label")
      }, labelProps), {}, {
        children: label
      })), isCounterVisible && /*#__PURE__*/jsxs("p", {
        className: "neeto-ui-email-input__counter",
        "data-testid": "".concat(hyphenize(label), "-email-counter"),
        children: [getValidEmailsCount(value), " ", counter.label ? counter.label : renderDefaultText(getValidEmailsCount(value))]
      })]
    }), /*#__PURE__*/jsx(CreatableSelect, _objectSpread({
      isMulti: true,
      required: true,
      blurInputOnSelect: false,
      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__*/jsxs("p", {
      className: "neeto-ui-input__error",
      "data-testid": "".concat(hyphenize(label), "-input-error"),
      children: [error, isFilterEmailsLinkVisible && /*#__PURE__*/jsxs("span", {
        className: "neeto-ui-font-semibold cursor-pointer",
        onClick: handleFilterEmails,
        children: ["\xA0", filterInvalidEmails.label ? filterInvalidEmails.label : "Click here to remove invalid emails."]
      })]
    }), !!helpText && /*#__PURE__*/jsx("p", {
      className: "neeto-ui-input__help-text",
      "data-testid": "".concat(hyphenize(label), "-input-help"),
      children: helpText
    }), !!duplicateEmails.length && /*#__PURE__*/jsx("p", {
      className: "neeto-ui-input__error",
      "data-testid": "".concat(hyphenize(label), "-duplicate-emails-warning"),
      children: renderDuplicateEmailsWarningMessage(duplicateEmails)
    })]
  });
});
MultiEmailInput.displayName = "MultiEmailInput";

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