@zohodesk/components 1.0.0-temp-119 → 1.0.0-temp-120

package/assets/Appearance/dark/mode/darkMode.module.css

@@ -30,6 +30,7 @@
 	--zdt_avatarteam_secondary_bg: var(--dot_ebonyclay);
 	--zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
 	--zdt_avatarteam_nofill_hover_border: var(--dot_oslogrey);
+	--zdt_avatarteam_innerCircle: var(--dot_ebonyclay);
 	
 	/* button */
 	--zdt_button_default_text: var(--zdt_cta_alpha_text);

package/assets/Appearance/default/mode/defaultMode.module.css

@@ -30,6 +30,7 @@
 	--zdt_avatarteam_secondary_bg: var(--dot_white);
 	--zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
 	--zdt_avatarteam_nofill_hover_border: var(--dot_slateGrey);
+	--zdt_avatarteam_innerCircle: var(--dot_white);
 	
 	/* button */
 	--zdt_button_default_text: var(--zdt_cta_alpha_text);

package/assets/Appearance/pureDark/mode/pureDarkMode.module.css

@@ -30,6 +30,7 @@
 	--zdt_avatarteam_secondary_bg: #212121;
 	--zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
 	--zdt_avatarteam_nofill_hover_border: var(--dot_oslogrey);
+	--zdt_avatarteam_innerCircle: #212121;
 	
 	/* button */
 	--zdt_button_default_text: var(--zdt_cta_alpha_text);

package/es/Avatar/Avatar.js

