@zohodesk/dot 1.0.0-temp-229.2 → 1.0.0-temp-230.1

package/README.md

@@ -4,12 +4,13 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 # 1.9.13
 
-- **StatusDropdown**
-  - Added `renderCustomDropBoxHeader` prop to render a custom node (e.g. suggested status, banner, info message) at the top of the dropdown, above the options list.
-  - Added `customDropBoxHeader` key under the `customClass` prop to style the custom header wrapper.
+- **AttachmentViewer**
+  - Added support for updating existing attachment list items.
+  - Increased header bar height.
+  - Added support for `showCount`, `renderCustomIcons`, annotation URL re-rendering, and `downloadName`.
 
-- **SelectField**
-  - Added `renderCustomDropBoxHeader` prop, forwarded to the underlying `Select` component to render a custom node at the top of the dropdown.
+- **Link**
+  - Added `downloadName` prop for custom file download names.
 
 # 1.9.12
 
@@ -35,6 +36,7 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 - PX to variable conversion was not applied due to the CBT migration. The issue has now been fixed. 
 
+
 # 1.9.8
 
 - **DotProvider** - Variables package handled and separated the component & variable import files

package/assets/Appearance/dark/mode/Dot_DarkMode.module.css

@@ -259,9 +259,6 @@
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
-	--zdt_statusdropdown_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
-	--zdt_statusdropdown_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
-	--zdt_statusdropdown_wrapper_dropdown_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -259,9 +259,6 @@
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
-	--zdt_statusdropdown_wrapper_container_border:hsla(218, calc(var(--zd-saturation, 1) * 42.22%), calc(91.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_statusdropdown_wrapper_container_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), 97.45%, 1);
-	--zdt_statusdropdown_wrapper_dropdown_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css

@@ -259,9 +259,6 @@
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
-	--zdt_statusdropdown_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
-	--zdt_statusdropdown_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
-	--zdt_statusdropdown_wrapper_dropdown_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/es/AttachmentViewer/AttachmentViewer.js

@@ -47,8 +47,35 @@ export default class AttachmentViewer extends Component {
     this.zoomMaintain = this.zoomMaintain.bind(this);
     this.handleMenuValidation = this.handleMenuValidation.bind(this);
     this.getPreviewIconData = this.getPreviewIconData.bind(this);
-    this.renderIframe = this.renderIframe.bind(this);
-  }
+    this.renderIframe = this.renderIframe.bind(this); // this.updateItem = this.updateItem.bind(this);
+  } // updateItem(idOrIndex, changes) {
+  //   if (!changes || typeof changes !== 'object') {
+  //     return false;
+  //   }
+  //   const { data } = this.state;
+  //   const targetIdx = typeof idOrIndex === 'number'
+  //     ? idOrIndex
+  //     : data.findIndex((item) => item && item.id === idOrIndex);
+  //   if (targetIdx < 0 || targetIdx >= data.length) {
+  //     return false;
+  //   }
+  //   this.setState((prevState) => {
+  //     const nextData = prevState.data.slice();
+  //     nextData[targetIdx] = { ...nextData[targetIdx], ...changes };
+  //     let nextDataList = prevState.dataList;
+  //     if (targetIdx < prevState.dataList.length) {
+  //       nextDataList = prevState.dataList.slice();
+  //       nextDataList[targetIdx] = { ...nextDataList[targetIdx], ...changes };
+  //     }
+  //     return { data: nextData, dataList: nextDataList };
+  //   }, () => {
+  //     if (this.state.selectedIndex === targetIdx) {
+  //       this.handleMenuValidation();
+  //     }
+  //   });
+  //   return true;
+  // }
+
 
   isImageFileType(fileName) {
     const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
@@ -80,8 +107,9 @@ export default class AttachmentViewer extends Component {
       selectedIndex
     } = this.state;
     let indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
+    const attachmentPreviewUrlChanged = previewObj.previewData[0]?.viewUrl !== prevState.data[0]?.viewUrl; // Triggers an update if the previewed attachment is edited by the Attachment Annotator.
 
-    if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
+    if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged || attachmentPreviewUrlChanged) {
       let objChanged = previewObj.previewData.some((value, index) => {
         return shallowDiff(value, prevProps.previewObj[index]);
       });
@@ -100,7 +128,7 @@ export default class AttachmentViewer extends Component {
       }
     }
 
