@zohodesk/components 1.0.0-temp-178 → 1.0.0-temp-180

package/es/common/customscroll.module.css

@@ -23,9 +23,17 @@
   -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
   -ms-scrollbar-face-color: var(--zd-scroll-thump);
 }
+.scroll::-webkit-scrollbar,
+.scroll ::-webkit-scrollbar {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
   background: var(--zd-scroll-corner-bg);
 }
+.scroll::-webkit-scrollbar:hover,
+.scroll ::-webkit-scrollbar:hover {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
   background: var(--zd-scroll-bg);
 }
@@ -43,6 +51,11 @@
   width: 0 ;
   height: 0 ;
 }
+.scroll::-webkit-scrollbar-track:vertical,
+.scroll ::-webkit-scrollbar-track:vertical {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+}
 [dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
@@ -51,13 +64,26 @@
   border-right: 1px solid transparent;
   border-left: 1px solid transparent;
 }
+.scroll::-webkit-scrollbar-track:vertical:hover,
+.scroll ::-webkit-scrollbar-track:vertical:hover {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
   border-color: var(--zd-scroll-border);
 }
+.scroll::-webkit-scrollbar-track:horizontal,
+.scroll ::-webkit-scrollbar-track:horizontal {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
 }
+.scroll::-webkit-scrollbar-track:horizontal:hover,
+.scroll ::-webkit-scrollbar-track:horizontal:hover {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
   border-color: var(--zd-scroll-border);
 }
@@ -66,6 +92,8 @@
 }
 .scroll::-webkit-scrollbar-thumb,
 .scroll ::-webkit-scrollbar-thumb {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   /* display: none; */
 }
 .scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
@@ -74,6 +102,11 @@
   background-clip: padding-box;
   border: 3px solid transparent;
 }
+.scroll::-webkit-scrollbar-thumb:hover,
+.scroll ::-webkit-scrollbar-thumb:hover {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
   background: var(--zd-scroll-thump-hoverbg);
   background-clip: padding-box;
@@ -83,6 +116,10 @@
 .scroll *:hover > ::-webkit-scrollbar-thumb {
   display: block;
 } */
+.scroll::-webkit-scrollbar-corner,
+.scroll ::-webkit-scrollbar-corner {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
   background: var(--zd-scroll-corner-bg);
 }

package/es/v1/Avatar/Avatar.js

@@ -111,7 +111,8 @@ function Avatar(props) {
     "data-id": dataId,
     "data-test-id": dataId,
     onClick: onClick,
-    "data-selector-id": dataSelectorId
+    "data-selector-id": dataSelectorId,
+    tabIndex: onClick ? 0 : null
   }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
     className: `${style.initial}`,
     "data-id": `${dataId}_AvatarInitial`,

package/es/v1/ListItem/ListContainer.js

@@ -89,7 +89,7 @@ const ListContainer = props => {
     eleRef: eleRef,
     tagName: isLink ? 'a' : 'li',
     "data-title": isDisabled ? disableTitle : title
-  }, options, customProps), children);
+  }, options, customProps, a11y), children);
 };
 
 ListContainer.defaultProps = ListContainerDefaultProps;

package/es/v1/Modal/Modal.js

@@ -1,154 +1,126 @@
 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); }
 
-/**** Libraries ****/
-import React from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom';
+import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
 import { defaultProps } from '../../Modal/props/defaultProps';
 import { propTypes } from '../../Modal/props/propTypes';
 import style from '../../AppContainer/AppContainer.module.css';
 let createdPortalIds = [];
 let newPortalPrefix = 'CPortal';
 let portalChildrenTopIndexValues;
