@zohodesk/dot 1.0.0-temp-120 → 1.0.0-temp-122

package/lib/avatar/AvatarCollision/AvatarCollision.module.css

@@ -1,69 +1,69 @@
-.container {
-  position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  vertical-align: middle;
-  border-radius: 50%;
-  padding: var(--zd_size2);
-}
-.on {
-  border: 1px solid var(--zdt_avatarcollision_on_border);
-}
-.off {
-  border: 1px solid var(--zdt_avatarcollision_off_border);
-}
-.idle {
-  composes: on;
-  opacity: 0.4;
-}
-.pop {
-  position: absolute;
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
-  opacity: 0;
-  visibility: hidden;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  transition: opacity var(--zd_transition2);
-  color: var(--zdt_avatarcollision_pop_text);
-  cursor: pointer;
-  transform: translateZ(0);
-  background-color: var(--zdt_avatarcollision_pop_bg);
-}
-[dir=ltr] .pop {
-  left: 0;
-}
-[dir=rtl] .pop {
-  right: 0;
-}
-.icon {
-  position: absolute;
-  line-height: 0;
-  composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
-  color: var(--zdt_avatarcollision_icon_text);
-  font-size: var(--zd_font_size13);
-}
-.container:hover .pop {
-  opacity: 1;
-  visibility: visible;
-}
-
-.off::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  height: var(--zd_size4);
-  border: 1px solid var(--zdt_avatarcollision_off_after_border);
-  background-color: var(--zdt_avatarcollision_off_after_bg);
-}
-
-[dir=ltr] .off::after {
-  left: calc(var(--zd_size5) * -1);
-  right: calc(var(--zd_size5) * -1);
-  transform: translateY(-50%) rotate(130deg);
-}
-
-[dir=rtl] .off::after {
-  right: calc(var(--zd_size5) * -1);
-  left: calc(var(--zd_size5) * -1);
-  transform: translateY(-50%) rotate(-130deg);
-}
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+  border-radius: 50%;
+  padding: var(--zd_size2);
+}
+.on {
+  border: 1px solid var(--zdt_avatarcollision_on_border);
+}
+.off {
+  border: 1px solid var(--zdt_avatarcollision_off_border);
+}
+.idle {
+  composes: on;
+  opacity: 0.4;
+}
+.pop {
+  position: absolute;
+  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  opacity: 0;
+  visibility: hidden;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  transition: opacity var(--zd_transition2);
+  color: var(--zdt_avatarcollision_pop_text);
+  cursor: pointer;
+  transform: translateZ(0);
+  background-color: var(--zdt_avatarcollision_pop_bg);
+}
+[dir=ltr] .pop {
+  left: 0;
+}
+[dir=rtl] .pop {
+  right: 0;
+}
+.icon {
+  position: absolute;
+  line-height: 0;
+  composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_avatarcollision_icon_text);
+  font-size: var(--zd_font_size13);
+}
+.container:hover .pop {
+  opacity: 1;
+  visibility: visible;
+}
+
+.off::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  height: var(--zd_size4);
+  border: 1px solid var(--zdt_avatarcollision_off_after_border);
+  background-color: var(--zdt_avatarcollision_off_after_bg);
+}
+
+[dir=ltr] .off::after {
+  left: calc(var(--zd_size5) * -1);
+  right: calc(var(--zd_size5) * -1);
+  transform: translateY(-50%) rotate(130deg);
+}
+
+[dir=rtl] .off::after {
+  right: calc(var(--zd_size5) * -1);
+  left: calc(var(--zd_size5) * -1);
+  transform: translateY(-50%) rotate(-130deg);
+}

package/lib/avatar/AvatarCollision/props/defaultProps.js