@@ -124,7 +124,9 @@ export default class Avatar extends React.Component {
       customClass,
       alternateSrc,
       isAnimate,
-      customProps
+      customProps,
+      needInnerborder,
+      needDefaultBorder
     } = this.props;
     let {
       AvatarProps = {}
@@ -138,7 +140,8 @@ export default class Avatar extends React.Component {
     let showInitial = !showAvatar || showAvatar && isInvalidImageList;
     const showAlternateAvatar = alternateSrc ? showInitial : false;
     let border = borderOnHover || onClick;
-    let borderStyle = (!src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
+    let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
+    let borderStyle = (!src || !showAvatar || showInitial || showDefaultBorder) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
     borderStyle = showAlternateAvatar ? '' : borderStyle;
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
@@ -148,17 +151,17 @@ export default class Avatar extends React.Component {
     }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
       className: `${style.initial}`,
       "data-id": `${dataId}_AvatarInitial`
-    }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
-      className: `${style.image} ${isAnimate ? style.animate : ''}`,
+    }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: `${style.shadow} ${textStyle} `
+    }, /*#__PURE__*/React.createElement("img", {
+      className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerborder ? style.innerBorder : ''}`,
       "data-id": `${dataId}_AvatarImg`,
       name: name,
       onError: this.putInvalidImageURLJSON,
       onLoad: this.putValidImageURLJSON,
       src: showAlternateAvatar ? alternateSrc : src,
       alt: name
-    }), !isValidImageList && !showAlternateAvatar ? null : /*#__PURE__*/React.createElement("span", {
-      className: `${style.shadow} ${textStyle} `
-    })));
+    }))));
   }
 }
 Avatar.defaultProps = defaultProps;

package/es/Avatar/Avatar.module.css

@@ -79,6 +79,9 @@
 [dir=rtl] .animate{
   animation-duration: var(--zd_transition2);
 }
+.innerBorder{
+  border: 1px solid var(--zdt_avatarteam_innerCircle);
+}
 .square_small {
   --avatar_border_radius: 4px;
 }

package/es/Avatar/props/defaultProps.js

@@ -10,5 +10,7 @@ export const defaultProps = {
   borderOnActive: false,
   borderOnHover: false,
   customProps: {},
-  isAnimate: true
+  isAnimate: true,
+  needInnerborder: false,
+  needDefaultBorder: false
 };

package/es/Avatar/props/propTypes.js

@@ -19,5 +19,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     AvatarProps: PropTypes.object
   }),
-  isAnimate: PropTypes.bool
+  isAnimate: PropTypes.bool,
+  needInnerborder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool
 };

package/es/AvatarTeam/AvatarTeam.js

@@ -31,7 +31,10 @@ export default class AvatarTeam extends React.Component {
       customClass,
       borderOnActive,
       borderOnHover,
-      customProps
+      needInnerborder,
+      needBorder,
+      customProps,
+      needDefaultBorder
     } = this.props;
     let {
       AvatarTeamProps = {},
@@ -56,7 +59,10 @@ export default class AvatarTeam extends React.Component {
       needTitle: needTitle,
       customClass: customAvatar,
       borderOnActive: borderOnActive,
-      borderOnHover: border
+      borderOnHover: border,
+      needInnerborder: needInnerborder,
+      needBorder: needBorder,
+      needDefaultBorder: needDefaultBorder
     }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
       className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
           ${style[`${size}team`]} ${customAvatarTeam}`

package/es/AvatarTeam/AvatarTeam.module.css

@@ -3,6 +3,9 @@
   --avatarteam_border_width: var(--zd_size1);
   --avatarteam_border_style: solid;
   --avatarteam_border_color: var(--zdt_avatarteam_default_border);
+  --avatarteam_outline_width: var(--zd_size1);
+  --avatarteam_outline_style: solid;
+  --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
   --avatarteam_width: var(--zd_size5);
   --avatarteam_height: var(--zd_size5);
@@ -23,6 +26,9 @@
   top: var(--avatarteam_top_top);
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var(--avatarteam_outline_color);
   border-width: var(--avatarteam_border_width);
   border-style: var(--avatarteam_border_style);
   border-color: var(--avatarteam_border_color);
@@ -64,6 +70,9 @@
   height: inherit;
   width: inherit;
   top: var(--avatarteam_bottom_top);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var( --avatarteam_outline_color);
 }
 .team:after, .team:before {
   border: inherit;

package/es/AvatarTeam/props/defaultProps.js

@@ -9,5 +9,8 @@ export const defaultProps = {
   customClass: {},
   borderOnActive: false,
   borderOnHover: false,
-  customProps: {}
+  customProps: {},
+  needInnerborder: true,
+  needBorder: true,
+  needDefaultBorder: true
 };

package/es/AvatarTeam/props/propTypes.js

@@ -9,6 +9,7 @@ export const propTypes = {
   size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
+  needBorder: PropTypes.bool,
   title: PropTypes.string,
   customClass: PropTypes.shape({
     customAvatar: PropTypes.string,
@@ -16,6 +17,8 @@ export const propTypes = {
   }),
   borderOnActive: PropTypes.bool,
   borderOnHover: PropTypes.bool,
+  needInnerborder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool,
   customProps: PropTypes.shape({
     AvatarTeamProps: PropTypes.object,
     AvatarProps: PropTypes.object

package/es/DateTime/DateWidget.js

@@ -920,8 +920,7 @@ class DateWidgetComponent extends React.Component {
       targetOffset,
       isRestrictScroll,
       dropBoxPortalId,
-      a11y,
-      boxSize
+      a11y
     } = this.props;
     const {
       selected: value = '',
@@ -1007,8 +1006,7 @@ class DateWidgetComponent extends React.Component {
       positionsOffset: positionsOffset,
       targetOffset: targetOffset,
       isRestrictScroll: isRestrictScroll,
-      dropBoxPortalId: dropBoxPortalId,
-      boxSize: boxSize
+      dropBoxPortalId: dropBoxPortalId
     }));
   }
 }

package/lib/Avatar/Avatar.js

@@ -150,7 +150,9 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         customClass = _this$props2.customClass,
         alternateSrc = _this$props2.alternateSrc,
         isAnimate = _this$props2.isAnimate,
-        customProps = _this$props2.customProps;
+        customProps = _this$props2.customProps,
+        needInnerborder = _this$props2.needInnerborder,
+        needDefaultBorder = _this$props2.needDefaultBorder;
       var _customProps$AvatarPr = customProps.AvatarProps,
         AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       var textStyle = textPalette ? _AvatarModule["default"][textPalette] : palette === 'secondary' ? _AvatarModule["default"].white : _AvatarModule["default"].black;
@@ -162,7 +164,8 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
       var showInitial = !showAvatar || showAvatar && isInvalidImageList;
       var showAlternateAvatar = alternateSrc ? showInitial : false;
       var border = borderOnHover || onClick;
-      var borderStyle = (!src || !showAvatar || showInitial) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
+      var showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
+      var borderStyle = (!src || !showAvatar || showInitial || showDefaultBorder) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
       borderStyle = showAlternateAvatar ? '' : borderStyle;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: "".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(customClass ? customClass : ''),
@@ -172,17 +175,17 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
       }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarModule["default"].initial),
         "data-id": "".concat(dataId, "_AvatarInitial")
-      }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
-        className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : ''),
+      }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " ")
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerborder ? _AvatarModule["default"].innerBorder : ''),
         "data-id": "".concat(dataId, "_AvatarImg"),
         name: name,
         onError: this.putInvalidImageURLJSON,
         onLoad: this.putValidImageURLJSON,
         src: showAlternateAvatar ? alternateSrc : src,
         alt: name
-      }), !isValidImageList && !showAlternateAvatar ? null : /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " ")
-      })));
+      }))));
     }
   }]);
   return Avatar;

package/lib/Avatar/Avatar.module.css

@@ -79,6 +79,9 @@
 [dir=rtl] .animate{
   animation-duration: var(--zd_transition2);
 }
+.innerBorder{
+  border: 1px solid var(--zdt_avatarteam_innerCircle);
+}
 .square_small {
   --avatar_border_radius: 4px;
 }

package/lib/Avatar/props/defaultProps.js

@@ -16,6 +16,8 @@ var defaultProps = {
   borderOnActive: false,
   borderOnHover: false,
   customProps: {},
-  isAnimate: true
+  isAnimate: true,
+  needInnerborder: false,
+  needDefaultBorder: false
 };
 exports.defaultProps = defaultProps;

