@zohodesk/components 1.0.0-alpha-227 → 1.0.0-alpha-228

package/README.md

@@ -32,6 +32,9 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-228
+
+- Button =>  danger, primary loader color issue solved
 # 1.0.0-alpha-227
 
 - isReadOnly and needEffect prop added in Tag Component for read-only case

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

@@ -66,6 +66,8 @@
 	--zdt_button_tick_primary_border: var(--zdt_cta_secondary_text);
 	--zdt_button_loading_default_bg: var(--dot_ebonyclay);
 	--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
 	
 	/* button group */
 	--zdt_buttongroup_default_bg: var(--dot_ebonyclay);

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

@@ -66,6 +66,8 @@
 	--zdt_button_tick_primary_border: var(--zdt_cta_secondary_text);
 	--zdt_button_loading_default_bg: var(--dot_white);
 	--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
+	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
 	
 	/* button group */
 	--zdt_buttongroup_default_bg: var(--dot_white);

package/es/Animation/Animation.js

@@ -139,14 +139,13 @@ Animation.defaultProps = {
   isActive: false,
   name: 'fadeIn',
   unmountOnExit: true
-};
-Animation.propTypesDescription = {
-  name: ' ',
-  children: ' ',
-  enterDuration: ' ',
-  exitDuration: ' ',
-  isActive: ' '
-};
+}; // Animation.propTypesDescription = {
+//   name: ' ',
+//   children: ' ',
+//   enterDuration: ' ',
+//   exitDuration: ' ',
+//   isActive: ' '
+// };
 
 if (false) {
   Animation.docs = {

package/es/Avatar/Avatar.js

@@ -197,16 +197,16 @@ Avatar.propTypes = {
   customProps: PropTypes.shape({
     AvatarProps: PropTypes.object
   })
-};
-Avatar.propTypesDescription = {
-  name: ' ',
-  size: ' ',
-  src: ' ',
-  palette: ' ',
-  onClick: ' ',
-  shape: ' ',
-  title: ' '
-};
+}; // Avatar.propTypesDescription = {
+//   name: ' ',
+//   size: ' ',
+//   src: ' ',
+//   palette: ' ',
+//   onClick: ' ',
+//   shape: ' ',
+//   title: ' '
+// };
+
 Avatar.invalidImageURLs = [];
 Avatar.validImageURLs = [];
 

package/es/Button/Button.js

@@ -36,7 +36,7 @@ export default class Button extends React.Component {
     let paletteLower = palette.toLowerCase();
     let statusLower = status.toLowerCase();
     let classList = needAppearance ? `${style[paletteLower]} ${rounded ? style.rounded : ''} ${!children ? style[size.toLowerCase()] : `${style[`${size}Btn`]} 
-             ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`}` : `${style.default}`;
+             ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`} ${statusLower !== 'none' ? style.loader : ''}` : `${style.default}`;
     return /*#__PURE__*/React.createElement("button", {
       className: `${customButton} ${classList} ${isBold ? style.bold : ''}  `,
       "data-id": disabled ? `${dataId}_disabled` : dataId,
@@ -45,12 +45,12 @@ export default class Button extends React.Component {
       "data-title": title,
       type: "button",
       ref: getRef
-    }, children ? children : text, status !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+    }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
       className: style.overlay
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`]}` : style.success}`
+      className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`] ? style[`${size}loading`] : ''}` : style.success}`
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${customStatus} ${statusLower === 'loading' ? `${style.loadingelement} ${style[`${paletteLower}element`]}` : `${style.successelement} ${style[`${paletteLower}success`]}`}`
+      className: `${customStatus} ${statusLower === 'loading' ? `${style.loadingelement} ${style[`${paletteLower}element`] ? style[`${paletteLower}element`] : ''}` : `${style.successelement} ${style[`${paletteLower}success`] ? style[`${paletteLower}success`] : ''}`}`
     }))));
   }
 
@@ -89,18 +89,17 @@ Button.propTypes = {
     customStatus: PropTypes.string,
     customStatusSize: PropTypes.string
   })
-};
-Button.propTypesDescription = {
-  onClick: ' ',
-  text: ' ',
-  palette: ' ',
-  disabled: ' ',
-  size: ' ',
-  rounded: ' ',
-  status: ' ',
-  isBold: ' ',
-  children: ' '
-};
+}; // Button.propTypesDescription = {
+//   onClick: ' ',
+//   text: ' ',
+//   palette: ' ',
+//   disabled: ' ',
+//   size: ' ',
+//   rounded: ' ',
+//   status: ' ',
+//   isBold: ' ',
+//   children: ' '
+// };
 
 if (false) {
   Button.docs = {

package/es/Button/Button.module.css

@@ -362,17 +362,20 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .primarysuccess {
   --button_success_border_color: var(--zdt_button_default_border);
 }
+
 .primaryfilled .successelement {
   --button_success_border_color: var(--zdt_button_tick_primary_border);
 }
@@ -456,7 +459,6 @@
   top: calc(var(--zd_size2) * -1);
   width: var(--zd_size6);
   transform: scaleX(-1) rotate(135deg);
-  -ms-transform: scaleX(-1) rotate(135deg);
   -moz-transform: scaleX(-1) rotate(135deg);
   -webkit-transform: scaleX(-1) rotate(135deg);
   transform-origin: center;
@@ -515,4 +517,6 @@
     height: var(--zd_size15);
     width: var(--zd_size6);
   }
-}
+}
+
+.loader{color:var(--dot_mirror)}

package/es/Card/Card.js

@@ -278,11 +278,10 @@ Card.defaultProps = {
   scrollAt: '10',
   a11y: {},
   isPercentageScroll: false
-};
-Card.propTypesDescription = {
-  children: ' ',
-  isScrollAttribute: ' '
-};
+}; // Card.propTypesDescription = {
+//   children: ' ',
+//   isScrollAttribute: ' '
+// };
 
 if (false) {
   Card.docs = {

package/es/DropBox/DropBox.js

@@ -66,7 +66,7 @@ export class DropBoxElement extends React.Component {
     } = this.props;
     let {
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
 
     if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
       isAbsolutePositioningNeeded = true;
@@ -212,7 +212,7 @@ export default class DropBox extends React.Component {
     } : {};
     const {
       direction
-    } = this.context;
+    } = this.context || {};
     const dropBoxEle = /*#__PURE__*/React.createElement(DropBoxElement, _extends({
       isModel: isModel,
       direction: direction

package/es/ListItem/ListContainer.js

@@ -79,7 +79,7 @@ ListContainer.defaultProps = {
   target: 'blank',
   needBorder: true,
   a11y: {},
-  customClass: {},
+  customClass: '',
   customProps: {}
 };
 export default ListContainer;
@@ -106,13 +106,8 @@ ListContainer.propTypes = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
-  customClass: PropTypes.shape({
-    customListItem: PropTypes.string,
-    customTickIcon: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    ListItemProps: PropTypes.object
-  })
+  customClass: PropTypes.string,
+  customProps: PropTypes.object
 };
 
 if (false) {

package/es/PopOver/PopOver.js

@@ -135,26 +135,25 @@ PopOver.propTypes = {
   size: PropTypes.string,
   togglePopup: PropTypes.func,
   top: PropTypes.string
-};
-PopOver.propTypesDescription = {
-  right: ' ',
-  left: ' ',
-  top: ' ',
-  bottom: ' ',
-  arrowRight: ' ',
-  arrowLeft: ' ',
-  arrowTop: ' ',
-  arrowBottom: ' ',
-  arrowPosition: ' ',
-  boxPosition: ' ',
-  size: ' ',
-  children: ' ',
-  onPopupOpen: ' ',
-  isPopupOpen: ' ',
-  onPopupClose: ' ',
-  getTargetRef: ' ',
-  getContainerRef: ' '
-};
+}; // PopOver.propTypesDescription = {
+//   right: ' ',
+//   left: ' ',
+//   top: ' ',
+//   bottom: ' ',
+//   arrowRight: ' ',
+//   arrowLeft: ' ',
+//   arrowTop: ' ',
+//   arrowBottom: ' ',
+//   arrowPosition: ' ',
+//   boxPosition: ' ',
+//   size: ' ',
+//   children: ' ',
+//   onPopupOpen: ' ',
+//   isPopupOpen: ' ',
+//   onPopupClose: ' ',
+//   getTargetRef: ' ',
+//   getContainerRef: ' '
+// };
 
 if (false) {
   PopOver.docs = {

package/es/Popup/Popup.js

@@ -422,7 +422,7 @@ const Popup = function (Component) {
       // isResizeHandling --->>> Window resize and dropBox resize
       const {
         direction
-      } = this.context;
+      } = this.context || {};
       const {
         placeHolderElement,
         dropElement

package/es/Ribbon/Ribbon.js

@@ -38,14 +38,14 @@ Ribbon.propTypes = {
   text: PropTypes.string,
   type: PropTypes.oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
   customClass: PropTypes.string
-};
-Ribbon.propTypesDescription = {
-  text: ' ',
-  type: ' ',
-  children: ' ',
-  palette: ' ',
-  size: ' '
-};
+}; // Ribbon.propTypesDescription = {
+//   text: ' ',
+//   type: ' ',
+//   children: ' ',
+//   palette: ' ',
+//   size: ' '
+// };
+
 Ribbon.defaultProps = {
   palette: 'default',
   size: 'large',

package/es/Stencils/Stencils.js

@@ -30,12 +30,11 @@ Stencils.defaultProps = {
   shape: 'rect',
   size: 'medium',
   customClass: ''
-};
-Stencils.propTypesDescription = {
-  shape: ' ',
-  size: ' ',
-  palette: ' '
-};
+}; // Stencils.propTypesDescription = {
+//   shape: ' ',
+//   size: ' ',
+//   palette: ' '
+// };
 
 if (false) {
   Stencils.docs = {

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -23,7 +23,7 @@ export default class VelocityAnimation extends React.Component {
     let {
       direction,
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
     let enterAnimationObj = {
       fade: 'transition.fadeIn',
       slideDown: 'slideDown',

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -41,7 +41,7 @@ export default class VelocityAnimationGroup extends React.Component {
     let {
       direction,
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
     let childProps = clearProps(this.props);
     let enterAnimationObj = {
       fade: 'transition.fadeIn',

package/lib/Animation/Animation.js

@@ -188,14 +188,13 @@ Animation.defaultProps = {
   isActive: false,
   name: 'fadeIn',
   unmountOnExit: true
-};
-Animation.propTypesDescription = {
-  name: ' ',
-  children: ' ',
-  enterDuration: ' ',
-  exitDuration: ' ',
-  isActive: ' '
-};
+}; // Animation.propTypesDescription = {
+//   name: ' ',
+//   children: ' ',
+//   enterDuration: ' ',
+//   exitDuration: ' ',
+//   isActive: ' '
+// };
 
 if (false) {
   Animation.docs = {

package/lib/Avatar/Avatar.js

@@ -259,16 +259,16 @@ Avatar.propTypes = {
   customProps: _propTypes["default"].shape({
     AvatarProps: _propTypes["default"].object
   })
-};
-Avatar.propTypesDescription = {
-  name: ' ',
-  size: ' ',
-  src: ' ',
-  palette: ' ',
-  onClick: ' ',
-  shape: ' ',
-  title: ' '
-};
+}; // Avatar.propTypesDescription = {
+//   name: ' ',
+//   size: ' ',
+//   src: ' ',
+//   palette: ' ',
+//   onClick: ' ',
+//   shape: ' ',
+//   title: ' '
+// };
+
 Avatar.invalidImageURLs = [];
 Avatar.validImageURLs = [];
 

package/lib/Button/Button.js

@@ -81,7 +81,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           customStatusSize = _customClass$customSt2 === void 0 ? '' : _customClass$customSt2;
       var paletteLower = palette.toLowerCase();
       var statusLower = status.toLowerCase();
-      var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : '')) : "".concat(_ButtonModule["default"]["default"]);
+      var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : ''), " ").concat(statusLower !== 'none' ? _ButtonModule["default"].loader : '') : "".concat(_ButtonModule["default"]["default"]);
       return /*#__PURE__*/_react["default"].createElement("button", {
         className: "".concat(customButton, " ").concat(classList, " ").concat(isBold ? _ButtonModule["default"].bold : '', "  "),
         "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
@@ -90,12 +90,12 @@ var Button = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         type: "button",
         ref: getRef
-      }, children ? children : text, status !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
+      }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
         className: _ButtonModule["default"].overlay
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")]) : _ButtonModule["default"].success)
+        className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")] ? _ButtonModule["default"]["".concat(size, "loading")] : '') : _ButtonModule["default"].success)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customStatus, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loadingelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "element")]) : "".concat(_ButtonModule["default"].successelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "success")]))
+        className: "".concat(customStatus, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loadingelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "element")] ? _ButtonModule["default"]["".concat(paletteLower, "element")] : '') : "".concat(_ButtonModule["default"].successelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "success")] ? _ButtonModule["default"]["".concat(paletteLower, "success")] : ''))
       }))));
     }
   }]);
@@ -138,18 +138,17 @@ Button.propTypes = {
     customStatus: _propTypes["default"].string,
     customStatusSize: _propTypes["default"].string
   })
-};
-Button.propTypesDescription = {
-  onClick: ' ',
-  text: ' ',
-  palette: ' ',
-  disabled: ' ',
-  size: ' ',
-  rounded: ' ',
-  status: ' ',
-  isBold: ' ',
-  children: ' '
-};
+}; // Button.propTypesDescription = {
+//   onClick: ' ',
+//   text: ' ',
+//   palette: ' ',
+//   disabled: ' ',
+//   size: ' ',
+//   rounded: ' ',
+//   status: ' ',
+//   isBold: ' ',
+//   children: ' '
+// };
 
 if (false) {
   Button.docs = {

package/lib/Button/Button.module.css

@@ -362,17 +362,20 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .primarysuccess {
   --button_success_border_color: var(--zdt_button_default_border);
 }
+
 .primaryfilled .successelement {
   --button_success_border_color: var(--zdt_button_tick_primary_border);
 }
@@ -456,7 +459,6 @@
   top: calc(var(--zd_size2) * -1);
   width: var(--zd_size6);
   transform: scaleX(-1) rotate(135deg);
-  -ms-transform: scaleX(-1) rotate(135deg);
   -moz-transform: scaleX(-1) rotate(135deg);
   -webkit-transform: scaleX(-1) rotate(135deg);
   transform-origin: center;
@@ -515,4 +517,6 @@
     height: var(--zd_size15);
     width: var(--zd_size6);
   }
-}
+}
+
+.loader{color:var(--dot_mirror)}

package/lib/Card/Card.js

@@ -358,11 +358,10 @@ Card.defaultProps = {
   scrollAt: '10',
   a11y: {},
   isPercentageScroll: false
-};
-Card.propTypesDescription = {
-  children: ' ',
-  isScrollAttribute: ' '
-};
+}; // Card.propTypesDescription = {
+//   children: ' ',
+//   isScrollAttribute: ' '
+// };
 
 if (false) {
   Card.docs = {

package/lib/DropBox/DropBox.js

@@ -118,7 +118,9 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
           targetOffset = _this$props2.targetOffset,
           zIndexStyle = _this$props2.zIndexStyle,
           customStyle = _this$props2.customStyle;
-      var isReducedMotion = this.context.isReducedMotion;
+
+      var _ref = this.context || {},
+          isReducedMotion = _ref.isReducedMotion;
 
       if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
         isAbsolutePositioningNeeded = true;
@@ -278,7 +280,9 @@ var DropBox = /*#__PURE__*/function (_React$Component2) {
       var zIndexStyle = isActive && needAutoZindex ? {
         zIndex: this.getNextIndex()
       } : {};
-      var direction = this.context.direction;
+
+      var _ref2 = this.context || {},
+          direction = _ref2.direction;
 
       var dropBoxEle = /*#__PURE__*/_react["default"].createElement(DropBoxElement, _extends({
         isModel: isModel,

package/lib/ListItem/ListContainer.js

@@ -87,7 +87,7 @@ ListContainer.defaultProps = {
   target: 'blank',
   needBorder: true,
   a11y: {},
-  customClass: {},
+  customClass: '',
   customProps: {}
 };
 var _default = ListContainer;
@@ -115,13 +115,8 @@ ListContainer.propTypes = {
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool
   }),
-  customClass: _propTypes["default"].shape({
-    customListItem: _propTypes["default"].string,
-    customTickIcon: _propTypes["default"].string
-  }),
-  customProps: _propTypes["default"].shape({
-    ListItemProps: _propTypes["default"].object
-  })
+  customClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].object
 };
 
 if (false) {

package/lib/PopOver/PopOver.js

@@ -184,26 +184,25 @@ PopOver.propTypes = {
   size: _propTypes["default"].string,
   togglePopup: _propTypes["default"].func,
   top: _propTypes["default"].string
-};
-PopOver.propTypesDescription = {
-  right: ' ',
-  left: ' ',
-  top: ' ',
-  bottom: ' ',
-  arrowRight: ' ',
-  arrowLeft: ' ',
-  arrowTop: ' ',
-  arrowBottom: ' ',
-  arrowPosition: ' ',
-  boxPosition: ' ',
-  size: ' ',
-  children: ' ',
-  onPopupOpen: ' ',
-  isPopupOpen: ' ',
-  onPopupClose: ' ',
-  getTargetRef: ' ',
-  getContainerRef: ' '
-};
+}; // PopOver.propTypesDescription = {
+//   right: ' ',
+//   left: ' ',
+//   top: ' ',
+//   bottom: ' ',
+//   arrowRight: ' ',
+//   arrowLeft: ' ',
+//   arrowTop: ' ',
+//   arrowBottom: ' ',
+//   arrowPosition: ' ',
+//   boxPosition: ' ',
+//   size: ' ',
+//   children: ' ',
+//   onPopupOpen: ' ',
+//   isPopupOpen: ' ',
+//   onPopupClose: ' ',
+//   getTargetRef: ' ',
+//   getContainerRef: ' '
+// };
 
 if (false) {
   PopOver.docs = {

package/lib/Popup/Popup.js

@@ -476,8 +476,11 @@ var Popup = function Popup(Component) {
 
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
+
         // isResizeHandling --->>> Window resize and dropBox resize
-        var direction = this.context.direction;
+        var _ref3 = this.context || {},
+            direction = _ref3.direction;
+
         var placeHolderElement = this.placeHolderElement,
             dropElement = this.dropElement;
         var needArrow = this.getNeedArrow(this);
@@ -513,12 +516,12 @@ var Popup = function Popup(Component) {
               customOrder: customOrder
             });
 
-            var _ref3 = betterPosition || {},
-                view = _ref3.view,
-                views = _ref3.views,
-                viewsOffset = _ref3.viewsOffset,
-                targetOffset = _ref3.targetOffset,
-                popupOffset = _ref3.popupOffset;
+            var _ref4 = betterPosition || {},
+                view = _ref4.view,
+                views = _ref4.views,
+                viewsOffset = _ref4.viewsOffset,
+                targetOffset = _ref4.targetOffset,
+                popupOffset = _ref4.popupOffset;
 
             if (position !== view || !isPopupReady) {
               _this4.setState({
@@ -576,25 +579,25 @@ var Popup = function Popup(Component) {
                     customOrder: customOrder
                   });
 
-                  var _ref4 = betterPosition || {},
-                      view = _ref4.view,
-                      views = _ref4.views,
-                      _ref4$viewsOffset = _ref4.viewsOffset,
-                      viewsOffset = _ref4$viewsOffset === void 0 ? {} : _ref4$viewsOffset,
-                      targetOffset = _ref4.targetOffset,
-                      popupOffset = _ref4.popupOffset;
-
-                  var _ref5 = positionsOffset[position] || {},
-                      _ref5$left = _ref5.left,
-                      oldLeft = _ref5$left === void 0 ? '' : _ref5$left,
-                      _ref5$top = _ref5.top,
-                      oldTop = _ref5$top === void 0 ? '' : _ref5$top;
-
-                  var _ref6 = viewsOffset[view] || {},
+                  var _ref5 = betterPosition || {},
+                      view = _ref5.view,
+                      views = _ref5.views,
+                      _ref5$viewsOffset = _ref5.viewsOffset,
+                      viewsOffset = _ref5$viewsOffset === void 0 ? {} : _ref5$viewsOffset,
+                      targetOffset = _ref5.targetOffset,
+                      popupOffset = _ref5.popupOffset;
+
+                  var _ref6 = positionsOffset[position] || {},
                       _ref6$left = _ref6.left,
-                      left = _ref6$left === void 0 ? '' : _ref6$left,
+                      oldLeft = _ref6$left === void 0 ? '' : _ref6$left,
                       _ref6$top = _ref6.top,
-                      top = _ref6$top === void 0 ? '' : _ref6$top;
+                      oldTop = _ref6$top === void 0 ? '' : _ref6$top;
+
+                  var _ref7 = viewsOffset[view] || {},
+                      _ref7$left = _ref7.left,
+                      left = _ref7$left === void 0 ? '' : _ref7$left,
+                      _ref7$top = _ref7.top,
+                      top = _ref7$top === void 0 ? '' : _ref7$top;
 
                   var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top; // let isInViewPort = viewPort.isInViewPort(
                   //   placeHolderElement,
@@ -658,11 +661,11 @@ var Popup = function Popup(Component) {
         var height = popupSize.height,
             width = popupSize.width;
 
-        var _ref7 = this.size || {},
-            _ref7$height = _ref7.height,
-            oldHeight = _ref7$height === void 0 ? 0 : _ref7$height,
-            _ref7$width = _ref7.width,
-            oldWidth = _ref7$width === void 0 ? 0 : _ref7$width;
+        var _ref8 = this.size || {},
+            _ref8$height = _ref8.height,
+            oldHeight = _ref8$height === void 0 ? 0 : _ref8$height,
+            _ref8$width = _ref8.width,
+            oldWidth = _ref8$width === void 0 ? 0 : _ref8$width;
 
         var _this$state = this.state,
             isPopupReady = _this$state.isPopupReady,

package/lib/Ribbon/Ribbon.js

@@ -84,14 +84,14 @@ Ribbon.propTypes = {
   text: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
   customClass: _propTypes["default"].string
-};
-Ribbon.propTypesDescription = {
-  text: ' ',
-  type: ' ',
-  children: ' ',
-  palette: ' ',
-  size: ' '
-};
+}; // Ribbon.propTypesDescription = {
+//   text: ' ',
+//   type: ' ',
+//   children: ' ',
+//   palette: ' ',
+//   size: ' '
+// };
+
 Ribbon.defaultProps = {
   palette: 'default',
   size: 'large',

package/lib/Stencils/Stencils.js

@@ -77,12 +77,11 @@ Stencils.defaultProps = {
   shape: 'rect',
   size: 'medium',
   customClass: ''
-};
-Stencils.propTypesDescription = {
-  shape: ' ',
-  size: ' ',
-  palette: ' '
-};
+}; // Stencils.propTypesDescription = {
+//   shape: ' ',
+//   size: ' ',
+//   palette: ' '
+// };
 
 if (false) {
   Stencils.docs = {

package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -63,9 +63,11 @@ var VelocityAnimation = /*#__PURE__*/function (_React$Component) {
           isCustomized = _this$props.isCustomized,
           needUIPack = _this$props.needUIPack,
           isFlex = _this$props.isFlex;
-      var _this$context = this.context,
-          direction = _this$context.direction,
-          isReducedMotion = _this$context.isReducedMotion;
+
+      var _ref = this.context || {},
+          direction = _ref.direction,
+          isReducedMotion = _ref.isReducedMotion;
+
       var enterAnimationObj = {
         fade: 'transition.fadeIn',
         slideDown: 'slideDown',

package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -80,9 +80,11 @@ var VelocityAnimationGroup = /*#__PURE__*/function (_React$Component) {
           isCustomized = _this$props.isCustomized,
           name = _this$props.name,
           needUIPack = _this$props.needUIPack;
-      var _this$context = this.context,
-          direction = _this$context.direction,
-          isReducedMotion = _this$context.isReducedMotion;
+
+      var _ref = this.context || {},
+          direction = _ref.direction,
+          isReducedMotion = _ref.isReducedMotion;
+
       var childProps = clearProps(this.props);
       var enterAnimationObj = {
         fade: 'transition.fadeIn',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-227",
+  "version": "1.0.0-alpha-228",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",