-export default class Modal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleAddPortalId = this.handleAddPortalId.bind(this);
-    this.handleRemovePortalId = this.handleRemovePortalId.bind(this);
-    this.handleInsertPortalDiv = this.handleInsertPortalDiv.bind(this);
-    this.getPortalDiv = this.getPortalDiv.bind(this);
-    this.state = {
-      isMounted: false
-    };
-    this.portalId = props.portalId;
-    this.setRef = this.setRef.bind(this);
-    this.ref = null; // this.portalDiv = document.createDocumentFragment();
-  }
-
-  setRef(ele) {
-    this.ref = ele;
-
-    if (this.isZIndexAppendNeeded) {
-      this.ref.style.zIndex = this.zIndex;
-      this.isZIndexAppendNeeded = false;
+export default function Modal(props) {
+  let {
+    children,
+    isActive,
+    autoZIndexNeeded,
+    portalId: propPortalId
+  } = props;
+  const [isMounted, setMounted] = useState(false);
+  const portalId = useRef(propPortalId);
+  const ref = useRef(null);
+  const isZIndexAppendNeeded = useRef();
+  const zIndex = useRef();
+  const modalRoot = useRef();
+  const newModalRoot = useRef();
+  const containerDiv = useRef();
+  const portalDiv = useRef(); // document.createDocumentFragment()
+
+  const isCustomPortalId = useRef();
+  const setRef = useCallback(ele => {
+    ref.current = ele;
+
+    if (isZIndexAppendNeeded.current) {
+      ref.current.style.zIndex = zIndex.current;
+      isZIndexAppendNeeded.current = false;
     }
-  }
-
-  getPortalDiv() {
-    this.modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.props.portalId}]`) : '';
-
-    if (!this.modalRoot) {
-      this.portalId = this.handleAddPortalId();
-      this.newModalRoot = document.createElement('div');
-      this.newModalRoot.className = style.container;
-      this.newModalRoot.setAttribute('data-portal', this.portalId);
-      this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
-      this.modalRoot = this.newModalRoot;
+  }, []);
+
+  function getPortalDiv() {
+    modalRoot.current = propPortalId ? document.querySelector(`[data-portal=${propPortalId}]`) : "";
+
+    if (!modalRoot.current) {
+      portalId.current = handleAddPortalId();
+      newModalRoot.current = document.createElement('div');
+      newModalRoot.current.className = style.container;
+      newModalRoot.current.setAttribute('data-portal', portalId.current);
+      containerDiv.current && containerDiv.current.appendChild(newModalRoot.current);
+      modalRoot.current = newModalRoot.current;
     }
 
-    return this.modalRoot;
+    return modalRoot.current;
   }
 
-  componentDidMount() {
-    this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
-    this.portalDiv = this.getPortalDiv();
-    this.setState({
-      isMounted: true
-    }, () => {
-      this.handleInsertPortalDiv();
+  useEffect(() => {
+    containerDiv.current = document.getElementsByTagName("desk")[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
+    portalDiv.current = getPortalDiv();
+    setMounted(true);
+    setTimeout(() => {
+      handleInsertPortalDiv();
     });
-  }
-
-  componentWillUnmount() {
-    //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
-    if (this.newModalRoot) {
-      this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
-      this.handleRemovePortalId();
-    }
-
-    if (this.zIndex && portalChildrenTopIndexValues === this.zIndex) {
-      portalChildrenTopIndexValues -= 1;
-    }
-  }
+    return () => {
+      // modalRoot.current && modalRoot.current.removeChild(portalDiv.current);
+      if (newModalRoot.current) {
+        containerDiv.current && containerDiv.current.removeChild(newModalRoot.current);
+        handleRemovePortalId();
+      }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.isActive != this.props.isActive) {
-      if (this.props.isActive) {
-        this.handleInsertPortalDiv();
-      } else if (this.zIndex && portalChildrenTopIndexValues === this.zIndex) {
+      if (zIndex.current && portalChildrenTopIndexValues === zIndex.current) {
         portalChildrenTopIndexValues -= 1;
       }
+    };
+  }, []);
+  useEffectCallOnlyAfterState(() => {
+    if (isActive) {
+      handleInsertPortalDiv();
+    } else if (zIndex.current && portalChildrenTopIndexValues === zIndex.current) {
+      portalChildrenTopIndexValues -= 1;
     }
-  }
-
-  handleInsertPortalDiv() {
-    let {
-      autoZIndexNeeded
-    } = this.props;
-
-    if (autoZIndexNeeded) {
-      let {
-        isActive
-      } = this.props;
-
-      if (isActive) {
-        let newHighValue = Number(portalChildrenTopIndexValues || 10) + 1;
-        portalChildrenTopIndexValues = newHighValue;
-        this.zIndex = newHighValue;
-
-        if (this.ref) {
-          this.ref.style.zIndex = newHighValue;
-        } else {
-          this.isZIndexAppendNeeded = true;
-        }
+  }, [isActive]);
+
+  function handleInsertPortalDiv() {
+    if (autoZIndexNeeded && isActive) {
+      let newHighValue = Number(portalChildrenTopIndexValues || 10) + 1;
+      portalChildrenTopIndexValues = newHighValue;
+      zIndex.current = newHighValue;
+
+      if (ref.current) {
+        ref.current.style.zIndex = newHighValue;
+      } else {
+        isZIndexAppendNeeded.current = true;
       }
     }
   }
 
-  handleAddPortalId() {
+  function handleAddPortalId() {
     let createdPortalIdsLen = createdPortalIds.length;
     let newPortalId = createdPortalIdsLen ? createdPortalIds[createdPortalIdsLen - 1] + 1 : 1;
     createdPortalIds.push(newPortalId);
-    this.portalId = newPortalId;
-    this.isCustomPortalId = true;
+    portalId.current = newPortalId;
+    isCustomPortalId.current = true;
     return `${newPortalPrefix}${newPortalId}`;
   }
 
-  handleRemovePortalId() {
-    if (this.isCustomPortalId) {
-      createdPortalIds = createdPortalIds.filter(id => id !== this.portalId);
+  function handleRemovePortalId() {
+    if (isCustomPortalId.current) {
+      createdPortalIds = createdPortalIds.filter(id => id !== portalId.current);
     }
   }
 
-  render() {
-    let {
-      children
-    } = this.props,
-        {
-      isMounted
-    } = this.state;
-    let Element = children.type,
-        elementProps = children.props;
-
-    if (isMounted) {
-      if (Element) {
-        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, _extends({
-          ref: this.setRef
-        }, elementProps)), this.portalDiv);
-      }
+  let Element = children.type,
+      elementProps = children.props;
 
-      return null;
+  if (isMounted) {
+    if (Element) {
+      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, _extends({
+        ref: setRef
+      }, elementProps)), portalDiv.current);
     }
 
     return null;
   }
 
+  return null;
 }
 Modal.defaultProps = defaultProps;
-Modal.propTypes = propTypes; // if (__DOCS__) {
-//   Modal.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     external: false,
-//     description: ' '
-//   };
-// }
+Modal.propTypes = propTypes;

package/es/v1/MultiSelect/Suggestions.js

@@ -60,7 +60,8 @@ export default class Suggestions extends React.PureComponent {
       const isHighlight = hoverOption === index || id === hoverId ? true : false;
       const list_a11y = Object.assign({}, a11y, {
         ariaSelected: isActive,
-        ariaLabel: value
+        ariaLabel: value,
+        'data-a11y-list-active': isHighlight
       });
       const commonProps = {
         isDisabled,

package/es/v1/Select/Select.js

@@ -298,7 +298,8 @@ export class SelectComponent extends Component {
       isPopupOpen,
       onKeyDown,
       isPopupOpenOnEnter,
-      needCloseOnSelect
+      needCloseOnSelect,
+      isPopupReady
     } = this.props;
     let {
       hoverIndex,
@@ -351,7 +352,7 @@ export class SelectComponent extends Component {
         id
       } = option || {};
 
-      if (isPopupOpen && !getIsEmptyValue(id) && onChange) {
+      if (isPopupReady && !getIsEmptyValue(id) && onChange) {
         onChange(id, optionsNormalize[id]);
         needCloseOnSelect && this.handlePopupClose(e);
       }

package/es/v1/Switch/Switch.js

@@ -54,7 +54,6 @@ const Switch = props => {
     "data-title": disabled ? disableTitle : title,
     "aria-checked": checked,
     role: "switch",
-    tabIndex: isReadOnly || disabled ? '-1' : '0',
     dataSelectorId: dataSelectorId
   }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
     className: `${style[size]} ${customSwitchSize}`
@@ -72,7 +71,8 @@ const Switch = props => {
     htmlFor: id,
     "data-id": dataId,
     "data-test-id": dataId,
-    className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`
+    className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+    tabIndex: isReadOnly || disabled ? '-1' : '0'
   })), text && /*#__PURE__*/React.createElement(Label, _extends({
     text: text,
     palette: labelPalette,

package/es/v1/Typography/css/Typography.module.css

@@ -238,130 +238,77 @@
 .lineheight_inherit{
   line-height: inherit;
 }
-.lineheight_0{
-  line-height: 0px;
-}
-.lineheight_1{
-  line-height: 1;
-}
-.lineheight_8{
-  line-height: 8px;
-}
-.lineheight_10{
-  line-height: 10px;
-}
-.lineheight_11{
-  line-height: 11px;
-}
-.lineheight_12{
-  line-height: 12px;
-}
-.lineheight_13{
-  line-height: 13px;
-}
-.lineheight_14{
-  line-height: 14px;
-}
-.lineheight_15{
-  line-height: 15px;
-}
-.lineheight_16{
-  line-height: 16px;
-}
-.lineheight_17{
-  line-height: 17px;
-}
-.lineheight_18{
-  line-height: 18px;
-}
-.lineheight_19{
-  line-height: 19px;
-}
-.lineheight_20{
-  line-height: 20px;
-}
-.lineheight_21{
-  line-height: 21px;
-}
-.lineheight_22{
-  line-height: 22px;
+.lineheight_initial{
+  line-height: initial;
 }
-.lineheight_24{
-  line-height: 24px;
+.lineheight_normal{
+  line-height: normal;
 }
-.lineheight_25{
-  line-height: 25px;
-}
-.lineheight_26{
-  line-height: 26px;
-}
-.lineheight_27{
-  line-height: 27px;
-}
-.lineheight_28{
-  line-height: 28px;
+.lineheight_0{
+  line-height: 0;
 }
-.lineheight_29{
-  line-height: 29px;
+.lineheight_0_1{
+  line-height: 0.1;
 }
-.lineheight_30{
-  line-height: 30px;
+.lineheight_0_2{
+  line-height: 0.2;
 }
-.lineheight_32{
-  line-height: 32px;
+.lineheight_0_3{
+  line-height: 0.3;
 }
-.lineheight_33{
-  line-height: 33px;
+.lineheight_0_4{
+  line-height: 0.4;
 }
-.lineheight_34{
-  line-height: 34px;
+.lineheight_0_5{
+  line-height: 0.5;
 }
-.lineheight_35{
-  line-height: 35px;
+.lineheight_0_6{
+  line-height: 0.6;
 }
-.lineheight_36{
-  line-height: 36px;
+.lineheight_0_7{
+  line-height: 0.7;
 }
-.lineheight_38{
-  line-height: 38px;
+.lineheight_0_8{
+  line-height: 0.8;
 }
-.lineheight_40{
-  line-height: 40px;
+.lineheight_0_9{
+  line-height: 0.9;
 }
-.lineheight_41{
-  line-height: 41px;
+.lineheight_1{
+  line-height: 1;
 }
-.lineheight_42{
-  line-height: 42px;
+.lineheight_1_1{
+  line-height: 1.1;
 }
-.lineheight_45{
-  line-height: 45px;
+.lineheight_1_2{
+  line-height: 1.2;
 }
-.lineheight_50{
-  line-height: 50px;
+.lineheight_1_3{
+  line-height: 1.3;
 }
-.lineheight_52{
-  line-height: 52px;
+.lineheight_1_4{
+  line-height: 1.4;
 }
-.lineheight_54{
-  line-height: 54px;
+.lineheight_1_5{
+  line-height: 1.5;
 }
-.lineheight_55{
-  line-height: 55px;
+.lineheight_1_6{
+  line-height: 1.6;
 }
-.lineheight_60{
-  line-height: 60px;
+.lineheight_1_7{
+  line-height: 1.7;
 }
-.lineheight_70{
-  line-height: 70px;
+.lineheight_1_8{
+  line-height: 1.8;
 }
-.lineheight_75{
-  line-height: 75px;
+.lineheight_1_9{
+  line-height: 1.9;
 }
-.lineheight_120{
-  line-height: 120px;
+.lineheight_2{
+  line-height: 2;
 }
 
+
 /*............... Lineheight End.........*/
 
 /*............... Letterspacing Start.........*/
@@ -369,41 +316,65 @@
 .letterspacing_inherit{
   letter-spacing:inherit;
 }
-.letterspacing_01{
+.letterspacing_0_1{
   letter-spacing: 0.1px;
 }
-.letterspacing_02{
+.letterspacing_0_2{
   letter-spacing: 0.2px;
 }
-.letterspacing_03{
+.letterspacing_0_3{
   letter-spacing: 0.3px;
 }
-.letterspacing_04{
+.letterspacing_0_4{
   letter-spacing: 0.4px;
 }
-.letterspacing_05{
+.letterspacing_0_5{
   letter-spacing: 0.5px;
 }
-.letterspacing_06{
+.letterspacing_0_6{
   letter-spacing: 0.6px;
 }
-.letterspacing_07{
+.letterspacing_0_7{
   letter-spacing: 0.7px;
 }
-.letterspacing_08{
+.letterspacing_0_8{
   letter-spacing: 0.8px;
 }
-.letterspacing_09{
+.letterspacing_0_9{
   letter-spacing: 0.9px;
 }
 .letterspacing_1{
   letter-spacing: 1px;
 }
+.letterspacing_1_1{
+  letter-spacing: 1.1px;
+}
+.letterspacing_1_2{
+  letter-spacing: 1.2px;
+}
+.letterspacing_1_3{
+  letter-spacing: 1.3px;
+}
+.letterspacing_1_4{
+  letter-spacing: 1.4px;
+}
+.letterspacing_1_5{
+  letter-spacing: 1.5px;
+}
+.letterspacing_1_6{
+  letter-spacing: 1.6px;
+}
+.letterspacing_1_7{
+  letter-spacing: 1.7px;
+}
+.letterspacing_1_8{
+  letter-spacing: 1.8px;
+}
+.letterspacing_1_9{
+  letter-spacing: 1.9px;
+}
 .letterspacing_2{
   letter-spacing: 2px;
 }
-.letterspacing_4{
-  letter-spacing: 4px;
-}
 
 /*............... Letterspacing End.........*/

package/es/v1/Typography/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping } from './letterSpacingMap';
+import { letterspacingMapping, lineheightMapping } from '../utils';
 export default function cssJSLogic(_ref) {
   let {
     props,
@@ -24,10 +24,14 @@ export default function cssJSLogic(_ref) {
     $ui_whiteSpace
   } = props;
 
-  if ($ui_letterSpacing && $ui_letterSpacing.match(/\./g)) {
+  if ($ui_letterSpacing) {
     $ui_letterSpacing = letterspacingMapping[$ui_letterSpacing];
   }
 
+  if ($ui_lineHeight) {
+    $ui_lineHeight = lineheightMapping[$ui_lineHeight];
+  }
+
   let typographyClass = compileClassNames({
     [style.reset]: $flag_reset,
     [style.dotted]: $flag_dotted,