@zohodesk/dot 1.0.0-beta.212 → 1.0.0-beta.213

package/es/form/fields/RadioField/RadioField.js

@@ -0,0 +1,153 @@
+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); }
+
+/**** Libraries ****/
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+/**** Components ****/
+
+import Label from '@zohodesk/components/lib/Label/Label';
+import Radio from '@zohodesk/components/lib/Radio/Radio';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+/** Css */
+
+import style from '../Fields.module.css';
+export default class RadioField extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    let {
+      id,
+      onChange
+    } = this.props;
+    onChange && onChange(id, value);
+  }
+
+  render() {
+    let {
+      labelName,
+      id,
+      isMandatory,
+      options,
+      validationMessage,
+      validationPalette,
+      errorType,
+      isDisabled,
+      title,
+      labelPalette,
+      labelSize,
+      size,
+      selectedValue,
+      isActive,
+      dataId,
+      validationRuleMessage,
+      validationRulePalette,
+      isReadOnly,
+      variant,
+      customProps
+    } = this.props;
+    const {
+      LabelProps = {},
+      RadioProps = {},
+      ValidationMessageProps1 = {},
+      ValidationMessageProps2 = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : ''
+    }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
+      text: labelName,
+      size: "medium",
+      id: id,
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
+      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+    }, LabelProps)), /*#__PURE__*/React.createElement("div", {
+      className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
+    }, options.map((option, index) => {
+      let {
+        text,
+        value
+      } = option;
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        className: `${style.radio}`
+      }, /*#__PURE__*/React.createElement(Radio, _extends({
+        id: index,
+        value: value,
+        name: id,
+        text: text,
+        labelPalette: labelPalette,
+        labelSize: labelSize,
+        active: isActive,
+        disabled: isDisabled,
+        onChange: this.handleChange,
+        size: size,
+        checked: selectedValue == value,
+        dataId: dataId,
+        isReadOnly: isReadOnly,
+        variant: variant
+      }, RadioProps)));
+    })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+      text: validationMessage,
+      palette: validationPalette,
+      type: errorType,
+      dataId: `${dataId}_ValidationMessage`
+    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+      text: validationRuleMessage,
+      palette: validationRulePalette,
+      type: errorType,
+      dataId: `${dataId}_ValidationRuleMessage`
+    }, ValidationMessageProps2)));
+  }
+
+}
+RadioField.propTypes = {
+  dataId: PropTypes.string,
+  errorType: PropTypes.oneOf(['primary', 'secondary']),
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isMandatory: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelName: PropTypes.string,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  onChange: PropTypes.func,
+  options: PropTypes.array,
+  selectedValue: PropTypes.string,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  validationMessage: PropTypes.string,
+  validationPalette: PropTypes.string,
+  validationRuleMessage: PropTypes.string,
+  validationRulePalette: PropTypes.string,
+  valueField: PropTypes.string,
+  variant: PropTypes.oneOf(['primary', 'default', 'secondary']),
+  customProps: PropTypes.shape({
+    LabelProps: PropTypes.object,
+    RadioProps: PropTypes.object,
+    ValidationMessageProps1: PropTypes.object,
+    ValidationMessageProps2: PropTypes.object
+  })
+};
+RadioField.defaultProps = {
+  errorType: 'primary',
+  isMandatory: false,
+  isDisabled: false,
+  isReadOnly: false,
+  variant: 'primary',
+  labelSize: 'medium',
+  labelPalette: 'default',
+  isActive: false,
+  customProps: {}
+};
+
+if (false) {
+  RadioField.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/SelectField/SelectField.js

@@ -0,0 +1,254 @@
+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); }
+
+/**** Libraries ****/
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+/**** Components ****/
+
+import Label from '@zohodesk/components/lib/Label/Label';
+import Select from '@zohodesk/components/lib/Select/Select';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+/**** Icons ****/
+
+import Icon from '@zohodesk/icons/lib/Icon';
+/** CSS */
+
+import style from '../Fields.module.css';
+export default class SelectField extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
+
+    this.getNextId = getUniqueId(this);
+  }
+
+  handleChange(selctedId, selectedValue) {
+    let {
+      id: fieldId,
+      onChange,
+      selectedValue: propValue
+    } = this.props;
+    onChange && propValue !== selctedId && onChange(fieldId, selctedId, selectedValue);
+  }
+
+  handleGetRef(el) {
+    let {
+      getRef,
+      id
+    } = this.props;
+    this.selectBox = el;
+    getRef && getRef(el, id);
+  } // handleLabelClick() {
+  //   let { isFocusOnLabelClick } = this.props;
+  //   if (isFocusOnLabelClick && this.selectBox && this.selectBox.focus) {
+  //     this.selectBox.focus();
+  //   }
+  // }
+
+
+  render() {
+    let {
+      labelName,
+      id,
+      isMandatory,
+      options,
+      selectedValue,
+      needSearch,
+      emptyMessage,
+      animationStyle,
+      textBoxSize,
+      textBoxVariant,
+      searchBoxSize,
+      searchBoxPlaceHolder,
+      validationMessage,
+      validationPalette,
+      isReadOnly,
+      valueField,
+      textField,
+      excludeOptions,
+      errorType,
+      isDisabled,
+      title,
+      dataId,
+      fieldClass,
+      validationRuleMessage,
+      validationRulePalette,
+      onKeyDown,
+      infoText,
+      isLocked,
+      lockedInfoText,
+      borderColor,
+      fieldSize,
+      isNextOptions,
+      getNextOptions,
+      popupGroup,
+      onSearch,
+      labelPalette,
+      labelCustomClass,
+      htmlId,
+      needLocalSearch,
+      isDefaultSelectValue,
+      placeHolder,
+      children,
+      onFocus,
+      iconOnHover,
+      customProps
+    } = this.props;
+    const {
+      LabelProps = {},
+      SelectProps = {},
+      ValidationMessageProps1 = {},
+      ValidationMessageProps2 = {}
+    } = customProps;
+    let uniqueId = htmlId ? htmlId : this.getNextId();
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : ''
+    }, labelName && /*#__PURE__*/React.createElement("div", {
+      className: style.labelContainer
+    }, /*#__PURE__*/React.createElement(Label, _extends({
+      text: labelName,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      htmlFor: uniqueId,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+    }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-GN-info",
+      iconClass: style.infoIcon,
+      title: infoText,
+      size: "15"
+    }) : null, isLocked ? /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-GN-lock",
+      size: "13",
+      iconClass: style.lockIcon,
+      title: lockedInfoText
+    }) : null), /*#__PURE__*/React.createElement("div", {
+      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
+    }, /*#__PURE__*/React.createElement(Select, _extends({
+      options: options,
+      selectedValue: selectedValue,
+      onChange: this.handleChange,
+      onFocus: onFocus,
+      getRef: this.handleGetRef,
+      needSearch: needSearch,
+      emptyMessage: emptyMessage,
+      animationStyle: animationStyle,
+      textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+      textBoxVariant: textBoxVariant,
+      searchBoxSize: searchBoxSize,
+      searchBoxPlaceHolder: searchBoxPlaceHolder,
+      valueField: valueField,
+      textField: textField,
+      excludeOptions: excludeOptions,
+      dataId: dataId,
+      onKeyDown: onKeyDown,
+      borderColor: borderColor,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      isNextOptions: isNextOptions,
+      getNextOptions: getNextOptions,
+      popupGroup: popupGroup,
+      onSearch: onSearch,
+      htmlId: uniqueId,
+      needLocalSearch: needLocalSearch,
+      isDefaultSelectValue: isDefaultSelectValue,
+      placeHolder: placeHolder,
+      iconOnHover: iconOnHover
+    }, SelectProps), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+      text: validationMessage,
+      palette: validationPalette,
+      type: errorType,
+      htmlFor: uniqueId,
+      dataId: `${dataId}_ValidationMessage`
+    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+      text: validationRuleMessage,
+      palette: validationRulePalette,
+      type: errorType,
+      htmlFor: uniqueId,
+      dataId: `${dataId}_ValidationRuleMessage`
+    }, ValidationMessageProps2)));
+  }
+
+}
+SelectField.propTypes = {
+  animationStyle: PropTypes.string,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  dataId: PropTypes.string,
+  emptyMessage: PropTypes.string,
+  errorType: PropTypes.oneOf(['primary', 'secondary']),
+  excludeOptions: PropTypes.array,
+  fieldClass: PropTypes.string,
+  fieldSize: PropTypes.oneOf(['small', 'medium']),
+  getNextOptions: PropTypes.func,
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  infoText: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isFocusOnLabelClick: PropTypes.bool,
+  isLocked: PropTypes.bool,
+  isMandatory: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelCustomClass: PropTypes.string,
+  labelName: PropTypes.string,
+  labelPalette: PropTypes.string,
+  lockedInfoText: PropTypes.string,
+  needLocalSearch: PropTypes.bool,
+  needSearch: PropTypes.bool,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)]).isRequired,
+  popupGroup: PropTypes.string,
+  searchBoxPlaceHolder: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  selectedValue: PropTypes.string,
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  validationMessage: PropTypes.string,
+  validationPalette: PropTypes.string,
+  validationRuleMessage: PropTypes.string,
+  validationRulePalette: PropTypes.string,
+  valueField: PropTypes.string,
+  isDefaultSelectValue: PropTypes.bool,
+  placeHolder: PropTypes.string,
+  children: PropTypes.node,
+  onFocus: PropTypes.func,
+  iconOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    LabelProps: PropTypes.object,
+    SelectProps: PropTypes.object,
+    ValidationMessageProps1: PropTypes.object,
+    ValidationMessageProps2: PropTypes.object
+  })
+};
+SelectField.defaultProps = {
+  errorType: 'primary',
+  isMandatory: false,
+  needSearch: false,
+  searchBoxSize: 'small',
+  textBoxSize: 'xmedium',
+  textBoxVariant: 'primary',
+  borderColor: 'default',
+  isDisabled: false,
+  isReadOnly: false,
+  fieldSize: 'medium',
+  isFocusOnLabelClick: true,
+  labelPalette: 'default',
+  labelCustomClass: '',
+  isDefaultSelectValue: true,
+  placeHolder: '',
+  customProps: {}
+};
+
+if (false) {
+  SelectField.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

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'
+  };
+}