@zohodesk/components 1.0.0-temp-199.18 → 1.0.0-temp-246

package/lib/CheckBox/props/propTypes.js

@@ -7,6 +7,8 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("../../Typography/props/propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
@@ -15,6 +17,7 @@ var propTypes = {
   checked: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
   dataSelectorId: _propTypes["default"].string,
+  secondaryText: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   disabledTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
@@ -46,7 +49,8 @@ var propTypes = {
   }),
   customProps: _propTypes["default"].shape({
     CheckBoxProps: _propTypes["default"].object,
-    LabelProps: _propTypes["default"].object
+    LabelProps: _propTypes["default"].object,
+    secondaryTextProps: _propTypes["default"].exact(_propTypes2.propTypes)
   }),
   renderRightPlaceholderNode: _propTypes["default"].node
 };

package/lib/ColorSelect/ColorSingleSelect.js

@@ -27,7 +27,7 @@ var _ArrowIconModule = _interopRequireDefault(require("../shared/ArrowIcon/Arrow
 
 var _ColorSelectModule = _interopRequireDefault(require("./ColorSelect.module.css"));
 
-var _excluded = ["options", "renderCustomColorIndicator", "renderCustomSelectedValue", "customClass", "customProps", "borderColor", "children", "dataId", "renderRightPlaceholderNode", "placeholder", "renderCustomToggleIndicator"];
+var _excluded = ["options", "renderCustomColorIndicator", "renderCustomSelectedValue", "customClass", "customProps", "borderColor", "dataId", "renderRightPlaceholderNode", "placeholder", "renderCustomToggleIndicator"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -57,7 +57,6 @@ function ColorSingleSelect(props) {
       customClass = props.customClass,
       customProps = props.customProps,
       borderColor = props.borderColor,
-      children = props.children,
       dataId = props.dataId,
       renderRightPlaceholderNode = props.renderRightPlaceholderNode,
       placeholder = props.placeholder,

package/lib/ColorSelect/__tests__/ColorMultiSelect.spec.js

@@ -11,15 +11,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var options = [{
   id: 1,
   text: 'Red',
-  colorCode: '#ff6e6e'
+  colorConfig: {
+    text: 'black',
+    background: '#ff6e6e',
+    border: 'black'
+  }
 }, {
   id: 2,
   text: 'Green',
-  colorCode: '#77d779'
+  colorConfig: {
+    text: 'black',
+    background: '#77d779',
+    border: 'black'
+  }
 }, {
   id: 3,
   text: 'Blue',
-  colorCode: '#649cff'
+  colorConfig: {
+    text: 'black',
+    background: '#649cff',
+    border: 'black'
+  }
 }];
 describe('ColorMultiSelect', function () {
   test('rendering the defult props', function () {

package/lib/ColorSelect/__tests__/ColorSingleSelect.spec.js

@@ -11,15 +11,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var options = [{
   id: 1,
   text: 'Red',
-  colorCode: '#ff6e6e'
+  colorConfig: {
+    text: 'black',
+    background: '#ff6e6e',
+    border: 'black'
+  }
 }, {
   id: 2,
   text: 'Green',
-  colorCode: '#77d779'
+  colorConfig: {
+    text: 'black',
+    background: '#77d779',
+    border: 'black'
+  }
 }, {
   id: 3,
   text: 'Blue',
-  colorCode: '#649cff'
+  colorConfig: {
+    text: 'black',
+    background: '#649cff',
+    border: 'black'
+  }
 }];
 describe('ColorSingleSelect', function () {
   test('rendering the defult props', function () {

package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap

@@ -110,7 +110,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           data-selector-id="tag"
           data-test-id="tag_Tag"
           data-title="Red"
-          style="--tag_bg_color: rgba(255, 110, 110, 0.2); --tag_text_color: #ff6e6e; --tag_border_color: #ff6e6e;"
+          style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
           tabindex="0"
         >
           <div
@@ -161,7 +161,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           data-selector-id="tag"
           data-test-id="tag_Tag"
           data-title="Green"
-          style="--tag_bg_color: rgba(119, 215, 121, 0.2); --tag_text_color: #77d779; --tag_border_color: #77d779;"
+          style="--tag_bg_color: #77d779; --tag_text_color: black; --tag_border_color: black;"
           tabindex="0"
         >
           <div

package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap

@@ -43,7 +43,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
               data-selector-id="tag"
               data-test-id="tag_Tag"
               data-title="Red"
-              style="--tag_bg_color: rgba(255, 110, 110, 0.2); --tag_text_color: #ff6e6e; --tag_border_color: #ff6e6e;"
+              style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
               tabindex="0"
             >
               <div
@@ -57,7 +57,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
@@ -131,7 +131,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
@@ -194,7 +194,7 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
@@ -259,7 +259,7 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
@@ -323,7 +323,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
               data-selector-id="tag"
               data-test-id="tag_Tag"
               data-title="Red"
-              style="--tag_bg_color: rgba(255, 110, 110, 0.2); --tag_text_color: #ff6e6e; --tag_border_color: #ff6e6e;"
+              style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
               tabindex="0"
             >
               <div
@@ -337,7 +337,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
@@ -400,7 +400,7 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"

package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.js

@@ -7,28 +7,34 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ColorIndicatorModule = _interopRequireDefault(require("./ColorIndicator.module.css"));
-
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _Common = require("../../../utils/Common");
+
+var _ColorIndicatorModule = _interopRequireDefault(require("./ColorIndicator.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ColorIndicator(props) {
-  var colorCode = props.colorCode,
+  var colorConfig = props.colorConfig,
       shape = props.shape,
       customClass = props.customClass,
       customId = props.customId,
       testId = props.testId,
       tagAttributes = props.tagAttributes,
       a11yAttributes = props.a11yAttributes;
+
+  var _ref = colorConfig || _Common.DUMMY_OBJECT,
+      background = _ref.background;
+
   return /*#__PURE__*/_react["default"].createElement("div", _extends({}, tagAttributes, a11yAttributes, {
     className: "".concat(_ColorIndicatorModule["default"].varClass, " ").concat(_ColorIndicatorModule["default"].indicator, " ").concat(_ColorIndicatorModule["default"][shape], " ").concat(customClass),
     style: {
-      backgroundColor: colorCode
+      backgroundColor: background
     },
     "data-id": customId,
     "data-test-id": testId

package/lib/ColorSelect/_shared/ColorIndicator/__tests__/ColorIndicator.spec.js

@@ -23,11 +23,24 @@ describe('ColorIndicator', function () {
         asFragment = _render2.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
-  });
-  var colors = ['#ff0000', '#00ff00', '#0000ff'];
-  test.each(colors)('rendering the color of- %s', function (color) {
+  }); // const colors = ['#ff0000', '#00ff00', '#0000ff'];
+
+  var colorConfigurations = [{
+    background: '#ff0000',
+    text: '#000000',
+    border: '#ffffff'
+  }, {
+    background: '#00ff00',
+    text: '#000000',
+    border: '#ffffff'
+  }, {
+    background: '#0000ff',
+    text: '#ffffff',
+    border: '#000000'
+  }];
+  test.each(colorConfigurations)('rendering the color of- %s', function (color) {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
-      colorCode: color
+      colorConfig: color
     })),
         asFragment = _render3.asFragment;
 

package/lib/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ColorIndicator rendering the color of- #0000ff 1`] = `
+exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '#ffffff', border: '#000000' } 1`] = `
 <DocumentFragment>
   <div
     class="varClass indicator circle "
@@ -11,7 +11,7 @@ exports[`ColorIndicator rendering the color of- #0000ff 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ColorIndicator rendering the color of- #00ff00 1`] = `
+exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
     class="varClass indicator circle "
@@ -22,7 +22,7 @@ exports[`ColorIndicator rendering the color of- #00ff00 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ColorIndicator rendering the color of- #ff0000 1`] = `
+exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
     class="varClass indicator circle "

package/lib/ColorSelect/_shared/ColorIndicator/props/propTypes.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
-  colorCode: _propTypes["default"].string,
+  colorConfig: _propTypes["default"].object,
   shape: _propTypes["default"].oneOf(['circle', 'square']),
   customClass: _propTypes["default"].string,
   customId: _propTypes["default"].string,

package/lib/ColorSelect/_shared/ColoredTag/props/propTypes.js

@@ -18,6 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 propTypes = _objectSpread(_objectSpread({}, _propTypes2.propTypes), {}, {
+  isActive: _propTypes["default"].bool,
   colorConfig: _propTypes["default"].shape({
     textColor: _propTypes["default"].string,
     backgroundColor: _propTypes["default"].string,

package/lib/ColorSelect/_shared/helpers/renderHelpers.js

@@ -8,12 +8,12 @@ exports.renderColoredTag = renderColoredTag;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _color = _interopRequireDefault(require("color"));
-
 var _ColoredTag = _interopRequireDefault(require("../ColoredTag/ColoredTag"));
 
 var _ColorIndicator = _interopRequireDefault(require("../ColorIndicator/ColorIndicator"));
 
+var _Common = require("../../../utils/Common");
+
 var _excluded = ["option"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -25,19 +25,25 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function renderColoredTag(data) {
-  var option = data.option,
-      otherData = _objectWithoutProperties(data, _excluded);
+  var _ref = data || _Common.DUMMY_OBJECT,
+      option = _ref.option,
+      otherData = _objectWithoutProperties(_ref, _excluded);
+
+  var _ref2 = option || _Common.DUMMY_OBJECT,
+      colorConfig = _ref2.colorConfig,
+      value = _ref2.value,
+      id = _ref2.id;
 
-  var colorCode = option.colorCode,
-      value = option.value,
-      id = option.id;
-  var getBgColorValue = colorCode ? (0, _color["default"])(colorCode).alpha(0.2).toString() : '';
+  var _ref3 = colorConfig || _Common.DUMMY_OBJECT,
+      text = _ref3.text,
+      background = _ref3.background,
+      border = _ref3.border;
 
   function getColorConfig() {
     return {
-      backgroundColor: getBgColorValue,
-      textColor: colorCode,
-      borderColor: colorCode
+      backgroundColor: background,
+      textColor: text,
+      borderColor: border
     };
   }
 
@@ -50,8 +56,8 @@ function renderColoredTag(data) {
 }
 
 function renderColorIndicator(data) {
-  var colorCode = data.colorCode;
+  var colorConfig = data.colorConfig;
   return /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
-    colorCode: colorCode
+    colorConfig: colorConfig
   });
 }

package/lib/ColorSelect/props/propTypes.js

@@ -25,6 +25,7 @@ var propTypes = {
 exports.propTypes = propTypes;
 
 var ColorSingleSelect_propTypes = _objectSpread(_objectSpread(_objectSpread({}, _propTypes2.Select_propTypes), propTypes), {}, {
+  placeholder: _propTypes["default"].string,
   customClass: _propTypes["default"].shape({
     selectClass: _propTypes["default"].string
   }),

package/lib/Label/Label.js

@@ -13,12 +13,18 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
+
+var _utils = require("@zohodesk/utils");
+
 var _LabelModule = _interopRequireDefault(require("./Label.module.css"));
 
 var _LabelColorsModule = _interopRequireDefault(require("./LabelColors.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -65,12 +71,17 @@ var Label = /*#__PURE__*/function (_React$Component) {
           dataId = _this$props.dataId,
           dataSelectorId = _this$props.dataSelectorId,
           variant = _this$props.variant,
+          customProps = _this$props.customProps,
           customClass = _this$props.customClass,
           id = _this$props.id,
+          renderRightPlaceholderNode = _this$props.renderRightPlaceholderNode,
           _this$props$a11y = _this$props.a11y,
           a11y = _this$props$a11y === void 0 ? {} : _this$props$a11y;
+      var containerProps = customProps.containerProps,
+          rightPlaceholderNodeProps = customProps.rightPlaceholderNodeProps;
       var tabIndex = a11y.tabIndex;
-      return /*#__PURE__*/_react["default"].createElement("label", {
+
+      var labelElement = /*#__PURE__*/_react["default"].createElement("label", {
         className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass, " "),
         htmlFor: htmlFor,
         "data-title": title,
@@ -81,6 +92,15 @@ var Label = /*#__PURE__*/function (_React$Component) {
         id: id,
         tabIndex: tabIndex
       }, text);
+
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _utils.isRenderable)(renderRightPlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
+        $ui_displayMode: "flex",
+        $ui_direction: "row",
+        $ui_alignItems: "center"
+      }, containerProps), labelElement, /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
+        $ui_displayMode: "flex",
+        $ui_alignItems: "center"
+      }, rightPlaceholderNodeProps), (0, _utils.renderNode)(renderRightPlaceholderNode))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, labelElement));
     }
   }]);
 

package/lib/Label/__tests__/Label.spec.js

@@ -103,4 +103,62 @@ describe('Label', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with renderRightPlaceholderNode', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "New Feature",
+      id: "label_new",
+      renderRightPlaceholderNode: /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          background: '#27ae60',
+          color: 'white',
+          padding: '2px 6px',
+          borderRadius: '3px',
+          fontSize: '10px',
+          fontWeight: 'bold'
+        }
+      }, "NEW")
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customProps - containerProps & rightPlaceholderNodeProps', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Premium Feature",
+      id: "label_premium",
+      size: "large",
+      palette: "danger",
+      renderRightPlaceholderNode: /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          fontSize: '10px',
+          background: '#f39c12',
+          color: 'white',
+          padding: '1px 4px',
+          borderRadius: '2px'
+        }
+      }, "PRO"),
+      customProps: {
+        containerProps: {
+          $ui_alignItems: 'center',
+          $tagAttributes_container: {
+            style: {
+              gap: '6px'
+            }
+          }
+        },
+        rightPlaceholderNodeProps: {
+          $ui_displayMode: 'flex',
+          $ui_alignItems: 'center',
+          $tagAttributes_container: {
+            style: {
+              gap: '6px'
+            }
+          }
+        }
+      }
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -310,3 +310,69 @@ exports[`Label rendering the variant of- primary 1`] = `
   </label>
 </DocumentFragment>
 `;
+
+exports[`Label rendering with customProps - containerProps & rightPlaceholderNodeProps 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row alignItems_center"
+    data-id="flex"
+    data-test-id="flex"
+    style="gap: 6px;"
+  >
+    <label
+      class="label title large danger font_default
+           cursor  "
+      data-id="label"
+      data-selector-id="label"
+      data-test-id="label"
+      id="label_premium"
+    >
+      Premium Feature
+    </label>
+    <div
+      class="flex row alignItems_center"
+      data-id="flex"
+      data-test-id="flex"
+      style="gap: 6px;"
+    >
+      <span
+        style="font-size: 10px; background: rgb(243, 156, 18); color: white; padding: 1px 4px; border-radius: 2px;"
+      >
+        PRO
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label rendering with renderRightPlaceholderNode 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="label title medium default font_default
+           cursor  "
+      data-id="label"
+      data-selector-id="label"
+      data-test-id="label"
+      id="label_new"
+    >
+      New Feature
+    </label>
+    <div
+      class=""
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <span
+        style="background: rgb(39, 174, 96); color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: bold;"
+      >
+        NEW
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/Label/props/defaultProps.js

@@ -12,6 +12,7 @@ var defaultProps = {
   text: 'Label',
   type: 'title',
   variant: 'default',
+  customProps: {},
   customClass: '',
   dataSelectorId: 'label'
 };

package/lib/Label/props/propTypes.js

@@ -7,6 +7,8 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = _interopRequireDefault(require("@zohodesk/layout/es/Flex/props/propTypes"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
@@ -21,10 +23,15 @@ var propTypes = {
   title: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['title', 'subtitle']),
   variant: _propTypes["default"].oneOf(['primary', 'default']),
+  customProps: _propTypes["default"].shape({
+    containerProps: _propTypes["default"].exact(_propTypes2["default"]),
+    rightPlaceholderNodeProps: _propTypes["default"].exact(_propTypes2["default"])
+  }),
   customClass: _propTypes["default"].string,
   a11y: _propTypes["default"].shape({
     tabIndex: _propTypes["default"].string
   }),
-  id: _propTypes["default"].string
+  id: _propTypes["default"].string,
+  renderRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])
 };
 exports.propTypes = propTypes;

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -55,8 +55,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -981,10 +979,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           autoComplete = _this$props9.autoComplete,
           getTargetRef = _this$props9.getTargetRef,
           isFocus = _this$props9.isFocus,
-          limit = _this$props9.limit,
-          customProps = _this$props9.customProps;
-      var _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          limit = _this$props9.limit;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText,
@@ -1150,7 +1145,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({}, SuggestionsProps, {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1165,7 +1160,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             limit: limit,
             limitReachedMessage: limitReachedMessage,
             dataId: "".concat(dataId, "_Options")
-          })));
+          }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/MultiSelect.js

@@ -1171,9 +1171,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
+          customProps = _this$props15.customProps,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
-          limit = _this$props15.limit,
-          customProps = _this$props15.customProps;
+          limit = _this$props15.limit;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,