-    if (prevState.selectedIndex != selectedIndex) {
+    if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
       this.handleMenuValidation();
     }
   }
@@ -308,6 +336,73 @@ export default class AttachmentViewer extends Component {
     }, this.props.customProps.iframeProps));
   }
 
+  getRenderImageFrameCustomClass(_ref3) {
+    let {
+      canZoom,
+      retainZoom,
+      isZoomed,
+      customImageClass,
+      customChildrenClass
+    } = _ref3;
+    return {
+      customImageClass: `${style.img} ${style.altText} ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
+      customChildrenClass
+    };
+  }
+
+  renderImageFrame(data, i) {
+    const {
+      selectedIndex,
+      isZoomed,
+      canZoom,
+      isPreviewAttachmentValid
+    } = this.state;
+    const {
+      maintainZoom,
+      renderCustomImagePreviewElement
+    } = this.props;
+    const {
+      viewUrl,
+      name,
+      children,
+      dataId = 'attachViewer',
+      customClass = {},
+      customProps = {}
+    } = data;
+    const {
+      imageProps = {}
+    } = customProps;
+    const {
+      customImageClass = '',
+      customChildrenClass = ''
+    } = customClass;
+    const retainZoom = canZoom && selectedIndex == i && maintainZoom;
+    const handleZoomOut = isPreviewAttachmentValid && isZoomed ? this.zoomOut.bind(this, i) : undefined;
+    const handleZoomIn = isPreviewAttachmentValid && !isZoomed ? e => this.zoomIn(e, i, true) : undefined;
+    const handleImageClick = isPreviewAttachmentValid ? isZoomed ? handleZoomOut : handleZoomIn : undefined;
+    const imageFrameCustomClass = this.getRenderImageFrameCustomClass({
+      canZoom,
+      retainZoom,
+      isZoomed,
+      customImageClass,
+      customChildrenClass
+    });
+    const img = /*#__PURE__*/React.createElement(AttachmentImage, _extends({
+      customClass: imageFrameCustomClass,
+      src: viewUrl,
+      onClick: handleImageClick,
+      alt: name,
+      dataId: dataId,
+      id: `img${i}`,
+      isCover: false
+    }, imageProps), children);
+    return typeof renderCustomImagePreviewElement === 'function' ? renderCustomImagePreviewElement({
+      defaultView: img,
+      data,
+      index: i
+    }) : img;
+  }
+
   imgPreviewView(downloadUrl) {
     var _this = this;
 
@@ -404,18 +499,7 @@ export default class AttachmentViewer extends Component {
       }, videoProps), /*#__PURE__*/React.createElement("source", {
         src: viewUrl,
         type: `video/${extension}`
-      })) : _this.isImageFileType(name) || children ? /*#__PURE__*/React.createElement(AttachmentImage, _extends({
-        customClass: {
-          customImageClass: `${style.img} ${style.altText} ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
-          customChildrenClass
-        },
-        src: viewUrl,
-        onClick: isPreviewAttachmentValid ? isZoomed ? _this.zoomOut.bind(_this, i) : e => _this.zoomIn(e, i, true) : undefined,
-        alt: name,
-        dataId: dataId,
-        id: `img${i}`,
-        isCover: false
-      }, imageProps), children) : type === "document" && previewurl != null ? _this.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/React.createElement("div", {
+      })) : _this.isImageFileType(name) || children ? _this.renderImageFrame(data, i) : type === "document" && previewurl != null ? _this.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/React.createElement("div", {
         className: style.previewNone
       }, /*#__PURE__*/React.createElement("div", {
         className: style.fileTypeImg
@@ -424,9 +508,10 @@ export default class AttachmentViewer extends Component {
         $ui_weight: "semibold"
       }, previewUnsupportedText), downloadUrl ? /*#__PURE__*/React.createElement(Link, {
         href: downloadUrl,
+        download: true,
+        downloadName: name,
         className: style.downloadLink,
-        hasReload: true,
-        download: true
+        hasReload: true
       }, /*#__PURE__*/React.createElement(Button, {
         palette: "primaryFilled",
         text: downloadText
@@ -449,7 +534,9 @@ export default class AttachmentViewer extends Component {
       i18nKeys,
       isActive,
       dataId,
-      customProps
+      customProps,
+      showCount,
+      renderCustomIcons
     } = this.props;
     const {
       avatarProps = {}
@@ -477,10 +564,10 @@ export default class AttachmentViewer extends Component {
     }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       responsiveId: responsiveId,
       query: this.responsiveFunc
-    }, _ref3 => {
+    }, _ref4 => {
       let {
         uptoTablet
-      } = _ref3;
+      } = _ref4;
       return /*#__PURE__*/React.createElement(Container, {
         scroll: "none",
         "data-scroll-palette": "dark"
@@ -495,7 +582,7 @@ export default class AttachmentViewer extends Component {
         "data-title": selectedAttachment.name,
         dataId: "attachName",
         id: ariaId
-      }, selectedAttachment.name), /*#__PURE__*/React.createElement(Box, {
+      }, selectedAttachment.name), showCount && /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         className: style.count,
         dataId: "attachCountContainer"
@@ -507,7 +594,11 @@ export default class AttachmentViewer extends Component {
         align: uptoTablet ? 'bottom' : 'center',
         wrap: "wrap",
         isCover: false
-      }, canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
+      }, typeof renderCustomIcons === 'function' && renderCustomIcons({
+        selectedAttachment,
+        selectedIndex,
+        totalLen
+      }), canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
         className: uptoTablet ? style.mobileMenu : style.menu,
         onClick: this.zoomOut.bind(this, selectedIndex),
         "data-id": "zoomOut",
@@ -555,6 +646,7 @@ export default class AttachmentViewer extends Component {
         className: uptoTablet ? style.mobileMenu : style.menu
       }, /*#__PURE__*/React.createElement(Link, {
         href: downloadUrl,
+        downloadName: selectedAttachment.name,
         target: "_parent",
         hasReload: true,
         download: true,

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -1,5 +1,5 @@
 .header {
-    height: var(--zd_size40) ;
+    height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
     padding-block:0 ;

package/es/AttachmentViewer/props/defaultProps.js

@@ -12,5 +12,6 @@ export const AttachmentViewer_defaultProps = {
   isActive: false,
   dataId: 'AttachmentViewer',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  showCount: true
 };

package/es/AttachmentViewer/props/propTypes.js

@@ -44,5 +44,7 @@ export const AttachmentViewer_propTypes = {
   renderUnSupportedElement: PropTypes.func,
   customProps: PropTypes.shape({
     avatarProps: PropTypes.exact(AvatarProps)
-  })
+  }),
+  showCount: PropTypes.bool,
+  renderCustomIcons: PropTypes.func
 };

package/es/Link/Link.js

@@ -61,7 +61,8 @@ export default class Link extends React.Component {
       rel,
       dataId,
       customProps,
-      ariaLabel
+      ariaLabel,
+      downloadName
     } = this.props;
     let {
       isLink,
@@ -71,10 +72,10 @@ export default class Link extends React.Component {
     let option = {};
 
     if (download) {
-      option.download = true;
+      option.download = downloadName || true;
     }
 
-    let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
+    let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'downloadName', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
     let others = Object.keys(this.props).filter(key => ignoreKeys.indexOf(key) == -1).reduce((res, key) => {
       res[key] = this.props[key];
       return res;

package/es/Link/props/propTypes.js

@@ -13,6 +13,7 @@ export const propTypes = {
   customProps: PropTypes.object,
   onClick: PropTypes.func,
   download: PropTypes.bool,
+  downloadName: PropTypes.string,
   ariaLabel: PropTypes.string,
   key: PropTypes.string
 };

package/es/common/dot_boxShadow.module.css

@@ -40,6 +40,4 @@
     --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
-/* status dropdown */
-    --zd_bs_statusdropdown_wrapper_container: var(--zd_bs_contrast_outline, 3px 3px 26px 0 var(--zdt_texteditor_menu_after_box_shadow));
 }

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

@@ -97,8 +97,7 @@ export default class SelectField extends PureComponent {
       onFocus,
       iconOnHover,
       customProps,
-      renderLabelProps,
-      renderCustomDropBoxHeader
+      renderLabelProps
     } = this.props;
     const {
       LabelProps = {},
@@ -168,8 +167,7 @@ export default class SelectField extends PureComponent {
       iconOnHover: iconOnHover,
       title: title
     }, SelectProps, {
-      ariaLabelledby: uniqueId,
-      renderCustomDropBoxHeader: renderCustomDropBoxHeader
+      ariaLabelledby: uniqueId
     }), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
       text: validationMessage,
       palette: validationPalette,

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

@@ -13,7 +13,6 @@ export const defaultProps = {
   isDefaultSelectValue: true,
   placeHolder: '',
   customProps: {},
-  renderCustomDropBoxHeader: null,
   dataSelectorId: 'selectField',
   ...FieldCommonDefaultProps()
 };

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

@@ -45,7 +45,6 @@ export const propTypes = {
     ValidationMessageProps1: PropTypes.object,
     ValidationMessageProps2: PropTypes.object
   }),
-  renderCustomDropBoxHeader: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   htmlId: PropTypes.string,
   ...FieldCommonPropTypes
 };

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

@@ -13,7 +13,6 @@ import StatusListItem from "../StatusListItem/StatusListItem";
 import commonStyle from '@zohodesk/components/es/common/common.module.css';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
-import Flex from '@zohodesk/layout/es/Flex/Flex';
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 import style from "./StatusDropdown.module.css";
@@ -31,11 +30,6 @@ export class StatusDropdown extends React.Component {
     this.searchList = this.searchList.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
-    this.getSearchA11y = this.getSearchA11y.bind(this);
-    this.getHeadingA11y = this.getHeadingA11y.bind(this);
-    this.getListItemA11y = this.getListItemA11y.bind(this);
-    this.getTextBoxIconCustomProps = this.getTextBoxIconCustomProps.bind(this);
-    this.handleListItemClick = this.handleListItemClick.bind(this);
     this.getAriaId = getUniqueId(this);
   }
 
@@ -130,44 +124,6 @@ export class StatusDropdown extends React.Component {
     };
   }
 
-  getSearchA11y() {
-    return {
-      ariaHaspopup: this.props.isSearch ? 'listbox' : 'menu',
-      ariaExpanded: this.props.isPopupReady,
-      role: 'combobox',
-      ariaActivedescendant: this.props.isPopupReady ? this.props.value : '',
-      ariaOwns: this.getAriaId()
-    };
-  }
-
-  getHeadingA11y() {
-    return {
-      role: 'heading'
-    };
-  }
-
-  getListItemA11y(isActive, listItemText) {
-    return {
-      role: this.props.isSearch ? 'option' : 'menuitem',
-      ariaSelected: isActive,
-      ariaLabel: listItemText
-    };
-  }
-
-  getTextBoxIconCustomProps() {
-    return {
-      TextBoxProps: {
-        'data-a11y-autofocus': true
-      }
-    };
-  }
-
-  handleListItemClick(item) {
-    return e => {
-      this.onSelect(item, e);
-    };
-  }
-
   render() {
     let {
       options
@@ -223,12 +179,10 @@ export class StatusDropdown extends React.Component {
       renderTargetElement,
       renderFooterElement,
       a11y = {},
-      customClass,
-      renderCustomDropBoxHeader
+      customClass
     } = this.props;
     const {
-      dropBoxClass = '',
-      customDropBoxHeader = ''
+      dropBoxClass = ''
     } = customClass;
     const {
       tabIndex = 0,
@@ -241,9 +195,6 @@ export class StatusDropdown extends React.Component {
     } = this.state;
     let containerClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
     let ariaTitleId = this.getAriaId();
-    let textBoxA11y = this.getSearchA11y();
-    let headingA11y = this.getHeadingA11y();
-    let textBoxIconCustomProps = this.getTextBoxIconCustomProps();
     return /*#__PURE__*/React.createElement("div", {
       className: style.posRel,
       onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
@@ -300,8 +251,8 @@ export class StatusDropdown extends React.Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: `${style.dropBoxContainer} `,
-          customDropBox: `${dropBoxClass} ${renderCustomDropBoxHeader ? style.dropBoxWithCustomHeader : ''}`
+          customDropBoxWrap: style.dropBoxContainer,
+          customDropBox: dropBoxClass
         },
         needResponsive: needResponsive,
         isResponsivePadding: true,
@@ -319,74 +270,81 @@ export class StatusDropdown extends React.Component {
             isFetchingOptions: isFetchingOptions
           }
         }
-      }, (() => {
-        const dropdownContent = /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
-          className: style.search
-        }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-          placeHolder: placeHolderText,
-          onChange: this.handleChange,
-          value: searchString,
-          onClear: this.onSearchClear,
-          size: searchBoxSize,
-          customProps: textBoxIconCustomProps,
-          a11y: textBoxA11y,
-          dataId: `${dataId}_search`
-        })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
-          className: style.title
-        }, /*#__PURE__*/React.createElement(DropDownHeading, {
-          htmlId: ariaTitleId,
-          text: title,
-          a11y: headingA11y
-        })), /*#__PURE__*/React.createElement(Box, {
-          scroll: "vertical",
-          flexible: true,
-          shrink: true,
-          dataId: `${dataId}_list`,
-          preventParentScroll: "vertical",
-          className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
-          onScroll: this.handleScroll,
-          role: isSearch ? 'listbox' : 'menu',
-          tabindex: "-1",
-          isScrollAttribute: true
-        }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
-          const listItemText = item[keyName];
-          const isActive = value === listItemText;
-          return /*#__PURE__*/React.createElement(StatusListItem, {
-            key: item[idName] || i,
-            dataId: `dataid_${i}`,
-            value: listItemText,
-            id: item[idName],
-            active: isActive,
-            onClick: this.handleListItemClick(item),
-            index: i,
-            needTick: needTick,
-            needBorder: false,
-            bulletColor: item[statusColor],
-            title: listItemText,
-            needMultiLineText: needMultiLineText,
-            autoHover: true,
-            a11y: this.getListItemA11y(isActive, listItemText)
-          });
-        }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-          isCover: false,
-          align: "both"
-        }, /*#__PURE__*/React.createElement(Loader, null))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
-          className: style.svgWrapper,
-          title: searchErrorText || 'No results',
-          description: searchEmptyHint,
-          size: "small",
-          getEmptyState: this.emptySearchSVG
-        }) : /*#__PURE__*/React.createElement("div", {
-          className: style.loader
-        }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null);
-        return renderCustomDropBoxHeader ? /*#__PURE__*/React.createElement("div", {
-          className: style.dropBoxListContainer
-        }, /*#__PURE__*/React.createElement(Flex, {
-          $ui_className: `${customDropBoxHeader} ${style.customDropBoxHeaderContainer}`
-        }, renderCustomDropBoxHeader), /*#__PURE__*/React.createElement("div", {
-          className: style.dropdownOptions
-        }, dropdownContent)) : dropdownContent;
-      })());
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+        className: style.search
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        placeHolder: placeHolderText,
+        onChange: this.handleChange,
+        value: searchString,
+        onClear: this.onSearchClear,
+        size: searchBoxSize,
+        customProps: {
+          TextBoxProps: {
+            'data-a11y-autofocus': true
+          }
+        },
+        a11y: {
+          ariaHaspopup: isSearch ? 'listbox' : 'menu',
+          ariaExpanded: isPopupReady,
+          role: 'combobox',
+          ariaActivedescendant: isPopupReady ? value : '',
+          ariaOwns: ariaTitleId
+        },
+        dataId: `${dataId}_search`
+      })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
+        className: style.title
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        htmlId: ariaTitleId,
+        text: title,
+        a11y: {
+          role: 'heading'
+        }
+      })), /*#__PURE__*/React.createElement(Box, {
+        scroll: "vertical",
+        flexible: true,
+        shrink: true,
+        dataId: `${dataId}_list`,
+        preventParentScroll: "vertical",
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+        onScroll: this.handleScroll,
+        role: isSearch ? 'listbox' : 'menu',
+        tabindex: "-1",
+        isScrollAttribute: true
+      }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
+        const listItemText = item[keyName];
+        const isActive = value === listItemText;
+        return /*#__PURE__*/React.createElement(StatusListItem, {
+          key: i,
+          dataId: `dataid_${i}`,
+          value: listItemText,
+          id: item[idName],
+          active: isActive,
+          onClick: this.onSelect.bind(this, item),
+          index: i,
+          needTick: needTick,
+          needBorder: false,
+          bulletColor: item[statusColor],
+          title: listItemText,
+          needMultiLineText: needMultiLineText,
+          autoHover: true,
+          a11y: {
+            role: isSearch ? 'option' : 'menuitem',
+            ariaSelected: isActive,
+            ariaLabel: listItemText
+          }
+        });
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+        className: style.svgWrapper,
+        title: searchErrorText || 'No results',
+        description: searchEmptyHint,
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      }) : /*#__PURE__*/React.createElement("div", {
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null));
     }) : null);
   }