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

package/es/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/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -924,7 +924,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
-      isGroupSelect: true
+      isGroupSelect: true,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -998,7 +999,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           role: 'listbox',
           ariaMultiselectable: true
         },
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_dropbox`
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
@@ -1042,7 +1044,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           listItemSize: listItemSize,
           a11y: {
             role: 'option'
-          }
+          },
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -429,7 +429,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isReadOnly: isReadOnly,
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
-      onSelect: this.handleClickSelectedOption
+      onSelect: this.handleClickSelectedOption,
+      dataId: `${dataIdMultiSelectComp}_selectedOptions`
     }), moreCount > 0 ? /*#__PURE__*/React.createElement(Box, {
       className: style.more,
       onClick: this.handleMoreClick,
@@ -438,7 +439,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       flexible: true,
       className: style.wrapper,
       adjust: true,
-      shrink: true
+      shrink: true,
+      dataId: `${dataIdMultiSelectComp}_textBox`
     }, /*#__PURE__*/React.createElement("span", {
       className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
               `
@@ -505,6 +507,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'listbox',
           ariaMultiselectable: true
         },
+        dataId: `${dataIdMultiSelectComp}_dropbox`,
         ...DropBoxProps,
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
@@ -537,6 +540,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         a11y: {
           role: 'option'
         },
+        dataId: `${dataIdMultiSelectComp}_Options`,
         ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/MultiSelect/MultiSelect.js

@@ -900,7 +900,8 @@ export class MultiSelectComponent extends React.Component {
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
       size: size,
-      palette: palette
+      palette: palette,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -1038,7 +1039,8 @@ export class MultiSelectComponent extends React.Component {
       },
       size: boxSize,
       alignBox: "row",
-      isResponsivePadding: getFooter ? false : true
+      isResponsivePadding: getFooter ? false : true,
+      dataId: `${dataId}_dropbox`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Card, {

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -131,7 +131,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         role: 'listbox'
       },
       isResponsivePadding: true,
-      alignBox: "row"
+      alignBox: "row",
+      dataId: `${dataId}_dropbox`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Card, {

package/es/MultiSelect/SelectedOptions.js

@@ -21,7 +21,8 @@ export default class SelectedOptions extends React.PureComponent {
       onRemove,
       onSelect,
       size,
-      palette
+      palette,
+      dataId
     } = this.props;
     const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
     return /*#__PURE__*/React.createElement(React.Fragment, null, selectedOptions.map(option => {
@@ -49,7 +50,8 @@ export default class SelectedOptions extends React.PureComponent {
       if (optionType === 'avatar') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
-          key: `${id}photoTag`
+          key: `${id}photoTag`,
+          dataId: dataId
         }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           hasAvatar: true,
@@ -58,7 +60,8 @@ export default class SelectedOptions extends React.PureComponent {
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
-          key: `${id}iconTag`
+          key: `${id}iconTag`,
+          dataId: dataId
         }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           iconName: icon,
@@ -68,7 +71,8 @@ export default class SelectedOptions extends React.PureComponent {
 
       return /*#__PURE__*/React.createElement(Box, {
         className: `${style.tag} ${style[size]}`,
-        key: `${id}tag`
+        key: `${id}tag`,
+        dataId: dataId
       }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
         active: highLightedSelectOptions.indexOf(id) >= 0
       }));

package/es/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/es/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/es/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/es/MultiSelect/props/defaultProps.js

@@ -149,7 +149,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   needResponsive: true
 };
 export const SelectedOptions_defaultProps = {
-  size: 'medium'
+  size: 'medium',
+  dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
   a11y: {}

package/es/MultiSelect/props/propTypes.js

@@ -139,7 +139,8 @@ export const SelectedOptions_propTypes = {
     optionType: PropTypes.string
   })),
   size: PropTypes.oneOf(['medium', 'xmedium']),
-  palette: PropTypes.string
+  palette: PropTypes.string,
+  dataId: PropTypes.string
 };
 export const Suggestions_propTypes = {
   a11y: PropTypes.shape({

package/es/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/es/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) ;
+}