@zohodesk/dot 1.0.0-temp-187.24 → 1.0.0-temp-225

package/lib/form/fields/TagsMultiSelect/props/propTypes.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  addTag: _propTypes["default"].func,
+  boxPosition: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  deleteTag: _propTypes["default"].func,
+  getContainerRef: _propTypes["default"].func,
+  getTargetRef: _propTypes["default"].func,
+  getTextInputRef: _propTypes["default"].func,
+  handleChange: _propTypes["default"].func,
+  handleKeyUp: _propTypes["default"].func,
+  handleTogglePopup: _propTypes["default"].func,
+  isPopupOpen: _propTypes["default"].bool,
+  isPopupReady: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  isTagListLoading: _propTypes["default"].bool,
+  name: _propTypes["default"].string,
+  noMoreData: _propTypes["default"].bool,
+  onScroll: _propTypes["default"].func,
+  searchList: _propTypes["default"].array,
+  selectSearchIndex: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  tagsList: _propTypes["default"].array,
+  chipNeedToShow: _propTypes["default"].string,
+  listDisabled: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string,
+  i18nKeys: _propTypes["default"].shape({
+    newTagText: _propTypes["default"].string.isRequired,
+    emptyTitleText: _propTypes["default"].string.isRequired,
+    emptyDescription: _propTypes["default"].string.isRequired,
+    errorMessage: _propTypes["default"].string.isRequired,
+    deleteText: _propTypes["default"].string.isRequired,
+    lessText: _propTypes["default"].string.isRequired,
+    moreText: _propTypes["default"].string.isRequired,
+    placeholderText: _propTypes["default"].string
+  }),
+  borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
+  needBorder: _propTypes["default"].bool,
+  getTextBoxChildren: _propTypes["default"].func,
+  htmlId: _propTypes["default"].string,
+  boxSize: _propTypes["default"].string,
+  onSelectTag: _propTypes["default"].func,
+  clickableTag: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string,
+  handleSelectAll: _propTypes["default"].func,
+  selectAllText: _propTypes["default"].string,
+  needSelectAll: _propTypes["default"].bool,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
+  customClass: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    TextBoxIconProps: _propTypes["default"].object,
+    TagWrapperProps: _propTypes["default"].object,
+    TagProps: _propTypes["default"].object,
+    ListItemProps: _propTypes["default"].object
+  }),
+  isFocus: _propTypes["default"].bool
+};
+exports.propTypes = propTypes;

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -0,0 +1,326 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
+
+var _Popup = _interopRequireDefault(require("@zohodesk/components/es/Popup/Popup"));
+
+var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
+
+var _TagsMultiSelect = _interopRequireDefault(require("../TagsMultiSelect/TagsMultiSelect"));
+
+var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
+
+var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
+
+var _TagsMultiSelectFieldModule = _interopRequireDefault(require("./TagsMultiSelectField.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var TagsMultiSelectField = function TagsMultiSelectField(props) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedSuggestionIndex = _useState2[0],
+      updateSelectedSuggestionIndex = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isValueChanged = _useState4[0],
+      updateValueChangedState = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(props.searchValue || ''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      searchValue = _useState6[0],
+      changeSearchValue = _useState6[1];
+
+  var fieldProperties = props.fieldProperties,
+      styleProperties = props.styleProperties,
+      actions = props.actions,
+      dataId = props.dataId,
+      htmlId = props.htmlId,
+      isLoading = props.isLoading,
+      isListDisabled = props.isListDisabled,
+      isNewNeeded = props.isNewNeeded,
+      isPopupOpen = props.isPopupOpen,
+      isPopupReady = props.isPopupReady,
+      removeClose = props.removeClose,
+      position = props.position,
+      togglePopup = props.togglePopup,
+      noMoreData = props.noMoreData,
+      numberOfDisplayedValues = props.numberOfDisplayedValues,
+      getTargetRef = props.getTargetRef,
+      getContainerRef = props.getContainerRef,
+      _props$i18nKeys = props.i18nKeys,
+      i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
+      getTextBoxChildren = props.getTextBoxChildren,
+      children = props.children,
+      ePhiData = props.ePhiData,
+      customProps = props.customProps,
+      clickableTag = props.clickableTag,
+      dataSelectorId = props.dataSelectorId,
+      isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+      isRestrictScroll = props.isRestrictScroll,
+      positionsOffset = props.positionsOffset,
+      targetOffset = props.targetOffset;
+  var _customProps$LabelPro = customProps.LabelProps,
+      LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
+      _customProps$TagsMult = customProps.TagsMultiSelectProps,
+      TagsMultiSelectProps = _customProps$TagsMult === void 0 ? {} : _customProps$TagsMult,
+      _customProps$Validati = customProps.ValidationMessageProps,
+      ValidationMessageProps = _customProps$Validati === void 0 ? {} : _customProps$Validati;
+  var labelSize = styleProperties.labelSize,
+      labelPalette = styleProperties.labelPalette,
+      labelClass = styleProperties.labelClass,
+      containerClass = styleProperties.containerClass,
+      needBorder = styleProperties.needBorder,
+      borderColor = styleProperties.borderColor,
+      validationPalette = styleProperties.validationPalette,
+      errorType = styleProperties.errorType;
+  var onChange = actions.onChange,
+      onAdd = actions.onAdd,
+      onDelete = actions.onDelete,
+      onScroll = actions.onScroll,
+      onFocus = actions.onFocus;
+  var id = fieldProperties.id,
+      labelName = fieldProperties.labelName,
+      isMandatory = fieldProperties.isMandatory,
+      isDisabled = fieldProperties.isDisabled,
+      isReadOnly = fieldProperties.isReadOnly,
+      value = fieldProperties.value,
+      selectedValueCount = fieldProperties.selectedValueCount,
+      validationMessage = fieldProperties.validationMessage,
+      options = fieldProperties.options,
+      infoText = fieldProperties.infoText,
+      isLocked = fieldProperties.isLocked,
+      lockedInfoText = fieldProperties.lockedInfoText,
+      alignField = fieldProperties.alignField;
+  options = options || [];
+
+  var handleKeyUp = function handleKeyUp(event) {
+    var keyCode = event.keyCode;
+    onAdd = typeof onAdd !== 'function' ? function () {} : onAdd;
+    onDelete = typeof onDelete !== 'function' ? 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(function (prevSelectedSuggestionIndex) {
+        var 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(function (prevSelectedSuggestionIndex) {
+        var newIndex = prevSelectedSuggestionIndex >= options.length - 1 ? 0 : prevSelectedSuggestionIndex + 1;
+        return newIndex;
+      });
+    } else if (keyCode === 38) {
+      updateSelectedSuggestionIndex(function (prevSelectedSuggestionIndex) {
+        var newIndex = prevSelectedSuggestionIndex <= 0 || prevSelectedSuggestionIndex >= options.length - 1 ? options.length - 1 : prevSelectedSuggestionIndex - 1;
+        return newIndex;
+      });
+    } else if (keyCode === 8 && searchValue === '' & !isValueChanged) {
+      var valueLength = value.length;
+      value.length ? onDelete(value[valueLength - 1].name, event) : undefined;
+    }
+
+    updateValueChangedState(false);
+  };
+
+  var handleChange = function handleChange(searchValue, event) {
+    updateValueChangedState(true);
+    updateSelectedSuggestionIndex(0);
+    changeSearchValue(searchValue);
+    typeof onChange === 'function' && onChange(searchValue, event);
+
+    if (!isPopupOpen) {
+      togglePopup(event);
+    }
+  };
+
+  var handleTogglePopup = function handleTogglePopup(event) {
+    if (isPopupReady) {
+      removeClose(event);
+    } else {
+      togglePopup(event, position);
+      !isPopupOpen && typeof onFocus === 'function' ? onFocus(event) : null;
+      updateSelectedSuggestionIndex(0);
+    }
+  };
+
+  var handleAdd = function handleAdd(value) {
+    changeSearchValue('');
+    typeof onAdd === 'function' && onAdd(value);
+  };
+
+  var documentClick = function documentClick() {
+    changeSearchValue('');
+  };
+
+  var renderEnd = function renderEnd() {
+    return children ? children : null;
+  };
+
+  (0, _react.useEffect)(function () {
+    window.addEventListener('click', documentClick);
+    return function () {
+      window.removeEventListener('click', documentClick);
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+    tabIndex: "0",
+    "aria-label": "".concat(labelName),
+    "data-selector-id": dataSelectorId
+  }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    ePhiData: ePhiData,
+    alignContainer: alignField,
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    renderProps: {
+      end: renderEnd
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+    text: labelName,
+    isRequired: isMandatory,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    palette: labelPalette,
+    customClass: {
+      label: labelClass
+    },
+    htmlFor: htmlId,
+    size: labelSize,
+    testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+    customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+    tagAttributes: {
+      label: {
+        id: id
+      }
+    }
+  }, LabelProps)), selectedValueCount ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    dataId: "".concat(dataId, "_tagCount"),
+    className: _TagsMultiSelectFieldModule["default"].count
+  }, "(".concat(selectedValueCount, ")")) : null), /*#__PURE__*/_react["default"].createElement(_TagsMultiSelect["default"], _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,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isRestrictScroll: isRestrictScroll,
+    positionsOffset: positionsOffset,
+    targetOffset: targetOffset
+  }, TagsMultiSelectProps, {
+    clickableTag: clickableTag
+  })), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: "".concat(dataId, "_ValidationMessage"),
+    htmlFor: htmlId
+  }, ValidationMessageProps)));
+};
+
+TagsMultiSelectField.propTypes = _propTypes.propTypes;
+TagsMultiSelectField.defaultProps = _defaultProps.defaultProps;
+var TagsMultiSelectField_Component = (0, _Popup["default"])(TagsMultiSelectField);
+TagsMultiSelectField_Component.defaultProps = TagsMultiSelectField.defaultProps;
+TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes; // if (__DOCS__) {
+//   TagsMultiSelectField.docs = {
+//     componentGroup: 'TagsMultiSelectField'
+//   };
+// }
+
+var _default = TagsMultiSelectField_Component;
+exports["default"] = _default;

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css

