@zohodesk/components 1.0.0-alpha-249 → 1.0.0-alpha-252

package/README.md

@@ -32,6 +32,29 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-252
+
+ - **Select,GroupSelect,SelectWithAvatar,SelectWithIcon,MultiSelect,MultiSelectWithAvatar** - Initial Loader and Scroll End Loader added.
+
+ - **componentAppearanceVariableJson** 
+
+   `zdt_datetime_today_bg` variable renamed as `zdt_datetime_selected_bg`
+
+   `zdt_datetime_today_border` variable added. 
+
+ - **CalendarView** - `isToday` prop added to display today's date as a separate style.
+
+ - **DateTime.module.css** - `.today` class renamed as `.active` class. 
+
+# 1.0.0-alpha-251
+
+ - Heading component - font reset css fix
+
+# 1.0.0-alpha-250
+
+ - Heading (accessibility) - new component added
+ - Avatar => component initial rendering optimization.
+
 # 1.0.0-alpha-249
 
  - color => secondary_border light mode color changes

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

@@ -294,7 +294,8 @@
 	--zdt_datetime_invalid_text: var(--dot_riverbed);
 	--zdt_datetime_invalid_hover_text: var(--dot_bittersweet);
 	--zdt_datetime_invaliddate_text: rgba(222, 53, 53, 0.3);
-	--zdt_datetime_today_bg: var(--zdt_cta_primary_bg);
+	--zdt_datetime_selected_bg: var(--zdt_cta_primary_bg);
+	--zdt_datetime_today_border: var(--zdt_cta_primary_border);
 	--zdt_datetime_today_text: var(--dot_white);
 	--zdt_datetime_text: var(--dot_shuttleGrey);
 	

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

@@ -294,7 +294,8 @@
 	--zdt_datetime_invalid_text: var(--dot_paleNavy);
 	--zdt_datetime_invalid_hover_text: var(--dot_brightRed);
 	--zdt_datetime_invaliddate_text: rgba(222, 53, 53, 0.3);
-	--zdt_datetime_today_bg: var(--zdt_cta_primary_bg);
+	--zdt_datetime_selected_bg: var(--zdt_cta_primary_bg);
+	--zdt_datetime_today_border: var(--zdt_cta_primary_border);
 	--zdt_datetime_today_text: var(--dot_white);
 	--zdt_datetime_text: var(--dot_shuttleGrey);
 	

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

@@ -294,7 +294,8 @@
 	--zdt_datetime_invalid_text: var(--dot_riverbed);
 	--zdt_datetime_invalid_hover_text: var(--dot_bittersweet);
 	--zdt_datetime_invaliddate_text: rgba(222, 53, 53, 0.3);
-	--zdt_datetime_today_bg: var(--zdt_cta_primary_bg);
+	--zdt_datetime_selected_bg: var(--zdt_cta_primary_bg);
+	--zdt_datetime_today_border: var(--zdt_cta_primary_border);
 	--zdt_datetime_today_text: var(--dot_white);
 	--zdt_datetime_text: var(--dot_shuttleGrey);
 	

package/es/Accordion/Accordion.js

@@ -9,22 +9,18 @@ export default class Accordion extends React.Component {
     };
     this.selectMenu = this.selectMenu.bind(this);
   }
-
   selectMenu(selectedItem) {
     let {
       onSelect,
       disableInternalState
     } = this.props;
-
     if (onSelect) {
       onSelect(selectedItem);
     }
-
     !disableInternalState && this.setState({
       selectedItem
     });
   }
-
   componentWillReceiveProps(nextProps) {
     if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
       this.setState({
@@ -32,7 +28,6 @@ export default class Accordion extends React.Component {
       });
     }
   }
-
   render() {
     let {
       className,
@@ -69,11 +64,9 @@ export default class Accordion extends React.Component {
       "aria-haspopup": ariaHaspopup
     }, children);
   }
-
 }
 Accordion.propTypes = Accordion_propTypes;
 Accordion.defaultProps = Accordion_defaultProps;
