@zohodesk/components 1.2.18 → 1.2.19

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/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,

package/es/v1/Typography/props/propTypes.js

@@ -13,8 +13,8 @@ export const propTypes = {
   $ui_typeFace: PropTypes.oneOf(['normal', 'italic']),
   $ui_decoration: PropTypes.oneOf(['default', 'underline', 'strike', 'overline']),
   $ui_size: PropTypes.oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
-  $ui_lineHeight: PropTypes.oneOf(['0', '1', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '27', '28', '29', '30', '32', '33', '34', '35', '36', '38', '40', '41', '42', '45', '50', '52', '54', '55', '60', '70', '75', '120', 'inherit']),
-  $ui_letterSpacing: PropTypes.oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '2', '4', 'inherit']),
+  $ui_lineHeight: PropTypes.oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
+  $ui_letterSpacing: PropTypes.oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
   $ui_wordBreak: PropTypes.oneOf(['breakAll', 'keepAll', 'breakWord']),
   $ui_wordWrap: PropTypes.oneOf(['normal', 'break']),
   $ui_whiteSpace: PropTypes.oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),

package/es/v1/Typography/utils/index.js

@@ -0,0 +1,50 @@
+/* eslint-disable */
+export const letterspacingMapping = {
+  'inherit': 'inherit',
+  '0.1': '0_1',
+  '0.2': '0_2',
+  '0.3': '0_3',
+  '0.4': '0_4',
+  '0.5': '0_5',
+  '0.6': '0_6',
+  '0.7': '0_7',
+  '0.8': '0_8',
+  '0.9': '0_9',
+  '1': '1',
+  '1.1': '1_1',
+  '1.2': '1_2',
+  '1.3': '1_3',
+  '1.4': '1_4',
+  '1.5': '1_5',
+  '1.6': '1_6',
+  '1.7': '1_7',
+  '1.8': '1_8',
+  '1.9': '1_9',
+  '2': '2'
+};
+export const lineheightMapping = {
+  'inherit': 'inherit',
+  'initial': 'initial',
+  'normal': 'normal',
+  '0': '0',
+  '0.1': '0_1',
+  '0.2': '0_2',
+  '0.3': '0_3',
+  '0.4': '0_4',
+  '0.5': '0_5',
+  '0.6': '0_6',
+  '0.7': '0_7',
+  '0.8': '0_8',
+  '0.9': '0_9',
+  '1': '1',
+  '1.1': '1_1',
+  '1.2': '1_2',
+  '1.3': '1_3',
+  '1.4': '1_4',
+  '1.5': '1_5',
+  '1.6': '1_6',
+  '1.7': '1_7',
+  '1.8': '1_8',
+  '1.9': '1_9',
+  '2': '2'
+};

package/lib/Avatar/Avatar.module.css

@@ -18,19 +18,31 @@
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
   vertical-align: middle;
   font-size: var(--avatar_font_size);
+  /* css:theme-validation:ignore */
   color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
 }
 
 .border {
+  /* css:theme-validation:ignore */
   border-color: var(--avatar_border_color);
 }
 
+.borderOnHover:hover,
+.borderOnActive {
+  /* css:theme-validation:ignore */
+}
+
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
 
+.avatar,
+.primary {
+  /* css:theme-validation:ignore */
+}
+
 .avatar, .primary {
   background-color: var(--avatar_bg_color);
 }

package/lib/AvatarTeam/AvatarTeam.module.css

@@ -25,6 +25,8 @@
   composes: varClass;
   composes: posab from '../common/common.module.css';
   top: var(--avatarteam_top_top);
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
   outline-width: var(--avatarteam_outline_width);

package/lib/Button/css/Button.module.css

@@ -48,10 +48,13 @@
   composes: dotted from '../../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);
+  /* css:theme-validation:ignore */
   color: var(--button_text_color);
   font-family: var(--button_font_family);
   text-transform: var(--button_text_transform);
+  /* css:theme-validation:ignore */
   min-width: var(--button_min_width);
+  /* css:theme-validation:ignore */
   height: var(--button_height);
   background-color: var(--button_bg_color);
   border-radius: var(--button_border_radius);
@@ -295,6 +298,7 @@
 .loadingelement:after {
   content: '';
   position: absolute;
+  /* css:theme-validation:ignore */
 }
 
 .loadingelement:before, .loadingelement:after {
@@ -468,6 +472,7 @@
   transform-origin: center;
   border-width: 2px 2px 0 0;
   border-style: solid;
+  /* css:theme-validation:ignore */
   border-color: var(--button_success_border_color);
   animation: tick var(--zd_no_transition3) ease 0s forwards;
 }
@@ -523,4 +528,7 @@
   }
 }
 
-.loader{color:var(--dot_mirror)}
+.loader{
+  /* css:theme-validation:ignore */
+  color:var(--dot_mirror)
+}

package/lib/Buttongroup/Buttongroup.module.css

@@ -11,6 +11,8 @@
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   background-color: var(--buttongroup_bg_color);
   box-shadow: var(--buttongroup_box_shadow);
   padding: var(--buttongroup_padding);