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

package/README.md

@@ -32,6 +32,18 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-230
+
+- Avatar, AdvancedGroupMultiSelect, AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, Select, SelectWithAvatar, SelectWithIcon, TextBoxIcon => Tooltip undefined case solved
+- Select  , MultiSelect => boxSize prop added
+
+# 1.0.0-alpha-229
+
+- MultiSelect, AdvancedMultiSelect => disabledOption Clear icon handled properly
+
+# 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

@@ -145,7 +145,7 @@ export default class Avatar extends React.Component {
     borderStyle = showAlternateAvatar ? '' : borderStyle;
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
-      "data-title": needTitle ? title ? title : name : '',
+      "data-title": needTitle ? title ? title : name : null,
       "data-id": dataId,
       onClick: onClick
     }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
@@ -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/ListItem/ListItem.module.css

@@ -70,7 +70,6 @@
 [dir=rtl] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
 .value,
 .children {
   composes: dotted from '../common/common.module.css';

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -887,7 +887,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, children ? /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -23,7 +23,7 @@ import style from './AdvancedMultiSelect.module.css';
 /**** Methods ****/
 
 import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
-import { filterSelectedOptions } from '../utils/dropDownUtils';
+import { filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
 /* eslint-disable react/sort-prop-types */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -45,6 +45,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     this.state = Object.assign({}, oldState, {
       showedSelectedOptionsCount: !getIsEmptyValue(selectedOptionsLimit) && selectedOptionsLen > selectedOptionsLimit ? selectedOptionsLimit : selectedOptionsLen
     });
+    this.getIsShowClearIcon = makeGetIsShowClearIcon();
     this.handleFilterSuggestions = this.handleFilterSuggestions.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleSelectOption = this.handleSelectOption.bind(this);
@@ -191,7 +192,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       imageField,
       optionType,
       iconName,
-      iconSize
+      iconSize,
+      disabledOptions
     } = props;
     return this.formatSelectedOptions({
       options: selectedOptionDetails,
@@ -200,7 +202,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       imageField,
       optionType,
       iconName,
-      iconSize
+      iconSize,
+      disabledOptions
     });
   }
 
@@ -350,7 +353,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isBoxPaddingNeed,
       getFooter,
       customProps,
-      needEffect
+      needEffect,
+      disabledOptions
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -382,10 +386,17 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const moreCount = allselectedOptionIdsLen - showedSelectedOptionsCount;
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
+    let {
+      isShowClearIcon: isShowClear
+    } = this.getIsShowClearIcon({
+      selectedOptions,
+      disabledOptions
+    });
+    let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
@@ -431,7 +442,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         ariaDescribedby: ariaErrorId
       },
       autoComplete: false
-    })), !isReadOnly && !isDisabled && selectedOptions.length > 1 ? /*#__PURE__*/React.createElement(Box, {
+    })), isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
       className: style.delete,
       dataId: dataIdClearIcon,
       "data-title": clearText,

package/es/MultiSelect/MultiSelect.js

@@ -23,7 +23,7 @@ import style from './MultiSelect.module.css';
 /**** Methods ****/
 
 import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString } from '../utils/Common.js';
-import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions } from '../utils/dropDownUtils';
+import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -35,7 +35,8 @@ export class MultiSelectComponent extends React.Component {
     this.getNextAriaId = getUniqueId(this);
     this.getFilterSuggestions = makeGetFilterSuggestions();
     this.formatOptions = makeFormatOptions();
-    this.getSelectedOptions = makeGetSelectedOptions(); //Use in AdvancedMultiSelect component
+    this.getSelectedOptions = makeGetSelectedOptions();
+    this.getIsShowClearIcon = makeGetIsShowClearIcon(); //Use in AdvancedMultiSelect component
 
     this.objectConcat = makeObjectConcat();
     this.formatSelectedOptions = makeFormatOptions();
@@ -740,7 +741,7 @@ export class MultiSelectComponent extends React.Component {
       defaultDropBoxPosition,
       isReadOnly
     } = this.props;
-    !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}Center` : null);
+    !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}` : null);
   }
 
   handlePopupClose(e) {
@@ -871,7 +872,9 @@ export class MultiSelectComponent extends React.Component {
       children,
       customChildrenClass,
       getFooter,
-      needEffect
+      needEffect,
+      disabledOptions,
+      boxSize
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -897,11 +900,17 @@ export class MultiSelectComponent extends React.Component {
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
-    const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
+    let {
+      isShowClearIcon: isShowClear
+    } = this.getIsShowClearIcon({
+      selectedOptions,
+      disabledOptions
+    });
+    const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
@@ -974,7 +983,7 @@ export class MultiSelectComponent extends React.Component {
       dataId: `${dataId}_children`
     }, children) : null)))), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
       animationStyle: animationStyle,
