@zohodesk/components 1.0.0-temp-252.3 → 1.0.0-temp-255

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

@@ -1,9 +1,8 @@
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style
-  } = _ref;
+export default function cssJSLogic({
+  props,
+  style
+}) {
   const {
     size,
     isChecked,

package/es/v1/helpers/colorHelpers/colorHelper.js

@@ -48,37 +48,27 @@ const toBorderIntensity = (tone, hasState, isLighter) => {
   return `${tone}-${isLighter ? intensity.borderLight : intensity.base}`;
 };
 
-export const getBgClass = _ref => {
-  let {
-    state,
-    tone,
-    isLighter
-  } = _ref;
-  return paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
-};
-export const getTextClass = _ref2 => {
-  let {
-    state,
-    textTone
-  } = _ref2;
-  return paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
-};
-export const getBorderClass = _ref3 => {
-  let {
-    state,
-    tone,
-    isLighter
-  } = _ref3;
-  return paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
-};
-
-const buildPaletteClasses = (config, _ref4) => {
-  let {
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  } = _ref4;
+export const getBgClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
+export const getTextClass = ({
+  state,
+  textTone
+}) => paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
+export const getBorderClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
+
+const buildPaletteClasses = (config, {
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
+}) => {
   const {
     tone,
     textTone,
@@ -117,7 +107,7 @@ const buildPaletteClasses = (config, _ref4) => {
     }) : '',
     text: isSelected ? getTextClass({
       state: 'selected',
-      textTone: baseTextTone
+      textTone: hasBgState ? stateTextTone : baseTextTone
     }) : getTextClass({
       textTone: baseTextTone
     }),
@@ -133,11 +123,14 @@ const buildPaletteClasses = (config, _ref4) => {
       state: 'active',
       textTone: stateTextTone
     }),
-    border: isSelected ? getBorderClass({
+    border: isSelected ? !hasBorderState ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
       state: 'selected',
-      tone,
-      isLighter
-    }) : hasTransparentBorder ? paletteBorderStyle['border-transparent'] : getBorderClass({
+      tone
+    }) : hasTransparentBorder ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
       tone,
       isLighter
     }),
@@ -156,14 +149,13 @@ const buildPaletteClasses = (config, _ref4) => {
   };
 };
 
