@zohodesk/components 1.0.0-alpha-243 → 1.0.0-alpha-244

package/README.md

@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-244
+
+- AdvancedGroupMultiSelect , AdvancedMultiSelect => textbox flexible ui fix and duplicate css removed
+
 # 1.0.0-alpha-243
 
 - DateTime, DateWidget => Portal Id support for fixed position.

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

@@ -263,23 +263,7 @@
 	--zdt_multiselect_box_bg: var(--dot_ebonyclay);
 	--zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
 	--zdt_multiselect_message_text: var(--dot_oslogrey);
-	
-	/* advanced multiselect */
-	--zdt_advancedmultiselect_default_border: var(--dot_inputLine);
-	--zdt_advancedmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_advancedmultiselect_dark_border: var(--dot_mulledwine);
-	--zdt_advancedmultiselect_default_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_dark_hover_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_delete_text: var(--dot_cadetblue);
-	--zdt_advancedmultiselect_delete_hover_text: var(--dot_platinum);
-	--zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
-	--zdt_advancedmultiselect_box_bg: var(--dot_ebonyclay);
-	--zdt_advancedmultiselect_droppopup_text: var(--dot_oslogrey);
-	--zdt_advancedmultiselect_more_text: var(--zdt_cta_primary_text);
+	--zdt_multiselect_more_text: var(--zdt_cta_primary_text);
 	
 	/* ripple effect */
 	--zdt_rippleeffect_default_border: var(--dot_mirror);

package/assets/Appearance/default/mode/defaultMode.module.css

@@ -263,23 +263,7 @@
 	--zdt_multiselect_box_bg: var(--dot_white);
 	--zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
 	--zdt_multiselect_message_text: var(--dot_slateGrey);
-	
-	/* advanced multiselect */
-	--zdt_advancedmultiselect_default_border: var(--dot_inputLine);
-	--zdt_advancedmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_advancedmultiselect_dark_border: var(--dot_mulledwine);
-	--zdt_advancedmultiselect_default_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_dark_hover_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_delete_text: var(--dot_shuttleGrey);
-	--zdt_advancedmultiselect_delete_hover_text: var(--dot_black);
-	--zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
-	--zdt_advancedmultiselect_box_bg: var(--dot_white);
-	--zdt_advancedmultiselect_droppopup_text: var(--dot_slateGrey);
-	--zdt_advancedmultiselect_more_text: var(--zdt_cta_primary_text);
+	--zdt_multiselect_more_text: var(--zdt_cta_primary_text);
 	
 	/* ripple effect */
 	--zdt_rippleeffect_default_border: var(--dot_mirror);

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

@@ -263,23 +263,7 @@
 	--zdt_multiselect_box_bg: #212121;
 	--zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
 	--zdt_multiselect_message_text: var(--dot_oslogrey);
-	
-	/* advanced multiselect */
-	--zdt_advancedmultiselect_default_border: var(--dot_inputLine);
-	--zdt_advancedmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_advancedmultiselect_dark_border: var(--dot_mulledwine);
-	--zdt_advancedmultiselect_default_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_dark_hover_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_delete_text: #999;
-	--zdt_advancedmultiselect_delete_hover_text: var(--dot_platinum);
-	--zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
-	--zdt_advancedmultiselect_box_bg: #212121;
-	--zdt_advancedmultiselect_droppopup_text: var(--dot_oslogrey);
-	--zdt_advancedmultiselect_more_text: var(--zdt_cta_primary_text);
+	--zdt_multiselect_more_text: var(--zdt_cta_primary_text);
 	
 	/* ripple effect */
 	--zdt_rippleeffect_default_border: var(--dot_mirror);

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import Loader from '@zohodesk/svg/lib/svg/Loader';
 import Popup from '../Popup/Popup';
-import TextBox from '../TextBox/TextBox';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import DropDownHeading from '../DropDown/DropDownHeading';
 import MultiSelectHeader from '../MultiSelect/MultiSelectHeader';
@@ -897,6 +897,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     } = this.handleFilterSuggestions();
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    const isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -927,8 +928,9 @@ class AdvancedGroupMultiSelect extends React.Component {
       adjust: true,
       shrink: true
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize == 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} `
-    }, searchStr), /*#__PURE__*/React.createElement(TextBox, {
+      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `
+    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
       needBorder: false,
