@zohodesk/components 1.2.29 → 1.2.31

package/lib/PopOver/PopOver.module.css

@@ -1,9 +1,9 @@
 .popup {
   position: relative;
-  /* css:theme-validation:ignore */
-  background-color: var(--dot_white);
+  background-color: var(--zdt_popover_default_bg);
 }
+
 .target {
   composes: offSelection from '../common/common.module.css';
   cursor: pointer;
-}
+}

package/lib/Radio/Radio.module.css

@@ -28,7 +28,6 @@
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
-  /* css:theme-validation:ignore */
   stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;

package/lib/Ribbon/Ribbon.module.css

@@ -36,12 +36,9 @@
 .basic {
   composes: varClass;
   position: relative;
-  /* css:theme-validation:ignore */
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   line-height: var(--ribbon_line_height);
   padding: var(--ribbon_padding);
   background-color: var(--ribbon_bg_color);
@@ -368,7 +365,6 @@
   position: absolute;
   content: '';
   top: var(--ribbon_tag_before_top);
-  /* css:theme-validation:ignore */
   width: var(--ribbon_tag_before_width);
   height: var(--ribbon_tag_before_height);
   background-color: inherit;

package/lib/Select/GroupSelect.js

@@ -692,7 +692,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
-        ref: getTargetRef
+        ref: getTargetRef,
+        "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
       }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         isDisabled: isDisabled,
         iconRotated: isPopupOpen,
@@ -707,7 +709,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         value: selected,
         variant: textBoxVariant,
         needReadOnlyStyle: isReadOnly ? true : false,
-        dataId: dataId,
+        dataId: "".concat(dataId, "_textBox"),
         onKeyPress: this.handleValueInputChange,
         needEffect: isReadOnly || isDisabled ? false : true,
         borderColor: borderColor,
@@ -744,7 +746,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         value: selected,
         variant: textBoxVariant,
         needReadOnlyStyle: isReadOnly ? true : false,
-        dataId: dataId,
+        dataId: "".concat(dataId, "_textBox"),
         onKeyPress: this.handleValueInputChange,
         borderColor: borderColor,
         htmlId: htmlId,
@@ -776,7 +778,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           needResponsive: needResponsive,
           isPadding: false,
           isResponsivePadding: getFooter ? false : true,
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_suggestionBox")
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
@@ -801,7 +804,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             ariaAutocomplete: 'list',
             ariaDescribedby: ariaErrorId
           },
-          autoComplete: false
+          autoComplete: false,
+          dataId: "".concat(dataId, "_search")
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
@@ -834,7 +838,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             a11y: {
               ariaParentRole: 'listbox',
               role: 'option'
-            }
+            },
+            dataId: "".concat(dataId, "_Options")
           }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,

package/lib/Select/Select.js

@@ -43,8 +43,6 @@ var _Common = require("../utils/Common.js");
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
-var _Config = require("../Provider/Config");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/Select/props/defaultProps.js

@@ -72,6 +72,7 @@ var GroupSelect_defaultProps = {
   dataIdDownIcon: 'downIcon',
   dataIdLoading: 'loading',
   dataIdSrchEmptyMsg: 'searchEmptyMessage',
+  dataId: 'GroupSelect',
   isPopupOpenOnEnter: false,
   borderColor: 'default',
   needTick: true,

package/lib/Switch/Switch.module.css

@@ -26,7 +26,6 @@
   display: inline-block;
   position: relative;
   transition: box-shadow var(--zd_transition3) ease-in-out;
-  /* css:theme-validation:ignore */
   background-color: var(--switch_off_bg_color);
   border-radius: 20px;
   cursor: pointer;
@@ -45,7 +44,6 @@
   right: 50% ;
   transition: all var(--zd_transition2);
   box-shadow: var(--switch_cricle_box_shadow);
-  /* css:theme-validation:ignore */
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
 }

package/lib/Tag/Tag.module.css

@@ -34,13 +34,10 @@
   composes: dInflex alignVertical flexrow from '../common/common.module.css';
   position: relative;
   vertical-align: middle;
-  /* css:theme-validation:ignore */
   color: var(--tag_text_color);
-  /* css:theme-validation:ignore */
   font-size: var(--tag_font_size);
   letter-spacing: var(--tag_letter_spacing);
   height: var(--tag_height);
-  /* css:theme-validation:ignore */
   max-width: 100% ;
   background-color: var(--tag_bg_color);
   border-radius: var(--tag_border_radius);
@@ -125,13 +122,11 @@
   display: block;
 }
 .close {
-  /* css:theme-validation:ignore */
   color: var(--tag_closeicon_color);
   display: none;
   position: absolute;
   top: 0 ;
   bottom: 0 ;
-  /* css:theme-validation:ignore */
   padding: var(--tag_closeicon_padding);
   cursor: var(--tag_closeicon_cursor);
   border-radius: var(--tag_closeicon_border_radius);
@@ -229,7 +224,6 @@
 }
 
 .icon {
-  /* css:theme-validation:ignore */
   margin: var(--tag_icon_margin);
   background-color: var(--tag_icon_bg_color);
 }

package/lib/TextBox/TextBox.module.css

@@ -32,36 +32,30 @@
 }
 
 .basic::placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .basic::-webkit-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .basic::-moz-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .basic::-ms-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 /* css:lineheight-validation:ignore */
 .container {
   composes: basic;
-  /* css:theme-validation:ignore */
   transition: border var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s;
   width: var(--textbox_width);
-  /* css:theme-validation:ignore */
   color: var(--textbox_text_color);
   font-size: var(--textbox_font_size);
   height: var(--textbox_height);
-  /* css:theme-validation:ignore */
   line-height: var(--textbox_line_height);
   background-color: var(--textbox_bg_color);
   -webkit-transition: border var(--zd_transition2) linear 0s;
@@ -85,22 +79,18 @@
 }
 
 .container::placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .container::-webkit-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .container::-moz-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .container::-ms-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
@@ -114,11 +104,6 @@
   border-style: var(--textbox_border_style);
 }
 
-.effect:hover,
-.effect:focus {
-  /* css:theme-validation:ignore */
-}
-
 .effect:hover, .effect:focus {
   border-color: var(--textbox_border_color);
 }
@@ -127,11 +112,6 @@
   --textbox_border_width: 0 0 1px 0;
 }
 
-.borderColor_transparent,
-.borderColor_default {
-  /* css:theme-validation:ignore */
-}
-
 .borderColor_transparent, .borderColor_default {
   border-color: var(--textbox_border_color);
 }

package/lib/TextBoxIcon/TextBoxIcon.module.css

@@ -24,7 +24,6 @@
   cursor: var(--textboxicon_icon_cursor);
 }
 .iconContainer {
-  /* css:theme-validation:ignore */
   color: var(--textboxicon_icon_color);
 }
 .effect:hover .iconContainer,
@@ -51,10 +50,6 @@
   right: 0 ;
   left: 0 ;
 }
-.line,
-.borderColor_default {
-  /* css:theme-validation:ignore */
-}
 .line, .borderColor_default {
   background-color: var(--textboxicon_line_color);
 }

package/lib/Textarea/Textarea.module.css

@@ -19,7 +19,6 @@
   appearance: none;
   outline: 0;
   letter-spacing: 0.1px;
-  /* css:theme-validation:ignore */
   color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
 }
@@ -27,19 +26,15 @@
   border-width: var(--textarea_border_width);
 }
 .basic::placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-webkit-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-moz-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-ms-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic:disabled {
@@ -73,7 +68,6 @@
   min-width: var(--zd_size100) ;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
-  /* css:theme-validation:ignore */
   height: var(--textarea_height);
   -webkit-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;

package/lib/common/customscroll.module.css

@@ -9,6 +9,7 @@
   --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_hover_bg);
   --zd-scroll-border: var(--zdt_customscroll_border);
 }
+
 .scroll[data-scroll-palette='dark'],
 .scroll [data-scroll-palette='dark'] {
   --zd-scroll-bg: var(--zdt_customscroll_dark_bg);
@@ -16,92 +17,114 @@
   --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_dark_hover_bg);
   --zd-scroll-border: var(--zdt_customscroll_dark_border);
 }
+
 .scroll,
 .scroll * {
+  /* css:theme-validation:ignore */
   scrollbar-color: var(--zd-scroll-thump) var(--zd-scroll-bg);
   scrollbar-width: thin;
+  /* css:theme-validation:ignore */
   -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
+  /* css:theme-validation:ignore */
   -ms-scrollbar-face-color: var(--zd-scroll-thump);
 }
+
 .scroll::-webkit-scrollbar,
 .scroll ::-webkit-scrollbar {
   /* css:theme-validation:ignore */
 }
+
 .scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
   background: var(--zd-scroll-corner-bg);
 }
+
 .scroll::-webkit-scrollbar:hover,
 .scroll ::-webkit-scrollbar:hover {
   /* css:theme-validation:ignore */
 }
+
 .scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
   background: var(--zd-scroll-bg);
 }
+
 .scroll::-webkit-scrollbar:horizontal,
 .scroll ::-webkit-scrollbar:horizontal {
   height: var(--zd-scroll-height);
 }
+
 .scroll::-webkit-scrollbar:vertical,
 .scroll ::-webkit-scrollbar:vertical {
   width: var(--zd-scroll-width);
 }
+
 .scroll::-webkit-scrollbar-button,
 .scroll ::-webkit-scrollbar-button {
   display: none;
   width: 0 ;
   height: 0 ;
 }
+
 [dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
 }
+
 [dir=rtl] .scroll::-webkit-scrollbar-track:vertical, [dir=rtl] .scroll ::-webkit-scrollbar-track:vertical {
   border-right: 1px solid transparent;
   border-left: 1px solid transparent;
 }
+
 .scroll::-webkit-scrollbar-track:vertical:hover,
 .scroll ::-webkit-scrollbar-track:vertical:hover {
   /* css:theme-validation:ignore */
 }
+
 .scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
   border-color: var(--zd-scroll-border);
 }
+
 .scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
 }
+
 .scroll::-webkit-scrollbar-track:horizontal:hover,
 .scroll ::-webkit-scrollbar-track:horizontal:hover {
   /* css:theme-validation:ignore */
 }