-const getPaletteClasses = _ref5 => {
-  let {
-    palette,
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  } = _ref5;
+const getPaletteClasses = ({
+  palette,
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
+}) => {
   const config = PALETTE_CONFIG[palette];
   return config ? buildPaletteClasses(config, {
     bgAppearance,

package/es/v1/helpers/colorHelpers/paletteUtilities.README.md

@@ -71,7 +71,7 @@ Per color (`default`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`):
 | `.active\:text-{color}:active` | Active state |
 | `.selected\:text-{color}` | Selected state |
 
-**Special:** `.text-default-filled` (+ hover/focus/active/selected) — uses `--zdt_v1_palette_default_filled_text` for filled default backgrounds.
+**Special:** `.text-brand-filled` (+ hover/focus/active/selected) — uses `--zdt_v1_palette_default_filled_text` for filled default backgrounds.
 
 **Utility classes:** `.text-transparent`, `.text-white`, `.text-black`
 
@@ -204,7 +204,7 @@ Returns a text CSS class from `textColor.module.css`.
 
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
-| `textTone` | `string` | Yes | Text tone (`default`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`, `white`, `black`, `default-filled`) |
+| `textTone` | `string` | Yes | Text tone (`brand`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`, `white`, `black`, `brand-filled`) |
 | `state` | `string` | No | State prefix (`hover`, `focus`, `active`, `selected`). Omit for base class. |
 
 > **Note:** `textTone` has no `isLighter` equivalent. Use `filledTextTone` (e.g. `white`) directly when needed.
@@ -214,7 +214,7 @@ Returns a text CSS class from `textColor.module.css`.
 ```javascript
 getTextClass({ textTone: 'green' })                    // → paletteTextStyle['text-green']
 getTextClass({ state: 'hover', textTone: 'white' })    // → paletteTextStyle['hover:text-white']
-getTextClass({ textTone: 'default-filled' })            // → paletteTextStyle['text-default-filled']
+getTextClass({ textTone: 'brand-filled' })               // → paletteTextStyle['text-brand-filled']
 ```
 
 #### `getBorderClass({ state?, tone, isLighter? })`
@@ -254,7 +254,7 @@ import getPaletteClasses from './colorHelper';
 
 | Palette | Tone (bg/border) | Text Tone | Filled Text Tone |
 |---------|-------------------|-----------|-------------------|
-| `default` | `default` | `default` | `default-filled` |
+| `default` | `brand` | `brand` | `brand-filled` |
 | `primary` | `blue` | `blue` | `white` |
 | `secondary` | `grey` | `grey` | `white` |
 | `danger` | `red` | `red` | `white` |
@@ -267,7 +267,8 @@ Unknown palettes return `DUMMY_OBJECT` (empty frozen object).
 | Parameter | Values | Effect |
 |-----------|--------|--------|
 | `palette` | `default` \| `primary` \| `secondary` \| `danger` \| `success` | Selects the color tone config from `PALETTE_CONFIG` |
-| `bgAppearance` | `'none'` \| `'filled'` \| other | `'filled'` → base bg + state bg; `'none'` → no bg, no state bg, no filled text logic; other → no base bg but state bg + filled text logic |
+| `bgAppearance` | `'none'` \| `'default'` \| other | `'default'` → base bg + state bg; `'none'` → no bg, no state bg, no filled text logic; other → no base bg but state bg + filled text logic |
+| `isSelected` | `boolean` | `true` → folds selected-state classes into `bg`, `text`, and `border` (replaces their resting values with the `selected` state class) |
 | `borderAppearance` | `'none'` \| `'onHover'` \| other | `'none'` → transparent base, no state borders; `'onHover'` → transparent base, with state borders; other → visible base + state borders |
 | `paletteShade` | `'lighter'` \| other | `'lighter'` → `-light` variant for bg and base border; also keeps text as `textTone` instead of `filledTextTone` |
 
@@ -277,33 +278,30 @@ The text color depends on both `bgAppearance` and `paletteShade`:
 
 | Condition | Base text (`text`) | State text (`hoverText`, etc.) |
 |---|---|---|
-| `bgAppearance: 'filled'` + default shade | `filledTextTone` (e.g. `white`) | `filledTextTone` |
-| `bgAppearance: 'filled'` + `'lighter'` shade | `textTone` (e.g. `blue`) | `textTone` |
+| `bgAppearance: 'default'` + default shade | `filledTextTone` (e.g. `white`) | `filledTextTone` |
+| `bgAppearance: 'default'` + `'lighter'` shade | `textTone` (e.g. `blue`) | `textTone` |
 | `bgAppearance:` other (not `'none'`) + default shade | `textTone` | `filledTextTone` |
 | `bgAppearance:` other (not `'none'`) + `'lighter'` shade | `textTone` | `textTone` |
 | `bgAppearance: 'none'` | `textTone` | `textTone` |
 
-> **Key insight:** `baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone`. `stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone`. This means state text can differ from base text when `bgAppearance` is not `'filled'` but also not `'none'`.
+> **Key insight:** `baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone`. `stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone`. This means state text can differ from base text when `bgAppearance` is not `'default'` but also not `'none'`.
 
 #### Return Value
 
 ```javascript
 {
-  bg,             // getBgClass({ tone, isLighter }) — only if bgAppearance === 'filled'
-  hoverBg,        // getBgClass({ state: 'hover', tone, isLighter }) — if bgAppearance !== 'none'
-  focusBg,        // getBgClass({ state: 'focus', tone, isLighter }) — if bgAppearance !== 'none'
-  activeBg,       // getBgClass({ state: 'active', tone, isLighter }) — if bgAppearance !== 'none'
-  selectedBg,     // getBgClass({ state: 'selected', tone, isLighter }) — if bgAppearance !== 'none'
-  text,           // getTextClass({ textTone: baseTextTone })
-  hoverText,      // getTextClass({ state: 'hover', textTone: stateTextTone })
-  focusText,      // getTextClass({ state: 'focus', textTone: stateTextTone })
-  activeText,     // getTextClass({ state: 'active', textTone: stateTextTone })
-  selectedText,   // getTextClass({ state: 'selected', textTone: stateTextTone })
-  border,         // 'border-transparent' if onHover/none — else getBorderClass({ tone, isLighter })
-  hoverBorder,    // getBorderClass({ state: 'hover', tone }) — if borderAppearance !== 'none'
-  focusBorder,    // getBorderClass({ state: 'focus', tone }) — if borderAppearance !== 'none'
-  activeBorder,   // getBorderClass({ state: 'active', tone }) — if borderAppearance !== 'none'
-  selectedBorder  // getBorderClass({ state: 'selected', tone }) — if borderAppearance !== 'none'
+  bg,          // isSelected → selected bg (if bgAppearance !== 'none'); else base bg (only if bgAppearance === 'default')
+  hoverBg,     // getBgClass({ state: 'hover', tone, isLighter }) — if bgAppearance !== 'none'
+  focusBg,     // getBgClass({ state: 'focus', tone, isLighter }) — if bgAppearance !== 'none'
+  activeBg,    // getBgClass({ state: 'active', tone, isLighter }) — if bgAppearance !== 'none'
+  text,        // isSelected → selected text class; else getTextClass({ textTone: baseTextTone })
+  hoverText,   // getTextClass({ state: 'hover', textTone: stateTextTone })
+  focusText,   // getTextClass({ state: 'focus', textTone: stateTextTone })
+  activeText,  // getTextClass({ state: 'active', textTone: stateTextTone })
+  border,      // isSelected → selected border (if borderAppearance !== 'none'); else resting border
+  hoverBorder, // getBorderClass({ state: 'hover', tone }) — if borderAppearance !== 'none'
+  focusBorder, // getBorderClass({ state: 'focus', tone }) — if borderAppearance !== 'none'
+  activeBorder // getBorderClass({ state: 'active', tone }) — if borderAppearance !== 'none'
 }
 ```
 
@@ -314,13 +312,13 @@ The text color depends on both `bgAppearance` and `paletteShade`:
 ```javascript
 const classes = getPaletteClasses({
   palette: 'primary',
-  bgAppearance: 'filled',
+  bgAppearance: 'default',
   borderAppearance: 'visible',
   paletteShade: 'default',
 });
-// classes.bg           → 'bg-blue'           (filled + default shade)
+// classes.bg           → 'bg-blue'           (bgAppearance: 'default' + default shade)
 // classes.hoverBg      → 'hover:bg-blue'
-// classes.text         → 'text-white'        (filledTextTone — filled + not lighter)
+// classes.text         → 'text-white'        (filledTextTone — bgAppearance: 'default' + not lighter)
 // classes.hoverText    → 'hover:text-white'  (filledTextTone — hasBgState + not lighter)
 // classes.border       → 'border-blue'       (visible appearance)
 // classes.hoverBorder  → 'hover:border-blue'
@@ -331,11 +329,11 @@ const classes = getPaletteClasses({
 ```javascript
 const classes = getPaletteClasses({
   palette: 'danger',
-  bgAppearance: 'filled',
+  bgAppearance: 'default',
   borderAppearance: 'none',
   paletteShade: 'lighter',
 });
-// classes.bg           → 'bg-red-light'      (filled + lighter shade)
+// classes.bg           → 'bg-red-light'      (bgAppearance: 'default' + lighter shade)
 // classes.hoverBg      → 'hover:bg-red-light'
 // classes.text         → 'text-red'          (textTone — lighter shade overrides filledTextTone)
 // classes.hoverText    → 'hover:text-red'    (textTone — lighter shade)
@@ -365,11 +363,11 @@ const classes = getPaletteClasses({
 ```javascript
 const classes = getPaletteClasses({
   palette: 'primary',
-  bgAppearance: 'hover-fill',  // any value that isn't 'none' or 'filled'
+  bgAppearance: 'hover-fill',  // any value that isn't 'none' or 'default'
   borderAppearance: 'visible',
   paletteShade: 'default',
 });
-// classes.bg           → undefined            (not 'filled' → no base bg)
+// classes.bg           → undefined            (not 'default' → no base bg)
 // classes.hoverBg      → 'hover:bg-blue'     (not 'none' → state bg present)
 // classes.text         → 'text-blue'          (baseTextTone — not filled, so textTone)
 // classes.hoverText    → 'hover:text-white'   (stateTextTone — hasBgState + not lighter → filledTextTone!)
@@ -379,6 +377,8 @@ const classes = getPaletteClasses({
 
 > This shows a key behavior: the base text is the normal tone, but **state text switches to `filledTextTone`** because the hover/state background will be filled (dark).
 
+> **Note on `isSelected`:** Pass `isSelected: true` to fold the selected state into `bg`, `text`, and `border`. Instead of the resting class, each returns its `selected:` variant class. There are no separate `selectedBg`/`selectedText`/`selectedBorder` return keys.
+
 ---
 
 ## Behavior Summary

package/es/v1/{Button/_shared → shared}/Loader/Loader.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import style from "./Loader_v1.module.css";
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import style from "./Loader_v1.module.css";
 
 const Loader = props => {
   const {
     customClass
   } = props;
   const {
-    customWrapperClass = ''
+    wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.spinner} ${customWrapperClass}`,
+    className: `${style.spinner} ${wrapper}`,
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/es/v1/{Button/_shared → shared}/Loader/__tests__/Loader.spec.js

@@ -13,7 +13,7 @@ describe('Loader', () => {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Loader, {
       customClass: {
-        customWrapperClass: 'my-custom-class'
+        wrapper: 'my-custom-class'
       }
     }));
     expect(asFragment()).toMatchSnapshot();

package/es/v1/shared/Loader/props/defaultProps.js

@@ -0,0 +1,5 @@
+import { DUMMY_OBJECT } from '@zohodesk/utils/es/constantProps/constant';
+const defaultProps = {
+  customClass: DUMMY_OBJECT
+};
+export default defaultProps;

package/es/v1/{Button/_shared → shared}/Loader/props/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   customClass: PropTypes.shape({
-    customWrapperClass: PropTypes.string
+    wrapper: PropTypes.string
   })
 };
 export default propTypes;

package/es/v1/{Button/_shared → shared}/SuccessTick/SuccessTick.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import style from "./SuccessTick_v1.module.css";
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import style from "./SuccessTick_v1.module.css";
 
 const SuccessTick = props => {
   const {
     customClass
   } = props;
   const {
-    customWrapperClass = ''
+    wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.tick} ${customWrapperClass}`,
+    className: `${style.tick} ${wrapper}`,
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/es/v1/{Button/_shared → shared}/SuccessTick/__tests__/SuccessTick.spec.js

@@ -13,7 +13,7 @@ describe('SuccessTick', () => {
       asFragment
     } = render( /*#__PURE__*/React.createElement(SuccessTick, {
       customClass: {
-        customWrapperClass: 'my-custom-class'
+        wrapper: 'my-custom-class'
       }
     }));
     expect(asFragment()).toMatchSnapshot();

package/es/v1/shared/SuccessTick/props/defaultProps.js

@@ -0,0 +1,5 @@
+import { DUMMY_OBJECT } from "@zohodesk/utils/es/constantProps/constant";
+const defaultProps = {
+  customClass: DUMMY_OBJECT
+};
+export default defaultProps;

package/es/v1/{Button/_shared → shared}/SuccessTick/props/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   customClass: PropTypes.shape({
-    customWrapperClass: PropTypes.string
+    wrapper: PropTypes.string
   })
 };
 export default propTypes;

package/lib/AppContainer/AppContainer.js

@@ -23,10 +23,6 @@ require("@zohodesk/variables/assets/colorVariables.module.css");
 
 require("@zohodesk/variables/assets/dotVariables.module.css");
 
-require("@zohodesk/variables/assets/sizeVariables.module.css");
-
-require("@zohodesk/variables/assets/fontsizeVariables.module.css");
-
 require("@zohodesk/variables/es/fontFamilyVariables.module.css");
 
 require("@zohodesk/variables/es/fontWeightVariables.module.css");

package/lib/Select/Select.js

@@ -860,8 +860,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent,
           renderCustomSelectedValue = _this$props11.renderCustomSelectedValue,
           inputFieldLineA11y = _this$props11.inputFieldLineA11y,
-          customClass = _this$props11.customClass,
-          renderCustomDropBoxHeader = _this$props11.renderCustomDropBoxHeader;
+          customClass = _this$props11.customClass;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -894,9 +893,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var _customClass$dropBox = customClass.dropBox,
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
-          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont,
-          _customClass$customDr = customClass.customDropBoxHeader,
-          customDropBoxHeaderClass = _customClass$customDr === void 0 ? '' : _customClass$customDr;
+          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -1068,91 +1065,80 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isRestrictScroll: isRestrictScroll,
           portalId: dropBoxPortalId,
           customClass: {
-            customDropBox: "".concat(dropBoxClass, " ").concat(renderCustomDropBoxHeader ? _SelectModule["default"].dropBoxWithCustomHeader : '')
+            customDropBox: dropBoxClass
           }
-        }, function () {
-          var dropdownContent = isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-            align: "both",
-            className: _SelectModule["default"].loader
-          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            flexible: true
-          }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-            onScroll: _this7.handleScroll
-          }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-            className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-          }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-            a11y: {
-              ariaControls: setAriaId,
-              ariaAutocomplete: 'list',
-              ariaDescribedby: ariaErrorId
-            },
-            inputRef: _this7.searchInputRef,
-            maxLength: maxLength,
-            onChange: _this7.handleSearch,
-            onKeyDown: _this7.handleKeyDown,
-            placeHolder: searchBoxPlaceHolder,
-            size: searchBoxSize,
-            value: searchStr,
-            onClear: _this7.handleClearSearch,
-            dataId: "".concat(dataId, "_search"),
-            i18nKeys: TextBoxIcon_i18n,
-            autoComplete: autoComplete,
-            customProps: {
-              TextBoxProps: DropdownSearchTextBoxProps
-            },
-            renderCustomClearComponent: renderCustomSearchClearComponent
-          }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-            shrink: true,
-            customClass: "\n                              ".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
-            eleRef: _this7.suggestionContainerRef
-          }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
-            key: searchStr.trim(),
-            activeId: selectedId,
-            isVirtualizerEnabled: isVirtualizerEnabled,
-            getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
-            setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
-            suggestions: suggestions,
-            getRef: _this7.suggestionItemRef,
-            hoverOption: hoverIndex,
-            onClick: _this7.handleChange,
-            onMouseEnter: _this7.handleMouseEnter,
-            dataId: "".concat(dataId, "_Options"),
-            needTick: needTick,
-            needBorder: needListBorder,
-            selectedOptions: [selectedId],
-            className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
-            listItemSize: listItemSize,
-            htmlId: setAriaId,
-            a11y: {
-              ariaParentRole: 'listbox',
-              role: 'option'
-            }
-          }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-            isLoading: isFetchingOptions,
-            options: options,
-            searchString: searchStr,
-            suggestions: suggestions,
-            dataId: dataId,
-            renderCustomEmptyState: renderCustomEmptyState,
-            getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
-            i18nKeys: i18nKeys,
-            htmlId: ariaErrorId
-          }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-            isCover: false,
-            align: "both"
-          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            flexible: true
-          }, getChildren()));
-          return renderCustomDropBoxHeader ? /*#__PURE__*/_react["default"].createElement("div", {
-            className: _SelectModule["default"].dropBoxListContainer
-          }, /*#__PURE__*/_react["default"].createElement("div", {
-            className: "".concat(customDropBoxHeaderClass, " ").concat(_SelectModule["default"].customDropBoxHeaderContainer)
-          }, (0, _utils.renderNode)(renderCustomDropBoxHeader, {
-            closePopup: _this7.handlePopupClose
-          })), /*#__PURE__*/_react["default"].createElement("div", {
-            className: _SelectModule["default"].dropdownOptions
-          }, dropdownContent)) : dropdownContent;
-        }());
+        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          align: "both",
+          className: _SelectModule["default"].loader
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+          onScroll: _this7.handleScroll
+        }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+          a11y: {
+            ariaControls: setAriaId,
+            ariaAutocomplete: 'list',
+            ariaDescribedby: ariaErrorId
+          },
+          inputRef: _this7.searchInputRef,
+          maxLength: maxLength,
+          onChange: _this7.handleSearch,
+          onKeyDown: _this7.handleKeyDown,
+          placeHolder: searchBoxPlaceHolder,
+          size: searchBoxSize,
+          value: searchStr,
+          onClear: _this7.handleClearSearch,
+          dataId: "".concat(dataId, "_search"),
+          i18nKeys: TextBoxIcon_i18n,
+          autoComplete: autoComplete,
+          customProps: {
+            TextBoxProps: DropdownSearchTextBoxProps
+          },
+          renderCustomClearComponent: renderCustomSearchClearComponent
+        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+          shrink: true,
+          customClass: "\n                              ".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
+          eleRef: _this7.suggestionContainerRef
+        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          key: searchStr.trim(),
+          activeId: selectedId,
+          isVirtualizerEnabled: isVirtualizerEnabled,
+          getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
+          setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
+          suggestions: suggestions,
+          getRef: _this7.suggestionItemRef,
+          hoverOption: hoverIndex,
+          onClick: _this7.handleChange,
+          onMouseEnter: _this7.handleMouseEnter,
+          dataId: "".concat(dataId, "_Options"),
+          needTick: needTick,
+          needBorder: needListBorder,
+          selectedOptions: [selectedId],
+          className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
+          listItemSize: listItemSize,
+          htmlId: setAriaId,
+          a11y: {
+            ariaParentRole: 'listbox',
+            role: 'option'
+          }
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+          isLoading: isFetchingOptions,
+          options: options,
+          searchString: searchStr,
+          suggestions: suggestions,
+          dataId: dataId,
+          renderCustomEmptyState: renderCustomEmptyState,
+          getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
+          i18nKeys: i18nKeys,
+          htmlId: ariaErrorId
+        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          isCover: false,
+          align: "both"
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, getChildren())));
       }) : null);
     }
   }]);