@zohodesk/dot 1.0.0-temp-187.15 → 1.0.0-temp-200.5

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -21,8 +21,12 @@ var _Avatar = _interopRequireDefault(require("@zohodesk/components/lib/Avatar/Av
 
 var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
 
+var _Typography = _interopRequireDefault(require("@zohodesk/components/lib/Typography/Typography"));
+
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
+var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));
+
 var _AttachmentImage = _interopRequireDefault(require("./AttachmentImage"));
 
 var _Link = _interopRequireDefault(require("../Link/Link"));
@@ -35,11 +39,9 @@ var _Attachment = require("./Attachment");
 
 var _General = require("../utils/General");
 
-var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
-
 var _utils = require("./utils");
 
-var _audio_thumbnail = _interopRequireDefault(require("../../images/audio_thumbnail.png"));
+var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -117,6 +119,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     _this.getUpdateDataList = _this.getUpdateDataList.bind(_assertThisInitialized(_this));
     _this.zoomMaintain = _this.zoomMaintain.bind(_assertThisInitialized(_this));
     _this.handleMenuValidation = _this.handleMenuValidation.bind(_assertThisInitialized(_this));
+    _this.getPreviewIconData = _this.getPreviewIconData.bind(_assertThisInitialized(_this));
+    _this.renderIframe = _this.renderIframe.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -167,9 +171,11 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       var selectedAttachmentViewUrl = selectedAttachment.viewUrl;
       var selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
       var selectedAttachmentName = selectedAttachment.name;
+      var selectedAttachmentPreviewUrl = selectedAttachment.previewurl;
       (0, _utils.checkFileSourcesValidation)({
         fileName: selectedAttachmentName,
-        viewURL: selectedAttachmentViewUrl
+        viewURL: selectedAttachmentViewUrl,
+        previewUrl: selectedAttachmentPreviewUrl
       }).then(function (fileSourceValidation) {
         var isViewURLValid = fileSourceValidation.isViewURLValid,
             canZoom = fileSourceValidation.canZoom;
@@ -332,6 +338,32 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }])
       };
     }
