@propellerads/tags-input 2.3.1 → 3.1.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+#### `3.1.0`
+
+* Added support of existing method onInputChange
+
+#### `3.0.0`
+
+* update REGEX - add support for zero-width non-word boundary
+
+#### `2.4.0`
+
+* fix errors in types
+
 #### `2.3.0`
 * update style-variables, dependencies
 * apply new border-radius 8px, height, border-color

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { components as reactSelectComponents } from 'react-select';
-import { TagsInputProps } from "./types";
+import { TagsInputProps } from './types';
 declare const TagsInput: (props: TagsInputProps) => JSX.Element;
 export { reactSelectComponents as components };
 export default TagsInput;

package/dist/tags-input.cjs.development.js

@@ -223,11 +223,11 @@ var defaultStyles = {
   }
 };
 
-var REGEXPS = [/\b\n+\b/, /\b,\s\b/, /\b,+\b/];
+var REGEXPS = [/(?:\b|\B)\n+\b/, /(?:\b|\B),\s\b/, /(?:\b|\B),+\b/];
 
 function splitString(value) {
   var splits = [];
-  var specialHandle = false;
+  var specialHandle = false; // eslint-disable-next-line no-restricted-syntax
 
   for (var _iterator = _createForOfIteratorHelperLoose(REGEXPS), _step; !(_step = _iterator()).done;) {
     var regex = _step.value;
@@ -325,6 +325,8 @@ var TagsInput = function TagsInput(props) {
       _props$isErrorLabelVi = props.isErrorLabelVisible,
       isErrorLabelVisible = _props$isErrorLabelVi === void 0 ? false : _props$isErrorLabelVi,
       onChange = props.onChange,
+      _props$onInputChange = props.onInputChange,
+      onInputChange = _props$onInputChange === void 0 ? null : _props$onInputChange,
       _props$options = props.options,
       options = _props$options === void 0 ? [] : _props$options,
       _props$promiseOptions = props.promiseOptions,
@@ -341,7 +343,8 @@ var TagsInput = function TagsInput(props) {
 
   var preparedStyled = _extends({}, defaultStyles, customStyles, {
     control: function control(base, state) {
-      return _extends({}, defaultStyles.control(base, state), isFunction(customStyles.control) ? customStyles.control(base, state) : {}, {
+      var styles = customStyles.control && isFunction(customStyles.control) ? customStyles.control(base, state) : {};
+      return _extends({}, defaultStyles.control(base, state), styles, {
         border: errors.length ? '1px solid #ed3030' : defaultStyles.control(base, state).border,
         minHeight: minHeightInput
       });
@@ -350,7 +353,10 @@ var TagsInput = function TagsInput(props) {
 
   var config = _extends({}, props, {
     id: elementId,
-    onChange: onChange,
+    onChange: onChange
+  }, onInputChange && {
+    onInputChange: onInputChange
+  }, {
     styles: preparedStyled,
     components: _extends({
       ClearIndicator: function ClearIndicator(clearIndicatorProps) {
@@ -361,12 +367,12 @@ var TagsInput = function TagsInput(props) {
     }, components)
   });
 
-  var handleAsyncRequest = function handleAsyncRequest(value) {
-    if (!value.length || value.length < 2) {
+  var handleAsyncRequest = function handleAsyncRequest(newValue) {
+    if (!newValue.length || newValue.length < 2) {
       return null;
     }
 
-    return promiseOptions(value);
+    return promiseOptions(newValue);
   };
 
   var onPaste = function onPaste(e) {
@@ -391,8 +397,8 @@ var TagsInput = function TagsInput(props) {
   };
 
   var asyncSelect = React__default.createElement(ReactAsyncSelect, Object.assign({}, config, {
-    loadOptions: function loadOptions(value) {
-      return handleAsyncRequest(value);
+    loadOptions: function loadOptions(newValue) {
+      return handleAsyncRequest(newValue);
     }
   }));
   var select = React__default.createElement("div", {

package/dist/tags-input.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.cjs.development.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {lineHeight, actionColor, borderRadius, gray80, errorColor, black, white} from '@propellerads/stylevariables';\n\nconst StyledTagsInput = styled.div`\n  position: relative;\n`;\n\nconst TagsInputErrors = styled.div`\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    right: 1px;\n    top: 0;\n    height: ${lineHeight}px;\n    align-items: center;\n`;\n\nconst defaultStyles = {\n    control: (styles, {isFocused, isDisabled}) => ({\n        ...styles,\n        borderRadius,\n        backgroundColor: isDisabled ? '#ededed' : '#fff',\n        minHeight: `${lineHeight}px`,\n        borderWidth: 1,\n        boxShadow: 'none',\n        borderColor: isFocused ? actionColor : gray80,\n    }),\n    valueContainer: (styles) => ({\n        ...styles,\n        overflow: 'hidden',\n        padding: '2px 2px 4px 2px',\n        justifyContent: 'flex-start',\n    }),\n    placeholder: () => ({\n        color: '#c0c0c0',\n        fontWeight: 100,\n        paddingLeft: '4px',\n        position: 'absolute',\n    }),\n    clearIndicator: () => ({\n        color: '#c0c0c0',\n        display: 'inline-flex',\n        marginRight: '4px',\n    }),\n    dropdownIndicator: () => ({\n        display: 'none',\n    }),\n    indicatorSeparator: () => ({\n        display: 'none',\n    }),\n    multiValue: (styles, {data}) => ({\n        ...styles,\n        backgroundColor: data.isException ? errorColor : actionColor,\n        color: white,\n        borderRadius: `${borderRadius / 2}px`,\n        height: '22px',\n        display: 'flex',\n        alignItems: 'center',\n        margin: '2px 0 0 2px',\n    }),\n    multiValueLabel: (styles) => ({\n        ...styles,\n        color: white,\n        padding: '0 0 0 5px',\n        fontSize: '12px',\n        borderRadius: 0,\n        display: 'inline-flex',\n        lineHeight: '1',\n    }),\n    multiValueRemove: (styles, {data}) => ({\n        ...styles,\n        padding: 0,\n        margin: '0 4px 0 2px',\n        backgroundColor: data.isException ? errorColor : actionColor,\n        cursor: 'pointer',\n        ':hover': {\n            backgroundColor: data.isException ? errorColor : actionColor,\n            color: 'white',\n        },\n    }),\n    menu: (styles) => ({\n        ...styles,\n        margin: 0,\n        borderRadius: 0,\n        zIndex: 10,\n    }),\n    option: (styles, {isFocused}) => ({\n        backgroundColor: isFocused ? actionColor : null,\n        padding: '5px 10px',\n        fontSize: '14px',\n        color: isFocused ? white : black,\n    }),\n    input: (styles) => ({\n        ...styles,\n        height: '16px',\n    }),\n};\n\nexport {defaultStyles, StyledTagsInput, TagsInputErrors};\n","import React, {useRef} from 'react';\nimport ReactSelect, {components as reactSelectComponents} from 'react-select';\nimport isFunction from 'lodash.isfunction';\nimport ReactAsyncSelect from 'react-select/lib/Async';\nimport ErrorLabel from '@propellerads/error-label';\nimport {Close, SIZE, COLOR} from '@propellerads/icon';\n\nimport {TagsInputProps} from \"./types\";\nimport {defaultStyles, StyledTagsInput, TagsInputErrors} from './style';\n\n// regexps by priority\nconst REGEXPS = [\n    /\\b\\n+\\b/,\n    /\\b,\\s\\b/,\n    /\\b,+\\b/,\n];\n\ninterface SplitStringReturnValue {\n    splits: string[]\n    specialHandle: boolean\n}\n\nfunction splitString(value: string): SplitStringReturnValue {\n    let splits: string[] = []\n\n    let specialHandle = false;\n    for (const regex of REGEXPS) {\n        splits = value.split(regex);\n        if (splits.length > 1) {\n            break;\n        }\n    }\n\n    // special case. Need handle in special way\n    if (splits.length === 1) {\n        splits = value.split(/\\b\\s+\\b/);\n        specialHandle = splits.length > 1;\n    }\n\n    return {\n        splits,\n        specialHandle,\n    };\n}\n\nfunction searchSuitableOptions(pastedValue, availableOptions, searchableKeys) {\n    const {splits, specialHandle} = splitString(pastedValue);\n\n    if (specialHandle) {\n        let rawPastedString = splits.join(' ')\n            .toLowerCase();\n\n        return availableOptions\n            .sort((firstEl, secondEl) => {\n                if (firstEl.label.length > secondEl.label.length) {\n                    return -1;\n                }\n                if (firstEl.label.length < secondEl.label.length) {\n                    return 1;\n                }\n\n                return 0;\n            })\n            .filter((option) => searchableKeys.reduce((prevValue, currValue) => {\n                const optionValue = String(option[currValue])\n                    .toLowerCase();\n                const position = rawPastedString.search(optionValue);\n                const condition = position !== -1;\n                if (condition) {\n                    rawPastedString = rawPastedString.replace(optionValue, '');\n                }\n\n                return prevValue || condition;\n            }, false));\n    }\n\n    return splits.map((splitValue) => availableOptions.find((option) => {\n        const comparableValue = splitValue.trim().toLowerCase();\n\n        return searchableKeys.reduce((prevValue, currValue) => {\n            const optionValue = String(option[currValue])\n                .toLowerCase();\n            const condition = optionValue === comparableValue;\n\n            return prevValue || condition;\n        }, false);\n    }))\n        .filter(Boolean);\n}\n\ninterface ClearIndicatorProps {\n    getStyles: (clearIndicator: string, props: any) => {},\n    innerProps: {\n        ref: React.Ref<HTMLDivElement>\n    },\n    elementId: string,\n}\n\nconst ClearIndicator = (props: ClearIndicatorProps) => {\n    const {\n        elementId,\n        getStyles,\n        innerProps: {\n            ref,\n            ...restInnerProps\n        },\n    } = props;\n\n    return (\n        <div\n            {...restInnerProps}\n            ref={ref}\n            style={getStyles('clearIndicator', props)}\n            id={`${elementId}-clear`}\n        >\n            <Close color={COLOR.GRAY_DARK}\n                   size={SIZE.MEDIUM_SMALL}\n            />\n        </div>\n    );\n};\n\nconst TagsInput = (props: TagsInputProps) => {\n    const reactSelectElement = useRef<any>(null);\n\n    const {\n        components = {},\n        customStyles = {},\n        elementId,\n        errors = [],\n        isAsync = false,\n        isErrorLabelVisible = false,\n        onChange,\n        options = [],\n        promiseOptions = () => Promise.resolve(),\n        searchableKeys = [\n            'label',\n        ],\n        value = [],\n        isClearable = true,\n        isDisabled = false,\n        isLoading = false,\n        isRtl = false,\n        isMulti = true,\n        isSearchable = true,\n        cacheOptions = false,\n        placeholder = 'Start typing...',\n        noOptionsMessage = () => 'No options...',\n        loadingMessage = () => 'Loading...',\n        minHeightInput = 36\n    } = props;\n\n    const currentValue = value\n\n    const preparedStyled = {\n        ...defaultStyles,\n        ...customStyles,\n        control: (base, state) => ({\n            ...defaultStyles.control(base, state),\n            //@ts-ignore : TODO: update react-select\n            ...(isFunction(customStyles.control) ? customStyles.control(base, state) : {}),\n            border: errors.length ? '1px solid #ed3030' : defaultStyles.control(base, state).border,\n            minHeight: minHeightInput\n        }),\n    };\n\n    const config = {\n        ...props,\n        id: elementId,\n        onChange,\n        styles: preparedStyled,\n        components: {\n            ClearIndicator: (clearIndicatorProps) => (\n                <ClearIndicator\n                    {...clearIndicatorProps}\n                    elementId={elementId}\n                />\n            ),\n            ...components,\n        },\n    };\n\n    const handleAsyncRequest = (value: any) => {\n        if (!value.length || value.length < 2) {\n            return null;\n        }\n\n        return promiseOptions(value);\n    };\n\n    const onPaste = (e) => {\n        const pasteData = e.clipboardData.getData('text/plain');\n\n        const pastedOptions = searchSuitableOptions(pasteData, options, searchableKeys);\n\n        const newInputOptions = pastedOptions.reduce((acc, curVal) => {\n            if (!acc.find((el) => el.value === curVal.value)) {\n                acc.push(curVal);\n            }\n\n            return acc;\n        }, currentValue);\n\n        if (pastedOptions.length !== 0) {\n            onChange(newInputOptions);\n            setTimeout(() => {\n                reactSelectElement.current.select.blur();\n            }, 0);\n        }\n    };\n\n    const asyncSelect = (\n        <ReactAsyncSelect\n            {...config}\n            loadOptions={(value) => handleAsyncRequest(value)}\n        />\n    );\n\n    const select = (\n        <div onPaste={onPaste}>\n            <ReactSelect\n                {...config}\n                ref={reactSelectElement}\n                options={options}\n            />\n        </div>\n    );\n\n    return (\n        <StyledTagsInput>\n            {isAsync ? asyncSelect : select}\n            {errors && errors.length > 0 && isErrorLabelVisible && (\n                <TagsInputErrors>\n                    <ErrorLabel\n                        elementId={elementId}\n                        errors={errors}\n                    />\n                </TagsInputErrors>\n            )}\n        </StyledTagsInput>\n    );\n};\n\nfunction customChecker(props, propName, component) {\n    const {[propName]: propValue} = props;\n    if (typeof propValue !== 'function') {\n        return new Error(`Invalid prop \"${propName}\" passed to ${component}`);\n    }\n\n    const value = propValue();\n    if (typeof value !== 'string' && !React.isValidElement(value)) {\n        // eslint-disable-next-line max-len\n        return new Error(`Invalid prop \"${propName}\" passed to ${component}. Function should return \"string\" or \"react.Node\"`);\n    }\n\n    return null;\n}\n\nexport {reactSelectComponents as components};\n\nexport default TagsInput;\n"],"names":["StyledTagsInput","styled","div","TagsInputErrors","lineHeight","defaultStyles","control","styles","isFocused","isDisabled","borderRadius","backgroundColor","minHeight","borderWidth","boxShadow","borderColor","actionColor","gray80","valueContainer","overflow","padding","justifyContent","placeholder","color","fontWeight","paddingLeft","position","clearIndicator","display","marginRight","dropdownIndicator","indicatorSeparator","multiValue","data","isException","errorColor","white","height","alignItems","margin","multiValueLabel","fontSize","multiValueRemove","cursor","menu","zIndex","option","black","input","REGEXPS","splitString","value","splits","specialHandle","regex","split","length","searchSuitableOptions","pastedValue","availableOptions","searchableKeys","rawPastedString","join","toLowerCase","sort","firstEl","secondEl","label","filter","reduce","prevValue","currValue","optionValue","String","search","condition","replace","map","splitValue","find","comparableValue","trim","Boolean","ClearIndicator","props","elementId","getStyles","innerProps","ref","restInnerProps","React","style","id","Close","COLOR","GRAY_DARK","size","SIZE","MEDIUM_SMALL","TagsInput","reactSelectElement","useRef","components","customStyles","errors","isAsync","isErrorLabelVisible","onChange","options","promiseOptions","Promise","resolve","minHeightInput","currentValue","preparedStyled","base","state","isFunction","border","config","clearIndicatorProps","handleAsyncRequest","onPaste","e","pasteData","clipboardData","getData","pastedOptions","newInputOptions","acc","curVal","el","push","setTimeout","current","select","blur","asyncSelect","ReactAsyncSelect","loadOptions","ReactSelect","ErrorLabel"],"mappings":"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"}
+{"version":3,"file":"tags-input.cjs.development.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n  lineHeight, actionColor, borderRadius, gray80, errorColor, black, white,\n} from '@propellerads/stylevariables';\n\nconst StyledTagsInput = styled.div`\n  position: relative;\n`;\n\nconst TagsInputErrors = styled.div`\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    right: 1px;\n    top: 0;\n    height: ${lineHeight}px;\n    align-items: center;\n`;\n\nconst defaultStyles = {\n  control: (styles, {isFocused, isDisabled}) => ({\n    ...styles,\n    borderRadius,\n    backgroundColor: isDisabled ? '#ededed' : '#fff',\n    minHeight: `${lineHeight}px`,\n    borderWidth: 1,\n    boxShadow: 'none',\n    borderColor: isFocused ? actionColor : gray80,\n  }),\n  valueContainer: (styles) => ({\n    ...styles,\n    overflow: 'hidden',\n    padding: '2px 2px 4px 2px',\n    justifyContent: 'flex-start',\n  }),\n  placeholder: () => ({\n    color: '#c0c0c0',\n    fontWeight: 100,\n    paddingLeft: '4px',\n    position: 'absolute',\n  }),\n  clearIndicator: () => ({\n    color: '#c0c0c0',\n    display: 'inline-flex',\n    marginRight: '4px',\n  }),\n  dropdownIndicator: () => ({\n    display: 'none',\n  }),\n  indicatorSeparator: () => ({\n    display: 'none',\n  }),\n  multiValue: (styles, {data}) => ({\n    ...styles,\n    backgroundColor: data.isException ? errorColor : actionColor,\n    color: white,\n    borderRadius: `${borderRadius / 2}px`,\n    height: '22px',\n    display: 'flex',\n    alignItems: 'center',\n    margin: '2px 0 0 2px',\n  }),\n  multiValueLabel: (styles) => ({\n    ...styles,\n    color: white,\n    padding: '0 0 0 5px',\n    fontSize: '12px',\n    borderRadius: 0,\n    display: 'inline-flex',\n    lineHeight: '1',\n  }),\n  multiValueRemove: (styles, {data}) => ({\n    ...styles,\n    padding: 0,\n    margin: '0 4px 0 2px',\n    backgroundColor: data.isException ? errorColor : actionColor,\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: data.isException ? errorColor : actionColor,\n      color: 'white',\n    },\n  }),\n  menu: (styles) => ({\n    ...styles,\n    margin: 0,\n    borderRadius: 0,\n    zIndex: 10,\n  }),\n  option: (styles, {isFocused}) => ({\n    backgroundColor: isFocused ? actionColor : null,\n    padding: '5px 10px',\n    fontSize: '14px',\n    color: isFocused ? white : black,\n  }),\n  input: (styles) => ({\n    ...styles,\n    height: '16px',\n  }),\n};\n\nexport {defaultStyles, StyledTagsInput, TagsInputErrors};\n","import React, {useRef} from 'react';\nimport ReactSelect, {components as reactSelectComponents} from 'react-select';\nimport isFunction from 'lodash.isfunction';\nimport ReactAsyncSelect from 'react-select/lib/Async';\nimport ErrorLabel from '@propellerads/error-label';\nimport {Close, SIZE, COLOR} from '@propellerads/icon';\n\nimport {TagsInputProps} from './types';\nimport {defaultStyles, StyledTagsInput, TagsInputErrors} from './style';\n\n// regexps by priority\nconst REGEXPS = [\n  /(?:\\b|\\B)\\n+\\b/,\n  /(?:\\b|\\B),\\s\\b/,\n  /(?:\\b|\\B),+\\b/,\n];\n\ninterface SplitStringReturnValue {\n    splits: string[]\n    specialHandle: boolean\n}\n\nfunction splitString(value: string): SplitStringReturnValue {\n  let splits: string[] = [];\n\n  let specialHandle = false;\n  // eslint-disable-next-line no-restricted-syntax\n  for (const regex of REGEXPS) {\n    splits = value.split(regex);\n    if (splits.length > 1) {\n      break;\n    }\n  }\n\n  // special case. Need handle in special way\n  if (splits.length === 1) {\n    splits = value.split(/\\b\\s+\\b/);\n    specialHandle = splits.length > 1;\n  }\n\n  return {\n    splits,\n    specialHandle,\n  };\n}\n\nfunction searchSuitableOptions(pastedValue, availableOptions, searchableKeys) {\n  const {splits, specialHandle} = splitString(pastedValue);\n\n  if (specialHandle) {\n    let rawPastedString = splits.join(' ')\n      .toLowerCase();\n\n    return availableOptions\n      .sort((firstEl, secondEl) => {\n        if (firstEl.label.length > secondEl.label.length) {\n          return -1;\n        }\n        if (firstEl.label.length < secondEl.label.length) {\n          return 1;\n        }\n\n        return 0;\n      })\n      .filter((option) => searchableKeys.reduce((prevValue, currValue) => {\n        const optionValue = String(option[currValue])\n          .toLowerCase();\n        const position = rawPastedString.search(optionValue);\n        const condition = position !== -1;\n        if (condition) {\n          rawPastedString = rawPastedString.replace(optionValue, '');\n        }\n\n        return prevValue || condition;\n      }, false));\n  }\n\n  return splits.map((splitValue) => availableOptions.find((option) => {\n    const comparableValue = splitValue.trim().toLowerCase();\n\n    return searchableKeys.reduce((prevValue, currValue) => {\n      const optionValue = String(option[currValue])\n        .toLowerCase();\n      const condition = optionValue === comparableValue;\n\n      return prevValue || condition;\n    }, false);\n  }))\n    .filter(Boolean);\n}\n\ninterface ClearIndicatorProps {\n  // eslint-disable-next-line @typescript-eslint/ban-types\n    getStyles: (clearIndicator: string, props: any) => {},\n    innerProps: {\n        ref: React.Ref<HTMLDivElement>\n    },\n    elementId: string,\n}\n\nconst ClearIndicator = (props: ClearIndicatorProps) => {\n  const {\n    elementId,\n    getStyles,\n    innerProps: {\n      ref,\n      ...restInnerProps\n    },\n  } = props;\n\n  return (\n    <div\n      {...restInnerProps}\n      ref={ref}\n      style={getStyles('clearIndicator', props)}\n      id={`${elementId}-clear`}\n    >\n      <Close\n        color={COLOR.GRAY_DARK}\n        size={SIZE.MEDIUM_SMALL}\n      />\n    </div>\n  );\n};\n\nconst TagsInput = (props: TagsInputProps) => {\n  const reactSelectElement = useRef<any>(null);\n\n  const {\n    components = {},\n    customStyles = {},\n    elementId,\n    errors = [],\n    isAsync = false,\n    isErrorLabelVisible = false,\n    onChange,\n    onInputChange = null,\n    options = [],\n    promiseOptions = () => Promise.resolve(),\n    searchableKeys = [\n      'label',\n    ],\n    value = [],\n    isClearable = true,\n    isDisabled = false,\n    isLoading = false,\n    isRtl = false,\n    isMulti = true,\n    isSearchable = true,\n    cacheOptions = false,\n    placeholder = 'Start typing...',\n    noOptionsMessage = () => 'No options...',\n    loadingMessage = () => 'Loading...',\n    minHeightInput = 36,\n  } = props;\n\n  const currentValue = value;\n\n  const preparedStyled = {\n    ...defaultStyles,\n    ...customStyles,\n    control: (base, state) => {\n      const styles = (customStyles.control && isFunction(customStyles.control))\n        ? customStyles.control(base, state)\n        : {};\n\n      return {\n        ...defaultStyles.control(base, state),\n        ...styles,\n        border: errors.length ? '1px solid #ed3030' : defaultStyles.control(base, state).border,\n        minHeight: minHeightInput,\n      };\n    },\n  };\n\n  const config = {\n    ...props,\n    id: elementId,\n    onChange,\n    ...(onInputChange && {onInputChange}),\n    styles: preparedStyled,\n    components: {\n      ClearIndicator: (clearIndicatorProps) => (\n        <ClearIndicator\n          {...clearIndicatorProps}\n          elementId={elementId}\n        />\n      ),\n      ...components,\n    },\n  };\n\n  const handleAsyncRequest = (newValue: any) => {\n    if (!newValue.length || newValue.length < 2) {\n      return null;\n    }\n\n    return promiseOptions(newValue);\n  };\n\n  const onPaste = (e) => {\n    const pasteData = e.clipboardData.getData('text/plain');\n\n    const pastedOptions = searchSuitableOptions(pasteData, options, searchableKeys);\n\n    const newInputOptions = pastedOptions.reduce((acc, curVal) => {\n      if (!acc.find((el) => el.value === curVal.value)) {\n        acc.push(curVal);\n      }\n\n      return acc;\n    }, currentValue);\n\n    if (pastedOptions.length !== 0) {\n      onChange(newInputOptions);\n      setTimeout(() => {\n        reactSelectElement.current.select.blur();\n      }, 0);\n    }\n  };\n\n  const asyncSelect = (\n    <ReactAsyncSelect\n      {...config}\n      loadOptions={(newValue) => handleAsyncRequest(newValue)}\n    />\n  );\n\n  const select = (\n    <div onPaste={onPaste}>\n      <ReactSelect\n        {...config}\n        ref={reactSelectElement}\n        options={options}\n      />\n    </div>\n  );\n\n  return (\n    <StyledTagsInput>\n      {isAsync ? asyncSelect : select}\n      {errors && errors.length > 0 && isErrorLabelVisible && (\n        <TagsInputErrors>\n          <ErrorLabel\n            elementId={elementId}\n            errors={errors}\n          />\n        </TagsInputErrors>\n      )}\n    </StyledTagsInput>\n  );\n};\n\nfunction customChecker(props, propName, component) {\n  const {[propName]: propValue} = props;\n  if (typeof propValue !== 'function') {\n    return new Error(`Invalid prop \"${propName}\" passed to ${component}`);\n  }\n\n  const value = propValue();\n  if (typeof value !== 'string' && !React.isValidElement(value)) {\n    // eslint-disable-next-line max-len\n    return new Error(`Invalid prop \"${propName}\" passed to ${component}. Function should return \"string\" or \"react.Node\"`);\n  }\n\n  return null;\n}\n\nexport {reactSelectComponents as components};\n\nexport default TagsInput;\n"],"names":["StyledTagsInput","styled","div","TagsInputErrors","lineHeight","defaultStyles","control","styles","isFocused","isDisabled","borderRadius","backgroundColor","minHeight","borderWidth","boxShadow","borderColor","actionColor","gray80","valueContainer","overflow","padding","justifyContent","placeholder","color","fontWeight","paddingLeft","position","clearIndicator","display","marginRight","dropdownIndicator","indicatorSeparator","multiValue","data","isException","errorColor","white","height","alignItems","margin","multiValueLabel","fontSize","multiValueRemove","cursor","menu","zIndex","option","black","input","REGEXPS","splitString","value","splits","specialHandle","regex","split","length","searchSuitableOptions","pastedValue","availableOptions","searchableKeys","rawPastedString","join","toLowerCase","sort","firstEl","secondEl","label","filter","reduce","prevValue","currValue","optionValue","String","search","condition","replace","map","splitValue","find","comparableValue","trim","Boolean","ClearIndicator","props","elementId","getStyles","innerProps","ref","restInnerProps","React","style","id","Close","COLOR","GRAY_DARK","size","SIZE","MEDIUM_SMALL","TagsInput","reactSelectElement","useRef","components","customStyles","errors","isAsync","isErrorLabelVisible","onChange","onInputChange","options","promiseOptions","Promise","resolve","minHeightInput","currentValue","preparedStyled","base","state","isFunction","border","config","clearIndicatorProps","handleAsyncRequest","newValue","onPaste","e","pasteData","clipboardData","getData","pastedOptions","newInputOptions","acc","curVal","el","push","setTimeout","current","select","blur","asyncSelect","ReactAsyncSelect","loadOptions","ReactSelect","ErrorLabel"],"mappings":"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"}

package/dist/tags-input.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),n=e(r),t=require("react-select"),o=e(t),i=e(require("lodash.isfunction")),l=e(require("react-select/lib/Async")),a=e(require("@propellerads/error-label")),u=require("@propellerads/icon"),c=e(require("styled-components")),s=require("@propellerads/stylevariables");function d(){return(d=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function p(e,r){return r||(r=e.slice(0)),e.raw=r,e}function f(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}function b(){var e=p(["\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    right: 1px;\n    top: 0;\n    height: ","px;\n    align-items: center;\n"]);return b=function(){return e},e}function g(){var e=p(["\n  position: relative;\n"]);return g=function(){return e},e}var v=c.div(g()),h=c.div(b(),s.lineHeight),m={control:function(e,r){return d({},e,{borderRadius:s.borderRadius,backgroundColor:r.isDisabled?"#ededed":"#fff",minHeight:s.lineHeight+"px",borderWidth:1,boxShadow:"none",borderColor:r.isFocused?s.actionColor:s.gray80})},valueContainer:function(e){return d({},e,{overflow:"hidden",padding:"2px 2px 4px 2px",justifyContent:"flex-start"})},placeholder:function(){return{color:"#c0c0c0",fontWeight:100,paddingLeft:"4px",position:"absolute"}},clearIndicator:function(){return{color:"#c0c0c0",display:"inline-flex",marginRight:"4px"}},dropdownIndicator:function(){return{display:"none"}},indicatorSeparator:function(){return{display:"none"}},multiValue:function(e,r){return d({},e,{backgroundColor:r.data.isException?s.errorColor:s.actionColor,color:s.white,borderRadius:s.borderRadius/2+"px",height:"22px",display:"flex",alignItems:"center",margin:"2px 0 0 2px"})},multiValueLabel:function(e){return d({},e,{color:s.white,padding:"0 0 0 5px",fontSize:"12px",borderRadius:0,display:"inline-flex",lineHeight:"1"})},multiValueRemove:function(e,r){var n=r.data;return d({},e,{padding:0,margin:"0 4px 0 2px",backgroundColor:n.isException?s.errorColor:s.actionColor,cursor:"pointer",":hover":{backgroundColor:n.isException?s.errorColor:s.actionColor,color:"white"}})},menu:function(e){return d({},e,{margin:0,borderRadius:0,zIndex:10})},option:function(e,r){var n=r.isFocused;return{backgroundColor:n?s.actionColor:null,padding:"5px 10px",fontSize:"14px",color:n?s.white:s.black}},input:function(e){return d({},e,{height:"16px"})}},x=[/\b\n+\b/,/\b,\s\b/,/\b,+\b/],y=function(e){var r=e.elementId,t=e.getStyles,o=e.innerProps,i=o.ref,l=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)r.indexOf(n=i[t])>=0||(o[n]=e[n]);return o}(o,["ref"]);return n.createElement("div",Object.assign({},l,{ref:i,style:t("clearIndicator",e),id:r+"-clear"}),n.createElement(u.Close,{color:u.COLOR.GRAY_DARK,size:u.SIZE.MEDIUM_SMALL}))};Object.defineProperty(exports,"components",{enumerable:!0,get:function(){return t.components}}),exports.default=function(e){var t=r.useRef(null),u=e.components,c=void 0===u?{}:u,s=e.customStyles,p=void 0===s?{}:s,b=e.elementId,g=e.errors,C=void 0===g?[]:g,w=e.isAsync,O=void 0!==w&&w,E=e.isErrorLabelVisible,I=void 0!==E&&E,S=e.onChange,j=e.options,R=void 0===j?[]:j,A=e.promiseOptions,L=void 0===A?function(){return Promise.resolve()}:A,q=e.searchableKeys,H=void 0===q?["label"]:q,k=e.value,P=e.minHeightInput,D=void 0===P?36:P,M=void 0===k?[]:k,z=d({},m,p,{control:function(e,r){return d({},m.control(e,r),i(p.control)?p.control(e,r):{},{border:C.length?"1px solid #ed3030":m.control(e,r).border,minHeight:D})}}),V=d({},e,{id:b,onChange:S,styles:z,components:d({ClearIndicator:function(e){return n.createElement(y,Object.assign({},e,{elementId:b}))}},c)}),_=n.createElement(l,Object.assign({},V,{loadOptions:function(e){return function(e){return!e.length||e.length<2?null:L(e)}(e)}})),F=n.createElement("div",{onPaste:function(e){var r=function(e,r,n){var t=function(e){for(var r,n=[],t=!1,o=function(e,r){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,r){if(e){if("string"==typeof e)return f(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,void 0):void 0}}(e))){n&&(e=n);var t=0;return function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}(x);!((r=o()).done||(n=e.split(r.value)).length>1););return 1===n.length&&(t=(n=e.split(/\b\s+\b/)).length>1),{splits:n,specialHandle:t}}(e),o=t.splits;if(t.specialHandle){var i=o.join(" ").toLowerCase();return r.sort((function(e,r){return e.label.length>r.label.length?-1:e.label.length<r.label.length?1:0})).filter((function(e){return n.reduce((function(r,n){var t=String(e[n]).toLowerCase(),o=-1!==i.search(t);return o&&(i=i.replace(t,"")),r||o}),!1)}))}return o.map((function(e){return r.find((function(r){var t=e.trim().toLowerCase();return n.reduce((function(e,n){var o=String(r[n]).toLowerCase();return e||o===t}),!1)}))})).filter(Boolean)}(e.clipboardData.getData("text/plain"),R,H),n=r.reduce((function(e,r){return e.find((function(e){return e.value===r.value}))||e.push(r),e}),M);0!==r.length&&(S(n),setTimeout((function(){t.current.select.blur()}),0))}},n.createElement(o,Object.assign({},V,{ref:t,options:R})));return n.createElement(v,null,O?_:F,C&&C.length>0&&I&&n.createElement(h,null,n.createElement(a,{elementId:b,errors:C})))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),n=e(r),t=require("react-select"),o=e(t),i=e(require("lodash.isfunction")),l=e(require("react-select/lib/Async")),a=e(require("@propellerads/error-label")),u=require("@propellerads/icon"),c=e(require("styled-components")),s=require("@propellerads/stylevariables");function d(){return(d=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function p(e,r){return r||(r=e.slice(0)),e.raw=r,e}function f(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}function b(){var e=p(["\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    right: 1px;\n    top: 0;\n    height: ","px;\n    align-items: center;\n"]);return b=function(){return e},e}function g(){var e=p(["\n  position: relative;\n"]);return g=function(){return e},e}var v=c.div(g()),h=c.div(b(),s.lineHeight),m={control:function(e,r){return d({},e,{borderRadius:s.borderRadius,backgroundColor:r.isDisabled?"#ededed":"#fff",minHeight:s.lineHeight+"px",borderWidth:1,boxShadow:"none",borderColor:r.isFocused?s.actionColor:s.gray80})},valueContainer:function(e){return d({},e,{overflow:"hidden",padding:"2px 2px 4px 2px",justifyContent:"flex-start"})},placeholder:function(){return{color:"#c0c0c0",fontWeight:100,paddingLeft:"4px",position:"absolute"}},clearIndicator:function(){return{color:"#c0c0c0",display:"inline-flex",marginRight:"4px"}},dropdownIndicator:function(){return{display:"none"}},indicatorSeparator:function(){return{display:"none"}},multiValue:function(e,r){return d({},e,{backgroundColor:r.data.isException?s.errorColor:s.actionColor,color:s.white,borderRadius:s.borderRadius/2+"px",height:"22px",display:"flex",alignItems:"center",margin:"2px 0 0 2px"})},multiValueLabel:function(e){return d({},e,{color:s.white,padding:"0 0 0 5px",fontSize:"12px",borderRadius:0,display:"inline-flex",lineHeight:"1"})},multiValueRemove:function(e,r){var n=r.data;return d({},e,{padding:0,margin:"0 4px 0 2px",backgroundColor:n.isException?s.errorColor:s.actionColor,cursor:"pointer",":hover":{backgroundColor:n.isException?s.errorColor:s.actionColor,color:"white"}})},menu:function(e){return d({},e,{margin:0,borderRadius:0,zIndex:10})},option:function(e,r){var n=r.isFocused;return{backgroundColor:n?s.actionColor:null,padding:"5px 10px",fontSize:"14px",color:n?s.white:s.black}},input:function(e){return d({},e,{height:"16px"})}},x=[/(?:\b|\B)\n+\b/,/(?:\b|\B),\s\b/,/(?:\b|\B),+\b/],y=function(e){var r=e.elementId,t=e.getStyles,o=e.innerProps,i=o.ref,l=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)r.indexOf(n=i[t])>=0||(o[n]=e[n]);return o}(o,["ref"]);return n.createElement("div",Object.assign({},l,{ref:i,style:t("clearIndicator",e),id:r+"-clear"}),n.createElement(u.Close,{color:u.COLOR.GRAY_DARK,size:u.SIZE.MEDIUM_SMALL}))};Object.defineProperty(exports,"components",{enumerable:!0,get:function(){return t.components}}),exports.default=function(e){var t=r.useRef(null),u=e.components,c=void 0===u?{}:u,s=e.customStyles,p=void 0===s?{}:s,b=e.elementId,g=e.errors,C=void 0===g?[]:g,I=e.isAsync,w=void 0!==I&&I,O=e.isErrorLabelVisible,E=void 0!==O&&O,S=e.onChange,j=e.onInputChange,R=void 0===j?null:j,A=e.options,L=void 0===A?[]:A,q=e.promiseOptions,H=void 0===q?function(){return Promise.resolve()}:q,k=e.searchableKeys,P=void 0===k?["label"]:k,D=e.value,M=e.minHeightInput,z=void 0===M?36:M,B=void 0===D?[]:D,V=d({},m,p,{control:function(e,r){var n=p.control&&i(p.control)?p.control(e,r):{};return d({},m.control(e,r),n,{border:C.length?"1px solid #ed3030":m.control(e,r).border,minHeight:z})}}),_=d({},e,{id:b,onChange:S},R&&{onInputChange:R},{styles:V,components:d({ClearIndicator:function(e){return n.createElement(y,Object.assign({},e,{elementId:b}))}},c)}),F=n.createElement(l,Object.assign({},_,{loadOptions:function(e){return function(e){return!e.length||e.length<2?null:H(e)}(e)}})),K=n.createElement("div",{onPaste:function(e){var r=function(e,r,n){var t=function(e){for(var r,n=[],t=!1,o=function(e,r){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,r){if(e){if("string"==typeof e)return f(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,void 0):void 0}}(e))){n&&(e=n);var t=0;return function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}(x);!((r=o()).done||(n=e.split(r.value)).length>1););return 1===n.length&&(t=(n=e.split(/\b\s+\b/)).length>1),{splits:n,specialHandle:t}}(e),o=t.splits;if(t.specialHandle){var i=o.join(" ").toLowerCase();return r.sort((function(e,r){return e.label.length>r.label.length?-1:e.label.length<r.label.length?1:0})).filter((function(e){return n.reduce((function(r,n){var t=String(e[n]).toLowerCase(),o=-1!==i.search(t);return o&&(i=i.replace(t,"")),r||o}),!1)}))}return o.map((function(e){return r.find((function(r){var t=e.trim().toLowerCase();return n.reduce((function(e,n){var o=String(r[n]).toLowerCase();return e||o===t}),!1)}))})).filter(Boolean)}(e.clipboardData.getData("text/plain"),L,P),n=r.reduce((function(e,r){return e.find((function(e){return e.value===r.value}))||e.push(r),e}),B);0!==r.length&&(S(n),setTimeout((function(){t.current.select.blur()}),0))}},n.createElement(o,Object.assign({},_,{ref:t,options:L})));return n.createElement(v,null,w?F:K,C&&C.length>0&&E&&n.createElement(h,null,n.createElement(a,{elementId:b,errors:C})))};
 //# sourceMappingURL=tags-input.cjs.production.min.js.map

package/dist/tags-input.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.cjs.production.min.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {lineHeight, actionColor, borderRadius, gray80, errorColor, black, white} from '@propellerads/stylevariables';\n\nconst StyledTagsInput = styled.div`\n  position: relative;\n`;\n\nconst TagsInputErrors = styled.div`\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    right: 1px;\n    top: 0;\n    height: ${lineHeight}px;\n    align-items: center;\n`;\n\nconst defaultStyles = {\n    control: (styles, {isFocused, isDisabled}) => ({\n        ...styles,\n        borderRadius,\n        backgroundColor: isDisabled ? '#ededed' : '#fff',\n        minHeight: `${lineHeight}px`,\n        borderWidth: 1,\n        boxShadow: 'none',\n        borderColor: isFocused ? actionColor : gray80,\n    }),\n    valueContainer: (styles) => ({\n        ...styles,\n        overflow: 'hidden',\n        padding: '2px 2px 4px 2px',\n        justifyContent: 'flex-start',\n    }),\n    placeholder: () => ({\n        color: '#c0c0c0',\n        fontWeight: 100,\n        paddingLeft: '4px',\n        position: 'absolute',\n    }),\n    clearIndicator: () => ({\n        color: '#c0c0c0',\n        display: 'inline-flex',\n        marginRight: '4px',\n    }),\n    dropdownIndicator: () => ({\n        display: 'none',\n    }),\n    indicatorSeparator: () => ({\n        display: 'none',\n    }),\n    multiValue: (styles, {data}) => ({\n        ...styles,\n        backgroundColor: data.isException ? errorColor : actionColor,\n        color: white,\n        borderRadius: `${borderRadius / 2}px`,\n        height: '22px',\n        display: 'flex',\n        alignItems: 'center',\n        margin: '2px 0 0 2px',\n    }),\n    multiValueLabel: (styles) => ({\n        ...styles,\n        color: white,\n        padding: '0 0 0 5px',\n        fontSize: '12px',\n        borderRadius: 0,\n        display: 'inline-flex',\n        lineHeight: '1',\n    }),\n    multiValueRemove: (styles, {data}) => ({\n        ...styles,\n        padding: 0,\n        margin: '0 4px 0 2px',\n        backgroundColor: data.isException ? errorColor : actionColor,\n        cursor: 'pointer',\n        ':hover': {\n            backgroundColor: data.isException ? errorColor : actionColor,\n            color: 'white',\n        },\n    }),\n    menu: (styles) => ({\n        ...styles,\n        margin: 0,\n        borderRadius: 0,\n        zIndex: 10,\n    }),\n    option: (styles, {isFocused}) => ({\n        backgroundColor: isFocused ? actionColor : null,\n        padding: '5px 10px',\n        fontSize: '14px',\n        color: isFocused ? white : black,\n    }),\n    input: (styles) => ({\n        ...styles,\n        height: '16px',\n    }),\n};\n\nexport {defaultStyles, StyledTagsInput, TagsInputErrors};\n","import React, {useRef} from 'react';\nimport ReactSelect, {components as reactSelectComponents} from 'react-select';\nimport isFunction from 'lodash.isfunction';\nimport ReactAsyncSelect from 'react-select/lib/Async';\nimport ErrorLabel from '@propellerads/error-label';\nimport {Close, SIZE, COLOR} from '@propellerads/icon';\n\nimport {TagsInputProps} from \"./types\";\nimport {defaultStyles, StyledTagsInput, TagsInputErrors} from './style';\n\n// regexps by priority\nconst REGEXPS = [\n    /\\b\\n+\\b/,\n    /\\b,\\s\\b/,\n    /\\b,+\\b/,\n];\n\ninterface SplitStringReturnValue {\n    splits: string[]\n    specialHandle: boolean\n}\n\nfunction splitString(value: string): SplitStringReturnValue {\n    let splits: string[] = []\n\n    let specialHandle = false;\n    for (const regex of REGEXPS) {\n        splits = value.split(regex);\n        if (splits.length > 1) {\n            break;\n        }\n    }\n\n    // special case. Need handle in special way\n    if (splits.length === 1) {\n        splits = value.split(/\\b\\s+\\b/);\n        specialHandle = splits.length > 1;\n    }\n\n    return {\n        splits,\n        specialHandle,\n    };\n}\n\nfunction searchSuitableOptions(pastedValue, availableOptions, searchableKeys) {\n    const {splits, specialHandle} = splitString(pastedValue);\n\n    if (specialHandle) {\n        let rawPastedString = splits.join(' ')\n            .toLowerCase();\n\n        return availableOptions\n            .sort((firstEl, secondEl) => {\n                if (firstEl.label.length > secondEl.label.length) {\n                    return -1;\n                }\n                if (firstEl.label.length < secondEl.label.length) {\n                    return 1;\n                }\n\n                return 0;\n            })\n            .filter((option) => searchableKeys.reduce((prevValue, currValue) => {\n                const optionValue = String(option[currValue])\n                    .toLowerCase();\n                const position = rawPastedString.search(optionValue);\n                const condition = position !== -1;\n                if (condition) {\n                    rawPastedString = rawPastedString.replace(optionValue, '');\n                }\n\n                return prevValue || condition;\n            }, false));\n    }\n\n    return splits.map((splitValue) => availableOptions.find((option) => {\n        const comparableValue = splitValue.trim().toLowerCase();\n\n        return searchableKeys.reduce((prevValue, currValue) => {\n            const optionValue = String(option[currValue])\n                .toLowerCase();\n            const condition = optionValue === comparableValue;\n\n            return prevValue || condition;\n        }, false);\n    }))\n        .filter(Boolean);\n}\n\ninterface ClearIndicatorProps {\n    getStyles: (clearIndicator: string, props: any) => {},\n    innerProps: {\n        ref: React.Ref<HTMLDivElement>\n    },\n    elementId: string,\n}\n\nconst ClearIndicator = (props: ClearIndicatorProps) => {\n    const {\n        elementId,\n        getStyles,\n        innerProps: {\n            ref,\n            ...restInnerProps\n        },\n    } = props;\n\n    return (\n        <div\n            {...restInnerProps}\n            ref={ref}\n            style={getStyles('clearIndicator', props)}\n            id={`${elementId}-clear`}\n        >\n            <Close color={COLOR.GRAY_DARK}\n                   size={SIZE.MEDIUM_SMALL}\n            />\n        </div>\n    );\n};\n\nconst TagsInput = (props: TagsInputProps) => {\n    const reactSelectElement = useRef<any>(null);\n\n    const {\n        components = {},\n        customStyles = {},\n        elementId,\n        errors = [],\n        isAsync = false,\n        isErrorLabelVisible = false,\n        onChange,\n        options = [],\n        promiseOptions = () => Promise.resolve(),\n        searchableKeys = [\n            'label',\n        ],\n        value = [],\n        isClearable = true,\n        isDisabled = false,\n        isLoading = false,\n        isRtl = false,\n        isMulti = true,\n        isSearchable = true,\n        cacheOptions = false,\n        placeholder = 'Start typing...',\n        noOptionsMessage = () => 'No options...',\n        loadingMessage = () => 'Loading...',\n        minHeightInput = 36\n    } = props;\n\n    const currentValue = value\n\n    const preparedStyled = {\n        ...defaultStyles,\n        ...customStyles,\n        control: (base, state) => ({\n            ...defaultStyles.control(base, state),\n            //@ts-ignore : TODO: update react-select\n            ...(isFunction(customStyles.control) ? customStyles.control(base, state) : {}),\n            border: errors.length ? '1px solid #ed3030' : defaultStyles.control(base, state).border,\n            minHeight: minHeightInput\n        }),\n    };\n\n    const config = {\n        ...props,\n        id: elementId,\n        onChange,\n        styles: preparedStyled,\n        components: {\n            ClearIndicator: (clearIndicatorProps) => (\n                <ClearIndicator\n                    {...clearIndicatorProps}\n                    elementId={elementId}\n                />\n            ),\n            ...components,\n        },\n    };\n\n    const handleAsyncRequest = (value: any) => {\n        if (!value.length || value.length < 2) {\n            return null;\n        }\n\n        return promiseOptions(value);\n    };\n\n    const onPaste = (e) => {\n        const pasteData = e.clipboardData.getData('text/plain');\n\n        const pastedOptions = searchSuitableOptions(pasteData, options, searchableKeys);\n\n        const newInputOptions = pastedOptions.reduce((acc, curVal) => {\n            if (!acc.find((el) => el.value === curVal.value)) {\n                acc.push(curVal);\n            }\n\n            return acc;\n        }, currentValue);\n\n        if (pastedOptions.length !== 0) {\n            onChange(newInputOptions);\n            setTimeout(() => {\n                reactSelectElement.current.select.blur();\n            }, 0);\n        }\n    };\n\n    const asyncSelect = (\n        <ReactAsyncSelect\n            {...config}\n            loadOptions={(value) => handleAsyncRequest(value)}\n        />\n    );\n\n    const select = (\n        <div onPaste={onPaste}>\n            <ReactSelect\n                {...config}\n                ref={reactSelectElement}\n                options={options}\n            />\n        </div>\n    );\n\n    return (\n        <StyledTagsInput>\n            {isAsync ? asyncSelect : select}\n            {errors && errors.length > 0 && isErrorLabelVisible && (\n                <TagsInputErrors>\n                    <ErrorLabel\n                        elementId={elementId}\n                        errors={errors}\n                    />\n                </TagsInputErrors>\n            )}\n        </StyledTagsInput>\n    );\n};\n\nfunction customChecker(props, propName, component) {\n    const {[propName]: propValue} = props;\n    if (typeof propValue !== 'function') {\n        return new Error(`Invalid prop \"${propName}\" passed to ${component}`);\n    }\n\n    const value = propValue();\n    if (typeof value !== 'string' && !React.isValidElement(value)) {\n        // eslint-disable-next-line max-len\n        return new Error(`Invalid prop \"${propName}\" passed to ${component}. Function should return \"string\" or \"react.Node\"`);\n    }\n\n    return null;\n}\n\nexport {reactSelectComponents as components};\n\nexport default TagsInput;\n"],"names":["StyledTagsInput","styled","div","TagsInputErrors","lineHeight","defaultStyles","control","styles","borderRadius","backgroundColor","isDisabled","minHeight","borderWidth","boxShadow","borderColor","isFocused","actionColor","gray80","valueContainer","overflow","padding","justifyContent","placeholder","color","fontWeight","paddingLeft","position","clearIndicator","display","marginRight","dropdownIndicator","indicatorSeparator","multiValue","data","isException","errorColor","white","height","alignItems","margin","multiValueLabel","fontSize","multiValueRemove","cursor","menu","zIndex","option","black","input","REGEXPS","ClearIndicator","props","elementId","getStyles","innerProps","ref","restInnerProps","React","style","id","Close","COLOR","GRAY_DARK","size","SIZE","MEDIUM_SMALL","reactSelectElement","useRef","components","customStyles","errors","isAsync","isErrorLabelVisible","onChange","options","promiseOptions","Promise","resolve","searchableKeys","value","minHeightInput","currentValue","preparedStyled","base","state","isFunction","border","length","config","clearIndicatorProps","asyncSelect","ReactAsyncSelect","loadOptions","handleAsyncRequest","select","onPaste","e","pastedOptions","pastedValue","availableOptions","splits","specialHandle","split","splitString","rawPastedString","join","toLowerCase","sort","firstEl","secondEl","label","filter","reduce","prevValue","currValue","optionValue","String","condition","search","replace","map","splitValue","find","comparableValue","trim","Boolean","searchSuitableOptions","clipboardData","getData","newInputOptions","acc","curVal","el","push","setTimeout","current","blur","ReactSelect","ErrorLabel"],"mappings":"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"}
+{"version":3,"file":"tags-input.cjs.production.min.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n  lineHeight, actionColor, borderRadius, gray80, errorColor, black, white,\n} from '@propellerads/stylevariables';\n\nconst StyledTagsInput = styled.div`\n  position: relative;\n`;\n\nconst TagsInputErrors = styled.div`\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    right: 1px;\n    top: 0;\n    height: ${lineHeight}px;\n    align-items: center;\n`;\n\nconst defaultStyles = {\n  control: (styles, {isFocused, isDisabled}) => ({\n    ...styles,\n    borderRadius,\n    backgroundColor: isDisabled ? '#ededed' : '#fff',\n    minHeight: `${lineHeight}px`,\n    borderWidth: 1,\n    boxShadow: 'none',\n    borderColor: isFocused ? actionColor : gray80,\n  }),\n  valueContainer: (styles) => ({\n    ...styles,\n    overflow: 'hidden',\n    padding: '2px 2px 4px 2px',\n    justifyContent: 'flex-start',\n  }),\n  placeholder: () => ({\n    color: '#c0c0c0',\n    fontWeight: 100,\n    paddingLeft: '4px',\n    position: 'absolute',\n  }),\n  clearIndicator: () => ({\n    color: '#c0c0c0',\n    display: 'inline-flex',\n    marginRight: '4px',\n  }),\n  dropdownIndicator: () => ({\n    display: 'none',\n  }),\n  indicatorSeparator: () => ({\n    display: 'none',\n  }),\n  multiValue: (styles, {data}) => ({\n    ...styles,\n    backgroundColor: data.isException ? errorColor : actionColor,\n    color: white,\n    borderRadius: `${borderRadius / 2}px`,\n    height: '22px',\n    display: 'flex',\n    alignItems: 'center',\n    margin: '2px 0 0 2px',\n  }),\n  multiValueLabel: (styles) => ({\n    ...styles,\n    color: white,\n    padding: '0 0 0 5px',\n    fontSize: '12px',\n    borderRadius: 0,\n    display: 'inline-flex',\n    lineHeight: '1',\n  }),\n  multiValueRemove: (styles, {data}) => ({\n    ...styles,\n    padding: 0,\n    margin: '0 4px 0 2px',\n    backgroundColor: data.isException ? errorColor : actionColor,\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: data.isException ? errorColor : actionColor,\n      color: 'white',\n    },\n  }),\n  menu: (styles) => ({\n    ...styles,\n    margin: 0,\n    borderRadius: 0,\n    zIndex: 10,\n  }),\n  option: (styles, {isFocused}) => ({\n    backgroundColor: isFocused ? actionColor : null,\n    padding: '5px 10px',\n    fontSize: '14px',\n    color: isFocused ? white : black,\n  }),\n  input: (styles) => ({\n    ...styles,\n    height: '16px',\n  }),\n};\n\nexport {defaultStyles, StyledTagsInput, TagsInputErrors};\n","import React, {useRef} from 'react';\nimport ReactSelect, {components as reactSelectComponents} from 'react-select';\nimport isFunction from 'lodash.isfunction';\nimport ReactAsyncSelect from 'react-select/lib/Async';\nimport ErrorLabel from '@propellerads/error-label';\nimport {Close, SIZE, COLOR} from '@propellerads/icon';\n\nimport {TagsInputProps} from './types';\nimport {defaultStyles, StyledTagsInput, TagsInputErrors} from './style';\n\n// regexps by priority\nconst REGEXPS = [\n  /(?:\\b|\\B)\\n+\\b/,\n  /(?:\\b|\\B),\\s\\b/,\n  /(?:\\b|\\B),+\\b/,\n];\n\ninterface SplitStringReturnValue {\n    splits: string[]\n    specialHandle: boolean\n}\n\nfunction splitString(value: string): SplitStringReturnValue {\n  let splits: string[] = [];\n\n  let specialHandle = false;\n  // eslint-disable-next-line no-restricted-syntax\n  for (const regex of REGEXPS) {\n    splits = value.split(regex);\n    if (splits.length > 1) {\n      break;\n    }\n  }\n\n  // special case. Need handle in special way\n  if (splits.length === 1) {\n    splits = value.split(/\\b\\s+\\b/);\n    specialHandle = splits.length > 1;\n  }\n\n  return {\n    splits,\n    specialHandle,\n  };\n}\n\nfunction searchSuitableOptions(pastedValue, availableOptions, searchableKeys) {\n  const {splits, specialHandle} = splitString(pastedValue);\n\n  if (specialHandle) {\n    let rawPastedString = splits.join(' ')\n      .toLowerCase();\n\n    return availableOptions\n      .sort((firstEl, secondEl) => {\n        if (firstEl.label.length > secondEl.label.length) {\n          return -1;\n        }\n        if (firstEl.label.length < secondEl.label.length) {\n          return 1;\n        }\n\n        return 0;\n      })\n      .filter((option) => searchableKeys.reduce((prevValue, currValue) => {\n        const optionValue = String(option[currValue])\n          .toLowerCase();\n        const position = rawPastedString.search(optionValue);\n        const condition = position !== -1;\n        if (condition) {\n          rawPastedString = rawPastedString.replace(optionValue, '');\n        }\n\n        return prevValue || condition;\n      }, false));\n  }\n\n  return splits.map((splitValue) => availableOptions.find((option) => {\n    const comparableValue = splitValue.trim().toLowerCase();\n\n    return searchableKeys.reduce((prevValue, currValue) => {\n      const optionValue = String(option[currValue])\n        .toLowerCase();\n      const condition = optionValue === comparableValue;\n\n      return prevValue || condition;\n    }, false);\n  }))\n    .filter(Boolean);\n}\n\ninterface ClearIndicatorProps {\n  // eslint-disable-next-line @typescript-eslint/ban-types\n    getStyles: (clearIndicator: string, props: any) => {},\n    innerProps: {\n        ref: React.Ref<HTMLDivElement>\n    },\n    elementId: string,\n}\n\nconst ClearIndicator = (props: ClearIndicatorProps) => {\n  const {\n    elementId,\n    getStyles,\n    innerProps: {\n      ref,\n      ...restInnerProps\n    },\n  } = props;\n\n  return (\n    <div\n      {...restInnerProps}\n      ref={ref}\n      style={getStyles('clearIndicator', props)}\n      id={`${elementId}-clear`}\n    >\n      <Close\n        color={COLOR.GRAY_DARK}\n        size={SIZE.MEDIUM_SMALL}\n      />\n    </div>\n  );\n};\n\nconst TagsInput = (props: TagsInputProps) => {\n  const reactSelectElement = useRef<any>(null);\n\n  const {\n    components = {},\n    customStyles = {},\n    elementId,\n    errors = [],\n    isAsync = false,\n    isErrorLabelVisible = false,\n    onChange,\n    onInputChange = null,\n    options = [],\n    promiseOptions = () => Promise.resolve(),\n    searchableKeys = [\n      'label',\n    ],\n    value = [],\n    isClearable = true,\n    isDisabled = false,\n    isLoading = false,\n    isRtl = false,\n    isMulti = true,\n    isSearchable = true,\n    cacheOptions = false,\n    placeholder = 'Start typing...',\n    noOptionsMessage = () => 'No options...',\n    loadingMessage = () => 'Loading...',\n    minHeightInput = 36,\n  } = props;\n\n  const currentValue = value;\n\n  const preparedStyled = {\n    ...defaultStyles,\n    ...customStyles,\n    control: (base, state) => {\n      const styles = (customStyles.control && isFunction(customStyles.control))\n        ? customStyles.control(base, state)\n        : {};\n\n      return {\n        ...defaultStyles.control(base, state),\n        ...styles,\n        border: errors.length ? '1px solid #ed3030' : defaultStyles.control(base, state).border,\n        minHeight: minHeightInput,\n      };\n    },\n  };\n\n  const config = {\n    ...props,\n    id: elementId,\n    onChange,\n    ...(onInputChange && {onInputChange}),\n    styles: preparedStyled,\n    components: {\n      ClearIndicator: (clearIndicatorProps) => (\n        <ClearIndicator\n          {...clearIndicatorProps}\n          elementId={elementId}\n        />\n      ),\n      ...components,\n    },\n  };\n\n  const handleAsyncRequest = (newValue: any) => {\n    if (!newValue.length || newValue.length < 2) {\n      return null;\n    }\n\n    return promiseOptions(newValue);\n  };\n\n  const onPaste = (e) => {\n    const pasteData = e.clipboardData.getData('text/plain');\n\n    const pastedOptions = searchSuitableOptions(pasteData, options, searchableKeys);\n\n    const newInputOptions = pastedOptions.reduce((acc, curVal) => {\n      if (!acc.find((el) => el.value === curVal.value)) {\n        acc.push(curVal);\n      }\n\n      return acc;\n    }, currentValue);\n\n    if (pastedOptions.length !== 0) {\n      onChange(newInputOptions);\n      setTimeout(() => {\n        reactSelectElement.current.select.blur();\n      }, 0);\n    }\n  };\n\n  const asyncSelect = (\n    <ReactAsyncSelect\n      {...config}\n      loadOptions={(newValue) => handleAsyncRequest(newValue)}\n    />\n  );\n\n  const select = (\n    <div onPaste={onPaste}>\n      <ReactSelect\n        {...config}\n        ref={reactSelectElement}\n        options={options}\n      />\n    </div>\n  );\n\n  return (\n    <StyledTagsInput>\n      {isAsync ? asyncSelect : select}\n      {errors && errors.length > 0 && isErrorLabelVisible && (\n        <TagsInputErrors>\n          <ErrorLabel\n            elementId={elementId}\n            errors={errors}\n          />\n        </TagsInputErrors>\n      )}\n    </StyledTagsInput>\n  );\n};\n\nfunction customChecker(props, propName, component) {\n  const {[propName]: propValue} = props;\n  if (typeof propValue !== 'function') {\n    return new Error(`Invalid prop \"${propName}\" passed to ${component}`);\n  }\n\n  const value = propValue();\n  if (typeof value !== 'string' && !React.isValidElement(value)) {\n    // eslint-disable-next-line max-len\n    return new Error(`Invalid prop \"${propName}\" passed to ${component}. Function should return \"string\" or \"react.Node\"`);\n  }\n\n  return null;\n}\n\nexport {reactSelectComponents as components};\n\nexport default TagsInput;\n"],"names":["StyledTagsInput","styled","div","TagsInputErrors","lineHeight","defaultStyles","control","styles","borderRadius","backgroundColor","isDisabled","minHeight","borderWidth","boxShadow","borderColor","isFocused","actionColor","gray80","valueContainer","overflow","padding","justifyContent","placeholder","color","fontWeight","paddingLeft","position","clearIndicator","display","marginRight","dropdownIndicator","indicatorSeparator","multiValue","data","isException","errorColor","white","height","alignItems","margin","multiValueLabel","fontSize","multiValueRemove","cursor","menu","zIndex","option","black","input","REGEXPS","ClearIndicator","props","elementId","getStyles","innerProps","ref","restInnerProps","React","style","id","Close","COLOR","GRAY_DARK","size","SIZE","MEDIUM_SMALL","reactSelectElement","useRef","components","customStyles","errors","isAsync","isErrorLabelVisible","onChange","onInputChange","options","promiseOptions","Promise","resolve","searchableKeys","value","minHeightInput","currentValue","preparedStyled","base","state","isFunction","border","length","config","clearIndicatorProps","asyncSelect","ReactAsyncSelect","loadOptions","newValue","handleAsyncRequest","select","onPaste","e","pastedOptions","pastedValue","availableOptions","splits","specialHandle","split","splitString","rawPastedString","join","toLowerCase","sort","firstEl","secondEl","label","filter","reduce","prevValue","currValue","optionValue","String","condition","search","replace","map","splitValue","find","comparableValue","trim","Boolean","searchSuitableOptions","clipboardData","getData","newInputOptions","acc","curVal","el","push","setTimeout","current","blur","ReactSelect","ErrorLabel"],"mappings":"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"}

package/dist/tags-input.esm.js

@@ -216,11 +216,11 @@ var defaultStyles = {
   }
 };
 
-var REGEXPS = [/\b\n+\b/, /\b,\s\b/, /\b,+\b/];
+var REGEXPS = [/(?:\b|\B)\n+\b/, /(?:\b|\B),\s\b/, /(?:\b|\B),+\b/];
 
 function splitString(value) {
   var splits = [];
-  var specialHandle = false;
+  var specialHandle = false; // eslint-disable-next-line no-restricted-syntax
 
   for (var _iterator = _createForOfIteratorHelperLoose(REGEXPS), _step; !(_step = _iterator()).done;) {
     var regex = _step.value;
@@ -318,6 +318,8 @@ var TagsInput = function TagsInput(props) {
       _props$isErrorLabelVi = props.isErrorLabelVisible,
       isErrorLabelVisible = _props$isErrorLabelVi === void 0 ? false : _props$isErrorLabelVi,
       onChange = props.onChange,
+      _props$onInputChange = props.onInputChange,
+      onInputChange = _props$onInputChange === void 0 ? null : _props$onInputChange,
       _props$options = props.options,
       options = _props$options === void 0 ? [] : _props$options,
       _props$promiseOptions = props.promiseOptions,
@@ -334,7 +336,8 @@ var TagsInput = function TagsInput(props) {
 
   var preparedStyled = _extends({}, defaultStyles, customStyles, {
     control: function control(base, state) {
-      return _extends({}, defaultStyles.control(base, state), isFunction(customStyles.control) ? customStyles.control(base, state) : {}, {
+      var styles = customStyles.control && isFunction(customStyles.control) ? customStyles.control(base, state) : {};
+      return _extends({}, defaultStyles.control(base, state), styles, {
         border: errors.length ? '1px solid #ed3030' : defaultStyles.control(base, state).border,
         minHeight: minHeightInput
       });
@@ -343,7 +346,10 @@ var TagsInput = function TagsInput(props) {
 
   var config = _extends({}, props, {
     id: elementId,
-    onChange: onChange,
+    onChange: onChange
+  }, onInputChange && {
+    onInputChange: onInputChange
+  }, {
     styles: preparedStyled,
     components: _extends({
       ClearIndicator: function ClearIndicator(clearIndicatorProps) {
@@ -354,12 +360,12 @@ var TagsInput = function TagsInput(props) {
     }, components)
   });
 
-  var handleAsyncRequest = function handleAsyncRequest(value) {
-    if (!value.length || value.length < 2) {
+  var handleAsyncRequest = function handleAsyncRequest(newValue) {
+    if (!newValue.length || newValue.length < 2) {
       return null;
     }
 
-    return promiseOptions(value);
+    return promiseOptions(newValue);
   };
 
   var onPaste = function onPaste(e) {
@@ -384,8 +390,8 @@ var TagsInput = function TagsInput(props) {
   };
 
   var asyncSelect = React.createElement(ReactAsyncSelect, Object.assign({}, config, {
-    loadOptions: function loadOptions(value) {
-      return handleAsyncRequest(value);
+    loadOptions: function loadOptions(newValue) {
+      return handleAsyncRequest(newValue);
     }
   }));
   var select = React.createElement("div", {

package/dist/tags-input.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.esm.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {lineHeight, actionColor, borderRadius, gray80, errorColor, black, white} from '@propellerads/stylevariables';\n\nconst StyledTagsInput = styled.div`\n  position: relative;\n`;\n\nconst TagsInputErrors = styled.div`\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    right: 1px;\n    top: 0;\n    height: ${lineHeight}px;\n    align-items: center;\n`;\n\nconst defaultStyles = {\n    control: (styles, {isFocused, isDisabled}) => ({\n        ...styles,\n        borderRadius,\n        backgroundColor: isDisabled ? '#ededed' : '#fff',\n        minHeight: `${lineHeight}px`,\n        borderWidth: 1,\n        boxShadow: 'none',\n        borderColor: isFocused ? actionColor : gray80,\n    }),\n    valueContainer: (styles) => ({\n        ...styles,\n        overflow: 'hidden',\n        padding: '2px 2px 4px 2px',\n        justifyContent: 'flex-start',\n    }),\n    placeholder: () => ({\n        color: '#c0c0c0',\n        fontWeight: 100,\n        paddingLeft: '4px',\n        position: 'absolute',\n    }),\n    clearIndicator: () => ({\n        color: '#c0c0c0',\n        display: 'inline-flex',\n        marginRight: '4px',\n    }),\n    dropdownIndicator: () => ({\n        display: 'none',\n    }),\n    indicatorSeparator: () => ({\n        display: 'none',\n    }),\n    multiValue: (styles, {data}) => ({\n        ...styles,\n        backgroundColor: data.isException ? errorColor : actionColor,\n        color: white,\n        borderRadius: `${borderRadius / 2}px`,\n        height: '22px',\n        display: 'flex',\n        alignItems: 'center',\n        margin: '2px 0 0 2px',\n    }),\n    multiValueLabel: (styles) => ({\n        ...styles,\n        color: white,\n        padding: '0 0 0 5px',\n        fontSize: '12px',\n        borderRadius: 0,\n        display: 'inline-flex',\n        lineHeight: '1',\n    }),\n    multiValueRemove: (styles, {data}) => ({\n        ...styles,\n        padding: 0,\n        margin: '0 4px 0 2px',\n        backgroundColor: data.isException ? errorColor : actionColor,\n        cursor: 'pointer',\n        ':hover': {\n            backgroundColor: data.isException ? errorColor : actionColor,\n            color: 'white',\n        },\n    }),\n    menu: (styles) => ({\n        ...styles,\n        margin: 0,\n        borderRadius: 0,\n        zIndex: 10,\n    }),\n    option: (styles, {isFocused}) => ({\n        backgroundColor: isFocused ? actionColor : null,\n        padding: '5px 10px',\n        fontSize: '14px',\n        color: isFocused ? white : black,\n    }),\n    input: (styles) => ({\n        ...styles,\n        height: '16px',\n    }),\n};\n\nexport {defaultStyles, StyledTagsInput, TagsInputErrors};\n","import React, {useRef} from 'react';\nimport ReactSelect, {components as reactSelectComponents} from 'react-select';\nimport isFunction from 'lodash.isfunction';\nimport ReactAsyncSelect from 'react-select/lib/Async';\nimport ErrorLabel from '@propellerads/error-label';\nimport {Close, SIZE, COLOR} from '@propellerads/icon';\n\nimport {TagsInputProps} from \"./types\";\nimport {defaultStyles, StyledTagsInput, TagsInputErrors} from './style';\n\n// regexps by priority\nconst REGEXPS = [\n    /\\b\\n+\\b/,\n    /\\b,\\s\\b/,\n    /\\b,+\\b/,\n];\n\ninterface SplitStringReturnValue {\n    splits: string[]\n    specialHandle: boolean\n}\n\nfunction splitString(value: string): SplitStringReturnValue {\n    let splits: string[] = []\n\n    let specialHandle = false;\n    for (const regex of REGEXPS) {\n        splits = value.split(regex);\n        if (splits.length > 1) {\n            break;\n        }\n    }\n\n    // special case. Need handle in special way\n    if (splits.length === 1) {\n        splits = value.split(/\\b\\s+\\b/);\n        specialHandle = splits.length > 1;\n    }\n\n    return {\n        splits,\n        specialHandle,\n    };\n}\n\nfunction searchSuitableOptions(pastedValue, availableOptions, searchableKeys) {\n    const {splits, specialHandle} = splitString(pastedValue);\n\n    if (specialHandle) {\n        let rawPastedString = splits.join(' ')\n            .toLowerCase();\n\n        return availableOptions\n            .sort((firstEl, secondEl) => {\n                if (firstEl.label.length > secondEl.label.length) {\n                    return -1;\n                }\n                if (firstEl.label.length < secondEl.label.length) {\n                    return 1;\n                }\n\n                return 0;\n            })\n            .filter((option) => searchableKeys.reduce((prevValue, currValue) => {\n                const optionValue = String(option[currValue])\n                    .toLowerCase();\n                const position = rawPastedString.search(optionValue);\n                const condition = position !== -1;\n                if (condition) {\n                    rawPastedString = rawPastedString.replace(optionValue, '');\n                }\n\n                return prevValue || condition;\n            }, false));\n    }\n\n    return splits.map((splitValue) => availableOptions.find((option) => {\n        const comparableValue = splitValue.trim().toLowerCase();\n\n        return searchableKeys.reduce((prevValue, currValue) => {\n            const optionValue = String(option[currValue])\n                .toLowerCase();\n            const condition = optionValue === comparableValue;\n\n            return prevValue || condition;\n        }, false);\n    }))\n        .filter(Boolean);\n}\n\ninterface ClearIndicatorProps {\n    getStyles: (clearIndicator: string, props: any) => {},\n    innerProps: {\n        ref: React.Ref<HTMLDivElement>\n    },\n    elementId: string,\n}\n\nconst ClearIndicator = (props: ClearIndicatorProps) => {\n    const {\n        elementId,\n        getStyles,\n        innerProps: {\n            ref,\n            ...restInnerProps\n        },\n    } = props;\n\n    return (\n        <div\n            {...restInnerProps}\n            ref={ref}\n            style={getStyles('clearIndicator', props)}\n            id={`${elementId}-clear`}\n        >\n            <Close color={COLOR.GRAY_DARK}\n                   size={SIZE.MEDIUM_SMALL}\n            />\n        </div>\n    );\n};\n\nconst TagsInput = (props: TagsInputProps) => {\n    const reactSelectElement = useRef<any>(null);\n\n    const {\n        components = {},\n        customStyles = {},\n        elementId,\n        errors = [],\n        isAsync = false,\n        isErrorLabelVisible = false,\n        onChange,\n        options = [],\n        promiseOptions = () => Promise.resolve(),\n        searchableKeys = [\n            'label',\n        ],\n        value = [],\n        isClearable = true,\n        isDisabled = false,\n        isLoading = false,\n        isRtl = false,\n        isMulti = true,\n        isSearchable = true,\n        cacheOptions = false,\n        placeholder = 'Start typing...',\n        noOptionsMessage = () => 'No options...',\n        loadingMessage = () => 'Loading...',\n        minHeightInput = 36\n    } = props;\n\n    const currentValue = value\n\n    const preparedStyled = {\n        ...defaultStyles,\n        ...customStyles,\n        control: (base, state) => ({\n            ...defaultStyles.control(base, state),\n            //@ts-ignore : TODO: update react-select\n            ...(isFunction(customStyles.control) ? customStyles.control(base, state) : {}),\n            border: errors.length ? '1px solid #ed3030' : defaultStyles.control(base, state).border,\n            minHeight: minHeightInput\n        }),\n    };\n\n    const config = {\n        ...props,\n        id: elementId,\n        onChange,\n        styles: preparedStyled,\n        components: {\n            ClearIndicator: (clearIndicatorProps) => (\n                <ClearIndicator\n                    {...clearIndicatorProps}\n                    elementId={elementId}\n                />\n            ),\n            ...components,\n        },\n    };\n\n    const handleAsyncRequest = (value: any) => {\n        if (!value.length || value.length < 2) {\n            return null;\n        }\n\n        return promiseOptions(value);\n    };\n\n    const onPaste = (e) => {\n        const pasteData = e.clipboardData.getData('text/plain');\n\n        const pastedOptions = searchSuitableOptions(pasteData, options, searchableKeys);\n\n        const newInputOptions = pastedOptions.reduce((acc, curVal) => {\n            if (!acc.find((el) => el.value === curVal.value)) {\n                acc.push(curVal);\n            }\n\n            return acc;\n        }, currentValue);\n\n        if (pastedOptions.length !== 0) {\n            onChange(newInputOptions);\n            setTimeout(() => {\n                reactSelectElement.current.select.blur();\n            }, 0);\n        }\n    };\n\n    const asyncSelect = (\n        <ReactAsyncSelect\n            {...config}\n            loadOptions={(value) => handleAsyncRequest(value)}\n        />\n    );\n\n    const select = (\n        <div onPaste={onPaste}>\n            <ReactSelect\n                {...config}\n                ref={reactSelectElement}\n                options={options}\n            />\n        </div>\n    );\n\n    return (\n        <StyledTagsInput>\n            {isAsync ? asyncSelect : select}\n            {errors && errors.length > 0 && isErrorLabelVisible && (\n                <TagsInputErrors>\n                    <ErrorLabel\n                        elementId={elementId}\n                        errors={errors}\n                    />\n                </TagsInputErrors>\n            )}\n        </StyledTagsInput>\n    );\n};\n\nfunction customChecker(props, propName, component) {\n    const {[propName]: propValue} = props;\n    if (typeof propValue !== 'function') {\n        return new Error(`Invalid prop \"${propName}\" passed to ${component}`);\n    }\n\n    const value = propValue();\n    if (typeof value !== 'string' && !React.isValidElement(value)) {\n        // eslint-disable-next-line max-len\n        return new Error(`Invalid prop \"${propName}\" passed to ${component}. Function should return \"string\" or \"react.Node\"`);\n    }\n\n    return null;\n}\n\nexport {reactSelectComponents as components};\n\nexport default TagsInput;\n"],"names":["StyledTagsInput","styled","div","TagsInputErrors","lineHeight","defaultStyles","control","styles","isFocused","isDisabled","borderRadius","backgroundColor","minHeight","borderWidth","boxShadow","borderColor","actionColor","gray80","valueContainer","overflow","padding","justifyContent","placeholder","color","fontWeight","paddingLeft","position","clearIndicator","display","marginRight","dropdownIndicator","indicatorSeparator","multiValue","data","isException","errorColor","white","height","alignItems","margin","multiValueLabel","fontSize","multiValueRemove","cursor","menu","zIndex","option","black","input","REGEXPS","splitString","value","splits","specialHandle","regex","split","length","searchSuitableOptions","pastedValue","availableOptions","searchableKeys","rawPastedString","join","toLowerCase","sort","firstEl","secondEl","label","filter","reduce","prevValue","currValue","optionValue","String","search","condition","replace","map","splitValue","find","comparableValue","trim","Boolean","ClearIndicator","props","elementId","getStyles","innerProps","ref","restInnerProps","React","style","id","Close","COLOR","GRAY_DARK","size","SIZE","MEDIUM_SMALL","TagsInput","reactSelectElement","useRef","components","customStyles","errors","isAsync","isErrorLabelVisible","onChange","options","promiseOptions","Promise","resolve","minHeightInput","currentValue","preparedStyled","base","state","isFunction","border","config","clearIndicatorProps","handleAsyncRequest","onPaste","e","pasteData","clipboardData","getData","pastedOptions","newInputOptions","acc","curVal","el","push","setTimeout","current","select","blur","asyncSelect","ReactAsyncSelect","loadOptions","ReactSelect","ErrorLabel"],"mappings":"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"}
+{"version":3,"file":"tags-input.esm.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n  lineHeight, actionColor, borderRadius, gray80, errorColor, black, white,\n} from '@propellerads/stylevariables';\n\nconst StyledTagsInput = styled.div`\n  position: relative;\n`;\n\nconst TagsInputErrors = styled.div`\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    right: 1px;\n    top: 0;\n    height: ${lineHeight}px;\n    align-items: center;\n`;\n\nconst defaultStyles = {\n  control: (styles, {isFocused, isDisabled}) => ({\n    ...styles,\n    borderRadius,\n    backgroundColor: isDisabled ? '#ededed' : '#fff',\n    minHeight: `${lineHeight}px`,\n    borderWidth: 1,\n    boxShadow: 'none',\n    borderColor: isFocused ? actionColor : gray80,\n  }),\n  valueContainer: (styles) => ({\n    ...styles,\n    overflow: 'hidden',\n    padding: '2px 2px 4px 2px',\n    justifyContent: 'flex-start',\n  }),\n  placeholder: () => ({\n    color: '#c0c0c0',\n    fontWeight: 100,\n    paddingLeft: '4px',\n    position: 'absolute',\n  }),\n  clearIndicator: () => ({\n    color: '#c0c0c0',\n    display: 'inline-flex',\n    marginRight: '4px',\n  }),\n  dropdownIndicator: () => ({\n    display: 'none',\n  }),\n  indicatorSeparator: () => ({\n    display: 'none',\n  }),\n  multiValue: (styles, {data}) => ({\n    ...styles,\n    backgroundColor: data.isException ? errorColor : actionColor,\n    color: white,\n    borderRadius: `${borderRadius / 2}px`,\n    height: '22px',\n    display: 'flex',\n    alignItems: 'center',\n    margin: '2px 0 0 2px',\n  }),\n  multiValueLabel: (styles) => ({\n    ...styles,\n    color: white,\n    padding: '0 0 0 5px',\n    fontSize: '12px',\n    borderRadius: 0,\n    display: 'inline-flex',\n    lineHeight: '1',\n  }),\n  multiValueRemove: (styles, {data}) => ({\n    ...styles,\n    padding: 0,\n    margin: '0 4px 0 2px',\n    backgroundColor: data.isException ? errorColor : actionColor,\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: data.isException ? errorColor : actionColor,\n      color: 'white',\n    },\n  }),\n  menu: (styles) => ({\n    ...styles,\n    margin: 0,\n    borderRadius: 0,\n    zIndex: 10,\n  }),\n  option: (styles, {isFocused}) => ({\n    backgroundColor: isFocused ? actionColor : null,\n    padding: '5px 10px',\n    fontSize: '14px',\n    color: isFocused ? white : black,\n  }),\n  input: (styles) => ({\n    ...styles,\n    height: '16px',\n  }),\n};\n\nexport {defaultStyles, StyledTagsInput, TagsInputErrors};\n","import React, {useRef} from 'react';\nimport ReactSelect, {components as reactSelectComponents} from 'react-select';\nimport isFunction from 'lodash.isfunction';\nimport ReactAsyncSelect from 'react-select/lib/Async';\nimport ErrorLabel from '@propellerads/error-label';\nimport {Close, SIZE, COLOR} from '@propellerads/icon';\n\nimport {TagsInputProps} from './types';\nimport {defaultStyles, StyledTagsInput, TagsInputErrors} from './style';\n\n// regexps by priority\nconst REGEXPS = [\n  /(?:\\b|\\B)\\n+\\b/,\n  /(?:\\b|\\B),\\s\\b/,\n  /(?:\\b|\\B),+\\b/,\n];\n\ninterface SplitStringReturnValue {\n    splits: string[]\n    specialHandle: boolean\n}\n\nfunction splitString(value: string): SplitStringReturnValue {\n  let splits: string[] = [];\n\n  let specialHandle = false;\n  // eslint-disable-next-line no-restricted-syntax\n  for (const regex of REGEXPS) {\n    splits = value.split(regex);\n    if (splits.length > 1) {\n      break;\n    }\n  }\n\n  // special case. Need handle in special way\n  if (splits.length === 1) {\n    splits = value.split(/\\b\\s+\\b/);\n    specialHandle = splits.length > 1;\n  }\n\n  return {\n    splits,\n    specialHandle,\n  };\n}\n\nfunction searchSuitableOptions(pastedValue, availableOptions, searchableKeys) {\n  const {splits, specialHandle} = splitString(pastedValue);\n\n  if (specialHandle) {\n    let rawPastedString = splits.join(' ')\n      .toLowerCase();\n\n    return availableOptions\n      .sort((firstEl, secondEl) => {\n        if (firstEl.label.length > secondEl.label.length) {\n          return -1;\n        }\n        if (firstEl.label.length < secondEl.label.length) {\n          return 1;\n        }\n\n        return 0;\n      })\n      .filter((option) => searchableKeys.reduce((prevValue, currValue) => {\n        const optionValue = String(option[currValue])\n          .toLowerCase();\n        const position = rawPastedString.search(optionValue);\n        const condition = position !== -1;\n        if (condition) {\n          rawPastedString = rawPastedString.replace(optionValue, '');\n        }\n\n        return prevValue || condition;\n      }, false));\n  }\n\n  return splits.map((splitValue) => availableOptions.find((option) => {\n    const comparableValue = splitValue.trim().toLowerCase();\n\n    return searchableKeys.reduce((prevValue, currValue) => {\n      const optionValue = String(option[currValue])\n        .toLowerCase();\n      const condition = optionValue === comparableValue;\n\n      return prevValue || condition;\n    }, false);\n  }))\n    .filter(Boolean);\n}\n\ninterface ClearIndicatorProps {\n  // eslint-disable-next-line @typescript-eslint/ban-types\n    getStyles: (clearIndicator: string, props: any) => {},\n    innerProps: {\n        ref: React.Ref<HTMLDivElement>\n    },\n    elementId: string,\n}\n\nconst ClearIndicator = (props: ClearIndicatorProps) => {\n  const {\n    elementId,\n    getStyles,\n    innerProps: {\n      ref,\n      ...restInnerProps\n    },\n  } = props;\n\n  return (\n    <div\n      {...restInnerProps}\n      ref={ref}\n      style={getStyles('clearIndicator', props)}\n      id={`${elementId}-clear`}\n    >\n      <Close\n        color={COLOR.GRAY_DARK}\n        size={SIZE.MEDIUM_SMALL}\n      />\n    </div>\n  );\n};\n\nconst TagsInput = (props: TagsInputProps) => {\n  const reactSelectElement = useRef<any>(null);\n\n  const {\n    components = {},\n    customStyles = {},\n    elementId,\n    errors = [],\n    isAsync = false,\n    isErrorLabelVisible = false,\n    onChange,\n    onInputChange = null,\n    options = [],\n    promiseOptions = () => Promise.resolve(),\n    searchableKeys = [\n      'label',\n    ],\n    value = [],\n    isClearable = true,\n    isDisabled = false,\n    isLoading = false,\n    isRtl = false,\n    isMulti = true,\n    isSearchable = true,\n    cacheOptions = false,\n    placeholder = 'Start typing...',\n    noOptionsMessage = () => 'No options...',\n    loadingMessage = () => 'Loading...',\n    minHeightInput = 36,\n  } = props;\n\n  const currentValue = value;\n\n  const preparedStyled = {\n    ...defaultStyles,\n    ...customStyles,\n    control: (base, state) => {\n      const styles = (customStyles.control && isFunction(customStyles.control))\n        ? customStyles.control(base, state)\n        : {};\n\n      return {\n        ...defaultStyles.control(base, state),\n        ...styles,\n        border: errors.length ? '1px solid #ed3030' : defaultStyles.control(base, state).border,\n        minHeight: minHeightInput,\n      };\n    },\n  };\n\n  const config = {\n    ...props,\n    id: elementId,\n    onChange,\n    ...(onInputChange && {onInputChange}),\n    styles: preparedStyled,\n    components: {\n      ClearIndicator: (clearIndicatorProps) => (\n        <ClearIndicator\n          {...clearIndicatorProps}\n          elementId={elementId}\n        />\n      ),\n      ...components,\n    },\n  };\n\n  const handleAsyncRequest = (newValue: any) => {\n    if (!newValue.length || newValue.length < 2) {\n      return null;\n    }\n\n    return promiseOptions(newValue);\n  };\n\n  const onPaste = (e) => {\n    const pasteData = e.clipboardData.getData('text/plain');\n\n    const pastedOptions = searchSuitableOptions(pasteData, options, searchableKeys);\n\n    const newInputOptions = pastedOptions.reduce((acc, curVal) => {\n      if (!acc.find((el) => el.value === curVal.value)) {\n        acc.push(curVal);\n      }\n\n      return acc;\n    }, currentValue);\n\n    if (pastedOptions.length !== 0) {\n      onChange(newInputOptions);\n      setTimeout(() => {\n        reactSelectElement.current.select.blur();\n      }, 0);\n    }\n  };\n\n  const asyncSelect = (\n    <ReactAsyncSelect\n      {...config}\n      loadOptions={(newValue) => handleAsyncRequest(newValue)}\n    />\n  );\n\n  const select = (\n    <div onPaste={onPaste}>\n      <ReactSelect\n        {...config}\n        ref={reactSelectElement}\n        options={options}\n      />\n    </div>\n  );\n\n  return (\n    <StyledTagsInput>\n      {isAsync ? asyncSelect : select}\n      {errors && errors.length > 0 && isErrorLabelVisible && (\n        <TagsInputErrors>\n          <ErrorLabel\n            elementId={elementId}\n            errors={errors}\n          />\n        </TagsInputErrors>\n      )}\n    </StyledTagsInput>\n  );\n};\n\nfunction customChecker(props, propName, component) {\n  const {[propName]: propValue} = props;\n  if (typeof propValue !== 'function') {\n    return new Error(`Invalid prop \"${propName}\" passed to ${component}`);\n  }\n\n  const value = propValue();\n  if (typeof value !== 'string' && !React.isValidElement(value)) {\n    // eslint-disable-next-line max-len\n    return new Error(`Invalid prop \"${propName}\" passed to ${component}. Function should return \"string\" or \"react.Node\"`);\n  }\n\n  return null;\n}\n\nexport {reactSelectComponents as components};\n\nexport default TagsInput;\n"],"names":["StyledTagsInput","styled","div","TagsInputErrors","lineHeight","defaultStyles","control","styles","isFocused","isDisabled","borderRadius","backgroundColor","minHeight","borderWidth","boxShadow","borderColor","actionColor","gray80","valueContainer","overflow","padding","justifyContent","placeholder","color","fontWeight","paddingLeft","position","clearIndicator","display","marginRight","dropdownIndicator","indicatorSeparator","multiValue","data","isException","errorColor","white","height","alignItems","margin","multiValueLabel","fontSize","multiValueRemove","cursor","menu","zIndex","option","black","input","REGEXPS","splitString","value","splits","specialHandle","regex","split","length","searchSuitableOptions","pastedValue","availableOptions","searchableKeys","rawPastedString","join","toLowerCase","sort","firstEl","secondEl","label","filter","reduce","prevValue","currValue","optionValue","String","search","condition","replace","map","splitValue","find","comparableValue","trim","Boolean","ClearIndicator","props","elementId","getStyles","innerProps","ref","restInnerProps","React","style","id","Close","COLOR","GRAY_DARK","size","SIZE","MEDIUM_SMALL","TagsInput","reactSelectElement","useRef","components","customStyles","errors","isAsync","isErrorLabelVisible","onChange","onInputChange","options","promiseOptions","Promise","resolve","minHeightInput","currentValue","preparedStyled","base","state","isFunction","border","config","clearIndicatorProps","handleAsyncRequest","newValue","onPaste","e","pasteData","clipboardData","getData","pastedOptions","newInputOptions","acc","curVal","el","push","setTimeout","current","select","blur","asyncSelect","ReactAsyncSelect","loadOptions","ReactSelect","ErrorLabel"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,18 +1,20 @@
 import React from 'react';
+import { components as reactSelectComponents } from 'react-select';
 export declare type Option = {
     value: number | string;
     label: string;
 };
 export interface TagsInputProps {
-    components?: {};
+    components?: reactSelectComponents;
     customStyles?: {
-        control?: () => void;
+        control?: (value?: any, value2?: any) => void;
     };
     elementId: string;
     errors?: string[];
     isAsync?: boolean;
     isErrorLabelVisible?: boolean;
     onChange: (newOptionsValue: Option[]) => void;
+    onInputChange: ((inputValue: string) => void) | null;
     options?: Option[];
     promiseOptions?: (value: any) => Promise<any>;
     searchableKeys?: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propellerads/tags-input",
-  "version": "2.3.1",
+  "version": "3.1.0",
   "main": "dist/index.js",
   "repository": "https://github.com/propellerads/ui-components",
   "author": "i.pasyuk@propellerads.net",
@@ -16,8 +16,7 @@
   },
   "typings": "dist/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "engines": {
     "node": ">=10"
@@ -41,5 +40,5 @@
     "tslib": "^2.0.1",
     "typescript": "^3.9.7"
   },
-  "gitHead": "0706a8cba8b077e395426f896d5198d7228859dd"
+  "gitHead": "920090dd976c8c74d2a7a015ed16cac1cad6b9f4"
 }

package/src/index.tsx

@@ -1,261 +0,0 @@
-import React, {useRef} from 'react';
-import ReactSelect, {components as reactSelectComponents} from 'react-select';
-import isFunction from 'lodash.isfunction';
-import ReactAsyncSelect from 'react-select/lib/Async';
-import ErrorLabel from '@propellerads/error-label';
-import {Close, SIZE, COLOR} from '@propellerads/icon';
-
-import {TagsInputProps} from "./types";
-import {defaultStyles, StyledTagsInput, TagsInputErrors} from './style';
-
-// regexps by priority
-const REGEXPS = [
-    /\b\n+\b/,
-    /\b,\s\b/,
-    /\b,+\b/,
-];
-
-interface SplitStringReturnValue {
-    splits: string[]
-    specialHandle: boolean
-}
-
-function splitString(value: string): SplitStringReturnValue {
-    let splits: string[] = []
-
-    let specialHandle = false;
-    for (const regex of REGEXPS) {
-        splits = value.split(regex);
-        if (splits.length > 1) {
-            break;
-        }
-    }
-
-    // special case. Need handle in special way
-    if (splits.length === 1) {
-        splits = value.split(/\b\s+\b/);
-        specialHandle = splits.length > 1;
-    }
-
-    return {
-        splits,
-        specialHandle,
-    };
-}
-
-function searchSuitableOptions(pastedValue, availableOptions, searchableKeys) {
-    const {splits, specialHandle} = splitString(pastedValue);
-
-    if (specialHandle) {
-        let rawPastedString = splits.join(' ')
-            .toLowerCase();
-
-        return availableOptions
-            .sort((firstEl, secondEl) => {
-                if (firstEl.label.length > secondEl.label.length) {
-                    return -1;
-                }
-                if (firstEl.label.length < secondEl.label.length) {
-                    return 1;
-                }
-
-                return 0;
-            })
-            .filter((option) => searchableKeys.reduce((prevValue, currValue) => {
-                const optionValue = String(option[currValue])
-                    .toLowerCase();
-                const position = rawPastedString.search(optionValue);
-                const condition = position !== -1;
-                if (condition) {
-                    rawPastedString = rawPastedString.replace(optionValue, '');
-                }
-
-                return prevValue || condition;
-            }, false));
-    }
-
-    return splits.map((splitValue) => availableOptions.find((option) => {
-        const comparableValue = splitValue.trim().toLowerCase();
-
-        return searchableKeys.reduce((prevValue, currValue) => {
-            const optionValue = String(option[currValue])
-                .toLowerCase();
-            const condition = optionValue === comparableValue;
-
-            return prevValue || condition;
-        }, false);
-    }))
-        .filter(Boolean);
-}
-
-interface ClearIndicatorProps {
-    getStyles: (clearIndicator: string, props: any) => {},
-    innerProps: {
-        ref: React.Ref<HTMLDivElement>
-    },
-    elementId: string,
-}
-
-const ClearIndicator = (props: ClearIndicatorProps) => {
-    const {
-        elementId,
-        getStyles,
-        innerProps: {
-            ref,
-            ...restInnerProps
-        },
-    } = props;
-
-    return (
-        <div
-            {...restInnerProps}
-            ref={ref}
-            style={getStyles('clearIndicator', props)}
-            id={`${elementId}-clear`}
-        >
-            <Close color={COLOR.GRAY_DARK}
-                   size={SIZE.MEDIUM_SMALL}
-            />
-        </div>
-    );
-};
-
-const TagsInput = (props: TagsInputProps) => {
-    const reactSelectElement = useRef<any>(null);
-
-    const {
-        components = {},
-        customStyles = {},
-        elementId,
-        errors = [],
-        isAsync = false,
-        isErrorLabelVisible = false,
-        onChange,
-        options = [],
-        promiseOptions = () => Promise.resolve(),
-        searchableKeys = [
-            'label',
-        ],
-        value = [],
-        isClearable = true,
-        isDisabled = false,
-        isLoading = false,
-        isRtl = false,
-        isMulti = true,
-        isSearchable = true,
-        cacheOptions = false,
-        placeholder = 'Start typing...',
-        noOptionsMessage = () => 'No options...',
-        loadingMessage = () => 'Loading...',
-        minHeightInput = 36
-    } = props;
-
-    const currentValue = value
-
-    const preparedStyled = {
-        ...defaultStyles,
-        ...customStyles,
-        control: (base, state) => ({
-            ...defaultStyles.control(base, state),
-            //@ts-ignore : TODO: update react-select
-            ...(isFunction(customStyles.control) ? customStyles.control(base, state) : {}),
-            border: errors.length ? '1px solid #ed3030' : defaultStyles.control(base, state).border,
-            minHeight: minHeightInput
-        }),
-    };
-
-    const config = {
-        ...props,
-        id: elementId,
-        onChange,
-        styles: preparedStyled,
-        components: {
-            ClearIndicator: (clearIndicatorProps) => (
-                <ClearIndicator
-                    {...clearIndicatorProps}
-                    elementId={elementId}
-                />
-            ),
-            ...components,
-        },
-    };
-
-    const handleAsyncRequest = (value: any) => {
-        if (!value.length || value.length < 2) {
-            return null;
-        }
-
-        return promiseOptions(value);
-    };
-
-    const onPaste = (e) => {
-        const pasteData = e.clipboardData.getData('text/plain');
-
-        const pastedOptions = searchSuitableOptions(pasteData, options, searchableKeys);
-
-        const newInputOptions = pastedOptions.reduce((acc, curVal) => {
-            if (!acc.find((el) => el.value === curVal.value)) {
-                acc.push(curVal);
-            }
-
-            return acc;
-        }, currentValue);
-
-        if (pastedOptions.length !== 0) {
-            onChange(newInputOptions);
-            setTimeout(() => {
-                reactSelectElement.current.select.blur();
-            }, 0);
-        }
-    };
-
-    const asyncSelect = (
-        <ReactAsyncSelect
-            {...config}
-            loadOptions={(value) => handleAsyncRequest(value)}
-        />
-    );
-
-    const select = (
-        <div onPaste={onPaste}>
-            <ReactSelect
-                {...config}
-                ref={reactSelectElement}
-                options={options}
-            />
-        </div>
-    );
-
-    return (
-        <StyledTagsInput>
-            {isAsync ? asyncSelect : select}
-            {errors && errors.length > 0 && isErrorLabelVisible && (
-                <TagsInputErrors>
-                    <ErrorLabel
-                        elementId={elementId}
-                        errors={errors}
-                    />
-                </TagsInputErrors>
-            )}
-        </StyledTagsInput>
-    );
-};
-
-function customChecker(props, propName, component) {
-    const {[propName]: propValue} = props;
-    if (typeof propValue !== 'function') {
-        return new Error(`Invalid prop "${propName}" passed to ${component}`);
-    }
-
-    const value = propValue();
-    if (typeof value !== 'string' && !React.isValidElement(value)) {
-        // eslint-disable-next-line max-len
-        return new Error(`Invalid prop "${propName}" passed to ${component}. Function should return "string" or "react.Node"`);
-    }
-
-    return null;
-}
-
-export {reactSelectComponents as components};
-
-export default TagsInput;

package/src/style.tsx

@@ -1,99 +0,0 @@
-import styled from 'styled-components';
-import {lineHeight, actionColor, borderRadius, gray80, errorColor, black, white} from '@propellerads/stylevariables';
-
-const StyledTagsInput = styled.div`
-  position: relative;
-`;
-
-const TagsInputErrors = styled.div`
-    position: absolute;
-    display: flex;
-    flex-direction: row;
-    right: 1px;
-    top: 0;
-    height: ${lineHeight}px;
-    align-items: center;
-`;
-
-const defaultStyles = {
-    control: (styles, {isFocused, isDisabled}) => ({
-        ...styles,
-        borderRadius,
-        backgroundColor: isDisabled ? '#ededed' : '#fff',
-        minHeight: `${lineHeight}px`,
-        borderWidth: 1,
-        boxShadow: 'none',
-        borderColor: isFocused ? actionColor : gray80,
-    }),
-    valueContainer: (styles) => ({
-        ...styles,
-        overflow: 'hidden',
-        padding: '2px 2px 4px 2px',
-        justifyContent: 'flex-start',
-    }),
-    placeholder: () => ({
-        color: '#c0c0c0',
-        fontWeight: 100,
-        paddingLeft: '4px',
-        position: 'absolute',
-    }),
-    clearIndicator: () => ({
-        color: '#c0c0c0',
-        display: 'inline-flex',
-        marginRight: '4px',
-    }),
-    dropdownIndicator: () => ({
-        display: 'none',
-    }),
-    indicatorSeparator: () => ({
-        display: 'none',
-    }),
-    multiValue: (styles, {data}) => ({
-        ...styles,
-        backgroundColor: data.isException ? errorColor : actionColor,
-        color: white,
-        borderRadius: `${borderRadius / 2}px`,
-        height: '22px',
-        display: 'flex',
-        alignItems: 'center',
-        margin: '2px 0 0 2px',
-    }),
-    multiValueLabel: (styles) => ({
-        ...styles,
-        color: white,
-        padding: '0 0 0 5px',
-        fontSize: '12px',
-        borderRadius: 0,
-        display: 'inline-flex',
-        lineHeight: '1',
-    }),
-    multiValueRemove: (styles, {data}) => ({
-        ...styles,
-        padding: 0,
-        margin: '0 4px 0 2px',
-        backgroundColor: data.isException ? errorColor : actionColor,
-        cursor: 'pointer',
-        ':hover': {
-            backgroundColor: data.isException ? errorColor : actionColor,
-            color: 'white',
-        },
-    }),
-    menu: (styles) => ({
-        ...styles,
-        margin: 0,
-        borderRadius: 0,
-        zIndex: 10,
-    }),
-    option: (styles, {isFocused}) => ({
-        backgroundColor: isFocused ? actionColor : null,
-        padding: '5px 10px',
-        fontSize: '14px',
-        color: isFocused ? white : black,
-    }),
-    input: (styles) => ({
-        ...styles,
-        height: '16px',
-    }),
-};
-
-export {defaultStyles, StyledTagsInput, TagsInputErrors};

package/src/types.ts

@@ -1,36 +0,0 @@
-import React from 'react'
-
-export type Option = {
-    value: number | string
-    label: string
-}
-
-export interface TagsInputProps {
-    components?: {},
-    customStyles?: {
-        control?: () => void
-    },
-    elementId: string,
-    errors?: string[],
-    isAsync?: boolean,
-    isErrorLabelVisible?: boolean,
-    onChange: (newOptionsValue: Option[]) => void,
-    options?: Option[]
-    promiseOptions?: (value: any) => Promise<any>,
-    searchableKeys?: string[],
-    value?: Option[],
-    isClearable?: boolean
-    isDisabled?: boolean,
-    isLoading?: boolean,
-    isRtl?: boolean,
-    isMulti?: boolean,
-    isSearchable?: boolean,
-    cacheOptions?: boolean,
-    placeholder?: string | React.ReactNode
-    noOptionsMessage?: () => string,
-    loadingMessage?: () => string,
-    minHeightInput?: number
-}
-
-export default class TagsInput extends React.Component<TagsInputProps> {
-}