@zohodesk/dot 1.0.0-temp-198.3.3 → 1.0.0-temp-199

package/es/v1/AttachmentViewer/AttachmentViewer.js

@@ -11,6 +11,8 @@ import Link from "../Link/Link";
 import IconButton from "../IconButton/IconButton";
 import FreezeLayer from "../FreezeLayer/FreezeLayer";
 import { isAudioFile, getExtensionFromFileName } from "../../AttachmentViewer/Attachment";
+import { checkFileSourcesValidation } from "../../AttachmentViewer/utils";
+import audioThumbNail from "../../../images/audio_thumbnail.png";
 import { shallowDiff } from "../../utils/General";
 import style from "../../AttachmentViewer/AttachmentViewer.module.css";
 export default class AttachmentViewer extends Component {
@@ -25,7 +27,10 @@ export default class AttachmentViewer extends Component {
         index: this.props.previewObj.selectedIndex,
         data: this.props.previewObj ? this.props.previewObj.previewData : [],
         dataList: []
-      })
+      }),
+      canOpenInNewTab: false,
+      canZoom: false,
+      isPreviewAttachmentValid: false
     };
     this.togglePViewList = this.togglePViewList.bind(this);
     this.changeSelectedIndex = this.changeSelectedIndex.bind(this);
@@ -37,12 +42,20 @@ export default class AttachmentViewer extends Component {
     this.getNextId = getUniqueId(this);
     this.getUpdateDataList = this.getUpdateDataList.bind(this);
     this.zoomMaintain = this.zoomMaintain.bind(this);
+    this.handleMenuValidation = this.handleMenuValidation.bind(this);
+  }
+
+  componentDidMount() {
+    this.handleMenuValidation();
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     let {
       previewObj
     } = this.props;
+    const {
+      selectedIndex
+    } = this.state;
     let indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
 
     if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
@@ -63,6 +76,35 @@ export default class AttachmentViewer extends Component {
         });
       }
     }
+
+    if (prevState.selectedIndex != selectedIndex) {
+      this.handleMenuValidation();
+    }
+  }
+
+  handleMenuValidation() {
+    const {
+      data,
+      selectedIndex
+    } = this.state;
+    const selectedAttachment = data[selectedIndex] || {};
+    const selectedAttachmentViewUrl = selectedAttachment.viewUrl;
+    const selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
+    const selectedAttachmentName = selectedAttachment.name;
+    checkFileSourcesValidation({
+      fileName: selectedAttachmentName,
+      viewURL: selectedAttachmentViewUrl
+    }).then(fileSourceValidation => {
+      const {
+        isViewURLValid,
+        canZoom
+      } = fileSourceValidation;
+      this.setState({
+        isPreviewAttachmentValid: isViewURLValid,
+        canZoom,
+        canOpenInNewTab: isViewURLValid
+      });
+    });
   }
 
   togglePViewList() {
@@ -76,13 +118,11 @@ export default class AttachmentViewer extends Component {
   zoomOut(ele) {
     this.setState({
       isZoomed: false
-    });
-    const img = document.getElementById(`img${ele}`);
-
-    if (img) {
-      img.classList.remove(style.zoomedImg);
-      img.classList.add(style.normalImg);
-    }
+    }); // const img = document.getElementById(`img${ele}`);
+    // if (img) {
+    //   img.classList.remove(style.zoomedImg);
+    //   img.classList.add(style.normalImg);
+    // }
   }
 
   zoomIn(event, ele) {
@@ -113,12 +153,11 @@ export default class AttachmentViewer extends Component {
         top: 0,
         left: 0
       };
-    }
+    } // if (img) {
+    //   img.classList.remove(style.normalImg);
+    //   img.classList.add(style.zoomedImg);
+    // }
 