+  }, {
+    key: "getPreviewIconData",
+    value: function getPreviewIconData(name, size, dataId) {
+      // const fileDetails = getAttachmentIconDetails(name, size);
+      var fileUnknown = {
+        iconName: 'ZD-GN-fileUnknown',
+        iconSize: '40'
+      };
+      var fileDetails = name ? (0, _Attachment.getAttachmentIconDetails)(name, size) : fileUnknown;
+      var iconName = fileDetails.iconName,
+          iconSize = fileDetails.iconSize;
+      return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        iconClass: _AttachmentViewerModule["default"].prevFooterIcon,
+        name: iconName,
+        size: iconSize,
+        "data-id": dataId
+      });
+    }
+  }, {
+    key: "renderIframe",
+    value: function renderIframe(iframeSrc) {
+      return /*#__PURE__*/_react["default"].createElement("iframe", _extends({
+        src: iframeSrc,
+        className: _AttachmentViewerModule["default"].previewFrame
+      }, this.props.customProps.iframeProps));
+    }
   }, {
     key: "imgPreviewView",
     value: function imgPreviewView() {
@@ -345,7 +377,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           isPreviewAttachmentValid = _this$state3.isPreviewAttachmentValid;
       var _this$props = this.props,
           maintainZoom = _this$props.maintainZoom,
-          dataId = _this$props.dataId;
+          dataId = _this$props.dataId,
+          i18nKeys = _this$props.i18nKeys,
+          renderUnSupportedElement = _this$props.renderUnSupportedElement;
 
       var getImgStyle = function getImgStyle(i) {
         var position;
@@ -383,16 +417,25 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             _data$customClass = data.customClass,
             customClass = _data$customClass === void 0 ? {} : _data$customClass,
             _data$customProps = data.customProps,
-            customProps = _data$customProps === void 0 ? {} : _data$customProps;
+            customProps = _data$customProps === void 0 ? {} : _data$customProps,
+            previewurl = data.previewurl,
+            type = data.type;
         var _customProps$audioPro = customProps.audioProps,
             audioProps = _customProps$audioPro === void 0 ? {} : _customProps$audioPro,
             _customProps$imagePro = customProps.imageProps,
-            imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro;
+            imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro,
+            _customProps$videoPro = customProps.videoProps,
+            videoProps = _customProps$videoPro === void 0 ? {} : _customProps$videoPro,
+            _customProps$iframePr = customProps.iframeProps,
+            iframeProps = _customProps$iframePr === void 0 ? {} : _customProps$iframePr;
         var _customClass$customIm = customClass.customImageClass,
             customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm,
             _customClass$customCh = customClass.customChildrenClass,
             customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
         var retainZoom = canZoom && selectedIndex == i && maintainZoom;
+        var frameOrigin = (0, _utils.getFrameOrigin)();
+        var iframeSrc = "".concat(previewurl, "&frameorigin=").concat(frameOrigin);
+        var extension = (0, _Attachment.getExtensionFromFileName)(name);
         return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           className: _AttachmentViewerModule["default"].imgBox,
           id: "imgBox".concat(i),
@@ -403,29 +446,49 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _AttachmentViewerModule["default"].imgRef,
           id: "imgPreviewRef".concat(i)
-        }, (0, _Attachment.isAudioFile)(name) ? selectedIndex == i ? /*#__PURE__*/_react["default"].createElement("video", _extends({
-          autoPlay: true,
+        }, selectedIndex == i && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _Attachment.isAudioFile)(extension) ? /*#__PURE__*/_react["default"].createElement("audio", _extends({
+          controls: true,
+          className: _AttachmentViewerModule["default"].zoomIn,
+          "data-id": "".concat(dataId, "_audioPreview"),
+          "data-test-id": "".concat(dataId, "_audioPreview")
+        }, audioProps), /*#__PURE__*/_react["default"].createElement("source", {
+          src: previewurl,
+          type: "audio/".concat(extension)
+        })) : (0, _Attachment.isVideoFile)(extension) ? /*#__PURE__*/_react["default"].createElement("video", _extends({
           controls: true,
           className: _AttachmentViewerModule["default"].zoomIn,
           "data-id": "".concat(dataId, "_videoPreview"),
           "data-test-id": "".concat(dataId, "_videoPreview")
-        }, audioProps), /*#__PURE__*/_react["default"].createElement("source", {
+        }, videoProps), /*#__PURE__*/_react["default"].createElement("source", {
           src: viewUrl,
-          type: "audio/".concat((0, _Attachment.getExtensionFromFileName)(name))
-        })) : null : /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+          type: "video/".concat(extension)
+        })) : (0, _Attachment.isImageFile)(extension) ? /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
           customClass: {
-            customImageClass: "".concat(_AttachmentViewerModule["default"].img, " ").concat(_AttachmentViewerModule["default"].altText, "\n                    ").concat(canZoom || retainZoom ? isZoomed ? "".concat(_AttachmentViewerModule["default"].zoomedImg, " ").concat(_AttachmentViewerModule["default"].zoomOutCursor) : "".concat(_AttachmentViewerModule["default"].normalImg, " ").concat(_AttachmentViewerModule["default"].zoomInCursor) : '', " ").concat(customImageClass),
+            customImageClass: "".concat(_AttachmentViewerModule["default"].img, " ").concat(_AttachmentViewerModule["default"].altText, " ").concat(canZoom || retainZoom ? isZoomed ? "".concat(_AttachmentViewerModule["default"].zoomedImg, " ").concat(_AttachmentViewerModule["default"].zoomOutCursor) : "".concat(_AttachmentViewerModule["default"].normalImg, " ").concat(_AttachmentViewerModule["default"].zoomInCursor) : '', " ").concat(customImageClass),
             customChildrenClass: customChildrenClass
           },
           src: viewUrl,
           onClick: isPreviewAttachmentValid ? isZoomed ? _this5.zoomOut.bind(_this5, i) : function (e) {
-            _this5.zoomIn(e, i, true);
+            return _this5.zoomIn(e, i, true);
           } : undefined,
           alt: name,
           dataId: dataId,
           id: "img".concat(i),
           isCover: false
