@zohodesk/components 1.0.0-temp-202.1 → 1.0.0-temp-203

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

@@ -13,9 +13,9 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
   >
     <div
       class="iconBox shrinkOff"
-      data-id="boxComponent"
+      data-id="listItemWithRadioComp_radio"
       data-selector-id="box"
-      data-test-id="boxComponent"
+      data-test-id="listItemWithRadioComp_radio"
     >
       <div
         aria-checked="false"

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1013,7 +1013,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,
-        isGroupSelect: true
+        isGroupSelect: true,
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1084,7 +1085,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             role: 'listbox',
             ariaMultiselectable: true
           },
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_dropbox")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
@@ -1127,7 +1129,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             listItemSize: listItemSize,
             a11y: {
               role: 'option'
-            }
+            },
+            dataId: "".concat(dataId, "_Options")
           }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -494,7 +494,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         isReadOnly: isReadOnly,
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
-        onSelect: this.handleClickSelectedOption
+        onSelect: this.handleClickSelectedOption,
+        dataId: "".concat(dataIdMultiSelectComp, "_selectedOptions")
       }), moreCount > 0 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"].more,
         onClick: this.handleMoreClick,
@@ -503,7 +504,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
         adjust: true,
-        shrink: true
+        shrink: true,
+        dataId: "".concat(dataIdMultiSelectComp, "_textBox")
       }, /*#__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"], {
@@ -566,7 +568,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           a11y: {
             role: 'listbox',
             ariaMultiselectable: true
-          }
+          },
+          dataId: "".concat(dataIdMultiSelectComp, "_dropbox")
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true
@@ -598,7 +601,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           listItemSize: listItemSize,
           a11y: {
             role: 'option'
-          }
+          },
+          dataId: "".concat(dataIdMultiSelectComp, "_Options")
         }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/MultiSelect/MultiSelect.js

@@ -978,7 +978,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,
         size: size,
-        palette: palette
+        palette: palette,
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -186,7 +186,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           role: 'listbox'
         },
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: "".concat(dataId, "_dropbox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {

package/lib/MultiSelect/SelectedOptions.js

@@ -66,7 +66,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
           onRemove = _this$props.onRemove,
           onSelect = _this$props.onSelect,
           size = _this$props.size,
-          palette = _this$props.palette;
+          palette = _this$props.palette,
+          dataId = _this$props.dataId;
       var isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedOptions.map(function (option) {
         var id = option.id,
@@ -91,7 +92,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         if (optionType === 'avatar') {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "photoTag")
+            key: "".concat(id, "photoTag"),
+            dataId: dataId
           }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
             active: highLightedSelectOptions.indexOf(id) >= 0,
             hasAvatar: true,
@@ -100,7 +102,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "iconTag")
+            key: "".concat(id, "iconTag"),
+            dataId: dataId
           }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
             active: highLightedSelectOptions.indexOf(id) >= 0,
             iconName: icon,
@@ -110,7 +113,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
 
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-          key: "".concat(id, "tag")
+          key: "".concat(id, "tag"),
+          dataId: dataId
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
           active: highLightedSelectOptions.indexOf(id) >= 0
         })));

package/lib/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,15 @@
-.tag {
-  max-width: 100% ;
-}
-[dir=ltr] .xmedium {
-  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
-}
-[dir=rtl] .xmedium {
-  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
-}
-[dir=ltr] .medium {
-  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
-}
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
-}
+.tag {
+  max-width: 100% ;
+}
+[dir=ltr] .xmedium {
+  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
+}
+[dir=rtl] .xmedium {
+  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
+}
+[dir=ltr] .medium {
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
+}
+[dir=rtl] .medium {
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
+}

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

@@ -16,9 +16,9 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
     >
       <div
         class="wrapper grow basisAuto shrinkOn"
-        data-id="boxComponent"
+        data-id="multiSelectComp_textBox"
         data-selector-id="box"
-        data-test-id="boxComponent"
+        data-test-id="multiSelectComp_textBox"
       >
         <span
           class=" custmSpan custmSpanMedium 

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

@@ -4,9 +4,9 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
 <DocumentFragment>
   <div
     class="tag medium shrinkOff"
-    data-id="boxComponent"
+    data-id="selectedOptions"
     data-selector-id="box"
-    data-test-id="boxComponent"
+    data-test-id="selectedOptions"
   >
     <div
       aria-labelledby="1"
@@ -28,9 +28,9 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
   </div>
   <div
     class="tag medium shrinkOff"
-    data-id="boxComponent"
+    data-id="selectedOptions"
     data-selector-id="box"
-    data-test-id="boxComponent"
+    data-test-id="selectedOptions"
   >
     <div
       aria-labelledby="2"
@@ -52,9 +52,9 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
   </div>
   <div
     class="tag medium shrinkOff"
-    data-id="boxComponent"
+    data-id="selectedOptions"
     data-selector-id="box"
-    data-test-id="boxComponent"
+    data-test-id="selectedOptions"
   >
     <div
       aria-labelledby="3"

package/lib/MultiSelect/props/defaultProps.js

@@ -163,7 +163,8 @@ var MultiSelectWithAvatar_defaultProps = {
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {
-  size: 'medium'
+  size: 'medium',
+  dataId: 'selectedOptions'
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {

package/lib/MultiSelect/props/propTypes.js

@@ -160,7 +160,8 @@ var SelectedOptions_propTypes = {
     optionType: _propTypes["default"].string
   })),
   size: _propTypes["default"].oneOf(['medium', 'xmedium']),
-  palette: _propTypes["default"].string
+  palette: _propTypes["default"].string,
+  dataId: _propTypes["default"].string
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
 var Suggestions_propTypes = {

package/lib/Popup/PositionMapping.json

@@ -1,74 +1,74 @@
-{ 
-    "absolutePositionMapping" : {
-        "bottomCenter": "bottomCenter",
-        "bottomRight": "bottomLeftToRight",
-        "bottomLeft": "bottomRightToLeft",
-        "topCenter": "topCenter",
-        "topRight": "topLeftToRight",
-        "topLeft": "topRightToLeft",
-        "rightCenter": "rightCenter",
-        "rightBottom": "rightTopToBottom",
-        "rightTop": "rightBottomToTop",
-        "leftCenter": "leftCenter",
-        "leftBottom": "leftTopToBottom",
-        "leftTop": "leftBottomToTop",
-        "bottomLeftToRight": "bottomLeftToRight",
-        "bottomRightToLeft": "bottomRightToLeft",
-        "topLeftToRight": "topLeftToRight",
-        "topRightToLeft": "topRightToLeft",
-        "rightTopToBottom": "rightTopToBottom",
-        "rightBottomToTop": "rightBottomToTop",
-        "leftTopToBottom": "leftTopToBottom"
-    },
-    "rtlAbsolutePositionMapping" : {
-        "bottomCenter": "bottomCenter",
-        "bottomRight": "bottomRightToLeft",
-        "bottomLeft": "bottomLeftToRight",
-        "topCenter": "topCenter",
-        "topRight": "topRightToLeft",
-        "topLeft": "topLeftToRight",
-        "rightCenter": "leftCenter",
-        "rightBottom": "leftTopToBottom",
-        "rightTop": "leftBottomToTop",
-        "leftCenter": "rightCenter",
-        "leftBottom": "rightTopToBottom",
-        "leftTop": "rightBottomToTop",
-        "bottomLeftToRight": "bottomLeftToRight",
-        "bottomRightToLeft": "bottomRightToLeft",
-        "topLeftToRight": "topLeftToRight",
-        "topRightToLeft": "topRightToLeft",
-        "rightTopToBottom": "rightTopToBottom",
-        "rightBottomToTop": "rightBottomToTop",
-        "leftTopToBottom": "leftTopToBottom"
-    },
-    "rtlFixedPositionMapping": {
-        "bottomCenter":"bottomCenter",
-        "bottomLeftToRight": "bottomRightToLeft",
-        "bottomCenterToRight": "bottomCenterToLeft",
-        "bottomRightToLeft": "bottomLeftToRight",
-        "bottomCenterToLeft": "bottomCenterToRight",
-        "topCenter": "topCenter",
-        "topLeftToRight": "topRightToLeft",
-        "topCenterToRight": "topCenterToLeft",
-        "topRightToLeft": "topLeftToRight",
-        "topCenterToLeft": "topCenterToRight",
-        "rightTopToBottom": "leftTopToBottom",
-        "rightCenterToBottom": "leftCenterToBottom",
-        "rightCenter": "leftCenter",
-        "rightBottomToTop": "leftBottomToTop",
-        "rightCenterToTop": "leftCenterToTop",
-        "leftTopToBottom": "rightTopToBottom",
-        "leftCenterToBottom": "rightCenterToBottom",
-        "leftCenter": "rightCenter",
-        "leftBottomToTop": "rightBottomToTop",
-        "leftCenterToTop": "rightCenterToTop",
-        "bottomRight": "bottomLeft",
-        "bottomLeft": "bottomRight",
-        "topRight": "topLeft",
-        "topLeft": "topRight",
-        "rightBottom": "leftBottom",
-        "rightTop": "leftTop",
-        "leftBottom": "rightBottom",
-        "leftTop": "rightTop"      
-    }
+{ 
+    "absolutePositionMapping" : {
+        "bottomCenter": "bottomCenter",
+        "bottomRight": "bottomLeftToRight",
+        "bottomLeft": "bottomRightToLeft",
+        "topCenter": "topCenter",
+        "topRight": "topLeftToRight",
+        "topLeft": "topRightToLeft",
+        "rightCenter": "rightCenter",
+        "rightBottom": "rightTopToBottom",
+        "rightTop": "rightBottomToTop",
+        "leftCenter": "leftCenter",
+        "leftBottom": "leftTopToBottom",
+        "leftTop": "leftBottomToTop",
+        "bottomLeftToRight": "bottomLeftToRight",
+        "bottomRightToLeft": "bottomRightToLeft",
+        "topLeftToRight": "topLeftToRight",
+        "topRightToLeft": "topRightToLeft",
+        "rightTopToBottom": "rightTopToBottom",
+        "rightBottomToTop": "rightBottomToTop",
+        "leftTopToBottom": "leftTopToBottom"
+    },
+    "rtlAbsolutePositionMapping" : {
+        "bottomCenter": "bottomCenter",
+        "bottomRight": "bottomRightToLeft",
+        "bottomLeft": "bottomLeftToRight",
+        "topCenter": "topCenter",
+        "topRight": "topRightToLeft",
+        "topLeft": "topLeftToRight",
+        "rightCenter": "leftCenter",
+        "rightBottom": "leftTopToBottom",
+        "rightTop": "leftBottomToTop",
+        "leftCenter": "rightCenter",
+        "leftBottom": "rightTopToBottom",
+        "leftTop": "rightBottomToTop",
+        "bottomLeftToRight": "bottomLeftToRight",
+        "bottomRightToLeft": "bottomRightToLeft",
+        "topLeftToRight": "topLeftToRight",
+        "topRightToLeft": "topRightToLeft",
+        "rightTopToBottom": "rightTopToBottom",
+        "rightBottomToTop": "rightBottomToTop",
+        "leftTopToBottom": "leftTopToBottom"
+    },
+    "rtlFixedPositionMapping": {
+        "bottomCenter":"bottomCenter",
+        "bottomLeftToRight": "bottomRightToLeft",
+        "bottomCenterToRight": "bottomCenterToLeft",
+        "bottomRightToLeft": "bottomLeftToRight",
+        "bottomCenterToLeft": "bottomCenterToRight",
+        "topCenter": "topCenter",
+        "topLeftToRight": "topRightToLeft",
+        "topCenterToRight": "topCenterToLeft",
+        "topRightToLeft": "topLeftToRight",
+        "topCenterToLeft": "topCenterToRight",
+        "rightTopToBottom": "leftTopToBottom",
+        "rightCenterToBottom": "leftCenterToBottom",
+        "rightCenter": "leftCenter",
+        "rightBottomToTop": "leftBottomToTop",
+        "rightCenterToTop": "leftCenterToTop",
+        "leftTopToBottom": "rightTopToBottom",
+        "leftCenterToBottom": "rightCenterToBottom",
+        "leftCenter": "rightCenter",
+        "leftBottomToTop": "rightBottomToTop",
+        "leftCenterToTop": "rightCenterToTop",
+        "bottomRight": "bottomLeft",
+        "bottomLeft": "bottomRight",
+        "topRight": "topLeft",
+        "topLeft": "topRight",
+        "rightBottom": "leftBottom",
+        "rightTop": "leftTop",
+        "leftBottom": "rightBottom",
+        "leftTop": "rightTop"      
+    }
 }

package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css

@@ -1,6 +1,6 @@
-.dropBoxContainer {
-  max-height: 70vh ;
-}
-.boxPadding{
-  padding-bottom: var(--zd_size10) ;
-}
+.dropBoxContainer {
+  max-height: 70vh ;
+}
+.boxPadding{
+  padding-bottom: var(--zd_size10) ;
+}