@zohodesk/components 1.2.50 → 1.2.52

package/es/Typography/css/cssJSLogic.js

@@ -0,0 +1,56 @@
+import { compileClassNames } from '@zohodesk/utils';
+import { letterspacingMapping, lineheightMapping } from "../utils";
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  let {
+    $flag_reset,
+    $flag_dotted,
+    $ui_size,
+    $ui_lineClamp,
+    $ui_lineHeight,
+    $ui_display,
+    $ui_weight,
+    $ui_typeFace,
+    $ui_textAlign,
+    $ui_letterSpacing,
+    $ui_transform,
+    $ui_decoration,
+    $ui_className,
+    $ui_wordBreak,
+    $ui_wordWrap,
+    $ui_whiteSpace
+  } = props;
+
+  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,
+    [style[`size${$ui_size}`]]: !!$ui_size,
+    [style[`lineclamp_${$ui_lineClamp}`]]: !!$ui_lineClamp,
+    [style[`lineheight_${$ui_lineHeight}`]]: !!$ui_lineHeight,
+    [style[`display_${$ui_display}`]]: !!$ui_display,
+    [style[`font_${$ui_weight}`]]: !!$ui_weight,
+    [style[`fontStyles_${$ui_typeFace}`]]: !!$ui_typeFace,
+    [style[`textalign_${$ui_textAlign}`]]: !!$ui_textAlign,
+    [style[`letterspacing_${$ui_letterSpacing}`]]: !!$ui_letterSpacing,
+    [style[`transform_${$ui_transform}`]]: !!$ui_transform,
+    [style[`decoration_${$ui_decoration}`]]: !!$ui_decoration,
+    [$ui_className]: !!$ui_className,
+    [style[`wordBreak_${$ui_wordBreak}`]]: !!$ui_wordBreak,
+    [style[`wordWrap_${$ui_wordWrap}`]]: !!$ui_wordWrap,
+    [style[`whiteSpace_${$ui_whiteSpace}`]]: !!$ui_whiteSpace
+  });
+  return {
+    typographyClass
+  };
+}

package/es/Typography/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  $ui_className: '',
+  $ui_tagName: 'div',
+  $flag_reset: false,
+  $flag_dotted: false,
+  $tagAttributes_text: {},
+  $a11yAttributes_text: {}
+};

package/es/Typography/props/propTypes.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  $ui_className: PropTypes.string,
+  $ui_tagName: PropTypes.string,
+  $flag_reset: PropTypes.bool,
+  $flag_dotted: PropTypes.bool,
+  $ui_display: PropTypes.oneOf(['block', 'inlineBlock', 'inline', 'initial']),
+  $ui_weight: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
+  $ui_textAlign: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
+  $ui_transform: PropTypes.oneOf(['default', 'upper', 'lower', 'capital']),
+  $ui_lineClamp: PropTypes.oneOf(['1', '2', '3', '4', '5']),
+  $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', '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']),
+  $i18n_dataTitle: PropTypes.string,
+  testId: PropTypes.string,
+  customId: PropTypes.string,
+  customStyle: PropTypes.object,
+  $a11yAttributes_text: PropTypes.object,
+  $tagAttributes_text: PropTypes.object
+};

package/es/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/es/index.js

@@ -39,4 +39,4 @@ import * as _utils from "./utils";
 export { _utils as utils };
 export * from "./VelocityAnimation";
 export * from "./semantic";
-export { default as Typography } from "./v1/Typography/Typography";
+export { default as Typography } from "./Typography/Typography";

package/es/v1/Typography/Typography.js