@@ -0,0 +1,9 @@
+.count {
+  color: var(--zdt_tagsmultiselectField_count_text);
+  font-size: var(--zd_font_size12) ;
+  word-break: break-word;
+}[dir=ltr] .count {
+  margin-left: var(--zd_size4) ;
+}[dir=rtl] .count {
+  margin-right: var(--zd_size4) ;
+}

package/lib/form/fields/TagsMultiSelectField/__tests__/TagsMultiSelectField.spec.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _TagsMultiSelectField = _interopRequireDefault(require("../TagsMultiSelectField"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('TagsMultiSelectField', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TagsMultiSelectField["default"], {
+      actions: {},
+      fieldProperties: {
+        value: []
+      }
+    })),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TagsMultiSelectField rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="undefined"
+    class=""
+    data-selector-id="tagsMultiSelectField"
+    tabindex="0"
+  >
+    <div
+      class="container  hasBorder
+              borderColor_default  "
+      data-id="_tagsContainer"
+      data-selector-id="tagsMultiSelectField"
+      data-test-id="_tagsContainer"
+    >
+      <div
+        class="tagDiv  flex rowdir wrap vCenter scrolly"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="inputWrapper grow basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="custmSpan"
+          />
+          <div
+            class="varClass customContainer    effect     container custmInp  flex rowdir"
+            data-selector-id="textBoxIcon"
+          >
+            <div
+              class="grow basis shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <input
+                class="  container xsmall  default  effect  borderColor_default  input"
+                data-id="_tagInp"
+                data-selector-id="textBoxIcon"
+                data-test-id="_tagInp"
+                maxlength="50"
+                placeholder="-"
+                type="text"
+                value=""
+              />
+            </div>
+            <div
+              class="iconContainer  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="flex cover rowdir"
+                data-id="containerComponent"
+                data-selector-id="container"
+                data-test-id="containerComponent"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/form/fields/TagsMultiSelectField/props/defaultProps.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+
+var _FieldCommonDefaultProps = require("../../props/FieldCommonDefaultProps");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var defaultProps = _objectSpread({
+  fieldProperties: {
+    isDisabled: false,
+    isMandatory: false,
+    isLocked: false,
+    alignField: 'baseline'
+  },
+  styleProperties: {
+    containerClass: '',
+    needBorder: true,
+    borderColor: 'default',
+    errorType: 'primary'
+  },
+  isNewNeeded: false,
+  i18nKeys: {},
+  numberOfDisplayedValues: '5',
+  customProps: {},
+  dataSelectorId: 'tagsMultiSelectField',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false
+}, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
+
+exports.defaultProps = defaultProps;

package/lib/form/fields/TagsMultiSelectField/props/propTypes.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FieldCommonPropTypes = require("../../props/FieldCommonPropTypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  fieldProperties: _propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    labelName: _propTypes["default"].string,
+    isMandatory: _propTypes["default"].bool,
+    isDisabled: _propTypes["default"].bool,
+    isReadOnly: _propTypes["default"].bool,
+    value: _propTypes["default"].string,
+    selectedValueCount: _propTypes["default"].string,
+    validationMessage: _propTypes["default"].string,
+    options: _propTypes["default"].array,
+    clickableTag: _propTypes["default"].bool,
+    infoText: _propTypes["default"].string,
+    isLocked: _propTypes["default"].bool,
+    lockedInfoText: _propTypes["default"].string,
+    alignField: _propTypes["default"].oneOf(['vertical', 'baseline'])
+  }),
+  styleProperties: _propTypes["default"].shape({
+    labelSize: _propTypes["default"].string,
+    labelPalette: _propTypes["default"].string,
+    labelClass: _propTypes["default"].string,
+    containerClass: _propTypes["default"].string,
+    needBorder: _propTypes["default"].bool,
+    borderColor: _propTypes["default"].string,
+    validationPalette: _propTypes["default"].string,
+    errorType: _propTypes["default"].string
+  }),
+  actions: _propTypes["default"].shape({
+    onChange: _propTypes["default"].func,
+    onAdd: _propTypes["default"].func,
+    onDelete: _propTypes["default"].func,
+    onScroll: _propTypes["default"].func,
+    onFocus: _propTypes["default"].func
+  }),
+  isNewNeeded: _propTypes["default"].bool,
+  htmlId: _propTypes["default"].string,
+  isLoading: _propTypes["default"].bool,
+  isListDisabled: _propTypes["default"].bool,
+  numberOfDisplayedValues: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  getTextBoxChildren: _propTypes["default"].func,
+  children: _propTypes["default"].node,
+  i18nKeys: _propTypes["default"].object,
+  noMoreData: _propTypes["default"].bool,
+  position: _propTypes["default"].string,
+  getContainerRef: _propTypes["default"].func,
+  getTargetRef: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    LabelProps: _propTypes["default"].object,
+    TagsMultiSelectProps: _propTypes["default"].object,
+    ValidationMessageProps: _propTypes["default"].object
+  }),
+  ePhiData: _propTypes["default"].shape({
+    ePhiTitle: _propTypes["default"].string,
+    ePhiText: _propTypes["default"].string,
+    ePhiStatus: _propTypes["default"].bool
+  }),
+  searchValue: _propTypes["default"].string,
+  isPopupOpen: _propTypes["default"].bool,
+  isPopupReady: _propTypes["default"].bool,
+  removeClose: _propTypes["default"].func,
+  togglePopup: _propTypes["default"].func,
+  clickableTag: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].bool,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object
+};
+exports.propTypes = propTypes;