package/lib/Avatar/props/propTypes.js

@@ -26,6 +26,8 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     AvatarProps: _propTypes["default"].object
   }),
-  isAnimate: _propTypes["default"].bool
+  isAnimate: _propTypes["default"].bool,
+  needInnerborder: _propTypes["default"].bool,
+  needDefaultBorder: _propTypes["default"].bool
 };
 exports.propTypes = propTypes;

package/lib/AvatarTeam/AvatarTeam.js

@@ -55,7 +55,10 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
         customClass = _this$props.customClass,
         borderOnActive = _this$props.borderOnActive,
         borderOnHover = _this$props.borderOnHover,
-        customProps = _this$props.customProps;
+        needInnerborder = _this$props.needInnerborder,
+        needBorder = _this$props.needBorder,
+        customProps = _this$props.customProps,
+        needDefaultBorder = _this$props.needDefaultBorder;
       var _customProps$AvatarTe = customProps.AvatarTeamProps,
         AvatarTeamProps = _customProps$AvatarTe === void 0 ? {} : _customProps$AvatarTe,
         _customProps$AvatarPr = customProps.AvatarProps,
@@ -79,7 +82,10 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
         needTitle: needTitle,
         customClass: customAvatar,
         borderOnActive: borderOnActive,
-        borderOnHover: border
+        borderOnHover: border,
+        needInnerborder: needInnerborder,
+        needBorder: needBorder,
+        needDefaultBorder: needDefaultBorder
       }, AvatarProps)), /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarTeamModule["default"].team, " ").concat(isFilled ? "".concat(_AvatarTeamModule["default"]["".concat(palette, "Filled")]) : _AvatarTeamModule["default"].nofill, " \n          ").concat(_AvatarTeamModule["default"]["".concat(size, "team")], " ").concat(customAvatarTeam)
       }));

package/lib/AvatarTeam/AvatarTeam.module.css

@@ -3,6 +3,9 @@
   --avatarteam_border_width: var(--zd_size1);
   --avatarteam_border_style: solid;
   --avatarteam_border_color: var(--zdt_avatarteam_default_border);
+  --avatarteam_outline_width: var(--zd_size1);
+  --avatarteam_outline_style: solid;
+  --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
   --avatarteam_width: var(--zd_size5);
   --avatarteam_height: var(--zd_size5);
@@ -23,6 +26,9 @@
   top: var(--avatarteam_top_top);
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var(--avatarteam_outline_color);
   border-width: var(--avatarteam_border_width);
   border-style: var(--avatarteam_border_style);
   border-color: var(--avatarteam_border_color);
@@ -64,6 +70,9 @@
   height: inherit;
   width: inherit;
   top: var(--avatarteam_bottom_top);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var( --avatarteam_outline_color);
 }
 .team:after, .team:before {
   border: inherit;

package/lib/AvatarTeam/props/defaultProps.js

@@ -15,6 +15,9 @@ var defaultProps = {
   customClass: {},
   borderOnActive: false,
   borderOnHover: false,
-  customProps: {}
+  customProps: {},
+  needInnerborder: true,
+  needBorder: true,
+  needDefaultBorder: true
 };
 exports.defaultProps = defaultProps;

package/lib/AvatarTeam/props/propTypes.js

@@ -16,6 +16,7 @@ var propTypes = {
   size: _propTypes["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
   src: _propTypes["default"].string,
   textPalette: _propTypes["default"].oneOf(['white', 'black']),
+  needBorder: _propTypes["default"].bool,
   title: _propTypes["default"].string,
   customClass: _propTypes["default"].shape({
     customAvatar: _propTypes["default"].string,
@@ -23,6 +24,8 @@ var propTypes = {
   }),
   borderOnActive: _propTypes["default"].bool,
   borderOnHover: _propTypes["default"].bool,
+  needInnerborder: _propTypes["default"].bool,
+  needDefaultBorder: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     AvatarTeamProps: _propTypes["default"].object,
     AvatarProps: _propTypes["default"].object

package/lib/DateTime/DateWidget.js

@@ -906,8 +906,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         targetOffset = _this$props11.targetOffset,
         isRestrictScroll = _this$props11.isRestrictScroll,
         dropBoxPortalId = _this$props11.dropBoxPortalId,
-        a11y = _this$props11.a11y,
-        boxSize = _this$props11.boxSize;
+        a11y = _this$props11.a11y;
       var _this$state5 = this.state,
         _this$state5$selected = _this$state5.selected,
         value = _this$state5$selected === void 0 ? '' : _this$state5$selected,
@@ -992,8 +991,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         positionsOffset: positionsOffset,
         targetOffset: targetOffset,
         isRestrictScroll: isRestrictScroll,
-        dropBoxPortalId: dropBoxPortalId,
-        boxSize: boxSize
+        dropBoxPortalId: dropBoxPortalId
       }));
     }
   }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-119",
+  "version": "1.0.0-temp-120",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,