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

package/lib/RippleEffect/RippleEffect.module.css

@@ -1,92 +1,92 @@
-.effect {
-  position: relative;
-  border-radius: var(--zd_size4);
-}
-.border {
-  border: solid 1px var(--zdt_rippleeffect_default_border);
-}
-.default.defaultHover {
-  border-color: var(--zdt_rippleeffect_hover_border);
-}
-.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
-/* .hoverEffect:focus.primary.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_primary_border);
-}
-.primary.defaultHover, .hoverEffect:hover.primary.active.border
-/* .hoverEffect:focus.primary.active.border  */
-{
-  border-color: var(--zdt_rippleeffect_primary_active_border);
-}
-.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
-/* .hoverEffect:focus.primaryLight.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.defaultHover, .hoverEffect:hover.green.borderHover
-/* .hoverEffect:focus.green.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.hoverEffect:hover.default.defaultHover
-/* .hoverEffect:focus.default.defaultHover */
- {
-  border-color: var(--zdt_rippleeffect_slate_border);
-}
-.hoverEffect:hover.default.borderHover
-/* .hoverEffect:focus.default.borderHover */
- {
-  border-color: var(--zdt_rippleeffect_navy_border);
-}
-.hoverEffect:hover.default.bgHover
-/* .hoverEffect:focus.default.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_hover_bg);
-}
-.hoverEffect:hover.primaryLight.bgHover
-/* .hoverEffect:focus.primaryLight.bgHover  */
-{
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.primaryFilled {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.hoverEffect:hover.primaryFilled, .primaryFilled.active {
-  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
-}
-.hoverEffect:hover.green.bgHover
-/* .hoverEffect:focus.green.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.active {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.green.active.border {
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.primary.active {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.danger.defaultHover, .hoverEffect:hover.danger.borderHover
-/* .hoverEffect:focus.danger.borderHover */
- {
-  border-color: var(--zdt_rippleeffect_danger_border);
-}
-.hoverEffect:hover.danger.bgHover, .danger.active {
-  background-color: var(--zdt_rippleeffect_danger_bg);
-}
-.hoverEffect:hover.primaryDark.bgHover
-/* .hoverEffect:focus.primaryDark.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_primary_dark_bg);
-}
-.notAllowed {
-  cursor: not-allowed;
-}
+.effect {
+  position: relative;
+  border-radius: var(--zd_size4);
+}
+.border {
+  border: solid 1px var(--zdt_rippleeffect_default_border);
+}
+.default.defaultHover {
+  border-color: var(--zdt_rippleeffect_hover_border);
+}
+.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
+/* .hoverEffect:focus.primary.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_primary_border);
+}
+.primary.defaultHover, .hoverEffect:hover.primary.active.border
+/* .hoverEffect:focus.primary.active.border  */
+{
+  border-color: var(--zdt_rippleeffect_primary_active_border);
+}
+.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
+/* .hoverEffect:focus.primaryLight.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.defaultHover, .hoverEffect:hover.green.borderHover
+/* .hoverEffect:focus.green.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.hoverEffect:hover.default.defaultHover
+/* .hoverEffect:focus.default.defaultHover */
+ {
+  border-color: var(--zdt_rippleeffect_slate_border);
+}
+.hoverEffect:hover.default.borderHover
+/* .hoverEffect:focus.default.borderHover */
+ {
+  border-color: var(--zdt_rippleeffect_navy_border);
+}
+.hoverEffect:hover.default.bgHover
+/* .hoverEffect:focus.default.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_hover_bg);
+}
+.hoverEffect:hover.primaryLight.bgHover
+/* .hoverEffect:focus.primaryLight.bgHover  */
+{
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.primaryFilled {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.hoverEffect:hover.primaryFilled, .primaryFilled.active {
+  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
+}
+.hoverEffect:hover.green.bgHover
+/* .hoverEffect:focus.green.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.active {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.green.active.border {
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.primary.active {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.danger.defaultHover, .hoverEffect:hover.danger.borderHover
+/* .hoverEffect:focus.danger.borderHover */
+ {
+  border-color: var(--zdt_rippleeffect_danger_border);
+}
+.hoverEffect:hover.danger.bgHover, .danger.active {
+  background-color: var(--zdt_rippleeffect_danger_bg);
+}
+.hoverEffect:hover.primaryDark.bgHover
+/* .hoverEffect:focus.primaryDark.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_primary_dark_bg);
+}
+.notAllowed {
+  cursor: not-allowed;
+}

package/lib/Select/Select.module.css

@@ -1,135 +1,135 @@
-.input {
-  cursor: pointer;
-}
-
-.small {
-  max-height: var(--zd_size200) ;
-}
-
-.medium {
-  max-height: var(--zd_size350) ;
-}
-
-.large {
-  max-height: var(--zd_size400) ;
-}
-
-.emptyState {
-  font-size: var(--zd_font_size14) ;
-  color: var(--zdt_select_emptystate_text);
-  composes: semibold from '../common/common.module.css';
-}
-
-.box_small .emptyState {
-  padding: var(--zd_size12) var(--zd_size6) ;
-}
-
-.box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15) ;
-}
-
-.hide {
-  composes: vishidden from '../common/common.module.css';
-}
-
-.container {
-  position: relative;
-}
-/* css:lineheight-validation:ignore */
-.arrowIcon {
-  height: var(--zd_size8) ;
-  line-height: var(--zd_size8);
-}
-
-.small.search {
-  padding: 0 var(--zd_size5) ;
-}
-
-.medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0 ;
-}
-
-.title {
-  margin-bottom: var(--zd_size6) ;
-}
-
-.groupTitle {
-  margin: var(--zd_size6) 0 ;
-}
-
-.listItemContainer {
-  padding: var(--zd_size10) 0 ;
-}
-
-.responsivelistItemContainer {
-  padding: var(--zd_size10) 0 0 ;
-}
-
-.readonly {
-  --textboxicon_icon_cursor: not-allowed;
-}
-
-.transparentContainer .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.transparentContainer:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
-
-.disable {
-  color: var(--zdt_select_disable_text);
-}
-
-.leftIcon {
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  width: var(--zd_size30) ;
-}
-
-[dir=ltr] .leftIcon {
-  left: 0 ;
-}
-
-[dir=rtl] .leftIcon {
-  right: 0 ;
-}
-
-[dir=ltr] .iconSelect {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30) ;
-}
-
-.dropBoxList {
-  padding: var(--zd_size10) 0 ;
-}
-
-.responsivedropBoxList {
-  padding: var(--zd_size10) 0 0 0 ;
-}
-
-.rotate {
-  transform: rotateX(180deg);
-}
-
-.iconOnHoverStyle .arrowIcon,
-.iconOnHoverReadonly .arrowIcon,
-.iconOnHoverReadonly:hover .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.iconOnHoverStyle:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
-
-.loader {
-  padding: var(--zd_size10) ;
+.input {
+  cursor: pointer;
+}
+
+.small {
+  max-height: var(--zd_size200) ;
+}
+
+.medium {
+  max-height: var(--zd_size350) ;
+}
+
+.large {
+  max-height: var(--zd_size400) ;
+}
+
+.emptyState {
+  font-size: var(--zd_font_size14) ;
+  color: var(--zdt_select_emptystate_text);
+  composes: semibold from '../common/common.module.css';
+}
+
+.box_small .emptyState {
+  padding: var(--zd_size12) var(--zd_size6) ;
+}
+
+.box_medium .emptyState {
+  padding: var(--zd_size12) var(--zd_size15) ;
+}
+
+.hide {
+  composes: vishidden from '../common/common.module.css';
+}
+
+.container {
+  position: relative;
+}
+/* css:lineheight-validation:ignore */
+.arrowIcon {
+  height: var(--zd_size8) ;
+  line-height: var(--zd_size8);
+}
+
+.small.search {
+  padding: 0 var(--zd_size5) ;
+}
+
+.medium.search {
+  padding: var(--zd_size3) var(--zd_size20) 0 ;
+}
+
+.title {
+  margin-bottom: var(--zd_size6) ;
+}
+
+.groupTitle {
+  margin: var(--zd_size6) 0 ;
+}
+
+.listItemContainer {
+  padding: var(--zd_size10) 0 ;
+}
+
+.responsivelistItemContainer {
+  padding: var(--zd_size10) 0 0 ;
+}
+
+.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+
+.transparentContainer .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.transparentContainer:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+
+.disable {
+  color: var(--zdt_select_disable_text);
+}
+
+.leftIcon {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--zd_size30) ;
+}
+
+[dir=ltr] .leftIcon {
+  left: 0 ;
+}
+
+[dir=rtl] .leftIcon {
+  right: 0 ;
+}
+
+[dir=ltr] .iconSelect {
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=rtl] .iconSelect {
+  padding-right: var(--zd_size30) ;
+}
+
+.dropBoxList {
+  padding: var(--zd_size10) 0 ;
+}
+
+.responsivedropBoxList {
+  padding: var(--zd_size10) 0 0 0 ;
+}
+
+.rotate {
+  transform: rotateX(180deg);
+}
+
+.iconOnHoverStyle .arrowIcon,
+.iconOnHoverReadonly .arrowIcon,
+.iconOnHoverReadonly:hover .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.iconOnHoverStyle:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+
+.loader {
+  padding: var(--zd_size10) ;
 }

package/lib/Select/SelectWithAvatar.js

@@ -258,7 +258,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         size: tagSize
       })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _MultiSelectModule["default"].textBox