+
 .scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
   border-color: var(--zd-scroll-border);
 }
+
 .scroll::-webkit-scrollbar-track-piece, .scroll ::-webkit-scrollbar-track-piece {
   background: inherit;
 }
+
 .scroll::-webkit-scrollbar-thumb,
 .scroll ::-webkit-scrollbar-thumb {
-  /* css:theme-validation:ignore */
   /* css:theme-validation:ignore */
   /* display: none; */
 }
+
 .scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background: var(--zd-scroll-thump);
   background-clip: padding-box;
   border: 3px solid transparent;
 }
+
 .scroll::-webkit-scrollbar-thumb:hover,
 .scroll ::-webkit-scrollbar-thumb:hover {
   /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
 }
+
 .scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
   background: var(--zd-scroll-thump-hoverbg);
   background-clip: padding-box;
   border: 3px solid transparent;
 }
+
 /* .scroll:hover > ::-webkit-scrollbar-thumb,
 .scroll *:hover > ::-webkit-scrollbar-thumb {
   display: block;
@@ -113,6 +136,7 @@
 .scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
   background: var(--zd-scroll-corner-bg);
 }
+
 .scroll::-webkit-resizer, .scroll ::-webkit-resizer {
   background: inherit;
-}
+}

package/lib/v1/MultiSelect/props/defaultProps.js

@@ -120,7 +120,8 @@ var MultiSelect_defaultProps = {
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
-  cardHeaderName: ''
+  cardHeaderName: '',
+  needResponsive: true
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -156,7 +157,8 @@ var MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
-  customProps: {}
+  customProps: {},
+  needResponsive: true
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {

package/lib/v1/Select/GroupSelect.js

@@ -694,7 +694,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
-        ref: getTargetRef
+        ref: getTargetRef,
+        "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
       }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         isDisabled: isDisabled,
         iconRotated: isPopupOpen,
@@ -709,7 +711,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         value: selected,
         variant: textBoxVariant,
         needReadOnlyStyle: isReadOnly ? true : false,
-        dataId: dataId,
+        dataId: "".concat(dataId, "_textBox"),
         onKeyPress: this.handleValueInputChange,
         needEffect: isReadOnly || isDisabled ? false : true,
         borderColor: borderColor,
@@ -746,7 +748,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         value: selected,
         variant: textBoxVariant,
         needReadOnlyStyle: isReadOnly ? true : false,
-        dataId: dataId,
+        dataId: "".concat(dataId, "_textBox"),
         onKeyPress: this.handleValueInputChange,
         borderColor: borderColor,
         htmlId: htmlId,
@@ -778,7 +780,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           needResponsive: needResponsive,
           isPadding: false,
           isResponsivePadding: getFooter ? false : true,
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_suggestionBox")
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
@@ -803,7 +806,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             ariaAutocomplete: 'list',
             ariaDescribedby: ariaErrorId
           },
-          autoComplete: false
+          autoComplete: false,
+          dataId: "".concat(dataId, "_search")
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
@@ -836,7 +840,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             a11y: {
               ariaParentRole: 'listbox',
               role: 'option'
-            }
+            },
+            dataId: "".concat(dataId, "_Options")
           }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,

package/lib/v1/Select/Select.js

@@ -43,8 +43,6 @@ var _Common = require("../../utils/Common.js");
 
 var _SelectModule = _interopRequireDefault(require("../../Select/Select.module.css"));
 
-var _Config = require("../../Provider/Config");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/v1/Select/props/defaultProps.js

@@ -72,6 +72,7 @@ var GroupSelect_defaultProps = {
   dataIdDownIcon: 'downIcon',
   dataIdLoading: 'loading',
   dataIdSrchEmptyMsg: 'searchEmptyMessage',
+  dataId: 'GroupSelect',
   isPopupOpenOnEnter: false,
   borderColor: 'default',
   needTick: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.29",
+  "version": "1.2.31",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -65,13 +65,13 @@
     "@testing-library/user-event": "^13.0.10",
     "@zohodesk-private/color-variable-preprocessor": "1.2.0",
     "@zohodesk-private/css-variable-migrator": "^1.0.7",
-    "@zohodesk-private/node-plugins": "1.1.7",
+    "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.2.0",
+    "@zohodesk/a11y": "2.2.1",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/hooks": "2.0.3",
-    "@zohodesk/icons": "1.0.35",
-    "@zohodesk/svg": "1.1.11",
+    "@zohodesk/hooks": "2.0.4",
+    "@zohodesk/icons": "1.0.43",
+    "@zohodesk/svg": "1.1.14",
     "@zohodesk/utils": "1.3.13",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.3",
@@ -85,14 +85,14 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.35",
+    "@zohodesk/icons": "1.0.43",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/svg": "1.1.11",
+    "@zohodesk/svg": "1.1.14",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/hooks": "2.0.3",
+    "@zohodesk/hooks": "2.0.4",
     "@zohodesk/utils": "1.3.13",
-    "@zohodesk/a11y": "2.2.0"
+    "@zohodesk/a11y": "2.2.1"
   }
 }