-    if (img) {
-      img.classList.remove(style.normalImg);
-      img.classList.add(style.zoomedImg);
-    }
 
     if (moveToPosition) {
       imgContainer.scrollLeft = (event.pageX - imgContainerPosition.left - imgUnits.left) * imgRatio.width;
@@ -217,7 +256,9 @@ export default class AttachmentViewer extends Component {
     const {
       dataList,
       selectedIndex,
-      isZoomed
+      isZoomed,
+      canZoom,
+      isPreviewAttachmentValid
     } = this.state;
     const {
       maintainZoom,
@@ -252,7 +293,23 @@ export default class AttachmentViewer extends Component {
     return dataList.length && dataList.map(function () {
       let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let i = arguments.length > 1 ? arguments[1] : undefined;
-      const selectedImgUrl = data.viewUrl;
+      const {
+        viewUrl,
+        name,
+        children,
+        dataId = 'attachViewer',
+        customClass = {},
+        customProps = {}
+      } = data;
+      const {
+        audioProps = {},
+        imageProps = {}
+      } = customProps;
+      const {
+        customImageClass = '',
+        customChildrenClass = ''
+      } = customClass;
+      const retainZoom = canZoom && selectedIndex == i && maintainZoom;
       return /*#__PURE__*/React.createElement(Container, {
         className: style.imgBox,
         id: `imgBox${i}`,
@@ -263,27 +320,32 @@ export default class AttachmentViewer extends Component {
       }, /*#__PURE__*/React.createElement(Box, {
         className: style.imgRef,
         id: `imgPreviewRef${i}`
-      }, isAudioFile(data.name) ? selectedIndex == i ? /*#__PURE__*/React.createElement("video", {
+      }, isAudioFile(name) ? selectedIndex == i ? /*#__PURE__*/React.createElement("video", {
         autoPlay: true,
         controls: true,
         className: style.zoomIn,
         "data-id": `${dataId}_videoPreview`,
-        "data-test-id": `${dataId}_videoPreview`
+        "data-test-id": `${dataId}_videoPreview`,
+        ...audioProps
       }, /*#__PURE__*/React.createElement("source", {
-        src: data.viewUrl,
-        type: `audio/${getExtensionFromFileName(data.name)}`
+        src: viewUrl,
+        type: `audio/${getExtensionFromFileName(name)}`
       })) : null : /*#__PURE__*/React.createElement(AttachmentImage, {
-        className: `${style.img} ${selectedIndex == i && maintainZoom ? isZoomed ? style.zoomedImg : style.normalImg : ''}`,
-        src: selectedImgUrl,
-        onClick: isZoomed ? _this.zoomOut.bind(_this, i) : e => {
-          _this.zoomIn(e, i, true);
+        customClass: {
+          customImageClass: `${style.img} ${style.altText}
+                    ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
+          customChildrenClass
         },
-        alt: "Preview",
-        dataId: "attachViewer",
+        src: viewUrl,
+        onClick: isPreviewAttachmentValid ? isZoomed ? _this.zoomOut.bind(_this, i) : e => {
+          _this.zoomIn(e, i, true);
+        } : undefined,
+        alt: name,
+        dataId: dataId,
         id: `img${i}`,
-        isImage: true,
-        isCover: false
-      })));
+        isCover: false,
+        ...imageProps
+      }, children)));
     });
   }
 
@@ -292,7 +354,9 @@ export default class AttachmentViewer extends Component {
       isPViewListOpen,
       selectedIndex,
       data,
-      isZoomed
+      isZoomed,
+      canZoom,
+      canOpenInNewTab
     } = this.state;
     const {
       responsiveId,
@@ -354,7 +418,7 @@ export default class AttachmentViewer extends Component {
         align: uptoTablet ? 'bottom' : 'center',
         wrap: "wrap",
         isCover: false
-      }, isZoomed ? /*#__PURE__*/React.createElement("div", {
+      }, canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
         className: uptoTablet ? style.mobileMenu : style.menu,
         onClick: this.zoomOut.bind(this, selectedIndex),
         "data-id": "zoomOut",
@@ -382,7 +446,7 @@ export default class AttachmentViewer extends Component {
         a11y: {
           ariaLabel: i18nKeys.zoomInText
         }
-      })), /*#__PURE__*/React.createElement("div", {
+      })) : null, canOpenInNewTab ? /*#__PURE__*/React.createElement("div", {
         className: uptoTablet ? style.mobileMenu : style.menu
       }, /*#__PURE__*/React.createElement(Link, {
         href: selectedImgUrl,
@@ -398,7 +462,7 @@ export default class AttachmentViewer extends Component {
         a11y: {
           ariaLabel: i18nKeys.newTabText
         }
-      }))), needDownload ? /*#__PURE__*/React.createElement("div", {
+      }))) : null, needDownload ? /*#__PURE__*/React.createElement("div", {
         className: uptoTablet ? style.mobileMenu : style.menu
       }, /*#__PURE__*/React.createElement(Link, {
         href: downloadUrl,
@@ -504,24 +568,39 @@ export default class AttachmentViewer extends Component {
       }, data.map((item, index) => {
         const {
           name,
-          viewUrl
+          viewUrl,
+          children,
+          customClass = {},
+          dataId = 'AttachmentImage',
+          customProps = {}
         } = item;
-        const isAudio = isAudioFile(name);
+        let {
+          thumbnail
+        } = item;
+        const {
+          customImageClass = '',
+          customChildrenClass = ''
+        } = customClass;
+        thumbnail = isAudioFile(name) ? thumbnail || audioThumbNail : thumbnail; //fallback thumbnail for audio
+
         return /*#__PURE__*/React.createElement(Box, {
-          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''}  ${isAudio ? style.isAudio : ''}`,
+          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''}`,
           key: index,
           onClick: this.changeSelectedIndex.bind(this, index),
           eleRef: el => this[`img_${index}`] = el,
           dataId: "attachPreviewList",
           "data-title": name
         }, /*#__PURE__*/React.createElement(AttachmentImage, {
-          src: viewUrl,
+          src: thumbnail || viewUrl,
           size: "small",
           alt: name,
-          className: style.image,
-          isImage: !isAudio,
-          dataId: "AttachmentImage"
-        }));
+          customClass: {
+            customImageClass: `${style.image} ${style.altText} ${customImageClass}`,
+            customChildrenClass: `${style.crsrPointer} ${customChildrenClass}`
+          },
+          dataId: dataId,
+          ...customProps
+        }, children));
       }))))), totalLen !== 1 && /*#__PURE__*/React.createElement(IconButton, {
         dataId: "attachToggle",
         onClick: this.togglePViewList,

package/es/v1/AttachmentViewer/props/propTypes.js

@@ -1,14 +1,18 @@
 import PropTypes from 'prop-types';
 export const AttachmentImage_propTypes = {
   alt: PropTypes.string,
-  className: PropTypes.string,
+  customClass: PropTypes.shape({
+    customImageClass: PropTypes.string,
+    customChildrenClass: PropTypes.string
+  }),
   dataId: PropTypes.string,
   id: PropTypes.string,
   isCover: PropTypes.bool,
-  isImage: PropTypes.bool,
   onClick: PropTypes.func,
   onLoad: PropTypes.func,
-  src: PropTypes.string
+  onError: PropTypes.func,
+  src: PropTypes.string,
+  children: PropTypes.node
 };
 export const AttachmentViewer_propTypes = {
   hideAttachmentViewer: PropTypes.func,

package/es/v1/Image/Image.js

@@ -13,7 +13,9 @@ export default function Image(props) {
     dataId,
     htmlId,
     eleRef,
-    original
+    original,
+    onLoad,
+    onError
   } = props;
   return /*#__PURE__*/React.createElement("img", {
     src: src,
@@ -25,7 +27,9 @@ export default function Image(props) {
     onClick: onClick,
     id: htmlId,
     ref: eleRef,
-    "data-original": original
+    "data-original": original,
+    onLoad: onLoad,
+    onError: onError
   });
 }
 Image.propTypes = propTypes;

package/es/v1/Image/props/propTypes.js

@@ -9,5 +9,7 @@ export const propTypes = {
   onClick: PropTypes.func,
   original: PropTypes.string,
   src: PropTypes.string.isRequired,
-  title: PropTypes.string
+  title: PropTypes.string,
+  onLoad: PropTypes.func,
+  onError: PropTypes.func
 };

package/es/v1/form/fields/CurrencyField/CurrencyField.js

@@ -72,6 +72,7 @@ function CurrencyField(props) {
   }
 
   let uniqueId = htmlId ? htmlId : getNextId();
+  const isFocusable = !needReadOnlyStyle || !isReadOnly && needReadOnlyStyle;
 
   function handleChange(value) {
     onChange && onChange(id, value);
@@ -124,7 +125,7 @@ function CurrencyField(props) {
     onChange: handleChange,
     dataId: dataId,
     onBlur: handleonBlur,
-    onFocus: handleonFocus,
+    onFocus: isFocusable && handleonFocus,
     onKeyDown: onKeyDown,
     placeHolder: placeHolder,
     borderColor: borderColor,

package/es/v1/form/fields/TextEditor/TextEditor.js

@@ -25,7 +25,8 @@ export default class TextEditor extends Component {
       isResourceLoaded: false,
       isEditorShow: false
     };
-    let methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', 'handleDropUpload', 'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
+    let methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', // 'handleDropUpload',
+    'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
     bind.apply(this, methods);
   }
 
@@ -53,12 +54,13 @@ export default class TextEditor extends Component {
       editorMode = '',
       editorOptions = {},
       needEditorFocus = true,
-      handleDropUpload,
+      // handleDropUpload,
       fontFamily,
       fontSize,
       initCallback,
       handleAlertMessage,
-      needInlineAttachment
+      needInlineAttachment,
+      customInitOption
     } = this.props;
 
     if (id && global.ZohoDeskEditor) {
@@ -67,7 +69,7 @@ export default class TextEditor extends Component {
         content: fixEncoding(value),
         callback: this.editorCallback,
         imageuploadcallback: this.handleInlineUpload,
-        handleInlineDropImage: handleDropUpload ? this.handleDropUpload : undefined,
+        // handleInlineDropImage: handleDropUpload ? this.handleDropUpload : undefined,
         contentChanged: this.handleChange,
         focusCallback: this.focusCallback,
         lineHeight: 'Normal',
@@ -90,13 +92,17 @@ export default class TextEditor extends Component {
         htmlVersion: '<!Doctype html>'
       };
 
-      if (!ZohoDeskEditor_Init.init) {
-        global.editorInitialize && global.editorInitialize();
+      if (!customInitOption) {
+        if (!ZohoDeskEditor_Init.init) {
+          global.editorInitialize && global.editorInitialize();
+        }
+
+        ZohoDeskEditor_Init.init(editorMode, fontFamily, initCallback, fontSize);
       }
 
       defaultObj = Object.assign(defaultObj, editorOptions);
-      ZohoDeskEditor_Init.init(editorMode, fontFamily, initCallback, fontSize);
-      ZohoDeskEditor.create && ZohoDeskEditor.create(defaultObj);
+      const globalEditor = global.ZohoDeskEditor;
+      globalEditor && typeof globalEditor.create == 'function' && globalEditor.create(defaultObj, customInitOption);
     }
   }
 
@@ -121,7 +127,7 @@ export default class TextEditor extends Component {
     getRef && getRef(null);
   }
 
-  componentWillReceiveProps(np) {
+  UNSAFE_componentWillReceiveProps(np) {
     let {
       changeEditorContent
     } = this.props;
@@ -203,7 +209,8 @@ export default class TextEditor extends Component {
     let {
       editorCallback,
       getRef,
-      isCustomScroll
+      isCustomScroll,
+      customCSS
     } = this.props;
     this.setState({
       isEditorLoad: true,
@@ -218,18 +225,6 @@ export default class TextEditor extends Component {
       global.editor[id] = editorObj;
     }
 
-    const css = 'pre {white-space: pre-wrap}',
-          head = editorObj.doc.head || editorObj.doc.getElementsByTagName('head')[0],
-          style = document.createElement('style');
-    style.type = 'text/css';
-
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(editorObj.doc.createTextNode(css));
-    }
-
-    head.appendChild(style);
     editorCallback && editorCallback(editorObj);
     const iframe = selectn('iframe.contentDocument.body', editorObj) || null;
     const iframeHead = selectn('iframe.contentDocument.head', editorObj) || null;
@@ -245,9 +240,12 @@ export default class TextEditor extends Component {
         iframe.classList.add('scroll');
       }
 
-      let customFonts = document.createElement('style');
-      customFonts.innerText = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
-      iframeHead.appendChild(customFonts);
+      let customStyleTag = document.createElement('style');
+      customStyleTag.type = 'text/css';
+      const customizedCSS = `pre {white-space: pre-wrap} ${customCSS}`;
+      const fontCSS = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
+      customStyleTag.textContent = `${customizedCSS} ${fontCSS}`;
+      iframeHead.appendChild(customStyleTag);
     }
   }
 
@@ -255,13 +253,26 @@ export default class TextEditor extends Component {
     let {
       id,
       setInlineAttachmentInProgress: progress,
-      i18nKeys
+      i18nKeys,
+      inlineImageProps
     } = this.props;
-
-    if (!isFileNameSizeInvalid(file.name)) {
+    const {
+      fileUploadError,
+      fileNotSupported,
+      fileSizeLimitExceed,
+      fileEmptyError,
+      fileNameLimitExceed
+    } = i18nKeys;
+    const {
+      allowedFileExtensions = ["jpeg", "jpg", "png", "gif", "bmp", "ico"],
+      fileNameMaxCharacters = 200,
+      fileSizeMaxBytes = 3 * 1024 * 1024
+    } = inlineImageProps;
+
+    if (!isFileNameSizeInvalid(file.name, fileNameMaxCharacters)) {
       if (file.size != 0) {
-        if (file.size <= 3 * 1024 * 1024) {
-          if (isImageFormat(file.name)) {
+        if (file.size <= fileSizeMaxBytes) {
+          if (isImageFormat(file.name, allowedFileExtensions)) {
             progress && progress(true);
             this.handleUpload(file).then(res => {
               successCallback(res);
@@ -271,37 +282,33 @@ export default class TextEditor extends Component {
                 triggerKeyup(editorObj.doc);
               }
             }, () => {
-              failureCallback(i18nKeys.fileUploadError);
+              failureCallback(fileUploadError);
             });
           } else {
-            failureCallback(i18nKeys.fileNotSupported);
+            failureCallback(fileNotSupported);
           }
         } else {
-          failureCallback(i18nKeys.fileSizeLimitExceed);
+          failureCallback(fileSizeLimitExceed);
         }
       } else {
-        failureCallback(i18nKeys.fileEmptyError);
+        failureCallback(fileEmptyError);
       }
     } else {
-      failureCallback(i18nKeys.fileNameLimitExceed);
+      failureCallback(fileNameLimitExceed);
     }
-  }
+  } // handleDropUpload(file, successCallback, failureCallback) {
+  //   let e = { target: { files: [file] } };
+  //   let { handleDropUpload } = this.props;
+  //   handleDropUpload(e).then(
+  //     (res) => {
+  //       successCallback(res);
+  //     },
+  //     () => {
+  //       failureCallback();
+  //     }
+  //   );
+  // }
 
-  handleDropUpload(file, successCallback, failureCallback) {
-    let e = {
-      target: {
-        files: [file]
-      }
-    };
-    let {
-      handleDropUpload
-    } = this.props;
-    handleDropUpload(e).then(res => {
-      successCallback(res);
-    }, () => {
-      failureCallback();
-    });
-  }
 
   blurCallback() {
     let {
@@ -327,15 +334,7 @@ export default class TextEditor extends Component {
         formData.append(getCSRFCookieName(), getCSRFCookie());
       }
 
-      return onUpload(formData, file).then(res => {
-        if (editorMode === 'TicketReply') {
-          return `${res.data}&from=r`;
-        }
-
-        return res.data;
-      }, err => {
-        throw err;
-      });
+      return onUpload(formData, file);
     } catch (err) {
       return Promise.reject();
     }
@@ -355,7 +354,6 @@ export default class TextEditor extends Component {
       let cont = value;
 
       if (typeof editor !== 'undefined') {
-        // eslint-disable-next-line
         cont = editor['addFormEditor'] && editor['addFormEditor'].getContent();
       }
 
@@ -384,7 +382,8 @@ export default class TextEditor extends Component {
       loadingComponent,
       isNightMode,
       isReadOnly,
-      dataSelectorId
+      dataSelectorId,
+      isDisabled
     } = this.props;
     let {
       isEditorLoad,
@@ -393,7 +392,7 @@ export default class TextEditor extends Component {
     let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
     return /*#__PURE__*/React.createElement(Container, {
       className: `${styles.textEditor} ${styles[type]} ${styles[border]}
-        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${!isEditorShow ? styles.editorHide : ''}`,
+        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isReadOnly || isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''}`,
       dataId: dataId,
       "data-isEditor": true,
       dataSelectorId: dataSelectorId
@@ -403,7 +402,7 @@ export default class TextEditor extends Component {
       dataId: dataId
     }), editorDoc && ImgLazyLoad ? /*#__PURE__*/React.createElement(ImgLazyLoad, {
       node: editorDoc
-    }) : null, isReadOnly ? /*#__PURE__*/React.createElement("div", {
+    }) : null, isReadOnly || isDisabled ? /*#__PURE__*/React.createElement("div", {
       className: styles.readOnlyMask
     }) : null);
   }

package/es/v1/form/fields/TextEditor/props/defaultProps.js

@@ -9,5 +9,8 @@ export const defaultProps = {
   needInlineAttachment: false,
   isNightMode: false,
   isReadOnly: false,
-  dataSelectorId: 'textEditor'
+  dataSelectorId: 'textEditor',
+  customCSS: '',
+  isDisabled: false,
+  inlineImageProps: {}
 };

package/es/v1/form/fields/TextEditor/props/propTypes.js

@@ -12,7 +12,6 @@ export const propTypes = {
   fontSize: PropTypes.string,
   getRef: PropTypes.func,
   handleAlertMessage: PropTypes.func,
-  handleDropUpload: PropTypes.func,
   i18nKeys: PropTypes.shape({
     fileUploadError: PropTypes.string,
     fileNotSupported: PropTypes.string,
@@ -21,7 +20,7 @@ export const propTypes = {
     fileSizeLimitExceed: PropTypes.string
   }),
   id: PropTypes.string,
-  initCallback: PropTypes.func.isRequired,
+  initCallback: PropTypes.func,
   isCustomScroll: PropTypes.bool,
   loadingComponent: PropTypes.node,
   mode: PropTypes.string,
@@ -42,5 +41,13 @@ export const propTypes = {
   getCSRFCookie: PropTypes.string,
   isEditorDefaultOpen: PropTypes.bool,
   toggleEdit: PropTypes.func,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  customInitOption: PropTypes.object,
+  customCSS: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  inlineImageProps: PropTypes.shape({
+    allowedFileExtensions: PropTypes.array,
+    fileNameMaxCharacters: PropTypes.number,
+    fileSizeMaxBytes: PropTypes.number
+  })
 };

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -73,6 +73,8 @@ function StatusDropdown(props) {
     isRestrictScroll,
     positionsOffset,
     targetOffset,
+    renderTargetElement,
+    renderFooterElement,
     a11y = {}
   } = props;
   const [optionsList, setOptionsList] = useState(options);
@@ -149,7 +151,11 @@ function StatusDropdown(props) {
     className: style.posRel,
     onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined,
     onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, renderTargetElement ? renderTargetElement({
+    handleTogglePopup,
+    isPopupOpen,
+    getTargetRef
+  }) : /*#__PURE__*/React.createElement(Container, {
     tagName: "button",
     alignBox: "row",
     className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
@@ -289,7 +295,7 @@ function StatusDropdown(props) {
       getEmptyState: emptySearchSVG
     }) : /*#__PURE__*/React.createElement("div", {
       className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null)))));
+    }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null));
   }) : null);
 }
 

package/es/v1/list/status/StatusDropdown/props/propTypes.js

@@ -54,5 +54,7 @@ export const propTypes = {
   isRestrictScroll: PropTypes.bool,
   positionsOffset: PropTypes.object,
   targetOffset: PropTypes.object,
+  renderTargetElement: PropTypes.func,
+  renderFooterElement: PropTypes.node,
   a11y: PropTypes.object
 };