-
 if (false) {
   Accordion.docs = {
     componentGroup: 'Animation',

package/es/Accordion/AccordionItem.js

@@ -8,7 +8,6 @@ export default class AccordionItem extends React.Component {
     super(props);
     this.equalityCheck = this.equalityCheck.bind(this);
   }
-
   equalityCheck() {
     let {
       equalityCheck,
@@ -17,7 +16,6 @@ export default class AccordionItem extends React.Component {
     } = this.props;
     return equalityCheck ? equalityCheck(id, selectedItem) : selectedItem == id;
   }
-
   render() {
     let {
       id,
@@ -49,11 +47,9 @@ export default class AccordionItem extends React.Component {
       isActive: this.equalityCheck()
     }, children[1]));
   }
-
 }
 AccordionItem.propTypes = AccordionItem_propTypes;
 AccordionItem.defaultProps = AccordionItem_defaultProps;
-
 if (false) {
   AccordionItem.docs = {
     componentGroup: 'Animation',

package/es/Accordion/docs/Accordion__Demo.docs.js

@@ -5,7 +5,6 @@ export default class Accordion__Demo extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Accordion, {
       selectedItem: "1",
@@ -72,7 +71,6 @@ export default class Accordion__Demo extends React.Component {
       }
     }, "Data4")))));
   }
-
 }
 Accordion__Demo.docs = {
   componentGroup: 'Animation',

package/es/Animation/Animation.js

@@ -7,7 +7,6 @@ export default class Animation extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       name,
@@ -121,11 +120,9 @@ export default class Animation extends React.Component {
       onExit: onExit
     }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
   }
-
 }
 Animation.propTypes = propTypes;
 Animation.defaultProps = defaultProps;
-
 if (false) {
   Animation.docs = {
     componentGroup: 'Animation',

package/es/Animation/docs/Animation__default.docs.js

@@ -21,9 +21,7 @@ export default class Animation__default extends React.Component {
       style: styles
     }, "Animation - Default"))));
   }
-
 }
-
 if (false) {
   Animation__default.docs = {
     componentGroup: 'Animation',

package/es/Animation/docs/Animation__fadeIn.docs.js

@@ -21,9 +21,7 @@ export default class Animation__fadeIn extends React.Component {
       style: style
     }, "Animation - fadeIn"))));
   }
-
 }
-
 if (false) {
   Animation__fadeIn.docs = {
     componentGroup: 'Animation',

package/es/Animation/docs/Animation__scaleIn.docs.js

@@ -21,9 +21,7 @@ export default class Animation__scaleIn extends React.Component {
       style: style
     }, "Animation - scaleIn"))));
   }
-
 }
-
 if (false) {
   Animation__scaleIn.docs = {
     componentGroup: 'Animation',

package/es/Animation/docs/Animation__skewIn.docs.js

@@ -21,9 +21,7 @@ export default class Animation__skewIn extends React.Component {
       style: style
     }, "Animation - zoomIn "))));
   }
-
 }
-
 if (false) {
   Animation__skewIn.docs = {
     componentGroup: 'Animation',

package/es/Animation/docs/Animation__slideDown.docs.js

@@ -21,9 +21,7 @@ export default class Animation__slideDown extends React.Component {
       style: style
     }, "Animation - slideDown"))));
   }
-
 }
-
 if (false) {
   Animation__slideDown.docs = {
     componentGroup: 'Animation',

package/es/Animation/docs/Animation__slideLeft.docs.js

@@ -21,9 +21,7 @@ export default class Animation__slideLeft extends React.Component {
       style: style
     }, "Animation - slideLeft"))));
   }
-
 }
-
 if (false) {
   Animation__slideLeft.docs = {
     componentGroup: 'Animation',

package/es/Animation/docs/Animation__zoomIn.docs.js

@@ -21,9 +21,7 @@ export default class Animation__zoomIn extends React.Component {
       style: style
     }, "Animation - zoomIn "))));
   }
-
 }
-
 if (false) {
   Animation__zoomIn.docs = {
     componentGroup: 'Animation',

package/es/AppContainer/AppContainer.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -29,27 +28,22 @@ export default class AppContainer extends React.Component {
       getTooltipContainer: () => this.containerElement
     });
   }
-
   mouseOverDispatch(e) {
     if (this.tooltipRef) {
       this.tooltipRef.handleOver(e, this.containerElement);
     }
   }
