@zohodesk/components 1.0.0-temp-220.9 → 1.0.0-temp-227

package/README.md

@@ -2,17 +2,12 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
-# 1.3.4
-
-- **Popup**
-  - Fixed the auto-repositioning issue during fixed popup resize and improved the position calculation logic.
 
-- **Modal**
-  - Introduced the `Portal` component to act as a React portal.
-  - Refactored to use the new `Portal` component for rendering, resolving unwanted rendering issues.
+# 1.3.4
 
-- **Dropbox**
-  - Updated to use the new `Portal` component for rendering, resolving unwanted rendering issues.
+- **MultiSelect** -  `renderCustomClearComponent` and `renderCustomToggleIndicator` props supported to customize the clear and toggle indicatior icon.
+- **Select** -  `renderCustomSearchClearComponent` and `renderCustomToggleIndicator` props supported to customize the search input clear and toggle indicatior icon.
+- **TextBoxIcon** -  `renderCustomClearComponent` prop supported to customize the input clear.  
 
 # 1.3.3
 

package/es/AppContainer/AppContainer.js

@@ -81,12 +81,13 @@ export default class AppContainer extends React.Component {
 
     if (this.containerElement && needTooltip) {
       this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+      this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
       this.tooltipRef.unObserveElement();
-      setLibraryConfig({
-        getTooltipContainer: () => null
-      });
     }
+
+    setLibraryConfig({
+      getTooltipContainer: () => null
+    });
   }
 
   render() {

package/es/DropBox/DropBox.js

@@ -1,6 +1,6 @@
 import React, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-import Portal from "../Modal/Portal/Portal"; // import { getLibraryConfig } from '../Provider/Config';
+import Modal from "../Modal/Modal"; // import { getLibraryConfig } from '../Provider/Config';
 
 import LibraryContext from "../Provider/LibraryContextInit";
 import cssJSLogic from "./css/cssJSLogic";
@@ -62,13 +62,13 @@ export default function DropBox(props) {
     ...props,
     zIndexStyle: zIndexStyle
   });