@@ -3,7 +3,7 @@ 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";
+import defaultStyle from "./css/v1_Typography.module.css";
 
 const Typography = props => {
   const {

package/lib/Popup/Popup.js

@@ -158,6 +158,8 @@ var Popup = function Popup(Component) {
       _this.preventKeyboardScroll = _this.preventKeyboardScroll.bind(_assertThisInitialized(_this));
       _this.addScrollBlockListeners = _this.addScrollBlockListeners.bind(_assertThisInitialized(_this));
       _this.removeScrollBlockListeners = _this.removeScrollBlockListeners.bind(_assertThisInitialized(_this));
+      _this.handleAddingScrollBlock = _this.handleAddingScrollBlock.bind(_assertThisInitialized(_this));
+      _this.handleRemovingScrollBlock = _this.handleRemovingScrollBlock.bind(_assertThisInitialized(_this));
       _this.handleIntersectionObserver = _this.handleIntersectionObserver.bind(_assertThisInitialized(_this));
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
 
@@ -216,10 +218,7 @@ var Popup = function Popup(Component) {
             oldStateOpen = _ref2$isPopupReady === void 0 ? false : _ref2$isPopupReady;
 
         var dropElement = this.dropElement;
-        var _this$props = this.props,
-            propResizeHandling = _this$props.needResizeHandling,
-            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
-            isOutsideScrollBlocked = _this$props.isOutsideScrollBlocked;
+        var propResizeHandling = this.props.needResizeHandling;
 
         if (oldStateOpen !== isPopupReady) {
           if (isPopupReady && dropElement && (propResizeHandling !== undefined ? propResizeHandling : needResizeHandling)) {
@@ -229,14 +228,10 @@ var Popup = function Popup(Component) {
             this.popupObserver.disconnect();
           }
 
-          if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
-            if (isPopupReady) {
-              (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-              this.addScrollBlockListeners();
-            } else {
-              (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-              this.removeScrollBlockListeners();
-            }
+          if (isPopupReady) {
+            this.handleAddingScrollBlock();
+          } else {
+            this.handleRemovingScrollBlock();
           }
         }
       }
@@ -258,8 +253,7 @@ var Popup = function Popup(Component) {
 
           return res;
         }, popups);
-        (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-        this.removeScrollBlockListeners();
+        this.handleRemovingScrollBlock();
         var noPopups = true;
 
         for (var i in popups) {
@@ -283,6 +277,30 @@ var Popup = function Popup(Component) {
           document.removeEventListener('focus', this.handleDocumentFocus, true);
         }
       }
+    }, {
+      key: "handleAddingScrollBlock",
+      value: function handleAddingScrollBlock() {
+        var _this$props = this.props,
+            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
+            isOutsideScrollBlocked = _this$props.isOutsideScrollBlocked;
+
+        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
+          this.addScrollBlockListeners();
+        }
+      }
+    }, {
+      key: "handleRemovingScrollBlock",
+      value: function handleRemovingScrollBlock() {
+        var _this$props2 = this.props,
+            isAbsolutePositioningNeeded = _this$props2.isAbsolutePositioningNeeded,
+            isOutsideScrollBlocked = _this$props2.isOutsideScrollBlocked;
+
+        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
+          this.removeScrollBlockListeners();
+        }
+      }
     }, {
       key: "addScrollBlockListeners",
       value: function addScrollBlockListeners() {

package/lib/Popup/intersectionObserver.js

@@ -22,41 +22,51 @@ var observerCallbacks = null;
 var intersectionObserver = null;
 
 function handleObserverCallbacks(entries) {
-  entries.map(function (entry, i) {
+  entries.forEach(function (entry) {
     var oldCallbacks = observerCallbacks.get(entry.target);
-    oldCallbacks.length && oldCallbacks.forEach(function (callback) {
-      callback && callback(entry);
-    });
+
+    if (Array.isArray(oldCallbacks) && oldCallbacks.length) {
+      oldCallbacks.forEach(function (callback) {
+        callback && callback(entry);
+      });
+    }
   });
 }
 
 function addIntersectionObserver(element, callback, options) {
-  if (intersectionObserver === null && observerCallbacks === null) {
-    intersectionObserver = new IntersectionObserver(function (entries) {
-      handleObserverCallbacks(entries);
-    }, options);
-    observerCallbacks = new Map();
-  }
+  if (!!element && typeof callback == 'function') {
+    if (intersectionObserver === null && observerCallbacks === null) {
+      intersectionObserver = new IntersectionObserver(function (entries) {
+        handleObserverCallbacks(entries);
+      }, options);
+      observerCallbacks = new Map();
+    }
 
-  intersectionObserver.observe(element);
-  var oldCallbacks = observerCallbacks.get(element) || [];
-  observerCallbacks.set(element, [].concat(_toConsumableArray(oldCallbacks), [callback]));
+    intersectionObserver.observe(element);
+    var oldCallbacks = observerCallbacks.get(element) || [];
+    observerCallbacks.set(element, [].concat(_toConsumableArray(oldCallbacks), [callback]));
+  }
 }
 
 function removeIntersectionObserver(element, callback) {
-  var oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : [];
-  oldCallbacks = oldCallbacks.filter(function (handler) {
-    return handler !== callback;
-  });
+  if (!!element && typeof callback == 'function') {
+    var oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : null;
 
-  if (intersectionObserver && oldCallbacks.length === 0) {
-    observerCallbacks["delete"](element);
-    intersectionObserver.unobserve(element);
-  }
+    if (Array.isArray(oldCallbacks)) {
+      var callbacks = oldCallbacks.filter(function (handler) {
+        return 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/lib/Typography/Typography.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _utils = require("@zohodesk/utils");
+
+var _TypographyModule = _interopRequireDefault(require("./css/Typography.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Typography = function Typography(props) {
+  var children = props.children,
+      $ui_tagName = props.$ui_tagName,
+      $i18n_dataTitle = props.$i18n_dataTitle,
+      testId = props.testId,
+      customId = props.customId,
+      $tagAttributes_text = props.$tagAttributes_text,
+      $a11yAttributes_text = props.$a11yAttributes_text,
+      customStyle = props.customStyle;
+  var style = (0, _utils.mergeStyle)(_TypographyModule["default"], customStyle);
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    props: props,
+    style: style
+  }),
+      typographyClass = _cssJSLogic.typographyClass;
+
+  return /*#__PURE__*/_react["default"].createElement($ui_tagName, _objectSpread(_objectSpread({
+    className: typographyClass,
+    'data-title': $i18n_dataTitle,
+    'data-id': customId,
+    'data-test-id': testId
+  }, $tagAttributes_text), $a11yAttributes_text), children);
+};
+
+Typography.propTypes = _propTypes.propTypes;
+Typography.defaultProps = _defaultProps.defaultProps;
+var _default = Typography;
+exports["default"] = _default;