@zohodesk/components 1.2.21 → 1.2.23

package/es/Ribbon/Ribbon.module.css

@@ -3,7 +3,7 @@
   --ribbon_padding: 0;
   --ribbon_text_color: var(--zdt_ribbon_default_text);
   --ribbon_text_transform: none;
-  --ribbon_font_size: var(--zd_font_size13);
+  --ribbon_font_size: 13px;
   --ribbon_bg_color: var(--zdt_ribbon_default_bg);
   --ribbon_box_shadow: none;
   --ribbon_border_width: 0;
@@ -13,12 +13,12 @@
   /* flag ribbon default variable */
 
   /* tag ribbon default variables */
-  --ribbon_tag_before_top: var(--zd_size3);
+  --ribbon_tag_before_top: 3px;
   --ribbon_tag_before_border_style: solid;
   --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
-  --ribbon_tag_before_width: var(--zd_size20);
-  --ribbon_tag_before_height: var(--zd_size20);
-  --ribbon_tag_before_left: calc( var(--zd_size10) * -1 );
+  --ribbon_tag_before_width: 20px;
+  --ribbon_tag_before_height: 20px;
+  --ribbon_tag_before_left: -10px;
   --ribbon_tag_before_border_radius: 3px 0 0 0;
 }[dir=ltr] .varClass {
   --ribbon_flag_border_width: 14px 12px 14px 0
@@ -64,26 +64,26 @@
 .default {
   composes: semibold from '../common/common.module.css';
   display: block;
-  --ribbon_padding: var(--zd_size5) var(--zd_size20);
+  --ribbon_padding: 5px 20px;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
 }
 
 .small {
-  --ribbon_font_size: var(--zd_font_size9);
+  --ribbon_font_size: 9px;
 }
 
 .medium {
-  --ribbon_font_size: var(--zd_font_size11);
+  --ribbon_font_size: 11px;
 }
 
 .large {
-  --ribbon_font_size: var(--zd_font_size13);
+  --ribbon_font_size: 13px;
 }
 
 .xlarge {
-  --ribbon_font_size: var(--zd_font_size14);
+  --ribbon_font_size: 14px;
 }
 
 .palette_default {
@@ -220,11 +220,13 @@
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
+  --ribbon_padding: 4px 24px 4px 6px
+    /*rtl: 4px 6px 4px 24px*/
+  ;
 }
 
 [dir=rtl] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
+  --ribbon_padding: 4px 24px 4px 6px  ;
 }
 
 .flag.small {
@@ -251,19 +253,19 @@
   /*  Variable:Ignore  */
   bottom: -1px;
   content: '';
-  width: var(--zd_size12) ;
+  width: 12px;
   border-style: solid;
   transform: translateZ(0);
   border-width: var(--ribbon_flag_border_width);
 }
 
 [dir=ltr] .flag::after {
-  right: calc( var(--zd_size1) * -1 ) ;
+  right: -1px;
   border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border);
 }
 
 [dir=rtl] .flag::after {
-  left: calc( var(--zd_size1) * -1 ) ;
+  left: -1px;
   border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border);
 }
 
@@ -277,7 +279,7 @@
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  --ribbon_padding: var(--zd_size6) var(--zd_size10);
+  --ribbon_padding: 6px 10px;
   text-align: center;
 }
 
@@ -301,9 +303,9 @@
 .ribbon::before {
   position: absolute;
   content: '';
-  top: 100% ;
-  height: var(--zd_size10) ;
-  width: var(--zd_size10) ;
+  top: 100%;
+  height: 10px;
+  width: 10px;
 }
 
 .ribbon::after, .ribbon::before {
@@ -321,27 +323,27 @@
 }
 
 [dir=ltr] .ribbon::after {
-  right: 0 ;
+  right: 0;
 }
 
 [dir=rtl] .ribbon::after {
-  left: 0 ;
+  left: 0;
 }
 
 [dir=ltr] .ribbon::before {
-  left: 0 ;
+  left: 0;
   transform: rotateY(180deg);
 }
 
 [dir=rtl] .ribbon::before {
-  right: 0 ;
+  right: 0;
   transform: rotateY(-180deg);
 }
 
 .tag {
   composes: semibold from '../common/common.module.css';
   display: inline-block;
-  height: var(--zd_size28) ;
+  height: 28px;
   border-style: solid;
   border-color: var(--zdt_ribbon_default_tag_border);
 }
@@ -353,15 +355,16 @@
   border-radius: 0 3px 3px 0
     /*rtl: 3px 0 0 3px*/
   ;
