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

package/es/v1/Tab/Tabs.js

@@ -1,20 +1,20 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
-import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import Tab from "./Tab";
-import { Tabs_defaultProps } from "./props/defaultProps";
-import { Tabs_propTypes } from "./props/propTypes";
-import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from "../../utils/Common";
-import { Box, Container } from "../Layout";
-import ResizeObserver from "../../Responsive/ResizeObserver";
-import ListItem from "../ListItem/ListItem";
+import Tab from './Tab';
+import { Tabs_defaultProps } from './props/defaultProps';
+import { Tabs_propTypes } from './props/propTypes';
+import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from '../../utils/Common';
+import { Box, Container } from '../Layout';
+import ResizeObserver from '../../Responsive/ResizeObserver';
+import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
-import tabsStyle from "./v1Tabs.module.css";
-import Popup from "../Popup/Popup";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
-import btnstyle from "../../semantic/Button/semanticButton.module.css";
+import tabsStyle from './v1Tabs.module.css';
+import Popup from '../Popup/Popup';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
+import btnstyle from '../../semantic/Button/semanticButton.module.css';
 
 const Tabs = props => {
   const [totalDimension, setTotalDimension] = useState(null);

package/es/v1/Tab/index.js

@@ -1,5 +1,5 @@
-export { default as TabWrapper } from "./TabWrapper";
-export { default as TabContentWrapper } from "./TabContentWrapper";
-export { default as TabContent } from "./TabContent";
-export { default as Tabs } from "./Tabs";
-export { default as Tab } from "./Tab";
+export { default as TabWrapper } from './TabWrapper';
+export { default as TabContentWrapper } from './TabContentWrapper';
+export { default as TabContent } from './TabContent';
+export { default as Tabs } from './Tabs';
+export { default as Tab } from './Tab';

package/es/v1/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import Avatar from "../Avatar/Avatar";
-import { Container } from "../Layout";
-import Button from "../semantic/Button/Button";
-import { useUniqueId } from "../../Provider/IdProvider";
-import style from "../../Tag/Tag.module.css";
+import Avatar from '../Avatar/Avatar';
+import { Container } from '../Layout';
+import Button from '../semantic/Button/Button';
+import { useUniqueId } from '../../Provider/IdProvider';
+import style from '../../Tag/Tag.module.css';
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',

package/es/v1/TextBox/TextBox.js

@@ -1,7 +1,7 @@
 import React, { memo, useRef, useCallback } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../TextBox/TextBox.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../TextBox/TextBox.module.css';
 
 function TextBox(props) {
   let {

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import TextBox from "../TextBox/TextBox";
-import { Container, Box } from "../Layout";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import TextBox from '../TextBox/TextBox';
+import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import btnStyle from "../../semantic/Button/semanticButton.module.css";
-import style from "../../TextBoxIcon/TextBoxIcon.module.css";
+import btnStyle from '../../semantic/Button/semanticButton.module.css';
+import style from '../../TextBoxIcon/TextBoxIcon.module.css';
 /* eslint-disable react/forbid-component-props */
 
 export default function TextBoxIcon(props) {

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as TextBox_propTypes } from "../../TextBox/props/propTypes";
+import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
 export const propTypes = { ...TextBox_propTypes,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,

package/es/v1/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Textarea/Textarea.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../Textarea/Textarea.module.css';
 export default function Textarea(props) {
   let {
     size,

package/es/v1/Tooltip/Tooltip.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getLibraryConfig } from "../../Provider/Config";
-import ResizeObserver from "../../Responsive/ResizeObserver";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getLibraryConfig } from '../../Provider/Config';
+import ResizeObserver from '../../Responsive/ResizeObserver';
 import selectn from 'selectn';
-import { whiteSpaceClassMapping } from "../../utils/cssUtils";
-import style from "../../Tooltip/Tooltip.module.css";
+import { whiteSpaceClassMapping } from '../../utils/cssUtils';
+import style from '../../Tooltip/Tooltip.module.css';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);

package/es/v1/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import defaultStyle from "./css/v1_Typography.module.css";
+import defaultStyle from './css/v1_Typography.module.css';
 
 const Typography = props => {
   const {

package/es/v1/Typography/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping, lineheightMapping } from "../utils";
+import { letterspacingMapping, lineheightMapping } from '../utils';
 export default function cssJSLogic(_ref) {
   let {
     props,

package/es/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from "../../../Provider/LibraryContextInit";
+import LibraryContext from '../../../Provider/LibraryContextInit';
 export default function VelocityAnimation(props) {
   let {
     children,

package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from "../../../Provider/LibraryContextInit";
+import LibraryContext from '../../../Provider/LibraryContextInit';
 
 function clearProps(props) {
   let newProps = Object.assign({}, props);

package/es/v1/semantic/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../../semantic/Button/semanticButton.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../../semantic/Button/semanticButton.module.css';
 export default function Button(props) {
   const {
     value,

package/es/v1/semantic/index.js

@@ -1 +1 @@
-export { default as SemanticButton } from "./Button/Button";
+export { default as SemanticButton } from './Button/Button';

package/lib/AppContainer/AppContainer.js

@@ -148,15 +148,14 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
 
       if (this.containerElement && needTooltip) {
         this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-        this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
+        this.containerElement.addEventListener('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/Button/__tests__/Button.spec.js

@@ -6,15 +6,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _react2 = require("@testing-library/react");
 
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-require("@testing-library/jest-dom");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-afterEach(function () {
-  (0, _react2.cleanup)();
-});
 describe('Button component', function () {
   test('Should be render with the basic set of default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], null)),
@@ -120,137 +113,4 @@ describe('Button component', function () {
   //     const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
   //     expect(asFragment()).toMatchSnapshot();
   // });
-});
-describe('Button - Unit Testing', function () {
-  test('Should render with text prop', function () {
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "Click Me"
-    })),
-        getByText = _render12.getByText;
-
-    expect(getByText('Click Me')).toBeInTheDocument();
-  });
-  test('Should render with children prop', function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "Click Me")),
-        getByText = _render13.getByText;
-
-    expect(getByText('Click Me')).toBeInTheDocument();
-  });
-  test('Should apply custom styles from customStyle prop', function () {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      customStyle: {
-        bold: 'customBoldClass'
-      }
-    })),
-        getByRole = _render14.getByRole; // expect(getByRole('button').getAttribute('class')).toContain('customBoldClass');
-
-
-    expect(getByRole('button')).toHaveClass('customBoldClass');
-  });
-  test('Should apply custom classes from customClass prop', function () {
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      customClass: {
-        customButton: 'customButtonClass'
-      }
-    })),
-        getByRole = _render15.getByRole;
-
-    expect(getByRole('button')).toHaveClass('customButtonClass');
-  });
-  test('Should be disabled when disabled prop is true', function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      disabled: true
-    })),
-        getByRole = _render16.getByRole;
-
-    expect(getByRole('button')).toBeDisabled();
-  });
-  test('Should expose element with getRef prop', function () {
-    var getRef = jest.fn();
-
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      getRef: getRef
-    })),
-        getByRole = _render17.getByRole;
-
-    expect(getRef).toHaveBeenCalledWith(getByRole('button'));
-  });
-  test('Should trigger onClick function', function () {
-    var onClick = jest.fn();
-
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      onClick: onClick
-    })),
-        getByRole = _render18.getByRole; // fireEvent.click(getByRole('button'));
-
-
-    _userEvent["default"].click(getByRole('button'));
-
-    expect(onClick).toHaveBeenCalled();
-  });
-  test('Should not trigger onClick when disabled', function () {
-    var onClick = jest.fn();
-
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      disabled: true,
-      onClick: onClick
-    })),
-        getByRole = _render19.getByRole;
-
-    _userEvent["default"].click(getByRole('button'));
-
-    expect(onClick).not.toHaveBeenCalled();
-  });
-  test('Should render with correct data-id attribute', function () {
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      dataId: "testButton"
-    })),
-        getByRole = _render20.getByRole;
-
-    expect(getByRole('button')).toHaveAttribute('data-id', 'testButton');
-  });
-  test('Should render with correct data-selector-id attribute', function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      dataSelectorId: "testSelector"
-    })),
-        getByRole = _render21.getByRole;
-
-    expect(getByRole('button')).toHaveAttribute('data-selector-id', 'testSelector');
-  });
-  test('Should render with correct title attribute', function () {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      title: "Test Title"
-    })),
-        getByRole = _render22.getByRole;
-
-    expect(getByRole('button')).toHaveAttribute('data-title', 'Test Title');
-  });
-  test('Should render with correct id attribute', function () {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      id: "buttonElement"
-    })),
-        getByRole = _render23.getByRole;
-
-    expect(getByRole('button')).toHaveAttribute('id', 'buttonElement');
-  });
-  test('Should apply a11y props correctly', function () {
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      a11y: {
-        'aria-label': 'test'
-      }
-    })),
-        getByRole = _render24.getByRole;
-
-    expect(getByRole('button')).toHaveAttribute('aria-label', 'test');
-  });
-  test('Should apply customProps correctly', function () {
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      customProps: {
-        'data-custom-attr': 'true'
-      }
-    })),
-        getByRole = _render25.getByRole;
-
-    expect(getByRole('button')).toHaveAttribute('data-custom-attr', 'true');
-  });
 });