-        }, imageProps), children)));
+        }, imageProps), children) : type === "document" && previewurl != null ? _this5.renderIframe(iframeSrc) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: _AttachmentViewerModule["default"].previewNone
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: _AttachmentViewerModule["default"].fileTypeImg
+        }, _this5.getPreviewIconData(name, '70')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          $ui_size: "20",
+          $ui_weight: "semibold"
+        }, i18nKeys.previewUnsupportedText), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+          href: data.href,
+          className: _AttachmentViewerModule["default"].downloadLink
+        }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+          palette: "primaryFilled",
+          text: i18nKeys.downloadText
+        }))))));
       });
     }
   }, {
@@ -451,7 +514,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr;
       var totalLen = data.length;
       var selectedAttachment = data[selectedIndex] || {};
-      var selectedImgUrl = selectedAttachment.viewUrl;
+      var selectedImgUrl = selectedAttachment.previewurl || selectedAttachment.viewUrl;
       var downloadUrl = selectedAttachment.downloadUrl;
       var authorHref;
       var authorName;
@@ -666,10 +729,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
               customImageClass = _customClass$customIm2 === void 0 ? '' : _customClass$customIm2,
               _customClass$customCh2 = customClass.customChildrenClass,
               customChildrenClass = _customClass$customCh2 === void 0 ? '' : _customClass$customCh2;
-          thumbnail = (0, _Attachment.isAudioFile)(name) ? thumbnail || _audio_thumbnail["default"] : thumbnail; //fallback thumbnail for audio
-
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : ''),
+            className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : '', " ").concat((0, _Attachment.isImageFile)(name) || thumbnail ? '' : _AttachmentViewerModule["default"].previewIconDiv),
             key: index,
             onClick: _this6.changeSelectedIndex.bind(_this6, index),
             eleRef: function eleRef(el) {
@@ -677,7 +738,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             },
             dataId: "attachPreviewList",
             "data-title": name
-          }, /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+          }, (0, _Attachment.isImageFile)(name) || thumbnail ? /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
             src: thumbnail || viewUrl,
             size: "small",
             alt: name,
@@ -686,7 +747,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
               customChildrenClass: "".concat(_AttachmentViewerModule["default"].crsrPointer, " ").concat(customChildrenClass)
             },
             dataId: dataId
-          }, customProps), children));
+          }, customProps), children) : _this6.getPreviewIconData(name, '40'));
         }))))), totalLen !== 1 && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           dataId: "attachToggle",
           onClick: _this6.togglePViewList,

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -79,7 +79,7 @@
     font-size: var(--zd_font_size22) ;
     height: var(--zd_size38) ;
     width: var(--zd_size38) ;
-    line-height: 1.6364;
+    line-height: 1.6;
     border-radius: 50%;
     cursor: pointer;
 }
@@ -230,14 +230,10 @@
     transform: rotateX(0deg);
 }
 
-.isAudio {
-    composes: audioImage from '../common/dot_common.module.css';
-    width: var(--zd_size100) ;
-    background-size: 100% 100%;
-}
-
-.isAudio .image {
-    opacity: 0;
+.previewFrame {
+    height: 100% ;
+    width: 100% ;
+    border: 0;
 }
 
 .video {
@@ -362,4 +358,54 @@
     background-color: var(--dot_mirror);
     border: 0;
     cursor: pointer;
+}
+
+.fileTypeImg {
+    margin-bottom: var(--zd_size30) ;
+}
+
+.previewNone {
+    color: var(--zdt_attachmentviewer_title_text);
+    text-align: center;
+    margin: auto ;
+}
+
+.downloadLink {
+    display: inline-block;
+    padding-top: var(--zd_size15) ;
+}
+
+.previewIconDiv {
+    width: var(--zd_size60) ;
+    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.prevFooterIcon,
+.prevIcon {
+    color: var(--zdt_attachmentviewer_title_text);
+}
+
+.prevFooterIcon, .prevIcon {
+    padding: var(--zd_size2) ;
+    margin: auto ;
+}
+
+.prevFooterIcon::before, .prevIcon::before {
+    background-color: var(--dot_mirror);
+}
+
+[dir=ltr] .prevIcon::before {
+    border-radius: 10px 30px 10px 10px;
+}
+
+[dir=rtl] .prevIcon::before {
+    border-radius: 30px 10px 10px 10px;
+}
+
+[dir=ltr] .prevFooterIcon::before {
+    border-radius: 5px 17px 5px 5px
+}
+
+[dir=rtl] .prevFooterIcon::before {
+    border-radius: 17px 5px 5px 5px
 }

package/lib/AttachmentViewer/props/propTypes.js

@@ -38,7 +38,8 @@ var AttachmentViewer_propTypes = {
     downloadText: _propTypes["default"].string,
     closeText: _propTypes["default"].string,
     hideText: _propTypes["default"].string,
-    showText: _propTypes["default"].string
+    showText: _propTypes["default"].string,
+    previewUnsupportedText: _propTypes["default"].string
   }),
   needDownload: _propTypes["default"].string,
   previewObj: _propTypes["default"].object,
@@ -46,6 +47,7 @@ var AttachmentViewer_propTypes = {
   maintainZoom: _propTypes["default"].bool,
   isActive: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  renderUnSupportedElement: _propTypes["default"].func,
   customProps: _propTypes["default"].shape({
     avatarProps: _propTypes["default"].exact(_propTypes2.propTypes)
   })

package/lib/AttachmentViewer/utils.js

@@ -7,6 +7,9 @@ exports.ZoomEvent = exports.Zoom = void 0;
 exports.checkAudioUrlValidity = checkAudioUrlValidity;
 exports.checkFileSourcesValidation = checkFileSourcesValidation;
 exports.checkImageValidity = checkImageValidity;
+exports.checkVideoUrlValidity = checkVideoUrlValidity;
+exports.getFrameOrigin = getFrameOrigin;
+exports.isValidDocument = isValidDocument;
 
 var _Attachment = require("./Attachment");
 
@@ -153,6 +156,21 @@ function checkImageValidity(src) {
   });
 }
 