+        className: _MultiSelectModule["default"].textBox,
+        dataId: "".concat(dataId, "_textBox")
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         a11y: {
           ariaActivedescendant: selectedId,
@@ -304,7 +305,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needResponsive: needResponsive,
           isPadding: false,
           isResponsivePadding: true,
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_dropbox")
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _MultiSelectModule["default"].loader
@@ -342,6 +344,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             role: 'heading'
           }
         })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          dataId: "".concat(dataId, "_Options"),
           activeId: selectedId,
           suggestions: suggestions,
           getRef: _this2.suggestionItemRef,

package/lib/Select/SelectWithIcon.js

@@ -531,7 +531,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           customClass: "".concat(tabletMode ? _SelectModule["default"].responsivedropBoxList : _SelectModule["default"].dropBoxList, " ").concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : ''),
           shrink: true,
-          eleRef: _this5.scrollContentRef
+          eleRef: _this5.scrollContentRef,
+          dataId: "".concat(dataId, "_Options")
         }, options.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (options, i) {
           var iconName = options.iconName,
               iconSize = options.iconSize,

package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap

@@ -16,9 +16,9 @@ exports[`SelectWithAvatar rendering the defult props 1`] = `
     >
       <div
         class="grow basis shrinkOff"
-        data-id="boxComponent"
+        data-id="selectWithAvatar_textBox"
         data-selector-id="box"
-        data-test-id="boxComponent"
+        data-test-id="selectWithAvatar_textBox"
       >
         <input
           aria-activedescendant=""