package/lib/DateTime/__tests__/YearView.spec.js

@@ -11,7 +11,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 describe('YearView', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_YearView["default"], null)),
-        asFragment = _render.asFragment; // expect(asFragment()).toMatchSnapshot();
+        asFragment = _render.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/lib/DateTime/__tests__/__snapshots__/YearView.spec.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`YearView rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container virtualizer"
+    dataid="yearList"
+  >
+    <div
+      style="order: 0; height: 0px; width: 1px; flex-grow: 0; flex-shrink: 0;"
+    />
+    <div
+      class="yearBox flex coldir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+      style="order: 0;"
+    >
+      <div
+        class="year  shrinkOff"
+        data-id="year_1850"
+        data-selector-id="box"
+        data-test-id="year_1850"
+      >
+        <div
+          class="flex cover rowdir vCenter"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <h4
+              class="reset  yearText"
+              data-title="1850"
+              tabindex="0"
+            >
+              1850
+            </h4>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-arrow-down-single fbold arrow  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size7);"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      style="order: 8150; height: 8149px; width: 1px; flex-grow: 0; flex-shrink: 0;"
+    />
+  </div>
+</DocumentFragment>
+`;

package/lib/MultiSelect/MultiSelect.js

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

@@ -4,18 +4,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _IdProvider = require("../../Provider/IdProvider");
-
 var _AdvancedMultiSelect = _interopRequireDefault(require("../AdvancedMultiSelect"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-beforeEach(function () {
-  (0, _IdProvider.setGlobalId)(0);
-});
-afterEach(function () {
-  (0, _react2.cleanup)();
-});
 describe('AdvancedMultiSelect', function () {
   test('rendering the defult props', function () {
     var mockOnChange = jest.fn();

package/lib/MultiSelect/props/propTypes.js

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

package/lib/Provider/IdProvider.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getUniqueId = getUniqueId;
 exports.removeGlobalIdPrefix = removeGlobalIdPrefix;
-exports.setGlobalId = setGlobalId;
 exports.setGlobalIdPrefix = setGlobalIdPrefix;
 exports.useUniqueId = useUniqueId;
 

package/lib/Provider/LibraryContext.js

@@ -44,13 +44,15 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       direction = _ref.direction,
       coloredTagVariant = _ref.coloredTagVariant,
       hasTagColorInheritedToText = _ref.hasTagColorInheritedToText,
+      shouldIndicateSwitchState = _ref.shouldIndicateSwitchState,
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
     isReducedMotion: isReducedMotion,
     direction: direction,
     coloredTagVariant: coloredTagVariant,
-    hasTagColorInheritedToText: hasTagColorInheritedToText
+    hasTagColorInheritedToText: hasTagColorInheritedToText,
+    shouldIndicateSwitchState: shouldIndicateSwitchState
   }),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],

package/lib/Select/Select.js

@@ -776,9 +776,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           positionsOffset = _this$props11.positionsOffset,
           targetOffset = _this$props11.targetOffset,
           isRestrictScroll = _this$props11.isRestrictScroll,
-          dropBoxPortalId = _this$props11.dropBoxPortalId,
-          renderCustomToggleIndicator = _this$props11.renderCustomToggleIndicator,
-          renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent;
+          dropBoxPortalId = _this$props11.dropBoxPortalId;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -856,20 +854,14 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           TextBoxProps: _objectSpread({
             'data-title': title || selected
           }, TextBoxProps)
-        },
-        renderRightPlaceholderNode: typeof renderCustomToggleIndicator == 'function' ? renderCustomToggleIndicator({
-          togglePopup: this.togglePopup,
-          isPopupOpened: isPopupReady,
-          isReadOnly: isReadOnly,
-          isDisabled: isDisabled
-        }) : renderCustomToggleIndicator
-      }, TextBoxIconProps), !renderCustomToggleIndicator || children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }
+      }, TextBoxIconProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isInline: true,
         isCover: false,
         alignBox: "row",
         align: "both",
         className: _SelectModule["default"].rightPlaceholder
-      }, !renderCustomToggleIndicator ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         dataId: "".concat(dataId, "_downIcon"),
         "aria-hidden": true,
@@ -877,10 +869,10 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down",
         size: "7"
-      })) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      })), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: isPopupOpen ? _SelectModule["default"].rotate : '',
         dataId: "".concat(dataId, "_children")
-      }, children) : null) : null) : /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
+      }, children) : null)) : /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         a11y: {
           role: 'Menuitem',
           ariaLabel: TextBox_ally_label,
@@ -968,8 +960,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           autoComplete: autoComplete,
           customProps: {
             TextBoxProps: DropdownSearchTextBoxProps
-          },
-          renderCustomClearComponent: renderCustomSearchClearComponent
+          }
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',