@zohodesk/dot 1.0.0-temp-118 → 1.0.0-temp-119

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/AvatarIcon/AvatarIcon.js

@@ -73,8 +73,6 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
 exports["default"] = AvatarIcon;
 AvatarIcon.defaultProps = _defaultProps.defaultProps;
 AvatarIcon.propTypes = _propTypes.propTypes;
-if (false) {
-  AvatarIcon.docs = {
-    componentGroup: 'Avatar Group'
-  };
-}
+// if (__DOCS__) {
+//   AvatarIcon.docs = { componentGroup: 'Avatar Group' };
+// }

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/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,
+        needDefaultBorder = _this$props.needDefaultBorder;
       var _customProps$AvatarSt = customProps.AvatarStatusProps,
         AvatarStatusProps = _customProps$AvatarSt === void 0 ? {} : _customProps$AvatarSt,
         _customProps$AvatarPr = customProps.AvatarProps,
@@ -72,6 +73,7 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
         initial: initial,
         shape: shape,
         needTitle: needTitle,
+        needDefaultBorder: needDefaultBorder,
         needBorder: needBorder
       }, AvatarProps)), /*#__PURE__*/_react["default"].createElement("span", {
         "data-title": statusTitle,
@@ -84,8 +86,9 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
 exports["default"] = AvatarStatus;
 AvatarStatus.defaultProps = _defaultProps.defaultProps;
 AvatarStatus.propTypes = _propTypes.propTypes;
-if (false) {
-  AvatarStatus.docs = {
-    componentGroup: 'Avatar Group'
-  };
-}
+
+// if (__DOCS__) {
+//   AvatarStatus.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }

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,8 @@ var defaultProps = {
   className: '',
   palette: 'info',
   statusTitle: '',
-  customProps: {}
+  customProps: {},
+  needDefaultBorder: false,
+  needBorder: false
 };
 exports.defaultProps = defaultProps;

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

@@ -4,28 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _propTypes;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var propTypes = {
-  className: _propTypes["default"].string,
-  customTextClass: _propTypes["default"].string,
-  dataId: _propTypes["default"].string,
-  initial: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  needBorder: _propTypes["default"].bool,
-  needTitle: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info', 'default']),
-  shape: _propTypes["default"].string,
-  size: _propTypes["default"].string,
-  src: _propTypes["default"].string,
-  state: _propTypes["default"].string,
-  statusTitle: _propTypes["default"].string,
-  textPalette: _propTypes["default"].oneOf(['white', 'black']),
-  title: _propTypes["default"].string,
-  customProps: _propTypes["default"].shape({
-    AvatarStatusProps: _propTypes["default"].object,
-    AvatarProps: _propTypes["default"].object
-  })
-};
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var propTypes = (_propTypes = {
+  className: _propTypes2["default"].string,
+  customTextClass: _propTypes2["default"].string,
+  dataId: _propTypes2["default"].string,
+  initial: _propTypes2["default"].string,
+  name: _propTypes2["default"].string,
+  needBorder: _propTypes2["default"].bool,
+  needTitle: _propTypes2["default"].bool,
+  onClick: _propTypes2["default"].func,
+  palette: _propTypes2["default"].oneOf(['primary', 'secondary', 'info', 'default']),
+  shape: _propTypes2["default"].string,
+  size: _propTypes2["default"].string,
+  src: _propTypes2["default"].string,
+  state: _propTypes2["default"].string,
+  needDefaultBorder: _propTypes2["default"].bool
+}, _defineProperty(_propTypes, "needBorder", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusTitle", _propTypes2["default"].string), _defineProperty(_propTypes, "textPalette", _propTypes2["default"].oneOf(['white', 'black'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
+  AvatarStatusProps: _propTypes2["default"].object,
+  AvatarProps: _propTypes2["default"].object
+})), _propTypes);
 exports.propTypes = propTypes;

package/lib/avatar/AvatarThread/AvatarThread.js

@@ -95,8 +95,9 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
 exports["default"] = AvatarThread;
 AvatarThread.defaultProps = _defaultProps.defaultProps;
 AvatarThread.propTypes = _propTypes.propTypes;
-if (false) {
-  AvatarThread.docs = {
-    componentGroup: 'Avatar Group'
-  };
-}
+
+// if (__DOCS__) {
+//   AvatarThread.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }