@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.210

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -0,0 +1,297 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Tag from '@zohodesk/components/lib/Tag/Tag';
+import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
+import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
+import Loader from '@zohodesk/svg/lib/svg/Loader';
+import DropDownSeparator from '@zohodesk/components/lib/DropDown/DropDownSeparator';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import { findScrollEnd, stopBubbling } from '../../../utils/Common';
+import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
+import style from './TagsMultiSelect.module.css';
+export default class TagsMultiSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showAll: false
+    };
+    this.textBoxRef = /*#__PURE__*/React.createRef();
+    this.emptySearchSVG = this.emptySearchSVG.bind(this);
+    this.onShowAllClick = this.onShowAllClick.bind(this);
+    this.getContainerRef = this.getContainerRef.bind(this);
+    this.onScroll = this.onScroll.bind(this);
+    this.getSelectedItemRef = this.getSelectedItemRef.bind(this);
+  }
+
+  onScroll() {
+    let {
+      onScroll,
+      name,
+      noMoreData,
+      searchList
+    } = this.props;
+    let {
+      containerRef
+    } = this;
+
+    if (findScrollEnd(this.containerRef) && !noMoreData) {
+      onScroll(name);
+      let selectItemRef = this[`selectedList_${searchList.length - 1}`];
+      scrollTo(containerRef, selectItemRef);
+    }
+  }
+
+  getSelectedItemRef(el, index) {
+    this[`selectedList_${index}`] = el;
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      isTagListLoading,
+      tagsList,
+      isPopupReady,
+      selectSearchIndex
+    } = this.props;
+
+    if (prevProps.isTagListLoading !== isTagListLoading && !isTagListLoading || isPopupReady && prevProps.tagsList.length !== tagsList.length) {
+      setTimeout(() => {
+        let textBoxElementRef = this.textBoxRef.current;
+
+        if (textBoxElementRef && typeof textBoxElementRef.handleFocus === 'function') {
+          this.textBoxRef.current.handleFocus();
+        }
+      }, 300);
+    }
+
+    if (selectSearchIndex != prevProps.selectSearchIndex) {
+      let selectItemRef = this[`selectedList_${selectSearchIndex}`];
+      let {
+        containerRef
+      } = this;
+      scrollTo(containerRef, selectItemRef);
+    }
+  }
+
+  emptySearchSVG() {
+    return /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    });
+  }
+
+  onShowAllClick() {
+    this.setState({
+      showAll: !this.state.showAll
+    });
+  }
+
+  getContainerRef(ele) {
+    this.containerRef = ele;
+  }
+
+  render() {
+    let {
+      searchList,
+      selectSearchIndex,
+      tagsList,
+      deleteTag,
+      name,
+      isReadOnly,
+      className,
+      handleKeyUp,
+      handleChange,
+      addTag,
+      isTagListLoading,
+      getContainerRef,
+      getTargetRef,
+      isPopupReady,
+      isPopupOpen,
+      boxPosition,
+      handleTogglePopup,
+      listDisabled,
+      chipNeedToShow,
+      i18nKeys,
+      dataId,
+      needBorder,
+      borderColor,
+      getTextBoxChildren,
+      htmlId
+    } = this.props;
+    let {
+      showAll
+    } = this.state;
+    let chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
+    return /*#__PURE__*/React.createElement("div", {
+      className: ` ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
+              ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder ? style.active : ''}` : ''} ${className}`,
+      onClick: stopBubbling,
+      "data-id": `${dataId}_tagsContainer`
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      className: style.tagDiv,
+      wrap: "wrap",
+      eleRef: getTargetRef,
+      scroll: "vertical"
+    }, tagsList.length ? /*#__PURE__*/React.createElement(React.Fragment, null, tagsList.map((tag, index) => {
+      let {
+        name,
+        tagType
+      } = tag;
+      return index < chipLimit ? /*#__PURE__*/React.createElement(Box, {
+        className: style.tag,
+        key: index
+      }, /*#__PURE__*/React.createElement(Tag, {
+        text: name,
+        onRemove: isReadOnly ? null : deleteTag.bind(this, name),
+        closeTitle: i18nKeys.deleteText,
+        palette: tagType === 'SYSTEM' ? 'primary' : 'default',
+        isReadOnly: isReadOnly
+      })) : null;
+    }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
+      className: style.moreLess,
+      dataId: `${dataId}_tagsMore`,
+      onClick: this.onShowAllClick
+    }, showAll ? `${i18nKeys.lessText}` : `+${tagsList.length - chipNeedToShow} ${i18nKeys.moreText}`) : null) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      adjust: true,
+      shrnik: true,
+      className: style.inputWrapper
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.custmSpan
+    }, name), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      htmlId: htmlId,
+      dataId: `${dataId}_tagInp`,
+      value: name,
+      onKeyUp: handleKeyUp,
+      onChange: handleChange,
+      maxLength: 50,
+      isReadOnly: isReadOnly,
+      ref: this.textBoxRef,
+      needBorder: false,
+      placeHolder: tagsList.length ? '' : i18nKeys.placeholderText || '-',
+      onClick: !isReadOnly ? handleTogglePopup : undefined,
+      customClass: {
+        customTBoxWrap: style.custmInp,
+        customTextBox: style.input
+      },
+      size: "xsmall"
+    }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+      isAnimate: true,
+      isActive: isPopupReady,
+      isArrow: false,
+      getRef: getContainerRef,
+      isBoxPaddingNeed: true,
+      size: "default",
+      boxPosition: boxPosition,
+      isPadding: false,
+      customClass: {
+        customDropBoxWrap: style.dropdown
+      },
+      dataId: `${dataId}_dropbox`
+    }, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.viewpopNew
+    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+      scroll: "vertical",
+      className: style.viewpopNew,
+      onScroll: this.onScroll,
+      eleRef: this.getContainerRef
+    }, searchList.length ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, searchList.map((item, index) => {
+      let {
+        name,
+        isNew
+      } = item;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
+        key: index,
+        index: index,
+        autoHover: true,
+        value: isNew ? '' : name,
+        title: isNew ? '' : name,
+        onClick: addTag.bind(this, item),
+        needTick: true,
+        highlight: selectSearchIndex === index,
+        getRef: this.getSelectedItemRef,
+        isDisabled: listDisabled
+      }, isNew ? /*#__PURE__*/React.createElement(Container, {
+        alignBox: "row",
+        align: "vertical"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: style.newTagLabel
+      }, i18nKeys.newTagText, ":"), /*#__PURE__*/React.createElement(Box, {
+        shrink: true,
+        "data-title": name,
+        className: `${style.dotted} ${style.newTagText} `,
+        dataId: `${dataId}_new_tag_text`
+      }, name)) : null));
+    })) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      dataId: `${dataId}_empty`
+    }, /*#__PURE__*/React.createElement(Container, {
+      className: style.searchEmpty
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: i18nKeys.emptyTitleText,
+      description: i18nKeys.emptyDescription,
+      size: "small",
+      getEmptyState: this.emptySearchSVG
+    })))))) : null);
+  }
+
+}
+TagsMultiSelect.propTypes = {
+  addTag: PropTypes.func,
+  boxPosition: PropTypes.string,
+  className: PropTypes.string,
+  deleteTag: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  handleChange: PropTypes.func,
+  handleKeyUp: PropTypes.func,
+  handleTogglePopup: PropTypes.func,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isTagListLoading: PropTypes.bool,
+  name: PropTypes.string,
+  noMoreData: PropTypes.bool,
+  onScroll: PropTypes.func,
+  searchList: PropTypes.array,
+  selectSearchIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  tagsList: PropTypes.array,
+  chipNeedToShow: PropTypes.string,
+  listDisabled: PropTypes.bool,
+  dataId: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    newTagText: PropTypes.string.isRequired,
+    emptyTitleText: PropTypes.string.isRequired,
+    emptyDescription: PropTypes.string.isRequired,
+    errorMessage: PropTypes.string.isRequired,
+    deleteText: PropTypes.string.isRequired,
+    lessText: PropTypes.string.isRequired,
+    moreText: PropTypes.string.isRequired,
+    placeholderText: PropTypes.string
+  }),
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  needBorder: PropTypes.bool,
+  getTextBoxChildren: PropTypes.func,
+  htmlId: PropTypes.string
+};
+TagsMultiSelect.defaultProps = {
+  className: '',
+  i18nKeys: {},
+  chipNeedToShow: '5',
+  borderColor: 'default',
+  needBorder: true,
+  dataId: ''
+};
+
+if (false) {
+  TagsMultiSelect.docs = {
+    componentGroup: 'TagsMultiSelect'
+  };
+}

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -0,0 +1,95 @@
+.tag {
+  max-width: 100%;
+}
+.moreLess,
+.tag {
+  margin: 0 var(--zd_size6) var(--zd_size6) 0;
+}
+.input {
+  height: var(--zd_size20);
+  margin-bottom: var(--zd_size4);
+  width: 100%;
+}
+.viewpopNew {
+  max-height: var(--zd_size250);
+}
+.tagDiv {
+  margin-top: var(--zd_size5);
+  max-height: var(--zd_size160);
+}
+.hasBorder {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  transition: border var(--zd_transition2) linear 0s;
+}
+.borderColor_transparent {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
+}
+.borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_hover_border);
+}
+.borderColor_transparent.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_active_border);
+}
+.borderColor_default {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_border);
+}
+.borderColor_default:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_hover_border);
+}
+.borderColor_default.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_active_border);
+}
+.borderColor_dark {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_border);
+}
+.borderColor_dark:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_hover_border);
+}
+.borderColor_dark.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_active_border);
+}
+.moreLess {
+  color: var(--zdt_tagsmultiselect_more_text);
+  font-size: var(--zd_font_size13);
+  cursor: pointer;
+}
+.moreLess:hover {
+  color: var(--zdt_tagsmultiselect_more_hover_text);
+}
+.inputWrapper {
+  position: relative;
+  max-width: 100%;
+  min-width: var(--zd_size5);
+  font-size: 0;
+}
+.newTagLabel {
+  margin-right: var(--zd_size5);
+  color: var(--zdt_tagsmultiselect_labelt_text);
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+.dotted {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+.dropdown {
+  margin-top: var(--zd_size1);
+}
+.custmSpan {
+  height: var(--zd_size25);
+  display: inline-block;
+  vertical-align: middle;
+  opacity: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+  visibility: hidden;
+}
+.custmInp {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.newTagText {
+  color: var(--zdt_tagsmultiselect_more_text);
+}

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -0,0 +1,320 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Label from '@zohodesk/components/lib/Label/Label';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import TagsMultiSelect from '../TagsMultiSelect/TagsMultiSelect';
+import fieldStyle from '../Fields.module.css';
+import style from './TagsMultiSelectField.module.css';
+
+const TagsMultiSelectField = props => {
+  const [selectedSuggestionIndex, updateSelectedSuggestionIndex] = useState(0);
+  const [isValueChanged, updateValueChangedState] = useState(false);
+  let [searchValue, changeSearchValue] = useState(props.searchValue || '');
+  const {
+    fieldProperties,
+    styleProperties,
+    actions,
+    dataId,
+    htmlId,
+    isLoading,
+    isListDisabled,
+    isNewNeeded,
+    isPopupOpen,
+    isPopupReady,
+    removeClose,
+    position,
+    togglePopup,
+    noMoreData,
+    numberOfDisplayedValues,
+    getTargetRef,
+    getContainerRef,
+    i18nKeys = {},
+    getTextBoxChildren,
+    children,
+    ePhiData,
+    customProps
+  } = props;
+  const {
+    LabelProps = {},
+    TagsMultiSelectProps = {},
+    ValidationMessageProps = {}
+  } = customProps;
+  const {
+    labelSize,
+    labelPalette,
+    labelClass,
+    containerClass,
+    needBorder,
+    borderColor,
+    validationPalette,
+    errorType
+  } = styleProperties;
+  let {
+    onChange,
+    onAdd,
+    onDelete,
+    onScroll,
+    onFocus
+  } = actions;
+  let {
+    id,
+    labelName,
+    isMandatory,
+    isDisabled,
+    isReadOnly,
+    value,
+    selectedValueCount,
+    validationMessage,
+    options
+  } = fieldProperties;
+  let {
+    ePhiTitle = '',
+    ePhiText = '',
+    ePhiStatus = false
+  } = ePhiData;
+  options = options || [];
+
+  const handleKeyUp = event => {
+    let {
+      keyCode
+    } = event;
+    onAdd = typeof onAdd !== 'function' ? () => {} : onAdd;
+    onDelete = typeof onDelete !== 'function' ? () => {} : onDelete;
+
+    if (keyCode === 13) {
+      if (selectedSuggestionIndex > -1 && options.length) {
+        if (options.length === 1 && options[0].isNew) {
+          searchValue = searchValue.replace(',', '');
+          onAdd({
+            name: searchValue
+          }, event);
+        } else {
+          onAdd(options[selectedSuggestionIndex], event);
+        }
+      } else {
+        searchValue = searchValue.replace(',', '');
+        onAdd({
+          name: searchValue
+        }, event);
+      }
+
+      changeSearchValue('');
+      updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
+        let newIndex = 0;
+
+        if (options.length) {
+          if (options.length === 1 && options[0].isNew) {
+            return newIndex;
+          }
+
+          newIndex = prevSelectedSuggestionIndex === options.length - 1 ? options.length - 2 : prevSelectedSuggestionIndex;
+        }
+
+        return newIndex;
+      });
+    } else if (keyCode === 188 && !event.shiftKey) {
+      searchValue = searchValue.replace(',', '');
+
+      if (options.length === 1 && options[0].isNew) {
+        onAdd({
+          name: searchValue
+        }, event);
+        changeSearchValue('');
+      }
+    } else if (keyCode === 40) {
+      updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
+        let newIndex = prevSelectedSuggestionIndex >= options.length - 1 ? 0 : prevSelectedSuggestionIndex + 1;
+        return newIndex;
+      });
+    } else if (keyCode === 38) {
+      updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
+        let newIndex = prevSelectedSuggestionIndex <= 0 || prevSelectedSuggestionIndex >= options.length - 1 ? options.length - 1 : prevSelectedSuggestionIndex - 1;
+        return newIndex;
+      });
+    } else if (keyCode === 8 && searchValue === '' & !isValueChanged) {
+      let valueLength = value.length;
+      value.length ? onDelete(value[valueLength - 1].name, event) : undefined;
+    }
+
+    updateValueChangedState(false);
+  };
+
+  const handleChange = (searchValue, event) => {
+    updateValueChangedState(true);
+    updateSelectedSuggestionIndex(0);
+    changeSearchValue(searchValue);
+    typeof onChange === 'function' && onChange(searchValue, event);
+
+    if (!isPopupOpen) {
+      togglePopup(event);
+    }
+  };
+
+  const handleTogglePopup = event => {
+    if (isPopupReady) {
+      removeClose(event);
+    } else {
+      togglePopup(event, position);
+      !isPopupOpen && typeof onFocus === 'function' ? onFocus(event) : null;
+      updateSelectedSuggestionIndex(0);
+    }
+  };
+
+  const handleAdd = value => {
+    changeSearchValue('');
+    typeof onAdd === 'function' && onAdd(value);
+  };
+
+  const documentClick = () => {
+    changeSearchValue('');
+  };
+
+  useEffect(() => {
+    window.addEventListener('click', documentClick);
+    return () => {
+      window.removeEventListener('click', documentClick);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "baseline",
+    isCover: false
+  }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
+    text: labelName,
+    title: labelName,
+    id: id,
+    size: labelSize,
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+    customClass: `${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
+    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+    htmlFor: htmlId
+  }, LabelProps)), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {
+    dataId: `${dataId}_tagCount`,
+    className: style.count
+  }, `(${selectedValueCount})`) : null, ePhiStatus ? /*#__PURE__*/React.createElement("span", {
+    "data-title": ePhiTitle,
+    "data-id": `${dataId}_ePHI`,
+    className: fieldStyle.ePhiTag
+  }, ePhiText) : null, children ? children : null), /*#__PURE__*/React.createElement(TagsMultiSelect, _extends({
+    addTag: handleAdd,
+    deleteTag: onDelete,
+    handleChange: handleChange,
+    handleKeyUp: handleKeyUp,
+    isReadOnly: isReadOnly,
+    name: searchValue,
+    noMoreData: noMoreData,
+    searchList: isNewNeeded && searchValue.length && !options.length ? [{
+      isNew: true,
+      name: searchValue
+    }] : options,
+    selectSearchIndex: selectedSuggestionIndex,
+    tagsList: value,
+    i18nKeys: i18nKeys,
+    boxPosition: position,
+    getTargetRef: getTargetRef,
+    getContainerRef: getContainerRef,
+    handleTogglePopup: handleTogglePopup,
+    isPopupReady: isPopupReady,
+    isPopupOpen: isPopupOpen,
+    onScroll: onScroll,
+    isTagListLoading: isLoading,
+    listDisabled: isListDisabled,
+    chipNeedToShow: numberOfDisplayedValues,
+    dataId: dataId,
+    needBorder: needBorder,
+    borderColor: borderColor,
+    htmlId: htmlId,
+    getTextBoxChildren: getTextBoxChildren,
+    className: containerClass
+  }, TagsMultiSelectProps)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationMessage`,
+    htmlFor: htmlId
+  }, ValidationMessageProps)));
+};
+
+export default Popup(TagsMultiSelectField);
+TagsMultiSelectField.propTypes = {
+  fieldProperties: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    labelName: PropTypes.string,
+    isMandatory: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isReadOnly: PropTypes.bool,
+    value: PropTypes.string,
+    selectedValueCount: PropTypes.string,
+    validationMessage: PropTypes.string,
+    options: PropTypes.array
+  }),
+  styleProperties: PropTypes.shape({
+    labelSize: PropTypes.string,
+    labelPalette: PropTypes.string,
+    labelClass: PropTypes.string,
+    containerClass: PropTypes.string,
+    needBorder: PropTypes.bool,
+    borderColor: PropTypes.string,
+    validationPalette: PropTypes.string,
+    errorType: PropTypes.string
+  }),
+  actions: PropTypes.shape({
+    onChange: PropTypes.func,
+    onAdd: PropTypes.func,
+    onDelete: PropTypes.func,
+    onScroll: PropTypes.func,
+    onFocus: PropTypes.func
+  }),
+  isNewNeeded: PropTypes.bool,
+  data: PropTypes.string,
+  htmlId: PropTypes.string,
+  isLoading: PropTypes.bool,
+  isListDisabled: PropTypes.bool,
+  numberOfDisplayedValues: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  getTextBoxChildren: PropTypes.func,
+  children: PropTypes.node,
+  i18nKeys: PropTypes.object,
+  noMoreData: PropTypes.bool,
+  position: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  ePhiData: PropTypes.shape({
+    ePhiTitle: PropTypes.string,
+    ePhiText: PropTypes.string,
+    ePhiStatus: PropTypes.bool
+  }),
+  customProps: PropTypes.shape({
+    LabelProps: PropTypes.object,
+    TagsMultiSelectProps: PropTypes.object,
+    ValidationMessageProps: PropTypes.object
+  })
+};
+TagsMultiSelectField.defaultProps = {
+  fieldProperties: {
+    isDisabled: false,
+    isMandatory: false
+  },
+  styleProperties: {
+    containerClass: '',
+    needBorder: true,
+    borderColor: 'default',
+    errorType: 'primary'
+  },
+  isNewNeeded: false,
+  i18nKeys: {},
+  numberOfDisplayedValues: '5',
+  ePhiData: {},
+  customProps: {}
+};
+
+if (false) {
+  TagsMultiSelectField.docs = {
+    componentGroup: 'TagsMultiSelectField'
+  };
+}