@@ -9,6 +9,7 @@ var defaultProps = {
   isLeft: false,
   isIdle: false,
   size: 'xmedium',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarCollision'
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarCollision/props/propTypes.js

@@ -16,6 +16,7 @@ var propTypes = {
   size: _propTypes["default"].string,
   src: _propTypes["default"].string,
   title: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     AvatarCollisionProps: _propTypes["default"].object,
     AvatarProps: _propTypes["default"].object

package/lib/avatar/AvatarIcon/AvatarIcon.js

@@ -48,7 +48,8 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
         title = _this$props.title,
         borderOnActive = _this$props.borderOnActive,
         borderOnHover = _this$props.borderOnHover,
-        customProps = _this$props.customProps;
+        customProps = _this$props.customProps,
+        dataSelectorId = _this$props.dataSelectorId;
       var _customProps$AvatarIc = customProps.AvatarIconProps,
         AvatarIconProps = _customProps$AvatarIc === void 0 ? {} : _customProps$AvatarIc;
       var border = borderOnHover || onClick;
@@ -59,7 +60,8 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         isInline: true,
         align: "both",
-        isCover: false
+        isCover: false,
+        dataSelectorId: dataSelectorId
       }, AvatarIconProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: name,
         size: iconSize,

package/lib/avatar/AvatarIcon/AvatarIcon.module.css

@@ -1,58 +1,58 @@
-.varClass {
-  --icon_color: var(--zdt_avatarIcon_dark_icon);
-  --border_color: var(--zdt_avatarIcon_default_border);
-  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
-}
-.container {
-  vertical-align: middle;
-  composes: varClass;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 50%;
-  border-color: var(--border_color)
-}
-.borderOnHover:hover, .borderOnActive {
-  border-color: var(--border_hoverColor)
-}
-.default {
-  --border_color: var(--zdt_avatarIcon_default_border);
-  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
-}
-.primary {
-  --border_color: var(--zdt_avatarIcon_primary_border);
-  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
-}
-.secondary {
-  --border_color: var(--zdt_avatarIcon_secondary_border);
-  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
-}
-.success {
-  --border_color: var(--zdt_avatarIcon_success_border);
-  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
-}
-.danger {
-  --border_color: var(--zdt_avatarIcon_danger_border);
-  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
-}
-.iconColor {
-  color: var(--icon_color);
-}
-.icon_danger {
-  --icon_color: var(--zdt_avatarIcon_danger_icon);
-}
-.icon_primary {
-  --icon_color: var(--zdt_avatarIcon_primary_icon);
-}
-.icon_grey {
-  --icon_color: var(--zdt_avatarIcon_grey_icon);
-}
-.icon_success {
-  --icon_color: var(--zdt_avatarIcon_success_icon);
-}
-.icon_smoke18 {
-  --icon_color: var(--zdt_avatarIcon_smoke_icon);
-}
-.icon_dark {
-  --icon_color: var(--zdt_avatarIcon_dark_icon);
-}
-
+.varClass {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.container {
+  vertical-align: middle;
+  composes: varClass;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 50%;
+  border-color: var(--border_color)
+}
+.borderOnHover:hover, .borderOnActive {
+  border-color: var(--border_hoverColor)
+}
+.default {
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.primary {
+  --border_color: var(--zdt_avatarIcon_primary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
+}
+.secondary {
+  --border_color: var(--zdt_avatarIcon_secondary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
+}
+.success {
+  --border_color: var(--zdt_avatarIcon_success_border);
+  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
+}
+.danger {
+  --border_color: var(--zdt_avatarIcon_danger_border);
+  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
+}
+.iconColor {
+  color: var(--icon_color);
+}
+.icon_danger {
+  --icon_color: var(--zdt_avatarIcon_danger_icon);
+}
+.icon_primary {
+  --icon_color: var(--zdt_avatarIcon_primary_icon);
+}
+.icon_grey {
+  --icon_color: var(--zdt_avatarIcon_grey_icon);
+}
+.icon_success {
+  --icon_color: var(--zdt_avatarIcon_success_icon);
+}
+.icon_smoke18 {
+  --icon_color: var(--zdt_avatarIcon_smoke_icon);
+}
+.icon_dark {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+}
+

package/lib/avatar/AvatarIcon/props/defaultProps.js

@@ -15,6 +15,7 @@ var defaultProps = {
   iconColor: 'default',
   borderOnActive: false,
   borderOnHover: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarIcon'
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarIcon/props/propTypes.js

@@ -9,6 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var propTypes = {
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   iconClass: _propTypes["default"].string,
   iconColor: _propTypes["default"].oneOf(['default', 'primary', 'success', 'danger', 'smoke18', 'grey', 'dark']),
   iconSize: _propTypes["default"].string,

package/lib/avatar/AvatarStatus/AvatarStatus.js

@@ -49,7 +49,8 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
         textPalette = _this$props.textPalette,
         customTextClass = _this$props.customTextClass,
         statusTitle = _this$props.statusTitle,
-        customProps = _this$props.customProps;
+        customProps = _this$props.customProps,
+        dataSelectorId = _this$props.dataSelectorId;
       var _customProps$AvatarSt = customProps.AvatarStatusProps,
         AvatarStatusProps = _customProps$AvatarSt === void 0 ? {} : _customProps$AvatarSt,
         _customProps$AvatarPr = customProps.AvatarProps,
@@ -58,7 +59,8 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_AvatarStatusModule["default"].container, " ").concat(className, " ")
       }, AvatarStatusProps, {
         tabIndex: "0",
-        "aria-label": "".concat(title, ", ").concat(name, ", ").concat(statusTitle)
+        "aria-label": "".concat(title, ", ").concat(name, ", ").concat(statusTitle),
+        "data-selector-id": dataSelectorId
       }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         src: src,
         name: name,

package/lib/avatar/AvatarStatus/AvatarStatus.module.css

@@ -1,146 +1,146 @@
-.container {
-  position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  vertical-align: middle;
-}
-.state {
-  position: absolute;
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
-  display: inline-block;
-}
-.circle.state {
-  border: 1px solid var(--zdt_avatarstatus_size_border);
-}
-.small.square.state, .xsmall.square.state {
-  border: 1px solid var(--zdt_avatarstatus_size_border);
-}
-.medium.square.state, .xmedium.square.state, .large.square.state, .xlarge.square.state {
-  border: 2px solid var(--zdt_avatarstatus_size_border);
-}
-.online {
-  composes: state;
-  background-color: var(--zdt_avatarstatus_online_bg);
-}
-
-.offline {
-  composes: state;
-  background-color: var(--zdt_avatarstatus_offline_bg);
-}
-.idle {
-  composes: state;
-  background-color: var(--zdt_avatarstatus_idle_bg);
-}
-
-.small.state,
-.xsmall.state {
-  width: var(--zd_size7);
-  height: var(--zd_size7);
-}
-.medium.state,
-.xmedium.state {
-  width: var(--zd_size9);
-  height: var(--zd_size9);
-}
-.large.state,
-.xlarge.state {
-  width: var(--zd_size12);
-  height: var(--zd_size12);
-}
-
-.small.circle.state {
-  bottom: var(--zd_size1);
-}
-
-[dir=ltr] .small.circle.state {
-  right: calc(var(--zd_size1) * -1);
-}
-
-[dir=rtl] .small.circle.state {
-  left: calc(var(--zd_size1) * -1);
-}
-.xsmall.circle.state {
-  bottom: var(--zd_size3);
-}
-[dir=ltr] .xsmall.circle.state {
-  right: 0;
-}
-[dir=rtl] .xsmall.circle.state {
-  left: 0;
-}
-.medium.circle.state,
-.xmedium.circle.state {
-  bottom: var(--zd_size3);
-}
-[dir=ltr] .medium.circle.state, [dir=ltr] .xmedium.circle.state {
-  right: 0;
-}
-[dir=rtl] .medium.circle.state, [dir=rtl] .xmedium.circle.state {
-  left: 0;
-}
-.large.circle.state {
-  bottom: var(--zd_size7);
-}
-[dir=ltr] .large.circle.state {
-  right: var(--zd_size1);
-}
-[dir=rtl] .large.circle.state {
-  left: var(--zd_size1);
-}
-.xlarge.circle.state {
-  bottom: var(--zd_size6);
-}
-[dir=ltr] .xlarge.circle.state {
-  right: var(--zd_size8);
-}
-[dir=rtl] .xlarge.circle.state {
-  left: var(--zd_size8);
-}
-
-.small.square.state {
-  bottom: calc(var(--zd_size1) * -1);
-}
-
-[dir=ltr] .small.square.state {
-  right: calc(var(--zd_size1) * -1);
-}
-
-[dir=rtl] .small.square.state {
-  left: calc(var(--zd_size1) * -1);
-}
-.xsmall.square.state {
-  bottom: calc(var(--zd_size1) * -1);
-}
-[dir=ltr] .xsmall.square.state {
-  right: calc(var(--zd_size2) * -1);
-}
-[dir=rtl] .xsmall.square.state {
-  left: calc(var(--zd_size2) * -1);
-}
-.medium.square.state,
-.xmedium.square.state {
-  bottom: calc(var(--zd_size2) * -1);
-}
-[dir=ltr] .medium.square.state, [dir=ltr] .xmedium.square.state {
-  right: calc(var(--zd_size4) * -1);
-}
-[dir=rtl] .medium.square.state, [dir=rtl] .xmedium.square.state {
-  left: calc(var(--zd_size4) * -1);
-}
-.large.square.state {
-  bottom: calc(var(--zd_size2) * -1);
-}
-[dir=ltr] .large.square.state {
-  right: calc(var(--zd_size5) * -1);
-}
-[dir=rtl] .large.square.state {
-  left: calc(var(--zd_size5) * -1);
-}
-.xlarge.square.state {
-  bottom: calc(var(--zd_size3) * -1);
-}
-[dir=ltr] .xlarge.square.state {
-  right: calc(var(--zd_size5) * -1);
-}
-[dir=rtl] .xlarge.square.state {
-  left: calc(var(--zd_size5) * -1);
-}
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+}
+.state {
+  position: absolute;
+  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  display: inline-block;
+}
+.circle.state {
+  border: 1px solid var(--zdt_avatarstatus_size_border);
+}
+.small.square.state, .xsmall.square.state {
+  border: 1px solid var(--zdt_avatarstatus_size_border);
+}
+.medium.square.state, .xmedium.square.state, .large.square.state, .xlarge.square.state {
+  border: 2px solid var(--zdt_avatarstatus_size_border);
+}
+.online {
+  composes: state;
+  background-color: var(--zdt_avatarstatus_online_bg);
+}
+
+.offline {
+  composes: state;
+  background-color: var(--zdt_avatarstatus_offline_bg);
+}
+.idle {
+  composes: state;
+  background-color: var(--zdt_avatarstatus_idle_bg);
+}
+
+.small.state,
+.xsmall.state {
+  width: var(--zd_size7);
+  height: var(--zd_size7);
+}
+.medium.state,
+.xmedium.state {
+  width: var(--zd_size9);
+  height: var(--zd_size9);
+}
+.large.state,
+.xlarge.state {
+  width: var(--zd_size12);
+  height: var(--zd_size12);
+}
+
+.small.circle.state {
+  bottom: var(--zd_size1);
+}
+
+[dir=ltr] .small.circle.state {
+  right: calc(var(--zd_size1) * -1);
+}
+
+[dir=rtl] .small.circle.state {
+  left: calc(var(--zd_size1) * -1);
+}
+.xsmall.circle.state {
+  bottom: var(--zd_size3);
+}
+[dir=ltr] .xsmall.circle.state {
+  right: 0;
+}
+[dir=rtl] .xsmall.circle.state {
+  left: 0;
+}
+.medium.circle.state,
+.xmedium.circle.state {
+  bottom: var(--zd_size3);
+}
+[dir=ltr] .medium.circle.state, [dir=ltr] .xmedium.circle.state {
+  right: 0;
+}
+[dir=rtl] .medium.circle.state, [dir=rtl] .xmedium.circle.state {
+  left: 0;
+}
+.large.circle.state {
+  bottom: var(--zd_size7);
+}
+[dir=ltr] .large.circle.state {
+  right: var(--zd_size1);
+}
+[dir=rtl] .large.circle.state {
+  left: var(--zd_size1);
+}
+.xlarge.circle.state {
+  bottom: var(--zd_size6);
+}
+[dir=ltr] .xlarge.circle.state {
+  right: var(--zd_size8);
+}
+[dir=rtl] .xlarge.circle.state {
+  left: var(--zd_size8);
+}
+
+.small.square.state {
+  bottom: calc(var(--zd_size1) * -1);
+}
+
+[dir=ltr] .small.square.state {
+  right: calc(var(--zd_size1) * -1);
+}
+
+[dir=rtl] .small.square.state {
+  left: calc(var(--zd_size1) * -1);
+}
+.xsmall.square.state {
+  bottom: calc(var(--zd_size1) * -1);
+}
+[dir=ltr] .xsmall.square.state {
+  right: calc(var(--zd_size2) * -1);
+}
+[dir=rtl] .xsmall.square.state {
+  left: calc(var(--zd_size2) * -1);
+}
+.medium.square.state,
+.xmedium.square.state {
+  bottom: calc(var(--zd_size2) * -1);
+}
+[dir=ltr] .medium.square.state, [dir=ltr] .xmedium.square.state {
+  right: calc(var(--zd_size4) * -1);
+}
+[dir=rtl] .medium.square.state, [dir=rtl] .xmedium.square.state {
+  left: calc(var(--zd_size4) * -1);
+}
+.large.square.state {
+  bottom: calc(var(--zd_size2) * -1);
+}
+[dir=ltr] .large.square.state {
+  right: calc(var(--zd_size5) * -1);
+}
+[dir=rtl] .large.square.state {
+  left: calc(var(--zd_size5) * -1);
+}
+.xlarge.square.state {
+  bottom: calc(var(--zd_size3) * -1);
+}
+[dir=ltr] .xlarge.square.state {
+  right: calc(var(--zd_size5) * -1);
+}
+[dir=rtl] .xlarge.square.state {
+  left: calc(var(--zd_size5) * -1);
+}

package/lib/avatar/AvatarStatus/props/defaultProps.js

@@ -11,6 +11,7 @@ var defaultProps = {
   className: '',
   palette: 'info',
   statusTitle: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarStatus'
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarStatus/props/propTypes.js

@@ -23,6 +23,7 @@ var propTypes = {
   statusTitle: _propTypes["default"].string,
   textPalette: _propTypes["default"].oneOf(['white', 'black']),
   title: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     AvatarStatusProps: _propTypes["default"].object,
     AvatarProps: _propTypes["default"].object

package/lib/avatar/AvatarThread/AvatarThread.js

@@ -56,14 +56,16 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
         needTitle = _this$props.needTitle,
         customProps = _this$props.customProps,
         iconClass = _this$props.iconClass,
-        getCustomThread = _this$props.getCustomThread;
+        getCustomThread = _this$props.getCustomThread,
+        dataSelectorId = _this$props.dataSelectorId;
       var _customProps$AvatarTh = customProps.AvatarThreadProps,
         AvatarThreadProps = _customProps$AvatarTh === void 0 ? {} : _customProps$AvatarTh,
         _customProps$AvatarPr = customProps.AvatarProps,
         AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       var hoverEffect = showOnHover ? _AvatarThreadModule["default"].hover : '';
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_AvatarThreadModule["default"].container, " ").concat(onClick ? _AvatarThreadModule["default"].pointer : '', " ").concat(hoverEffect)
+        className: "".concat(_AvatarThreadModule["default"].container, " ").concat(onClick ? _AvatarThreadModule["default"].pointer : '', " ").concat(hoverEffect),
+        "data-selector-id": dataSelectorId
       }, AvatarThreadProps), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         initial: initial,
         src: src,