-  margin-left: var(--zd_size13) ;
-  padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5) ;
+  margin-left: 13px;
+  padding: 6px 8px 6px 5px
+;
 }
 
 [dir=rtl] .tag {
   border-width: 1px 0 1px 1px  ;
   border-radius: 3px 0 0 3px  ;
-  margin-right: var(--zd_size13) ;
-  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8) ;
+  margin-right: 13px;
+  padding: 6px 5px 6px 8px;
 }
 
 .tag::before {
@@ -391,26 +394,26 @@
 .box {
   display: inline-block;
   --ribbon_bg_color: var(--zdt_ribbon_white_bg);
-  --ribbon_padding: var(--zd_size5) var(--zd_size8);
+  --ribbon_padding: 5px 8px;
   border-radius: 3px;
 }
 
 .stamp {
   display: inline-block;
-  --ribbon_padding: var(--zd_size3) var(--zd_size5);
+  --ribbon_padding: 3px 5px;
   --ribbon_text_transform: uppercase;
 }
 
 .sticker {
   display: block;
-  height: var(--zd_size18) ;
+  height: 18px;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
   border-width: 1px 0;
   border-style: solid;
   border-color: var(--zdt_ribbon_flag_white_border);
-  padding: var(--zd_size3) var(--zd_size10) ;
+  padding: 3px 10px;
 }
 
 .sticker.small {
@@ -432,25 +435,25 @@
 .after,
 .before {
   position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  width: var(--zd_size10) ;
+  top: 0;
+  bottom: 0;
+  width: 10px;
 }
 
 [dir=ltr] .after {
-  right: calc( var(--zd_size2) * -1 ) ;
+  right: -2px;
 }
 
 [dir=rtl] .after {
-  left: calc( var(--zd_size2) * -1 ) ;
+  left: -2px;
 }
 
 [dir=ltr] .before {
-  left: calc( var(--zd_size8) * -1 ) ;
+  left: -8px;
 }
 
 [dir=rtl] .before {
-  right: calc( var(--zd_size8) * -1 ) ;
+  right: -8px;
 }
 
 .after::after,
@@ -458,8 +461,8 @@
 .before::after,
 .before::before {
   position: absolute;
-  height: var(--zd_size7) ;
-  width: var(--zd_size7) ;
+  height: 7px;
+  width: 7px;
   content: '';
 }
 
@@ -477,12 +480,12 @@
 
 .after::after,
 .before::after {
-  top: 0 ;
+  top: 0;
 }
 
 .after::before,
 .before::before {
-  bottom: 0 ;
+  bottom: 0;
 }
 
 .children {
@@ -492,11 +495,11 @@
 }
 
 [dir=ltr] .children {
-  margin-right: var(--zd_size4) ;
+  margin-right: 4px;
 }
 
 [dir=rtl] .children {
-  margin-left: var(--zd_size4) ;
+  margin-left: 4px;
 }
 
 .childText {

package/es/RippleEffect/RippleEffect.js

@@ -21,7 +21,9 @@ export default function RippleEffect(props) {
   });
 }
 RippleEffect.defaultProps = defaultProps;
-RippleEffect.propTypes = propTypes; // if (__DOCS__) {
+RippleEffect.propTypes = propTypes;
+
+// if (__DOCS__) {
 //   RippleEffect.docs = {
 //     componentGroup: 'RippleEffect',
 //     folderName: 'Style Guide'

package/es/Select/GroupSelect.js

@@ -2,8 +2,8 @@
 import React, { PureComponent } from 'react';
 import { GroupSelect_defaultProps } from './props/defaultProps';
 import { GroupSelect_propTypes } from './props/propTypes';
-/**** Components ****/
 
+/**** Components ****/
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import Textbox from '../TextBox/TextBox';
@@ -18,14 +18,13 @@ import { getUniqueId } from '../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import style from './Select.module.css';
-/**** Methods ****/
 
+/**** Methods ****/
 import { makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, extractOptionId } from '../utils/dropDownUtils';
 import { getIsEmptyValue, scrollTo, debounce, getSearchString, findScrollEnd, getKeyValue } from '../utils/Common';
-/* eslint-disable react/no-unused-prop-types */
 
+/* eslint-disable react/no-unused-prop-types */
 /* eslint-disable react/sort-prop-types */
-
 /* eslint-disable react/forbid-component-props */
 
 export class GroupSelectComponent extends PureComponent {
@@ -85,11 +84,9 @@ export class GroupSelectComponent extends PureComponent {
     };
     this._isMounted = false;
   }
-
   componentDidMount() {
     this._isMounted = true;
   }
-
   componentDidUpdate(prevProps) {
     let {
       groupedOptions,
@@ -109,7 +106,6 @@ export class GroupSelectComponent extends PureComponent {
     } = this;
     let newOptionIds = allOptionIds;
     let newSelectedId = selectedId;
-
     if (groupedOptions !== prevProps.groupedOptions) {
       let {
         revampedGroups,
@@ -125,7 +121,6 @@ export class GroupSelectComponent extends PureComponent {
         allOptionIds
       });
     }
-
     if (selectedOption !== prevProps.selectedOption) {
       let {
         selectedId,
@@ -137,14 +132,12 @@ export class GroupSelectComponent extends PureComponent {
         hoverIndex
       });
     }
-
     let {
       suggestionOptionIds
     } = this.handleFilterSuggestions();
     let hoverId = getIsEmptyValue(suggestionOptionIds[hoverIndex]) ? '' : suggestionOptionIds[hoverIndex];
     let selSuggestion = this[`suggestion_${hoverId}`];
     isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
-
     if (isPopupOpen !== prevProps.isPopupOpen) {
       if (isPopupOpen) {
         setTimeout(() => {
@@ -163,11 +156,9 @@ export class GroupSelectComponent extends PureComponent {
       }
     }
   }
-
   componentWillUnmount() {
     this._isMounted = false;
   }
-
   handleGetGroupSelectOptions(props) {
     let {
       groupedOptions
@@ -176,7 +167,6 @@ export class GroupSelectComponent extends PureComponent {
       groupedOptions
     });
   }
-
   handleGetSelectedId(props, allOptionIds) {
     let {
       selectedOption,
@@ -188,23 +178,19 @@ export class GroupSelectComponent extends PureComponent {
     } = selectedOption;
     let selectedId = optionIdGrouping(selected, groupId);
     let selectedIdIndex = allOptionIds.indexOf(selectedId);
-
     if (selectedIdIndex === -1) {
       selectedIdIndex = 0;
-
       if (isDefaultSelectValue) {
         [selectedId] = allOptionIds;
       } else {
         selectedId = '';
       }
     }
-
     return {
       selectedId,
       hoverIndex: selectedIdIndex
     };
   }
-
   handleFilterSuggestions() {
     let {
       needSearch,
@@ -215,7 +201,6 @@ export class GroupSelectComponent extends PureComponent {
       searchStr = '',
       allOptionIds
     } = this.state;
-
     if (needSearch && searchStr && searchStr.trim().length) {
       searchStr = getSearchString(searchStr);
       let {
@@ -231,13 +216,11 @@ export class GroupSelectComponent extends PureComponent {
         suggestionOptionIds
       };
     }
-
     return {
       suggestionGroups: revampedGroups,
       suggestionOptionIds: allOptionIds
     };
   }
-
   handleSearchOptions() {
     let {
       onSearch
@@ -247,7 +230,6 @@ export class GroupSelectComponent extends PureComponent {
     } = this.state;
     searchStr && this.handleFetchOptions(onSearch, searchStr);
   }
-
   handleSearch(value) {
     // let { value = '' } = e.target;
     let {
@@ -270,7 +252,6 @@ export class GroupSelectComponent extends PureComponent {
       }
     });
   }
-
   handleKeyDown(e) {
     let {
       isPopupOpen,
@@ -286,38 +267,33 @@ export class GroupSelectComponent extends PureComponent {
     let {
       keyCode
     } = e;
-
     if (!isPopupOpen && !isPopupOpenOnEnter) {
       onKeyDown && onKeyDown(e);
     }
-
     if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
     } else if (!isPopupOpen && keyCode === 40) {
       e.preventDefault(); //prevent body scroll
-
       this.togglePopup(e);
     }
-
     if (keyCode === 38 && isPopupOpen && suggestionOptionIds.length) {
-      if (hoverIndex === 0) {// hoverIndex = options.length - 1;
+      if (hoverIndex === 0) {
+        // hoverIndex = options.length - 1;
       } else {
         hoverIndex -= 1;
       }
-
       this.setState({
         hoverIndex
       });
     } else if (keyCode === 40 && isPopupOpen && suggestionOptionIds.length) {
-      if (hoverIndex === suggestionOptionIds.length - 1) {// hoverIndex = 0;
+      if (hoverIndex === suggestionOptionIds.length - 1) {
+        // hoverIndex = 0;
       } else {
         if (hoverIndex === suggestionOptionIds.length - 3) {
           this.handleGetNextOptions();
         }
-
         hoverIndex += 1;
       }
-
       this.setState({
         hoverIndex
       });
@@ -328,7 +304,8 @@ export class GroupSelectComponent extends PureComponent {
     } else if (keyCode === 27) {
       this.valueInput && this.valueInput.focus({
         preventScroll: true
-      }); // this.handlePopupClose(e);
+      });
+      // this.handlePopupClose(e);
     }
   }
 
@@ -344,7 +321,6 @@ export class GroupSelectComponent extends PureComponent {
       hoverIndex: newHoverIndex
     });
   }
-
   handleChange(id, value, index, e) {
     e && e.preventDefault && e.preventDefault();
     let {
@@ -358,13 +334,13 @@ export class GroupSelectComponent extends PureComponent {
       id: selected,
       groupId
     } = extractOptionId(id);
-
     if (!getIsEmptyValue(id) && !isReadOnly) {
       onChange && onChange({
         groupId,
         selected
       }, normalizedAllOptions[id]);
-      this.handlePopupClose(); // this.valueInput && this.valueInput.focus({preventScroll:true});
+      this.handlePopupClose();
+      // this.valueInput && this.valueInput.focus({preventScroll:true});
     }
   }
 
@@ -376,7 +352,6 @@ export class GroupSelectComponent extends PureComponent {
     } = this.props;
     !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}Center` : null);
   }
-
   handlePopupClose(e) {
     let {
       closePopupOnly,
@@ -387,19 +362,15 @@ export class GroupSelectComponent extends PureComponent {
     });
     isPopupOpen && closePopupOnly(e);
   }
-
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
   }
-
   suggestionItemRef(el, index, id) {
     this[`suggestion_${id}`] = el;
   }
-
   searchInputRef(el) {
     this.searchInput = el;
   }
-
   valueInputRef(el) {
     let {
       getRef
@@ -407,14 +378,12 @@ export class GroupSelectComponent extends PureComponent {
     this.valueInput = el;
     getRef && getRef(el);
   }
-
   handleSelectFocus(e) {
     let {
       target
     } = e || {};
     target && target.setSelectionRange(target, 0);
   }
-
   handleClearSearch() {
     this.handleSearch('');
     setTimeout(() => {
@@ -423,33 +392,28 @@ export class GroupSelectComponent extends PureComponent {
       });
     }, 1);
   }
-
   handleValueInputChange(e) {
     let typeString = getKeyValue(e);
     let {
       isPopupOpen,
       autoSelectOnType
     } = this.props;
-
     if (!isPopupOpen && autoSelectOnType) {
       this.valueInputTypeString += (typeString || '').trim();
       this.handleChangeOnType();
     }
   }
-
   handleChangeOnType() {
     let {
       revampedGroups
     } = this.state;
     let typeString = this.valueInputTypeString;
     this.valueInputTypeString = '';
-
     let changeValue = () => {
       let id = this.autoSelectSuggestions[this.autoSelectIndex];
       let {
         suggestionOptionIds
       } = this.handleFilterSuggestions();
-
       if (!getIsEmptyValue(id)) {
         this.handleChange(id);
         let hoverIndex = suggestionOptionIds.indexOf(id);
@@ -458,14 +422,12 @@ export class GroupSelectComponent extends PureComponent {
         });
       }
     };
-
     if (typeString && typeString === this.valueInputSearchString) {
       if (this.autoSelectIndex < this.autoSelectSuggestions.length - 1) {
         this.autoSelectIndex += 1;
       } else {
         this.autoSelectIndex = 0;
       }
-
       changeValue();
     } else if (typeString) {
       this.valueInputSearchString = typeString;
@@ -482,13 +444,11 @@ export class GroupSelectComponent extends PureComponent {
       changeValue();
     }
   }
-
   handleScroll(e) {
     let ele = e.target;
     let isScrollReachedBottom = findScrollEnd(ele);
     isScrollReachedBottom && this.handleGetNextOptions();
   }
-
   handleFetchOptions(APICall) {
     let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     // let funcArgs = args.slice(1, args.length);
@@ -498,12 +458,10 @@ export class GroupSelectComponent extends PureComponent {
     let {
       _isMounted
     } = this;
-
     if (!isFetchingOptions && APICall) {
       this.setState({
         isFetchingOptions: true
       });
-
       try {
         return APICall(searchStr).then(() => {
           _isMounted && this.setState({
@@ -521,7 +479,6 @@ export class GroupSelectComponent extends PureComponent {
       }
     }
   }
-
   handleGetNextOptions() {
     let {
       isNextOptions,
@@ -532,7 +489,6 @@ export class GroupSelectComponent extends PureComponent {
     } = this.state;
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -543,7 +499,6 @@ export class GroupSelectComponent extends PureComponent {
       }])
     };
   }
-
   render() {
     let {
       isDisabled,
@@ -780,7 +735,6 @@ export class GroupSelectComponent extends PureComponent {
       }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
     }) : null);
   }
-
 }
 GroupSelectComponent.propTypes = GroupSelect_propTypes;
 GroupSelectComponent.defaultProps = GroupSelect_defaultProps;
@@ -788,7 +742,9 @@ GroupSelectComponent.displayName = 'GroupSelect';
 let GroupSelect = Popup(GroupSelectComponent);
 GroupSelect.defaultProps = GroupSelectComponent.defaultProps;
 GroupSelect.propTypes = GroupSelectComponent.propTypes;
-export default GroupSelect; // if (__DOCS__) {
+export default GroupSelect;
+
+// if (__DOCS__) {
 //   GroupSelect.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'