@@ -943,7 +945,9 @@ class AdvancedGroupMultiSelect extends React.Component {
       variant: variant,
       dataId: `${dataId}_textBox`,
       isReadOnly: isReadOnly,
-      customClass: style.custmInputWrapper,
+      customClass: {
+        customTBoxWrap: style.custmInputWrapper
+      },
       tabindex: isDisabled && '-1',
       htmlId: htmlId,
       a11y: {
@@ -955,8 +959,11 @@ class AdvancedGroupMultiSelect extends React.Component {
         ariaDescribedby: ariaErrorId
       },
       autoComplete: autoComplete
-    })), !isReadOnly && !isDisabled && selectedGroupOptions.length > 1 ? /*#__PURE__*/React.createElement(Box, {
-      className: style.delete,
+    }, isShowClearIcon ? /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: `${style.delete} ${style[`${palette}Delete`]}`,
       dataId: `${dataId}_clearIcon`,
       "data-title": clearText,
       onClick: this.handleDeselectAll,
@@ -965,7 +972,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -11,7 +11,7 @@ import Suggestions from './Suggestions';
 import EmptyState from './EmptyState';
 import MultiSelectHeader from './MultiSelectHeader';
 import Popup from '../Popup/Popup';
-import Textbox from '../TextBox/TextBox';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -20,7 +20,7 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
-import style from './AdvancedMultiSelect.module.css';
+import style from './MultiSelect.module.css';
 /**** Methods ****/
 
 import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
@@ -428,8 +428,14 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       onClick: this.handleMoreClick,
       tagName: "button"
     }, `+ ${moreCount} More`) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Textbox, {
+      flexible: true,
+      className: style.wrapper,
+      adjust: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement("span", {
+      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `
+    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
       needBorder: false,
@@ -444,6 +450,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       variant: variant,
       isReadOnly: isReadOnly,
       tabindex: isDisabled && '-1',
+      customClass: {
+        customTBoxWrap: style.custmInputWrapper
+      },
       htmlId: htmlId,
       a11y: {
         role: 'combobox',
@@ -454,8 +463,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         ariaDescribedby: ariaErrorId
       },
       autoComplete: false
-    })), isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
-      className: style.delete,
+    }, isShowClearIcon ? /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: `${style.delete}`,
       dataId: dataIdClearIcon,
       "data-title": clearText,
       onClick: this.handleDeselectAll,
@@ -464,7 +476,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {

package/es/MultiSelect/MultiSelect.module.css

@@ -1,7 +1,6 @@
 .wrapper {
   position: relative;
 }
-
 .disabled, .readOnly {
   cursor: not-allowed;
 }
@@ -195,4 +194,13 @@
 }
 .search{
   padding: 0px 20px;
+}
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_multiselect_more_text);
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  background-color: var(--zdt_multiselect_delete_bg);
+  border: 0;
 }

package/es/css.js

@@ -25,7 +25,6 @@ import './Tab/TabContent.module.css';
 import './TextBoxIcon/TextBoxIcon.module.css';
 import './Ribbon/Ribbon.module.css';
 import './MultiSelect/MultiSelect.module.css';
-import './MultiSelect/AdvancedMultiSelect.module.css';
 import './Select/Select.module.css';
 import './ListItem/ListItem.module.css';
 import './Tag/Tag.module.css';

package/es/{MultiSelect → deprecated}/AdvancedMultiSelect.module.css

@@ -124,4 +124,4 @@
   margin-top: var(--zd_size5);
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
-}
+}

package/es/deprecated/advancedMultiSelectVariableJson.js

@@ -0,0 +1,80 @@
+const componentAppearanceVariables = [{
+  "comment": "advanced multiselect",
+  "data": {
+    "zdt_advancedmultiselect_default_border": {
+      'light': ['var(--dot_inputLine)'],
+      'dark': ['var(--dot_inputLine)'],
+      'pureDark': ['var(--dot_inputLine)']
+    },
+    "zdt_advancedmultiselect_transparent_border": {
+      'light': ['var(--dot_mirror)'],
+      'dark': ['var(--dot_mirror)'],
+      'pureDark': ['var(--dot_mirror)']
+    },
+    "zdt_advancedmultiselect_dark_border": {
+      'light': ['var(--dot_mulledwine)'],
+      'dark': ['var(--dot_mulledwine)'],
+      'pureDark': ['var(--dot_mulledwine)']
+    },
+    "zdt_advancedmultiselect_default_hover_border": {
+      'light': ['var(--dot_inputLineHover)'],
+      'dark': ['var(--dot_inputLineHover)'],
+      'pureDark': ['var(--dot_inputLineHover)']
+    },
+    "zdt_advancedmultiselect_transparent_hover_border": {
+      'light': ['var(--dot_inputLineHover)'],
+      'dark': ['var(--dot_inputLineHover)'],
+      'pureDark': ['var(--dot_inputLineHover)']
+    },
+    "zdt_advancedmultiselect_dark_hover_border": {
+      'light': ['var(--dot_stardust)'],
+      'dark': ['var(--dot_stardust)'],
+      'pureDark': ['var(--dot_stardust)']
+    },
+    "zdt_advancedmultiselect_default_active_border": {
+      'light': ['var(--dot_inputLineFocus)'],
+      'dark': ['var(--dot_inputLineFocus)'],
+      'pureDark': ['var(--dot_inputLineFocus)']
+    },
+    "zdt_advancedmultiselect_transparent_active_border": {
+      'light': ['var(--dot_inputLineFocus)'],
+      'dark': ['var(--dot_inputLineFocus)'],
+      'pureDark': ['var(--dot_inputLineFocus)']
+    },
+    "zdt_advancedmultiselect_dark_active_border": {
+      'light': ['var(--dot_stardust)'],
+      'dark': ['var(--dot_stardust)'],
+      'pureDark': ['var(--dot_stardust)']
+    },
+    "zdt_advancedmultiselect_delete_text": {
+      'light': ['var(--dot_shuttleGrey)'],
+      'dark': ['var(--dot_cadetblue)'],
+      'pureDark': ['#999']
+    },
+    "zdt_advancedmultiselect_delete_hover_text": {
+      'light': ['var(--dot_black)'],
+      'dark': ['var(--dot_platinum)'],
+      'pureDark': ['var(--dot_platinum)']
+    },
+    "zdt_advancedmultiselect_delete_bg": {
+      'light': ['var(--dot_mirror)'],
+      'dark': ['var(--dot_mirror)'],
+      'pureDark': ['var(--dot_mirror)']
+    },
+    "zdt_advancedmultiselect_box_bg": {
+      'light': ['var(--dot_white)'],
+      'dark': ['var(--dot_ebonyclay)'],
+      'pureDark': ['#212121']
+    },
+    "zdt_advancedmultiselect_droppopup_text": {
+      'light': ['var(--dot_slateGrey)'],
+      'dark': ['var(--dot_oslogrey)'],
+      'pureDark': ['var(--dot_oslogrey)']
+    },
+    "zdt_advancedmultiselect_more_text": {
+      'light': ['var(--zdt_cta_primary_text)'],
+      'dark': ['var(--zdt_cta_primary_text)'],
+      'pureDark': ['var(--zdt_cta_primary_text)']
+    }
+  }
+}];

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -15,7 +15,7 @@ var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/svg/Loader"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
-var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
+var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
 
 var _Layout = require("../Layout");
 
@@ -986,6 +986,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
+      var isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1016,8 +1017,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         shrink: true
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize == 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ")
-      }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
+        className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              ")
+      }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,
         needBorder: false,
@@ -1032,7 +1033,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         variant: variant,
         dataId: "".concat(dataId, "_textBox"),
         isReadOnly: isReadOnly,
-        customClass: _MultiSelectModule["default"].custmInputWrapper,
+        customClass: {
+          customTBoxWrap: _MultiSelectModule["default"].custmInputWrapper
+        },
         tabindex: isDisabled && '-1',
         htmlId: htmlId,
         a11y: {
@@ -1044,8 +1047,11 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           ariaDescribedby: ariaErrorId
         },
         autoComplete: autoComplete
-      })), !isReadOnly && !isDisabled && selectedGroupOptions.length > 1 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _MultiSelectModule["default"]["delete"],
+      }, isShowClearIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: "vertical"
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: "".concat(_MultiSelectModule["default"]["delete"], " ").concat(_MultiSelectModule["default"]["".concat(palette, "Delete")]),
         dataId: "".concat(dataId, "_clearIcon"),
         "data-title": clearText,
         onClick: this.handleDeselectAll,
@@ -1054,7 +1060,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-delete",
         size: "15"
-      })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+      }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
       }, function (_ref6) {

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -23,7 +23,7 @@ var _MultiSelectHeader = _interopRequireDefault(require("./MultiSelectHeader"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
-var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
+var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
 
 var _Layout = require("../Layout");
 
@@ -37,7 +37,7 @@ var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/Re
 
 var _CustomResponsive = require("../Responsive/CustomResponsive");
 
-var _AdvancedMultiSelectModule = _interopRequireDefault(require("./AdvancedMultiSelect.module.css"));
+var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _Common = require("../utils/Common.js");
 
@@ -468,14 +468,14 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
 
       var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_AdvancedMultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _AdvancedMultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _AdvancedMultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _AdvancedMultiSelectModule["default"].effect : ''),
+        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_AdvancedMultiSelectModule["default"].container, " ").concat(_AdvancedMultiSelectModule["default"][size], " ").concat(isActive && needBorder ? _AdvancedMultiSelectModule["default"].active : '', " ").concat(needBorder ? _AdvancedMultiSelectModule["default"].hasBorder : '', " ").concat(needBorder ? !isDisabled ? _AdvancedMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _AdvancedMultiSelectModule["default"].borderColor_transparent : ''),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(needBorder ? !isDisabled ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : ''),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
@@ -486,12 +486,17 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption
       }), moreCount > 0 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _AdvancedMultiSelectModule["default"].more,
+        className: _MultiSelectModule["default"].more,
         onClick: this.handleMoreClick,
         tagName: "button"
       }, "+ ".concat(moreCount, " More")) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
-      }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
+        flexible: true,
+        className: _MultiSelectModule["default"].wrapper,
+        adjust: true,
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              ")
+      }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         isDisabled: isDisabled,
         inputRef: this.searchInputRef,
         needBorder: false,
@@ -506,6 +511,9 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         variant: variant,
         isReadOnly: isReadOnly,
         tabindex: isDisabled && '-1',
+        customClass: {
+          customTBoxWrap: _MultiSelectModule["default"].custmInputWrapper
+        },
         htmlId: htmlId,
         a11y: {
           role: 'combobox',
@@ -516,8 +524,11 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           ariaDescribedby: ariaErrorId
         },
         autoComplete: false
-      })), isShowClearIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _AdvancedMultiSelectModule["default"]["delete"],
+      }, isShowClearIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: "vertical"
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: "".concat(_MultiSelectModule["default"]["delete"]),
         dataId: dataIdClearIcon,
         "data-title": clearText,
         onClick: this.handleDeselectAll,
@@ -526,7 +537,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-delete",
         size: "15"
-      })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+      }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
       }, function (_ref3) {
@@ -552,7 +563,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-          customClass: _AdvancedMultiSelectModule["default"].box,
+          customClass: _MultiSelectModule["default"].box,
           onScroll: _this4.handleScroll
         }, /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
           needSelectAll: needSelectAll,
@@ -562,7 +573,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           dataId: dataIdSelectAllEle
         })), /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
-          customClass: !tabletMode && dropBoxSize ? _AdvancedMultiSelectModule["default"][dropBoxSize] : '',
+          customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
           eleRef: _this4.suggestionContainerRef
         }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
           suggestions: suggestions,

package/lib/MultiSelect/MultiSelect.module.css

@@ -1,7 +1,6 @@
 .wrapper {
   position: relative;
 }
-
 .disabled, .readOnly {
   cursor: not-allowed;
 }
@@ -195,4 +194,13 @@
 }
 .search{
   padding: 0px 20px;
+}
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_multiselect_more_text);
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  background-color: var(--zdt_multiselect_delete_bg);
+  border: 0;
 }

package/lib/css.js

@@ -54,8 +54,6 @@ require("./Ribbon/Ribbon.module.css");
 
 require("./MultiSelect/MultiSelect.module.css");
 
-require("./MultiSelect/AdvancedMultiSelect.module.css");
-
 require("./Select/Select.module.css");
 
 require("./ListItem/ListItem.module.css");

package/lib/{MultiSelect → deprecated}/AdvancedMultiSelect.module.css

@@ -124,4 +124,4 @@
   margin-top: var(--zd_size5);
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
-}
+}

package/lib/deprecated/advancedMultiSelectVariableJson.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var componentAppearanceVariables = [{
+  "comment": "advanced multiselect",
+  "data": {
+    "zdt_advancedmultiselect_default_border": {
+      'light': ['var(--dot_inputLine)'],
+      'dark': ['var(--dot_inputLine)'],
+      'pureDark': ['var(--dot_inputLine)']
+    },
+    "zdt_advancedmultiselect_transparent_border": {
+      'light': ['var(--dot_mirror)'],
+      'dark': ['var(--dot_mirror)'],
+      'pureDark': ['var(--dot_mirror)']
+    },
+    "zdt_advancedmultiselect_dark_border": {
+      'light': ['var(--dot_mulledwine)'],
+      'dark': ['var(--dot_mulledwine)'],
+      'pureDark': ['var(--dot_mulledwine)']
+    },
+    "zdt_advancedmultiselect_default_hover_border": {
+      'light': ['var(--dot_inputLineHover)'],
+      'dark': ['var(--dot_inputLineHover)'],
+      'pureDark': ['var(--dot_inputLineHover)']
+    },
+    "zdt_advancedmultiselect_transparent_hover_border": {
+      'light': ['var(--dot_inputLineHover)'],
+      'dark': ['var(--dot_inputLineHover)'],
+      'pureDark': ['var(--dot_inputLineHover)']
+    },
+    "zdt_advancedmultiselect_dark_hover_border": {
+      'light': ['var(--dot_stardust)'],
+      'dark': ['var(--dot_stardust)'],
+      'pureDark': ['var(--dot_stardust)']
+    },
+    "zdt_advancedmultiselect_default_active_border": {
+      'light': ['var(--dot_inputLineFocus)'],
+      'dark': ['var(--dot_inputLineFocus)'],
+      'pureDark': ['var(--dot_inputLineFocus)']
+    },
+    "zdt_advancedmultiselect_transparent_active_border": {
+      'light': ['var(--dot_inputLineFocus)'],
+      'dark': ['var(--dot_inputLineFocus)'],
+      'pureDark': ['var(--dot_inputLineFocus)']
+    },
+    "zdt_advancedmultiselect_dark_active_border": {
+      'light': ['var(--dot_stardust)'],
+      'dark': ['var(--dot_stardust)'],
+      'pureDark': ['var(--dot_stardust)']
+    },
+    "zdt_advancedmultiselect_delete_text": {
+      'light': ['var(--dot_shuttleGrey)'],
+      'dark': ['var(--dot_cadetblue)'],
+      'pureDark': ['#999']
+    },
+    "zdt_advancedmultiselect_delete_hover_text": {
+      'light': ['var(--dot_black)'],
+      'dark': ['var(--dot_platinum)'],
+      'pureDark': ['var(--dot_platinum)']
+    },
+    "zdt_advancedmultiselect_delete_bg": {
+      'light': ['var(--dot_mirror)'],
+      'dark': ['var(--dot_mirror)'],
+      'pureDark': ['var(--dot_mirror)']
+    },
+    "zdt_advancedmultiselect_box_bg": {
+      'light': ['var(--dot_white)'],
+      'dark': ['var(--dot_ebonyclay)'],
+      'pureDark': ['#212121']
+    },
+    "zdt_advancedmultiselect_droppopup_text": {
+      'light': ['var(--dot_slateGrey)'],
+      'dark': ['var(--dot_oslogrey)'],
+      'pureDark': ['var(--dot_oslogrey)']
+    },
+    "zdt_advancedmultiselect_more_text": {
+      'light': ['var(--zdt_cta_primary_text)'],
+      'dark': ['var(--zdt_cta_primary_text)'],
+      'pureDark': ['var(--zdt_cta_primary_text)']
+    }
+  }
+}];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-243",
+  "version": "1.0.0-alpha-244",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",