@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

package/lib/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputFieldLine Should be render hasEffect is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render hasPadding is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isDisabled is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render with title 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title="InputFieldLine Test Title"
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - all 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_all effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - bottom 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - none 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   effect     flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - dark 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - default 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - error 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_error hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - transparent 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render customProps 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-test="inputFieldLine-test"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render dataId 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-id="inputFieldLine-test-id"
+    data-selector-id="container"
+    data-test-id="inputFieldLine-test-id"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render size  - medium 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render size  - xmedium 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer xmedium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;

package/lib/InputFieldLine/props/defaultProps.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  isDisabled: false,
+  isReadOnly: false,
+  hasEffect: true,
+  isActive: false,
+  hasPadding: false,
+  title: '',
+  dataId: '',
+  customClass: '',
+  customProps: {},
+  size: 'medium',
+  borderColor: 'default',
+  border: 'bottom'
+};
+exports["default"] = _default;

package/lib/InputFieldLine/props/propTypes.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = require("../../Layout/props/propTypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _default = {
+  isActive: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  hasEffect: _propTypes["default"].bool,
+  hasPadding: _propTypes["default"].bool,
+  title: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  customClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape(_objectSpread({}, _propTypes2.ContainerProps)),
+  onClick: _propTypes["default"].func,
+  size: _propTypes["default"].oneOf(['medium', 'xmedium']),
+  border: _propTypes["default"].oneOf(['bottom', 'all', 'none']),
+  borderColor: _propTypes["default"].oneOf(['default', 'dark', 'error', 'transparent']),
+  children: _propTypes["default"].node
+};
+exports["default"] = _default;

package/lib/ListItem/ListItem.js

@@ -123,7 +123,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
-          secondaryValue = _this$props4.secondaryValue;
+          secondaryValue = _this$props4.secondaryValue,
+          renderBeforeChildren = _this$props4.renderBeforeChildren;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -168,7 +169,11 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         className: _ListItemModule["default"].leftBox
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].titleBox
-      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, renderBeforeChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        shrink: true,
+        adjust: true,
+        className: _ListItemModule["default"].beforeChild
+      }, renderBeforeChildren) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value

package/lib/ListItem/ListItem.module.css

@@ -70,6 +70,12 @@
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
+[dir=ltr] .beforeChild{
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .beforeChild{
+  margin-left: var(--zd_size10) ;
+}
 .value, .multiLineValue {
   line-height: 1.5385;
 }

package/lib/ListItem/__tests__/ListItem.spec.js

@@ -15,4 +15,12 @@ describe('ListItem', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderBeforeChildren', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      renderBeforeChildren: /*#__PURE__*/_react["default"].createElement("span", null, "Before children")
+    }, "Content")),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap

@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ListItem Should render with renderBeforeChildren 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItem"
+    data-selector-id="listItem"
+    data-test-id="listItem"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="leftBox grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="beforeChild basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span>
+            Before children
+          </span>
+        </div>
+        <div
+          class="children basisAuto shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          Content
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`ListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li

package/lib/ListItem/props/propTypes.js

@@ -82,7 +82,8 @@ var ListItem_Props = {
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
   }),
-  secondaryValue: _propTypes["default"].string
+  secondaryValue: _propTypes["default"].string,
+  renderBeforeChildren: _propTypes["default"].node
 };
 exports.ListItem_Props = ListItem_Props;
 var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {

package/lib/MultiSelect/MultiSelect.js

@@ -172,8 +172,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       //   suggestionContainer.addEventListener('scroll', this.handleScroll);
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var _this2 = this;
 
       var selectedOptions = nextProps.selectedOptions,
@@ -963,6 +963,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props14.isPopupOpen,
           ariaErrorId = _this$props14.ariaErrorId,
           customProps = _this$props14.customProps,
+          renderCustomSelectedValue = _this$props14.renderCustomSelectedValue,
           isFocus = _this$props14.isFocus,
           isPopupReady = _this$props14.isPopupReady,
           renderCustomClearComponent = _this$props14.renderCustomClearComponent,
@@ -1003,7 +1004,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onSelect: this.handleClickSelectedOption,
         size: size,
         palette: palette,
-        dataId: "".concat(dataId, "_selectedOptions")
+        dataId: "".concat(dataId, "_selectedOptions"),
+        renderCustomSelectedValue: renderCustomSelectedValue,
+        isPopupReady: isPopupReady,
+        isPopupOpen: isPopupOpen,
+        isDisabled: isDisabled
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1110,7 +1115,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
-          needSelectAll = _this$props15.needSelectAll;
+          needSelectAll = _this$props15.needSelectAll,
+          customProps = _this$props15.customProps;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1187,7 +1195,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -1200,7 +1208,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         a11y: {
           role: 'option'
         }
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/SelectedOptions.js

@@ -67,7 +67,11 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
           onSelect = _this$props.onSelect,
           size = _this$props.size,
           palette = _this$props.palette,
-          dataId = _this$props.dataId;
+          dataId = _this$props.dataId,
+          renderCustomSelectedValue = _this$props.renderCustomSelectedValue,
+          isPopupOpen = _this$props.isPopupOpen,
+          isPopupReady = _this$props.isPopupReady,
+          isInputDisabled = _this$props.isDisabled;
       var isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedOptions.map(function (option) {
         var id = option.id,
@@ -109,6 +113,25 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
             iconName: icon,
             iconSize: iconSize
           })));
+        } else if (optionType === 'custom') {
+          return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+            className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
+            key: "".concat(id, "customTag"),
+            dataId: dataId
+          }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
+            onRemove: isDisabled || isReadOnly ? null : onRemove,
+            palette: isDarkPalette,
+            onSelectTag: isReadOnly ? null : onSelect,
+            getRef: getRef,
+            isReadOnly: isReadOnly,
+            isPopupReady: isPopupReady,
+            isPopupOpen: isPopupOpen,
+            isDisabled: isInputDisabled,
+            size: size,
+            highLightedSelectOptions: highLightedSelectOptions,
+            isActive: highLightedSelectOptions.indexOf(id) >= 0,
+            option: option
+          }) : renderCustomSelectedValue);
         }
 
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/MultiSelect/Suggestions.js

@@ -75,6 +75,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           needBorder = _this$props.needBorder,
           _this$props$selectedO = _this$props.selectedOptions,
           selectedOptions = _this$props$selectedO === void 0 ? [] : _this$props$selectedO,
+          renderBeforeChildren = _this$props.renderBeforeChildren,
           activeId = _this$props.activeId,
           hoverId = _this$props.hoverId,
           dataId = _this$props.dataId,
@@ -187,7 +188,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           active: isActive,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          renderBeforeChildren: renderBeforeChildren ? typeof renderBeforeChildren === 'function' ? renderBeforeChildren(suggestion) : renderBeforeChildren : null
         }));
       })));
     }

package/lib/MultiSelect/__tests__/MultiSelect.spec.js

@@ -8,6 +8,35 @@ var _MultiSelect = _interopRequireDefault(require("../MultiSelect"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var options = [{
+  id: 1,
+  text: 'custom 1',
+  optionType: 'custom'
+}, {
+  id: 2,
+  text: 'custom 2',
+  optionType: 'custom'
+}, {
+  id: 3,
+  text: 'custom 3',
+  optionType: 'custom'
+}, {
+  id: 4,
+  text: 'custom 4',
+  optionType: 'custom'
+}, {
+  id: 5,
+  text: 'custom 5',
+  optionType: 'custom'
+}, {
+  id: 6,
+  text: 'custom 6',
+  optionType: 'custom'
+}, {
+  id: 7,
+  text: 'custom 7',
+  optionType: 'custom'
+}];
 describe('MultiSelect', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], null)),
@@ -15,4 +44,15 @@ describe('MultiSelect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], {
+      options: options,
+      renderCustomSelectedValue: function renderCustomSelectedValue() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "MultiSelect Custom Value");
+      }
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/MultiSelect/__tests__/SelectedOptions.spec.js

@@ -32,4 +32,19 @@ describe('SelectedOptions', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        value: 'SelectedObject1',
+        optionType: 'custom'
+      }],
+      renderCustomSelectedValue: function renderCustomSelectedValue() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, " SelectedOptions Custom Value");
+      }
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/MultiSelect/__tests__/Suggestions.spec.js

@@ -17,4 +17,18 @@ describe('Suggestions', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderBeforeChildren', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      suggestions: [{
+        value: 'Suggestions Option 1',
+        id: '1'
+      }],
+      renderBeforeChildren: function renderBeforeChildren() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "Suggestions Before Children");
+      }
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -25,10 +25,10 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="multiSelect_textBox"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="multiSelect_textBox"
         >
           <div
             class="grow basis shrinkOff"

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -25,10 +25,10 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="textBoxIcon"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="textBoxIcon"
         >
           <div
             class="grow basis shrinkOff"
@@ -98,10 +98,10 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="textBoxIcon"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="textBoxIcon"
         >
           <div
             class="grow basis shrinkOff"
@@ -346,10 +346,10 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               "
         />
         <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          data-id="textBoxIcon"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
+          data-test-id="textBoxIcon"
         >
           <div
             class="grow basis shrinkOff"