-      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      boxPosition: position || `${defaultDropBoxPosition}`,
       getRef: getContainerRef,
       isActive: isPopupReady,
       isAnimate: isAnimate,
@@ -988,7 +997,8 @@ export class MultiSelectComponent extends React.Component {
       a11y: {
         role: 'listbox',
         ariaMultiselectable: true
-      }
+      },
+      size: boxSize
     }, /*#__PURE__*/React.createElement(Card, {
       customClass: `${style.box} ${style[`${palette}Box`]}`,
       onScroll: this.handleScroll
@@ -1033,7 +1043,7 @@ MultiSelectComponent.propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
   closePopupOnly: PropTypes.func,
   dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  defaultDropBoxPosition: PropTypes.string,
   disableAction: PropTypes.bool,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   emptyMessage: PropTypes.string.isRequired,
@@ -1104,12 +1114,12 @@ MultiSelectComponent.propTypes = {
   customChildrenClass: PropTypes.string,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
   getFooter: PropTypes.func,
-  needEffect: PropTypes.bool
+  needEffect: PropTypes.bool,
+  boxSize: PropTypes.string
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
   dataId: 'multiSelect',
-  defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
   isAnimate: true,
   isDisabled: false,

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -118,7 +118,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

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/Responsive/sizeObservers.js

@@ -25,7 +25,14 @@ function rangeCheck(minValue, maxValue, screenValue) {
   return minValue <= screenValue && maxValue >= screenValue;
 }
 
-export const isTouchDevice = 'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+function isTouchDeviceFunc() {
+  // return window.matchMedia("(pointer: coarse)").matches
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+} // export const isTouchDevice =
+//   'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+
+
+export const isTouchDevice = isTouchDeviceFunc();
 export function isBreackPointMatched(object, screen) {
   if (!isValideBreakPoint(object)) {
     // eslint-disable-next-line no-console

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/Select/GroupSelect.js

@@ -599,7 +599,7 @@ export class GroupSelectComponent extends PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-id": dataIdSlctComp,
-      "data-title": isDisabled ? title : ''
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/es/Select/Select.js

@@ -507,7 +507,7 @@ export class SelectComponent extends Component {
       onFocus,
       isPopupOpen
     } = this.props;
-    !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}Center` : null);
+    !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}` : null);
     !isPopupOpen && typeof onFocus === 'function' && onFocus(e);
   }
 
@@ -743,7 +743,7 @@ export class SelectComponent extends Component {
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
-      "data-title": isDisabled ? title : ''
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
@@ -835,7 +835,7 @@ export class SelectComponent extends Component {
       customProps: TextBoxProps
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
       animationStyle: animationStyle,
-      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      boxPosition: position || `${defaultDropBoxPosition}`,
       getRef: getContainerRef,
       isActive: isPopupReady,
       isAnimate: true,
@@ -912,7 +912,7 @@ SelectComponent.propTypes = {
   className: PropTypes.string,
   closePopupOnly: PropTypes.func,
   dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  defaultDropBoxPosition: PropTypes.string,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   emptyMessage: PropTypes.string,
   excludeOptions: PropTypes.array,
@@ -992,7 +992,6 @@ SelectComponent.defaultProps = {
   animationStyle: 'bounce',
   autoSelectOnType: true,
   dataId: 'selectComponent',
-  defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
   isDefaultSelectValue: true,
   isDisabled: false,

package/es/Select/SelectWithAvatar.js

@@ -167,7 +167,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : ''
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",

package/es/Select/SelectWithIcon.js

@@ -289,7 +289,7 @@ class SelectWithIcon extends Component {
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
-      "data-title": isDisabled ? title : ''
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,