@zohodesk/components 1.2.50 → 1.2.52

package/README.md

@@ -32,6 +32,13 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.52
+
+- **Typography** - component added in v0
+
+# 1.2.51
+
+- **Popup** - Fixed issue: Error on unmount when target ref is not available.
 
 # 1.2.50
 

package/es/Popup/Popup.js

@@ -95,6 +95,8 @@ const Popup = function (Component) {
       this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
       this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
       this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
+      this.handleAddingScrollBlock = this.handleAddingScrollBlock.bind(this);
+      this.handleRemovingScrollBlock = this.handleRemovingScrollBlock.bind(this);
       this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
@@ -152,9 +154,7 @@ const Popup = function (Component) {
         dropElement
       } = this;
       const {
-        needResizeHandling: propResizeHandling,
-        isAbsolutePositioningNeeded,
-        isOutsideScrollBlocked
+        needResizeHandling: propResizeHandling
       } = this.props;
 
       if (oldStateOpen !== isPopupReady) {
@@ -165,14 +165,10 @@ const Popup = function (Component) {
           this.popupObserver.disconnect();
         }
 
-        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
-          if (isPopupReady) {
-            addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-            this.addScrollBlockListeners();
-          } else {
-            removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-            this.removeScrollBlockListeners();
-          }
+        if (isPopupReady) {
+          this.handleAddingScrollBlock();
+        } else {
+          this.handleRemovingScrollBlock();
         }
       }
     }
@@ -189,8 +185,7 @@ const Popup = function (Component) {
 
         return res;
       }, popups);
-      removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-      this.removeScrollBlockListeners();
+      this.handleRemovingScrollBlock();
       let noPopups = true;
 
       for (const i in popups) {
@@ -215,6 +210,30 @@ const Popup = function (Component) {
       }
     }
 