-
   removeTimeout() {
     if (this.timer) {
       this.timer = clearTimeout(this.timer);
     }
   }
-
   handleOver(e) {
     if (this.timer) {
       this.timer = clearTimeout(this.timer);
     }
-
     this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
   }
-
   getContainerRef(ref) {
     let {
       eleRef
@@ -57,11 +51,9 @@ export default class AppContainer extends React.Component {
     this.containerElement = ref;
     eleRef && eleRef(ref);
   }
-
   setTooltipRef(ref) {
     this.tooltipRef = ref;
   }
-
   componentDidMount() {
     if (this.containerElement) {
       this.containerElement.addEventListener('mouseover', this.handleOver, false);
@@ -69,7 +61,6 @@ export default class AppContainer extends React.Component {
       this.tooltipRef.observeElement();
     }
   }
-
   componentWillUnmount() {
     if (this.containerElement) {
       this.containerElement.removeEventListener('mouseover', this.handleOver, false);
@@ -77,7 +68,6 @@ export default class AppContainer extends React.Component {
       this.tooltipRef.unObserveElement();
     }
   }
-
   render() {
     let {
       className,
@@ -94,7 +84,8 @@ export default class AppContainer extends React.Component {
       ExtraProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${style.container} ${className}` //onMouseOver={this.handleOver}
+      className: `${style.container} ${className}`
+      //onMouseOver={this.handleOver}
       ,
       dataId: dataId,
       tagName: tagName,
@@ -109,11 +100,9 @@ export default class AppContainer extends React.Component {
       customClass: tooltipClass
     }, TooltipProps))));
   }
-
 }
 AppContainer.propTypes = propTypes;
 AppContainer.defaultProps = defaultProps;
-
 if (false) {
   AppContainer.docs = {
     componentGroup: 'Template',

package/es/AppContainer/docs/AppContainer__default.docs.js

@@ -9,9 +9,7 @@ export default class AppContainer__default extends React.Component {
       "data-title": "appcontainer"
     }, "Application Container")));
   }
-
 }
-
 if (false) {
   AppContainer__default.docs = {
     componentGroup: 'Template',

package/es/Avatar/Avatar.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -18,94 +17,94 @@ eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
 'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
 "info","default"] }]
 */
-
 export default class Avatar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      invalidImgArr: Avatar.invalidImageURLs,
-      validImgArr: Avatar.validImageURLs
+      isLoaded: false
     };
     this.putInvalidImageURLJSON = this.putInvalidImageURLJSON.bind(this);
     this.putValidImageURLJSON = this.putValidImageURLJSON.bind(this);
     this.getInitialByFullName = this.getInitialByFullName.bind(this);
   }
-
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.invalidImgArr !== Avatar.invalidImageURLs) {
-      this.setState({
-        invalidImgArr: Avatar.invalidImageURLs
-      });
-    }
-
-    if (prevState.validImgArr !== Avatar.validImageURLs) {
+    let {
+      src
+    } = this.props;
+    let {
+      isLoaded
+    } = this.state;
+    if (prevProps.src !== src) {
       this.setState({
-        validImgArr: Avatar.validImageURLs
+        isLoaded: !isLoaded
       });
     }
   }
-
   putInvalidImageURLJSON() {
     const {
       src,
       alternateSrc
     } = this.props;
+    let {
+      isLoaded
+    } = this.state;
     let _validImgArr = [...Avatar.validImageURLs];
     let _invalidImgArr = [...Avatar.invalidImageURLs];
 
-    if (alternateSrc) {
-      _validImgArr.push(alternateSrc);
-    }
+    // if (alternateSrc) {
+    //   _validImgArr.push(alternateSrc);
+    // }
 
     const validIndex = _validImgArr.indexOf(src);
-
     if (validIndex !== -1) {
       _validImgArr.splice(validIndex, 1);
     }
-
     _invalidImgArr.push(src);
-
     Avatar.invalidImageURLs = _invalidImgArr;
     Avatar.validImageURLs = _validImgArr;
     this.setState({
-      validImgArr: _validImgArr,
-      invalidImgArr: _invalidImgArr
+      isLoaded: !isLoaded
     });
   }
-
   putValidImageURLJSON() {
     const {
       src
     } = this.props;
+    let {
+      isLoaded
+    } = this.state;
     const validImgArr = Avatar.validImageURLs;
     const invalidImgArr = Avatar.invalidImageURLs;
-
     if (src && validImgArr.indexOf(src) === -1 && invalidImgArr.indexOf(src) === -1) {
       let _validImgArr = [...validImgArr];
-
       _validImgArr.push(src);
-
       Avatar.validImageURLs = _validImgArr;
       this.setState({
-        validImgArr: _validImgArr
+        isLoaded: !isLoaded
       });
     }
   }
-  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
-
 
+  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
   getInitialByFullName() {
     let fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     fullName = (fullName || '').trim();
     let nameList = fullName.split(' ');
-
     if (nameList.length === 1) {
       return getInitial('', nameList[0]);
     }
-
     return getInitial(nameList[0], nameList[1]);
   }
 
+  // componentDidMount() {
+  //   const { src } = this.props;
+  //   const validImgArr = Avatar.validImageURLs;
+  //   if (validImgArr.indexOf(src) === -1) {
+  //     let _validImgArr = [...validImgArr];
+  //     _validImgArr.push(src);
+  //   }
+  // }
+
   render() {
     let {
       src,
@@ -124,24 +123,21 @@ export default class Avatar extends React.Component {
       textPalette,
       customClass,
       alternateSrc,
+      isAnimate,
       customProps
     } = this.props;
     let {
       AvatarProps = {}
     } = customProps;
     let textStyle = textPalette ? style[textPalette] : palette === 'secondary' ? style.white : style.black;
-    let {
-      invalidImgArr,
-      validImgArr
-    } = this.state;
     let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
     initial = initial || this.getInitialByFullName(name);
-    let isInvalidImageList = invalidImgArr.indexOf(src) !== -1;
-    let isValidImageList = validImgArr.indexOf(src) !== -1;
+    let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1;
+    let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
     let border = borderOnHover || onClick;
     let borderStyle = (!src || src && isInvalidImageList || !isValidImageList) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
     let showAvatar = src && !isInvalidImageList;
-    let showInitial = showAvatar && !isValidImageList || !showAvatar;
+    let showInitial = !showAvatar || showAvatar && !isValidImageList;
     const showAlternateAvatar = alternateSrc ? showInitial : false;
     borderStyle = showAlternateAvatar ? '' : borderStyle;
     return /*#__PURE__*/React.createElement("div", _extends({
@@ -153,7 +149,7 @@ export default class Avatar extends React.Component {
       className: `${style.initial}`,
       "data-id": `${dataId}_AvatarInitial`
     }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
-      className: !isValidImageList && !showAlternateAvatar ? style.none : style.image,
+      className: `${style.image} ${isAnimate ? style.animate : ''}`,
       "data-id": `${dataId}_AvatarImg`,
       name: name,
       onError: this.putInvalidImageURLJSON,
@@ -163,13 +159,11 @@ export default class Avatar extends React.Component {
       className: `${style.shadow} ${textStyle} `
     })));
   }
-
 }
 Avatar.defaultProps = defaultProps;
 Avatar.propTypes = propTypes;
 Avatar.invalidImageURLs = [];
 Avatar.validImageURLs = [];
-
 if (false) {
   Avatar.docs = {
     componentGroup: 'Avatar Group',

package/es/Avatar/Avatar.module.css

@@ -17,19 +17,17 @@
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
   vertical-align: middle;
   font-size: var(--avatar_font_size);
+  color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
-  color: var(--avatar_text_color);
 }
 .border {
   border-color: var(--avatar_border_color);
 }
-.borderOnHover:hover,
-.borderOnActive {
+.borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
-.avatar,
-.primary {
+.avatar, .primary {
   background-color: var(--avatar_bg_color);
 }
 .shadow {
@@ -37,27 +35,49 @@
   height: 100%;
   width: 100%;
   top: 0;
-  left: 0;
   pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
+[dir=ltr] .shadow {
+  left: 0;
+}
+[dir=rtl] .shadow {
+  right: 0;
+}
 .shadow.black {
   box-shadow: inset 0px 0px 5px var(--avatar_boxshadow);
 }
 .shadow.white {
   box-shadow: inset 0px 0px 11px var(--avatar_boxshadow);
 }
-.avatar,
-.circle {
+.avatar, .circle {
   border-radius: var(--avatar_border_radius);
 }
 .border {
   --avatar_border_width: 1px;
 }
 .image {
-  border-radius: var(--avatar_border_radius);
   width: 100%;
   height: 100%;
+  position: absolute;
+  top:0;
+  z-index: 0;
+  border-radius: var(--avatar_border_radius);
+}
+[dir=ltr] .image {
+  left:0;
+}
+[dir=rtl] .image { 
+  right:0;
+}
+.animate{
+  composes:fadeIn modeForward from './../common/animation.module.css';
+}
+[dir=ltr] .animate{
+  animation-duration: var(--zd_transition2);
+}
+[dir=rtl] .animate{
+  animation-duration: var(--zd_transition2);
 }
 .square_small {
   --avatar_border_radius: 4px;

package/es/Avatar/docs/Avatar__custom.docs.js

@@ -4,7 +4,7 @@ import style from '../../common/docStyle.module.css';
 export default class Avatar__custom extends Component {
   render() {
     let sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'],
-        shapes = ['circle'];
+      shapes = ['circle'];
     return /*#__PURE__*/React.createElement("div", null, shapes.map(shape => /*#__PURE__*/React.createElement("div", {
       key: shape
     }, sizes.map(size => /*#__PURE__*/React.createElement("span", {
@@ -17,9 +17,7 @@ export default class Avatar__custom extends Component {
       customClass: style.customAvatar
     }))))));
   }
-
 }
-
 if (false) {
   Avatar__custom.docs = {
     componentGroup: 'Avatar Group',

package/es/Avatar/docs/Avatar__default.docs.js

@@ -4,7 +4,7 @@ import style from '../../common/docStyle.module.css';
 export default class Avatar__default extends React.Component {
   render() {
     let sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'],
-        shapes = ['circle', 'square'];
+      shapes = ['circle', 'square'];
     return /*#__PURE__*/React.createElement("div", null, shapes.map(shape => /*#__PURE__*/React.createElement("div", {
       key: shape
     }, sizes.map(size => /*#__PURE__*/React.createElement("span", {
@@ -17,9 +17,7 @@ export default class Avatar__default extends React.Component {
       shape: shape
     }))))));
   }
-
 }
-
 if (false) {
   Avatar__default.docs = {
     componentGroup: 'Avatar Group',

package/es/Avatar/docs/Avatar__palette.docs.js

@@ -4,7 +4,7 @@ import style from '../../common/docStyle.module.css';
 export default class Avatar__palette extends Component {
   render() {
     let shapes = ['circle', 'square'],
-        palettes = ['primary', 'secondary', 'info'];
+      palettes = ['primary', 'secondary', 'info'];
     return /*#__PURE__*/React.createElement("div", null, palettes.map(palette => /*#__PURE__*/React.createElement("div", {
       key: palette
     }, shapes.map(shape => /*#__PURE__*/React.createElement("span", {
@@ -37,9 +37,7 @@ export default class Avatar__palette extends Component {
       textPalette: "black"
     })));
   }
-
 }
-
 if (false) {
   Avatar__palette.docs = {
     componentGroup: 'Avatar Group',

package/es/Avatar/docs/Avatar__text.docs.js

@@ -4,7 +4,7 @@ import style from '../../common/docStyle.module.css';
 export default class Avatar__text extends Component {
   render() {
     let sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'],
-        shapes = ['circle', 'square'];
+      shapes = ['circle', 'square'];
     return /*#__PURE__*/React.createElement("div", null, shapes.map(shape => /*#__PURE__*/React.createElement("div", {
       key: shape
     }, sizes.map(size => /*#__PURE__*/React.createElement("span", {
@@ -16,9 +16,7 @@ export default class Avatar__text extends Component {
       shape: shape
     }))))));
   }
-
 }
-
 if (false) {
   Avatar__text.docs = {
     componentGroup: 'Avatar Group',