+function checkVideoUrlValidity(url) {
+  return new Promise(function (resolve) {
+    var video = document.createElement('video');
+    video.src = url;
+
+    video.oncanplaythrough = function () {
+      return resolve(true);
+    };
+
+    video.onerror = function () {
+      return resolve(false);
+    };
+  });
+}
+
 function checkAudioUrlValidity(url) {
   return new Promise(function (resolve) {
     var audio = new Audio(url);
@@ -169,9 +187,19 @@ function checkAudioUrlValidity(url) {
 
 ;
 
+function isValidDocument(url) {
+  if (!url) {
+    return false;
+  }
+
+  return true;
+}
+
 function checkFileSourcesValidation(_ref) {
   var fileName = _ref.fileName,
-      viewURL = _ref.viewURL;
+      viewURL = _ref.viewURL,
+      previewUrl = _ref.previewUrl;
+  var documentTypes = (0, _Attachment.isDocsFile)(fileName) || (0, _Attachment.isSheetFile)(fileName) || (0, _Attachment.isPresentationFile)(fileName) || (0, _Attachment.isPdfFile)(fileName) || (0, _Attachment.isEmailFile)(fileName);
 
   if ((0, _Attachment.isAudioFile)(fileName)) {
     var audioValidityPromise = checkAudioUrlValidity(viewURL);
@@ -181,6 +209,20 @@ function checkFileSourcesValidation(_ref) {
         canZoom: false
       };
     });
+  } else if ((0, _Attachment.isVideoFile)(fileName)) {
+    var videoValidityPromise = checkVideoUrlValidity(viewURL);
+    return videoValidityPromise.then(function (isURLValid) {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: false
+      };
+    });
+  } else if (documentTypes && isValidDocument(previewUrl)) {
+    var isValid = isValidDocument(previewUrl);
+    return Promise.resolve({
+      isViewURLValid: isValid,
+      canZoom: false
+    });
   } else {
     var imageValidityPromise = checkImageValidity(viewURL);
     return imageValidityPromise.then(function (isURLValid) {
@@ -190,4 +232,8 @@ function checkFileSourcesValidation(_ref) {
       };
     });
   }
+}
+
+function getFrameOrigin() {
+  return new URL(window.location.href).origin;
 }

package/lib/Onboarding/Onboarding.js

@@ -41,7 +41,7 @@ var _useOnboarding2 = _interopRequireDefault(require("./hooks/useOnboarding"));
 
 var _General = require("../utils/General");
 
-var _CardOnboardingModule = _interopRequireDefault(require("./css/CardOnboarding.module.css"));
+var _OnboardingModule = _interopRequireDefault(require("./css/Onboarding.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -63,7 +63,7 @@ var Onboarding = function Onboarding(_ref) {
       onPrimaryButtonClick = _ref.onPrimaryButtonClick,
       onSecondaryButtonClick = _ref.onSecondaryButtonClick,
       customProps = _ref.customProps;
-  var style = (0, _useMergeStyle["default"])(_CardOnboardingModule["default"], customStyle);
+  var style = (0, _useMergeStyle["default"])(_OnboardingModule["default"], customStyle);
 
   var _useOnboarding = (0, _useOnboarding2["default"])(),
       state = _useOnboarding.state,

package/lib/VideoLookup/VideoLookup.js

@@ -23,7 +23,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _VideoLookupStylesModule = _interopRequireDefault(require("./css/VideoLookupStyles.module.css"));
+var _VideoLookupModule = _interopRequireDefault(require("./css/VideoLookup.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -46,7 +46,7 @@ function VideoLookup(props) {
       testId = props.testId,
       customId = props.customId,
       videoFormat = props.videoFormat;
-  var style = (0, _utils.mergeStyle)(_VideoLookupStylesModule["default"], customStyle);
+  var style = (0, _utils.mergeStyle)(_VideoLookupModule["default"], customStyle);
   var handleKeyPress = (0, _react.useCallback)(function (e) {
     if (e.keyCode == '27') {
       onClose(e);

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

@@ -218,7 +218,3 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
-}

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

@@ -222,17 +222,13 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customClass$listItem = customClass.listItemClass,
           listItemClass = _customClass$listItem === void 0 ? '' : _customClass$listItem,
           _customClass$textBoxI = customClass.textBoxIconWrapperClass,
-          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI,
-          _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI;
       var _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TagWrapp = customProps.TagWrapperProps,
           TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
           _customProps$TagProps = customProps.TagProps,
-          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps,
-          _customProps$ListItem = customProps.ListItemProps,
-          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
       var isEditable = !isReadOnly;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
@@ -310,8 +306,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           boxPosition: boxPosition,
           isPadding: false,
           customClass: {
-            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown,
-            customDropBox: dropBoxClass
+            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown
           },
           dataId: "".concat(dataId, "_dropbox"),
           isResponsivePadding: true,
@@ -343,7 +338,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           var name = item.name,
               isNew = item.isNew,
               listItemProps = item.listItemProps;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
             key: index,
             index: index,
             autoHover: true,
@@ -356,7 +351,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             isDisabled: listDisabled,
             customProps: listItemProps,
             customClass: listItemClass
-          }, ListItemProps), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
             alignBox: "row",
             align: "vertical"
           }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

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

@@ -62,8 +62,7 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object,
     TagWrapperProps: _propTypes["default"].object,
-    TagProps: _propTypes["default"].object,
-    ListItemProps: _propTypes["default"].object
+    TagProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool
 };

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -25,8 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -102,10 +100,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           onSearch = _this$props3.onSearch,
           needSearchFetching = _this$props3.needSearchFetching,
           searchStr = _this$props3.searchStr,
-          i18nKeys = _this$props3.i18nKeys,
-          customProps = _this$props3.customProps;
-      var _customProps$ToggleDr = customProps.ToggleDropDownProps,
-          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr;
+          i18nKeys = _this$props3.i18nKeys;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -114,7 +109,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
-      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({
+      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
         title: title,
         options: departmentList,
         value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
@@ -143,7 +138,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
         isNextOptions: isNextOptions,
         onSearch: onSearch,
         needSearchFetching: needSearchFetching
-      }, ToggleDropDownProps));
+      });
     }
   }]);
 