+    handleAddingScrollBlock() {
+      const {
+        isAbsolutePositioningNeeded,
+        isOutsideScrollBlocked
+      } = this.props;
+
+      if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+        this.addScrollBlockListeners();
+      }
+    }
+
+    handleRemovingScrollBlock() {
+      const {
+        isAbsolutePositioningNeeded,
+        isOutsideScrollBlocked
+      } = this.props;
+
+      if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+        this.removeScrollBlockListeners();
+      }
+    }
+
     addScrollBlockListeners() {
       document.addEventListener('wheel', this.handleBlockScroll, {
         capture: true,

package/es/Popup/intersectionObserver.js

@@ -2,38 +2,48 @@ let observerCallbacks = null;
 let intersectionObserver = null;
 
 function handleObserverCallbacks(entries) {
-  entries.map((entry, i) => {
+  entries.forEach(entry => {
     let oldCallbacks = observerCallbacks.get(entry.target);
-    oldCallbacks.length && oldCallbacks.forEach(callback => {
-      callback && callback(entry);
-    });
+
+    if (Array.isArray(oldCallbacks) && oldCallbacks.length) {
+      oldCallbacks.forEach(callback => {
+        callback && callback(entry);
+      });
+    }
   });
 }
 
 export function addIntersectionObserver(element, callback, options) {
-  if (intersectionObserver === null && observerCallbacks === null) {
-    intersectionObserver = new IntersectionObserver(entries => {
-      handleObserverCallbacks(entries);
-    }, options);
-    observerCallbacks = new Map();
-  }
+  if (!!element && typeof callback == 'function') {
+    if (intersectionObserver === null && observerCallbacks === null) {
+      intersectionObserver = new IntersectionObserver(entries => {
+        handleObserverCallbacks(entries);
+      }, options);
+      observerCallbacks = new Map();
+    }
 
-  intersectionObserver.observe(element);
-  let oldCallbacks = observerCallbacks.get(element) || [];
-  observerCallbacks.set(element, [...oldCallbacks, callback]);
+    intersectionObserver.observe(element);
+    let oldCallbacks = observerCallbacks.get(element) || [];
+    observerCallbacks.set(element, [...oldCallbacks, callback]);
+  }
 }
 export function removeIntersectionObserver(element, callback) {
-  let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : [];
-  oldCallbacks = oldCallbacks.filter(handler => handler !== callback);
+  if (!!element && typeof callback == 'function') {
+    let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : null;
 
-  if (intersectionObserver && oldCallbacks.length === 0) {
-    observerCallbacks.delete(element);
-    intersectionObserver.unobserve(element);
-  }
+    if (Array.isArray(oldCallbacks)) {
+      let callbacks = oldCallbacks.filter(handler => handler !== callback);
+
+      if (intersectionObserver && callbacks.length === 0) {
+        observerCallbacks.delete(element);
+        intersectionObserver.unobserve(element);
+      }
+    }
 
-  if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
-    intersectionObserver.disconnect();
-    intersectionObserver = null;
-    observerCallbacks = null;
+    if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
+      intersectionObserver.disconnect();
+      intersectionObserver = null;
+      observerCallbacks = null;
+    }
   }
 }

package/es/Typography/Typography.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import cssJSLogic from "./css/cssJSLogic";
+import { mergeStyle } from '@zohodesk/utils';
+import defaultStyle from "./css/Typography.module.css";
+
+const Typography = props => {
+  const {
+    children,
+    $ui_tagName,
+    $i18n_dataTitle,
+    testId,
+    customId,
+    $tagAttributes_text,
+    $a11yAttributes_text,
+    customStyle
+  } = props;
+  const style = mergeStyle(defaultStyle, customStyle);
+  const {
+    typographyClass
+  } = cssJSLogic({
+    props,
+    style
+  });
+  return /*#__PURE__*/React.createElement($ui_tagName, {
+    className: typographyClass,
+    'data-title': $i18n_dataTitle,
+    'data-id': customId,
+    'data-test-id': testId,
+    ...$tagAttributes_text,
+    ...$a11yAttributes_text
+  }, children);
+};
+
+Typography.propTypes = propTypes;
+Typography.defaultProps = defaultProps;
+export default Typography;

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

@@ -0,0 +1,489 @@
+.reset {
+  font-weight: initial;
+  margin: initial ;
+  padding: initial ;
+}
+
+.dotted {
+  composes: dotted from '../../common/common.module.css';
+}
+
+.display_block {
+  display: block;
+}
+
+.display_inlineBlock {
+  display: inline-block;
+}
+
+.display_inline {
+  display: inline;
+}
+
+.display_initial {
+  display: initial;
+}
+
+.font_regular {
+  font-family: var(--zd_regular);
+}
+
+.font_light {
+  font-family: var(--zd_light);
+}
+
+.font_semibold {
+  font-family: var(--zd_semibold);
+  composes: ftsmooth from '../../common/common.module.css';
+}
+
+.font_bold {
+  font-family: var(--zd_bold);
+  composes: ftsmooth from '../../common/common.module.css';
+}
+
+.fontStyles_normal {
+  font-style: normal;
+}
+
+.fontStyles_italic {
+  font-style: italic;
+}
+
+.decoration_default {
+  text-decoration: none;
+}
+
+.decoration_underline {
+  text-decoration: underline;
+}
+
+.decoration_strike {
+  text-decoration: line-through;
+}
+
+.decoration_overline {
+  text-decoration: overline;
+}
+
+[dir=ltr] .textalign_left {
+  text-align: left;
+}
+
+[dir=rtl] .textalign_left {
+  text-align: right;
+}
+
+[dir=ltr] .textalign_right {
+  text-align: right;
+}
+
+[dir=rtl] .textalign_right {
+  text-align: left;
+}
+
+.textalign_center {
+  text-align: center;
+}
+
+.textalign_justify {
+  text-align: justify;
+}
+
+.transform_default {
+  text-transform: none;
+}
+
+.transform_upper {
+  text-transform: uppercase;
+}
+
+.transform_lower {
+  text-transform: lowercase;
+}
+
+.transform_capital {
+  text-transform: capitalize;
+}
+
+.dotted_clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.lineclamp_1 {
+  -webkit-line-clamp: 1;
+  composes: dotted_clamp;
+}
+
+.lineclamp_2 {
+  -webkit-line-clamp: 2;
+  composes: dotted_clamp;
+}
+
+.lineclamp_3 {
+  -webkit-line-clamp: 3;
+  composes: dotted_clamp;
+}
+
+.lineclamp_4 {
+  -webkit-line-clamp: 4;
+  composes: dotted_clamp;
+}
+
+.lineclamp_5 {
+  -webkit-line-clamp: 5;
+  composes: dotted_clamp;
+}
+
+.wordBreak_breakAll {
+  word-break: break-all
+}
+
+.wordBreak_keepAll {
+  word-break: keep-all
+}
+
+.wordBreak_breakWord {
+  word-break: break-word
+}
+
+.wordWrap_normal {
+  word-wrap: normal;
+}
+
+.wordWrap_break {
+  word-wrap: break-word
+}
+
+.whiteSpace_normal {
+  white-space: normal
+}
+
+.whiteSpace_noWrap {
+  white-space: nowrap
+}
+
+.whiteSpace_pre {
+  white-space: pre
+}
+
+.whiteSpace_preLine {
+  white-space: pre-line
+}
+
+.whiteSpace_preWrap {
+  white-space: pre-wrap
+}
+
+
+
+/*...............Font Size Start.........*/
+
+.size7 {
+  font-size: var(--zd_font_size7) ;
+}
+
+.size8 {
+  font-size: var(--zd_font_size8) ;
+}
+
+.size9 {
+  font-size: var(--zd_font_size9) ;
+}
+
+.size10 {
+  font-size: var(--zd_font_size10) ;
+}
+
+.size11 {
+  font-size: var(--zd_font_size11) ;
+}
+
+.size12 {
+  font-size: var(--zd_font_size12) ;
+}
+
+.size13 {
+  font-size: var(--zd_font_size13) ;
+}
+
+.size14 {
+  font-size: var(--zd_font_size14) ;
+}
+
+.size15 {
+  font-size: var(--zd_font_size15) ;
+}
+
+.size16 {
+  font-size: var(--zd_font_size16) ;
+}
+
+.size17 {
+  font-size: var(--zd_font_size17) ;
+}
+
+.size18 {
+  font-size: var(--zd_font_size18) ;
+}
+
+.size19 {
+  font-size: var(--zd_font_size19) ;
+}
+
+.size20 {
+  font-size: var(--zd_font_size20) ;
+}
+
+.size21 {
+  font-size: var(--zd_font_size21) ;
+}
+
+.size22 {
+  font-size: var(--zd_font_size22) ;
+}
+
+.size24 {
+  font-size: var(--zd_font_size24) ;
+}
+
+.size25 {
+  font-size: var(--zd_font_size25) ;
+}
+
+.size26 {
+  font-size: var(--zd_font_size26) ;
+}
+
+.size28 {
+  font-size: var(--zd_font_size28) ;
+}
+
+.size29 {
+  font-size: var(--zd_font_size29) ;
+}
+
+.size30 {
+  font-size: var(--zd_font_size30) ;
+}
+
+.size32 {
+  font-size: var(--zd_font_size32) ;
+}
+
+.size34 {
+  font-size: var(--zd_font_size34) ;
+}
+
+.size35 {
+  font-size: var(--zd_font_size35) ;
+}
+
+.size36 {
+  font-size: var(--zd_font_size36) ;
+}
+
+.size40 {
+  font-size: var(--zd_font_size40) ;
+}
+
+.size50 {
+  font-size: var(--zd_font_size50) ;
+}
+
+.sizeinherit {
+  font-size: inherit ;
+}
+
+/*...............Font Size End.........*/
+
+/*............... Lineheight Start.........*/
+
+.lineheight_inherit {
+  line-height: inherit;
+}
+
+.lineheight_initial {
+  line-height: initial;
+}
+
+.lineheight_normal {
+  line-height: normal;
+}
+
+.lineheight_0 {
+  line-height: 0;
+}
+
+.lineheight_0_1 {
+  line-height: 0.1;
+}
+
+.lineheight_0_2 {
+  line-height: 0.2;
+}
+
+.lineheight_0_3 {
+  line-height: 0.3;
+}
+
+.lineheight_0_4 {
+  line-height: 0.4;
+}
+
+.lineheight_0_5 {
+  line-height: 0.5;
+}
+
+.lineheight_0_6 {
+  line-height: 0.6;
+}
+
+.lineheight_0_7 {
+  line-height: 0.7;
+}
+
+.lineheight_0_8 {
+  line-height: 0.8;
+}
+
+.lineheight_0_9 {
+  line-height: 0.9;
+}
+
+.lineheight_1 {
+  line-height: 1;
+}
+
+.lineheight_1_1 {
+  line-height: 1.1;
+}
+
+.lineheight_1_2 {
+  line-height: 1.2;
+}
+
+.lineheight_1_3 {
+  line-height: 1.3;
+}
+
+.lineheight_1_4 {
+  line-height: 1.4;
+}
+
+.lineheight_1_5 {
+  line-height: 1.5;
+}
+
+.lineheight_1_6 {
+  line-height: 1.6;
+}
+
+.lineheight_1_7 {
+  line-height: 1.7;
+}
+
+.lineheight_1_8 {
+  line-height: 1.8;
+}
+
+.lineheight_1_9 {
+  line-height: 1.9;
+}
+
+.lineheight_2 {
+  line-height: 2;
+}
+
+
+/*............... Lineheight End.........*/
+
+/*............... Letterspacing Start.........*/
+
+.letterspacing_inherit {
+  letter-spacing: inherit;
+}
+
+.letterspacing_0_1 {
+  letter-spacing: 0.1px;
+}
+
+.letterspacing_0_2 {
+  letter-spacing: 0.2px;
+}
+
+.letterspacing_0_3 {
+  letter-spacing: 0.3px;
+}
+
+.letterspacing_0_4 {
+  letter-spacing: 0.4px;
+}
+
+.letterspacing_0_5 {
+  letter-spacing: 0.5px;
+}
+
+.letterspacing_0_6 {
+  letter-spacing: 0.6px;
+}
+
+.letterspacing_0_7 {
+  letter-spacing: 0.7px;
+}
+
+.letterspacing_0_8 {
+  letter-spacing: 0.8px;
+}
+
+.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 End.........*/