-  return isModel && isActive ? /*#__PURE__*/React.createElement(Portal, {
+  return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${style.freezeLayer} ${style.freeze}`,
     style: zIndexStyle,
     onClick: stopPropagation
-  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Portal, {
+  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
     className: style.freezeLayer,

package/es/Modal/Modal.js

@@ -1,9 +1,8 @@
 /**** Libraries ****/
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Portal from "./Portal/Portal";
-import { getLibraryConfig } from "../Provider/Config";
 import style from "../AppContainer/AppContainer.module.css";
 let createdPortalIds = [];
 let newPortalPrefix = 'CPortal';
@@ -14,13 +13,10 @@ export default class Modal extends React.Component {
     this.handleAddPortalId = this.handleAddPortalId.bind(this);
     this.handleRemovePortalId = this.handleRemovePortalId.bind(this);
     this.handleInsertPortalDiv = this.handleInsertPortalDiv.bind(this);
-    this.setPortalDiv = this.setPortalDiv.bind(this);
-    this.getRootElement = this.getRootElement.bind(this);
-    this.getPortalPrefix = this.getPortalPrefix.bind(this);
+    this.getPortalDiv = this.getPortalDiv.bind(this);
     this.state = {
       isMounted: false
     };
-    this.portalPrefix = this.getPortalPrefix();
     this.portalId = props.portalId;
     this.setRef = this.setRef.bind(this);
     this.ref = null; // this.portalDiv = document.createDocumentFragment();
@@ -35,40 +31,24 @@ export default class Modal extends React.Component {
     }
   }
 
-  getRootElement() {
-    const getRootElement = getLibraryConfig('getRootElement');
+  getPortalDiv() {
+    this.modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.props.portalId}]`) : '';
 
-    if (getRootElement && typeof getRootElement === 'function') {
-      const parent = getRootElement();
-
-      if (parent) {
-        return parent;
-      }
-    }
-
-    return null;
-  }
-
-  getPortalPrefix() {
-    const portalPrefix = getLibraryConfig('portalPrefix');
-    return portalPrefix !== '' ? portalPrefix : '';
-  }
-
-  setPortalDiv() {
-    const modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.portalPrefix}${this.props.portalId}]`) : '';
-
-    if (!modalRoot) {
+    if (!this.modalRoot) {
       this.portalId = this.handleAddPortalId();
       this.newModalRoot = document.createElement('div');
       this.newModalRoot.className = style.container;
-      this.newModalRoot.setAttribute('data-portal', `${this.portalPrefix}${this.portalId}`);
+      this.newModalRoot.setAttribute('data-portal', this.portalId);
       this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
+      this.modalRoot = this.newModalRoot;
     }
+
+    return this.modalRoot;
   }
 
   componentDidMount() {
-    this.containerDiv = this.getRootElement() || document.getElementsByTagName('desk')[0] || document.getElementsByTagName('body')[0];
-    this.setPortalDiv();
+    this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
+    this.portalDiv = this.getPortalDiv();
     this.setState({
       isMounted: true
     }, () => {
@@ -77,6 +57,7 @@ export default class Modal extends React.Component {
   }
 
   componentWillUnmount() {
+    //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
     if (this.newModalRoot) {
       this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
       this.handleRemovePortalId();
@@ -148,12 +129,10 @@ export default class Modal extends React.Component {
 
     if (isMounted) {
       if (Element) {
-        return /*#__PURE__*/React.createElement(Portal, {
-          portalId: this.portalId
-        }, /*#__PURE__*/React.createElement(Element, {
+        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, {
           ref: this.setRef,
           ...elementProps
-        }));
+        }), this.portalDiv);
       }
 
       return null;

package/es/MultiSelect/MultiSelect.js

@@ -882,7 +882,10 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       ariaErrorId,
       customProps,
-      isFocus
+      isFocus,
+      isPopupReady,
+      renderCustomClearComponent,
+      renderCustomToggleIndicator
     } = this.props;
     let {
       isActive,
@@ -964,6 +967,12 @@ export class MultiSelectComponent extends React.Component {
         ariaLabelledby: ariaLabelledby
       },
       autoComplete: autoComplete,
+      renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
+        togglePopup: this.togglePopup,
+        isPopupOpened: isPopupReady,
+        isReadOnly: isReadOnly,
+        isDisabled: isDisabled
+      }) : renderCustomToggleIndicator,
       ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
       isInline: true,
@@ -971,7 +980,11 @@ export class MultiSelectComponent extends React.Component {
       alignBox: "row",
       align: "vertical",
       className: style.rightPlaceholder
-    }, isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
+    }, isShowClearIcon ? typeof renderCustomClearComponent === 'function' ? renderCustomClearComponent({
+      clearText,
+      isPopupOpened: isPopupReady,
+      handleClearAll: this.handleDeselectAll
+    }) : /*#__PURE__*/React.createElement(Box, {
       className: `${style.delete} ${style[`${palette}Delete`]}`,
       dataId: `${dataId}_clearIcon`,
       "data-title": clearText,

package/es/MultiSelect/props/propTypes.js

@@ -114,7 +114,9 @@ export const MultiSelect_propTypes = {
     TextBoxIconProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
-  allowValueFallback: PropTypes.bool
+  allowValueFallback: PropTypes.bool,
+  renderCustomClearComponent: PropTypes.func,
+  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,

package/es/Popup/viewPort.js

@@ -108,23 +108,24 @@ let viewPort = {
     let paddingSpace = 5; // space between target and relative element
 
     let arrowSize = needArrow ? 10 : 0;
-    let padding = needArrow ? arrowSize : paddingSpace;
+    rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
+    rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
     let arrowHorizontalBalancePx = !isAbsolute && needArrow ? 30 : 0;
     let arrowVerticalBalancePx = !isAbsolute && needArrow ? 27 : 0;
-    let bottomOverFlow = rect.height + padding > relativeBoxGap.bottom;
-    let topOverFlow = rect.height + padding > relativeBoxGap.top;
-    let rightOverFlow = rect.width + padding > relativeBoxGap.right;
-    let leftOverFlow = rect.width + padding > relativeBoxGap.left;
-    let horizontalCenterOverFlow = rect.width / 2 + padding > relativeBoxGap.center.right || rect.width / 2 + padding > relativeBoxGap.center.left;
-    let verticalCenterOverFlow = rect.height / 2 + padding > relativeBoxGap.center.top || rect.height / 2 + padding > relativeBoxGap.center.bottom;
-    let horizontalLeftToRightOverFlow = rect.width + padding > relativeBoxRect.width + relativeBoxGap.right;
-    let horizontalCenterToRightOverFlow = rect.width + padding > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
-    let horizontalRightToLeft = rect.width + padding > relativeBoxRect.width + relativeBoxGap.left;
-    let horizontalCenterToLeft = rect.width + padding > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
-    let verticalTopToBottomOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.bottom;
-    let verticalCenterToBottomOverFlow = rect.height + padding > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
-    let verticalBottomToTopOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.top;
-    let verticalCenterToTopOverFlow = rect.height + padding > relativeBoxGap.center.top || arrowVerticalBalancePx > relativeBoxGap.center.bottom;
+    let bottomOverFlow = rect.height > relativeBoxGap.bottom;
+    let topOverFlow = rect.height > relativeBoxGap.top;
+    let rightOverFlow = rect.width > relativeBoxGap.right;
+    let leftOverFlow = rect.width > relativeBoxGap.left;
+    let horizontalCenterOverFlow = rect.width / 2 > relativeBoxGap.center.right || rect.width / 2 > relativeBoxGap.center.left;
+    let verticalCenterOverFlow = rect.height / 2 > relativeBoxGap.center.top || rect.height / 2 > relativeBoxGap.center.bottom;
+    let horizontalLeftToRightOverFlow = rect.width > relativeBoxRect.width + relativeBoxGap.right;
+    let horizontalCenterToRightOverFlow = rect.width > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
+    let horizontalRightToLeft = rect.width > relativeBoxRect.width + relativeBoxGap.left;
+    let horizontalCenterToLeft = rect.width > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
+    let verticalTopToBottomOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.bottom;
+    let verticalCenterToBottomOverFlow = rect.height > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
+    let verticalBottomToTopOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.top;
+    let verticalCenterToTopOverFlow = rect.height > relativeBoxGap.center.top || arrowVerticalBalancePx > relativeBoxGap.center.bottom;
     let views = {
       bottomCenter: !(bottomOverFlow || horizontalCenterOverFlow),
       bottomLeftToRight: !(bottomOverFlow || horizontalLeftToRightOverFlow),

package/es/Provider/Config.js

@@ -8,10 +8,7 @@ let id = {
   direction: 'ltr',
   tooltipDebounce: 175,
   getTooltipContainer: () => {},
-  autoComplete: false,
-  portalPrefix: '',
-  getRootElement: () => {},
-  getPortalContainer: () => {}
+  autoComplete: false
 };
 export function getLibraryConfig(key) {
   return id[key];

package/es/Select/Select.js

@@ -727,7 +727,9 @@ export class SelectComponent extends Component {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      dropBoxPortalId
+      dropBoxPortalId,
+      renderCustomToggleIndicator,
+      renderCustomSearchClearComponent
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -807,14 +809,20 @@ export class SelectComponent extends Component {
           ...TextBoxProps
         }
       },
+      renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
+        togglePopup: this.togglePopup,
+        isPopupOpened: isPopupReady,
+        isReadOnly: isReadOnly,
+        isDisabled: isDisabled
+      }) : renderCustomToggleIndicator,
       ...TextBoxIconProps
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, !renderCustomToggleIndicator || children ? /*#__PURE__*/React.createElement(Container, {
       isInline: true,
       isCover: false,
       alignBox: "row",
       align: "both",
       className: style.rightPlaceholder
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, !renderCustomToggleIndicator ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       dataId: `${dataId}_downIcon`,
       "aria-hidden": true,
@@ -822,10 +830,10 @@ export class SelectComponent extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "7"
-    })), children ? /*#__PURE__*/React.createElement(Box, {
+    })) : null, children ? /*#__PURE__*/React.createElement(Box, {
       className: isPopupOpen ? style.rotate : '',
       dataId: `${dataId}_children`
-    }, children) : null)) : /*#__PURE__*/React.createElement(Textbox, {
+    }, children) : null) : null) : /*#__PURE__*/React.createElement(Textbox, {
       a11y: {
         role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
@@ -916,7 +924,8 @@ export class SelectComponent extends Component {
         autoComplete: autoComplete,
         customProps: {
           TextBoxProps: DropdownSearchTextBoxProps
-        }
+        },
+        renderCustomClearComponent: renderCustomSearchClearComponent
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',

package/es/Select/props/propTypes.js

@@ -94,7 +94,9 @@ export const Select_propTypes = {
   targetOffset: PropTypes.object,
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string,
-  allowValueFallback: PropTypes.bool
+  allowValueFallback: PropTypes.bool,
+  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  renderCustomSearchClearComponent: PropTypes.func
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({

package/es/TextBoxIcon/TextBoxIcon.js

@@ -109,7 +109,8 @@ export default class TextBoxIcon extends React.Component {
       isScrollPrevent,
       customProps,
       needInputFocusOnWrapperClick,
-      renderRightPlaceholderNode
+      renderRightPlaceholderNode,
+      renderCustomClearComponent
     } = this.props;
     const {
       isActive
@@ -167,7 +168,10 @@ export default class TextBoxIcon extends React.Component {
       className: `${style.iconContainer} ${customTBoxIcon}`
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"
-    }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? /*#__PURE__*/React.createElement(Box, {
+    }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? typeof renderCustomClearComponent == 'function' ? renderCustomClearComponent({
+      clearText,
+      handleClear: this.handleClear
+    }) : /*#__PURE__*/React.createElement(Box, {
       className: `${btnStyle.buttonReset} ${style.icon}`,
       onClick: this.handleClear,
       dataId: `${dataId}_ClearIcon`,

package/es/TextBoxIcon/props/propTypes.js

@@ -50,5 +50,6 @@ export const propTypes = { ...TextBox_propTypes,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object
   }),
-  renderRightPlaceholderNode: PropTypes.node
+  renderRightPlaceholderNode: PropTypes.node,
+  renderCustomClearComponent: PropTypes.func
 };

package/lib/AppContainer/AppContainer.js

@@ -148,14 +148,15 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
 
       if (this.containerElement && needTooltip) {
         this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-        this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+        this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
         this.tooltipRef.unObserveElement();
-        (0, _Config.setLibraryConfig)({
-          getTooltipContainer: function getTooltipContainer() {
-            return null;
-          }
-        });
       }
+
+      (0, _Config.setLibraryConfig)({
+        getTooltipContainer: function getTooltipContainer() {
+          return null;
+        }
+      });
     }
   }, {
     key: "render",

package/lib/DropBox/DropBox.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
 
-var _Portal = _interopRequireDefault(require("../Modal/Portal/Portal"));
+var _Modal = _interopRequireDefault(require("../Modal/Modal"));
 
 var _LibraryContextInit = _interopRequireDefault(require("../Provider/LibraryContextInit"));
 
@@ -90,13 +90,13 @@ function DropBox(props) {
   }, props, {
     zIndexStyle: zIndexStyle
   }));
-  return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
+  return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
     style: zIndexStyle,
     onClick: _Common.stopPropagation
-  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
+  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxModule["default"].freezeLayer,

package/lib/Modal/Modal.js

@@ -9,14 +9,12 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Portal = _interopRequireDefault(require("./Portal/Portal"));
-
-var _Config = require("../Provider/Config");
-
 var _AppContainerModule = _interopRequireDefault(require("../AppContainer/AppContainer.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -61,13 +59,10 @@ var Modal = /*#__PURE__*/function (_React$Component) {
     _this.handleAddPortalId = _this.handleAddPortalId.bind(_assertThisInitialized(_this));
     _this.handleRemovePortalId = _this.handleRemovePortalId.bind(_assertThisInitialized(_this));
     _this.handleInsertPortalDiv = _this.handleInsertPortalDiv.bind(_assertThisInitialized(_this));
-    _this.setPortalDiv = _this.setPortalDiv.bind(_assertThisInitialized(_this));
-    _this.getRootElement = _this.getRootElement.bind(_assertThisInitialized(_this));
-    _this.getPortalPrefix = _this.getPortalPrefix.bind(_assertThisInitialized(_this));
+    _this.getPortalDiv = _this.getPortalDiv.bind(_assertThisInitialized(_this));
     _this.state = {
       isMounted: false
     };
-    _this.portalPrefix = _this.getPortalPrefix();
     _this.portalId = props.portalId;
     _this.setRef = _this.setRef.bind(_assertThisInitialized(_this));
     _this.ref = null; // this.portalDiv = document.createDocumentFragment();
@@ -86,46 +81,28 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    key: "getRootElement",
-    value: function getRootElement() {
-      var getRootElement = (0, _Config.getLibraryConfig)('getRootElement');
-
-      if (getRootElement && typeof getRootElement === 'function') {
-        var parent = getRootElement();
-
-        if (parent) {
-          return parent;
-        }
-      }
-
-      return null;
-    }
-  }, {
-    key: "getPortalPrefix",
-    value: function getPortalPrefix() {
-      var portalPrefix = (0, _Config.getLibraryConfig)('portalPrefix');
-      return portalPrefix !== '' ? portalPrefix : '';
-    }
-  }, {
-    key: "setPortalDiv",
-    value: function setPortalDiv() {
-      var modalRoot = this.props.portalId ? document.querySelector("[data-portal=".concat(this.portalPrefix).concat(this.props.portalId, "]")) : '';
+    key: "getPortalDiv",
+    value: function getPortalDiv() {
+      this.modalRoot = this.props.portalId ? document.querySelector("[data-portal=".concat(this.props.portalId, "]")) : '';
 
-      if (!modalRoot) {
+      if (!this.modalRoot) {
         this.portalId = this.handleAddPortalId();
         this.newModalRoot = document.createElement('div');
         this.newModalRoot.className = _AppContainerModule["default"].container;
-        this.newModalRoot.setAttribute('data-portal', "".concat(this.portalPrefix).concat(this.portalId));
+        this.newModalRoot.setAttribute('data-portal', this.portalId);
         this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
+        this.modalRoot = this.newModalRoot;
       }
+
+      return this.modalRoot;
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
 
-      this.containerDiv = this.getRootElement() || document.getElementsByTagName('desk')[0] || document.getElementsByTagName('body')[0];
-      this.setPortalDiv();
+      this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
+      this.portalDiv = this.getPortalDiv();
       this.setState({
         isMounted: true
       }, function () {
@@ -135,6 +112,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
       if (this.newModalRoot) {
         this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
         this.handleRemovePortalId();
@@ -207,11 +185,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
       if (isMounted) {
         if (Element) {
-          return /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
-            portalId: this.portalId
-          }, /*#__PURE__*/_react["default"].createElement(Element, _extends({
+          return /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(Element, _extends({
             ref: this.setRef
-          }, elementProps)));
+          }, elementProps)), this.portalDiv);
         }
 
         return null;

package/lib/MultiSelect/MultiSelect.js

@@ -963,7 +963,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props14.isPopupOpen,
           ariaErrorId = _this$props14.ariaErrorId,
           customProps = _this$props14.customProps,
-          isFocus = _this$props14.isFocus;
+          isFocus = _this$props14.isFocus,
+          isPopupReady = _this$props14.isPopupReady,
+          renderCustomClearComponent = _this$props14.renderCustomClearComponent,
+          renderCustomToggleIndicator = _this$props14.renderCustomToggleIndicator;
       var _this$state8 = this.state,
           isActive = _this$state8.isActive,
           selectedOptions = _this$state8.selectedOptions,
@@ -1039,14 +1042,24 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           ariaDescribedby: ariaErrorId,
           ariaLabelledby: ariaLabelledby
         },
-        autoComplete: autoComplete
+        autoComplete: autoComplete,
+        renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
+          togglePopup: this.togglePopup,
+          isPopupOpened: isPopupReady,
+          isReadOnly: isReadOnly,
+          isDisabled: isDisabled
+        }) : renderCustomToggleIndicator
       }, TextBoxIconProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isInline: true,
         isCover: false,
         alignBox: "row",
         align: "vertical",
         className: _MultiSelectModule["default"].rightPlaceholder
-      }, isShowClearIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, isShowClearIcon ? typeof renderCustomClearComponent === 'function' ? renderCustomClearComponent({
+        clearText: clearText,
+        isPopupOpened: isPopupReady,
+        handleClearAll: this.handleDeselectAll
+      }) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_MultiSelectModule["default"]["delete"], " ").concat(_MultiSelectModule["default"]["".concat(palette, "Delete")]),
         dataId: "".concat(dataId, "_clearIcon"),
         "data-title": clearText,

package/lib/MultiSelect/props/propTypes.js

@@ -133,7 +133,9 @@ var MultiSelect_propTypes = {
     TextBoxIconProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool,
-  allowValueFallback: _propTypes["default"].bool
+  allowValueFallback: _propTypes["default"].bool,
+  renderCustomClearComponent: _propTypes["default"].func,
+  renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {

package/lib/Popup/viewPort.js

@@ -103,23 +103,24 @@ var viewPort = {
     var paddingSpace = 5; // space between target and relative element
 
     var arrowSize = needArrow ? 10 : 0;
-    var padding = needArrow ? arrowSize : paddingSpace;
+    rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
+    rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
     var arrowHorizontalBalancePx = !isAbsolute && needArrow ? 30 : 0;
     var arrowVerticalBalancePx = !isAbsolute && needArrow ? 27 : 0;
-    var bottomOverFlow = rect.height + padding > relativeBoxGap.bottom;
-    var topOverFlow = rect.height + padding > relativeBoxGap.top;
-    var rightOverFlow = rect.width + padding > relativeBoxGap.right;
-    var leftOverFlow = rect.width + padding > relativeBoxGap.left;
-    var horizontalCenterOverFlow = rect.width / 2 + padding > relativeBoxGap.center.right || rect.width / 2 + padding > relativeBoxGap.center.left;
-    var verticalCenterOverFlow = rect.height / 2 + padding > relativeBoxGap.center.top || rect.height / 2 + padding > relativeBoxGap.center.bottom;
-    var horizontalLeftToRightOverFlow = rect.width + padding > relativeBoxRect.width + relativeBoxGap.right;
-    var horizontalCenterToRightOverFlow = rect.width + padding > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
-    var horizontalRightToLeft = rect.width + padding > relativeBoxRect.width + relativeBoxGap.left;
-    var horizontalCenterToLeft = rect.width + padding > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
-    var verticalTopToBottomOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.bottom;
-    var verticalCenterToBottomOverFlow = rect.height + padding > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
-    var verticalBottomToTopOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.top;
-    var verticalCenterToTopOverFlow = rect.height + padding > relativeBoxGap.center.top || arrowVerticalBalancePx > relativeBoxGap.center.bottom;
+    var bottomOverFlow = rect.height > relativeBoxGap.bottom;
+    var topOverFlow = rect.height > relativeBoxGap.top;
+    var rightOverFlow = rect.width > relativeBoxGap.right;
+    var leftOverFlow = rect.width > relativeBoxGap.left;
+    var horizontalCenterOverFlow = rect.width / 2 > relativeBoxGap.center.right || rect.width / 2 > relativeBoxGap.center.left;
+    var verticalCenterOverFlow = rect.height / 2 > relativeBoxGap.center.top || rect.height / 2 > relativeBoxGap.center.bottom;
+    var horizontalLeftToRightOverFlow = rect.width > relativeBoxRect.width + relativeBoxGap.right;
+    var horizontalCenterToRightOverFlow = rect.width > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
+    var horizontalRightToLeft = rect.width > relativeBoxRect.width + relativeBoxGap.left;
+    var horizontalCenterToLeft = rect.width > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
+    var verticalTopToBottomOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.bottom;
+    var verticalCenterToBottomOverFlow = rect.height > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
+    var verticalBottomToTopOverFlow = rect.height > relativeBoxRect.height + relativeBoxGap.top;
+    var verticalCenterToTopOverFlow = rect.height > relativeBoxGap.center.top || arrowVerticalBalancePx > relativeBoxGap.center.bottom;
     var views = {
       bottomCenter: !(bottomOverFlow || horizontalCenterOverFlow),
       bottomLeftToRight: !(bottomOverFlow || horizontalLeftToRightOverFlow),

package/lib/Provider/Config.js

@@ -15,10 +15,7 @@ var id = {
   direction: 'ltr',
   tooltipDebounce: 175,
   getTooltipContainer: function getTooltipContainer() {},
-  autoComplete: false,
-  portalPrefix: '',
-  getRootElement: function getRootElement() {},
-  getPortalContainer: function getPortalContainer() {}
+  autoComplete: false
 };
 
 function getLibraryConfig(key) {