package/lib/list/DepartmentDropDown/props/defaultProps.js

@@ -9,7 +9,6 @@ var defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };
 exports.defaultProps = defaultProps;

package/lib/list/DepartmentDropDown/props/propTypes.js

@@ -31,7 +31,5 @@ var propTypes = (_propTypes = {
   searchEmptyText: _propTypes2["default"].string,
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
-})), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
-  ToggleDropDownProps: _propTypes2["default"].object
 })), _propTypes);
 exports.propTypes = propTypes;

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -247,10 +247,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           renderTargetElement = _this$props4.renderTargetElement,
           renderFooterElement = _this$props4.renderFooterElement,
           _this$props4$a11y = _this$props4.a11y,
-          a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y,
-          customClass = _this$props4.customClass;
-      var _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y;
       var _a11y$tabIndex = a11y.tabIndex,
           tabIndex = _a11y$tabIndex === void 0 ? 0 : _a11y$tabIndex,
           ariaLabelledby = a11y.ariaLabelledby,
@@ -313,8 +310,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           isAnimate: true,
           getRef: getContainerRef,
           customClass: {
-            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer,
-            customDropBox: dropBoxClass
+            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer
           },
           needResponsive: needResponsive,
           isResponsivePadding: true,

package/lib/list/status/StatusDropdown/props/defaultProps.js

@@ -24,7 +24,6 @@ var defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  customClass: {}
+  isRestrictScroll: false
 };
 exports.defaultProps = defaultProps;

package/lib/list/status/StatusDropdown/props/propTypes.js

@@ -30,7 +30,5 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "customClass", _propTypes2["default"].shape({
-  dropBoxClass: _propTypes2["default"].string
-})), _propTypes);
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;