@zohodesk/components 1.0.0-temp-207 → 1.0.0-temp-208

package/es/v1/Tab/index.js

@@ -1,5 +1,5 @@
-export { default as TabWrapper } from "./TabWrapper";
-export { default as TabContentWrapper } from "./TabContentWrapper";
-export { default as TabContent } from "./TabContent";
-export { default as Tabs } from "./Tabs";
-export { default as Tab } from "./Tab";
+export { default as TabWrapper } from './TabWrapper';
+export { default as TabContentWrapper } from './TabContentWrapper';
+export { default as TabContent } from './TabContent';
+export { default as Tabs } from './Tabs';
+export { default as Tab } from './Tab';

package/es/v1/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import Avatar from "../Avatar/Avatar";
-import { Container } from "../Layout";
-import Button from "../semantic/Button/Button";
-import { useUniqueId } from "../../Provider/IdProvider";
-import style from "../../Tag/Tag.module.css";
+import Avatar from '../Avatar/Avatar';
+import { Container } from '../Layout';
+import Button from '../semantic/Button/Button';
+import { useUniqueId } from '../../Provider/IdProvider';
+import style from '../../Tag/Tag.module.css';
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',

package/es/v1/TextBox/TextBox.js

@@ -1,7 +1,7 @@
 import React, { memo, useRef, useCallback } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../TextBox/TextBox.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../TextBox/TextBox.module.css';
 
 function TextBox(props) {
   let {

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import TextBox from "../TextBox/TextBox";
-import { Container, Box } from "../Layout";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import TextBox from '../TextBox/TextBox';
+import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import btnStyle from "../../semantic/Button/semanticButton.module.css";
-import style from "../../TextBoxIcon/TextBoxIcon.module.css";
+import btnStyle from '../../semantic/Button/semanticButton.module.css';
+import style from '../../TextBoxIcon/TextBoxIcon.module.css';
 /* eslint-disable react/forbid-component-props */
 
 export default function TextBoxIcon(props) {

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as TextBox_propTypes } from "../../TextBox/props/propTypes";
+import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
 export const propTypes = { ...TextBox_propTypes,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,

package/es/v1/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Textarea/Textarea.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../Textarea/Textarea.module.css';
 export default function Textarea(props) {
   let {
     size,

package/es/v1/Tooltip/Tooltip.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getLibraryConfig } from "../../Provider/Config";
-import ResizeObserver from "../../Responsive/ResizeObserver";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getLibraryConfig } from '../../Provider/Config';
+import ResizeObserver from '../../Responsive/ResizeObserver';
 import selectn from 'selectn';
-import { whiteSpaceClassMapping } from "../../utils/cssUtils";
-import style from "../../Tooltip/Tooltip.module.css";
+import { whiteSpaceClassMapping } from '../../utils/cssUtils';
+import style from '../../Tooltip/Tooltip.module.css';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);

package/es/v1/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+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/Typography.module.css';
 
 const Typography = props => {
   const {

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

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping, lineheightMapping } from "../utils";
+import { letterspacingMapping, lineheightMapping } from '../utils';
 export default function cssJSLogic(_ref) {
   let {
     props,

package/es/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from "../../../Provider/LibraryContextInit";
+import LibraryContext from '../../../Provider/LibraryContextInit';
 export default function VelocityAnimation(props) {
   let {
     children,

package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from "../../../Provider/LibraryContextInit";
+import LibraryContext from '../../../Provider/LibraryContextInit';
 
 function clearProps(props) {
   let newProps = Object.assign({}, props);

package/es/v1/semantic/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../../semantic/Button/semanticButton.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../../semantic/Button/semanticButton.module.css';
 export default function Button(props) {
   const {
     value,

package/es/v1/semantic/index.js

@@ -1 +1 @@
-export { default as SemanticButton } from "./Button/Button";
+export { default as SemanticButton } from './Button/Button';

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -436,7 +436,11 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           disabledOptions = _this$props5.disabledOptions,
           isLoading = _this$props5.isLoading,
           dataSelectorId = _this$props5.dataSelectorId,
-          customClass = _this$props5.customClass;
+          customClass = _this$props5.customClass,
+          isAbsolutePositioningNeeded = _this$props5.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props5.positionsOffset,
+          targetOffset = _this$props5.targetOffset,
+          isRestrictScroll = _this$props5.isRestrictScroll;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
@@ -569,7 +573,11 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
             role: 'listbox',
             ariaMultiselectable: true
           },
-          dataId: "".concat(dataIdMultiSelectComp, "_dropbox")
+          dataId: "".concat(dataIdMultiSelectComp, "_dropbox"),
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true

package/lib/MultiSelect/props/defaultProps.js

@@ -76,7 +76,8 @@ var AdvancedMultiSelect_defaultProps = {
   needEffect: true,
   isLoading: false,
   dataSelectorId: 'advancedMultiSelect',
-  customClass: {}
+  customClass: {},
+  isAbsolutePositioningNeeded: false
 };
 exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
 var EmptyState_defaultProps = {

package/lib/MultiSelect/props/propTypes.js

@@ -339,7 +339,11 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
-  customClass: _propTypes["default"].object
+  customClass: _propTypes["default"].object,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
+  isRestrictScroll: _propTypes["default"].bool
 });
 
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;

package/lib/Textarea/Textarea.js

@@ -9,20 +9,10 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _debounce = _interopRequireDefault(require("./utils/debounce"));
-
-var _calculateNodeHeight2 = _interopRequireDefault(require("./utils/calculateNodeHeight"));
-
-var _ownerWindow = _interopRequireDefault(require("./utils/ownerWindow"));
-
-var _updateState = _interopRequireDefault(require("./utils/updateState"));
-
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -60,26 +50,20 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, Textarea);
 
     _this = _super.call(this, props);
-    _this.hiddenTextareaRef = /*#__PURE__*/_react["default"].createRef();
-    _this.rendersRef = /*#__PURE__*/_react["default"].createRef();
-    _this.sizingData = /*#__PURE__*/_react["default"].createRef(null);
-    _this.rAF = null;
-    _this.resizeObserver = null;
-    _this.debounceHandleResize = null;
-    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
-    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
-    _this.inputRef = _this.inputRef.bind(_assertThisInitialized(_this));
-    _this.isEmpty = _this.isEmpty.bind(_assertThisInitialized(_this));
-    _this.syncHeight = _this.syncHeight.bind(_assertThisInitialized(_this));
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
-    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
-    _this.rAFHandleResize = _this.rAFHandleResize.bind(_assertThisInitialized(_this));
-    _this.mountingPhase = _this.mountingPhase.bind(_assertThisInitialized(_this));
-    _this.unMountingPhase = _this.unMountingPhase.bind(_assertThisInitialized(_this));
+    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
+    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Textarea, [{
+    key: "onChange",
+    value: function onChange(e) {
+      e && e.preventDefault();
+      var onChange = this.props.onChange;
+      onChange && onChange(e.target.value, e);
+    }
+  }, {
     key: "onBlur",
     value: function onBlur(e) {
       e && e.preventDefault();
@@ -92,181 +76,59 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       var onKeyDown = this.props.onKeyDown;
       onKeyDown && onKeyDown(e);
     }
-  }, {
-    key: "inputRef",
-    value: function inputRef(e) {
-      var getRef = this.props.getRef;
-      this.textareaRef = e;
-      getRef && getRef(e);
-    }
-  }, {
-    key: "isEmpty",
-    value: function isEmpty(obj) {
-      return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.height === 0 && !obj.overflow;
-    }
-  }, {
-    key: "syncHeight",
-    value: function syncHeight() {
-      var _this$props = this.props,
-          minRows = _this$props.minRows,
-          maxRows = _this$props.maxRows;
-
-      var _calculateNodeHeight = (0, _calculateNodeHeight2["default"])({
-        minRows: minRows,
-        maxRows: maxRows,
-        textareaEle: this.textareaRef,
-        hiddenTextareaEle: this.hiddenTextareaRef.current
-      }),
-          height = _calculateNodeHeight.height,
-          overflow = _calculateNodeHeight.overflow;
-
-      var newState = {
-        height: height,
-        overflow: overflow
-      };
-
-      if (this.isEmpty(newState)) {
-        return;
-      }
-
-      this.sizingData.current = (0, _updateState["default"])(this.sizingData.current, newState, this.rendersRef); // this.textareaRef.style.setProperty('height',`${this.sizingData.current.height}px`);
-
-      this.textareaRef.style.height = "".concat(this.sizingData.current.height, "px");
-      this.textareaRef.style.overflowY = "".concat(this.sizingData.current.overflow ? 'hidden' : 'auto');
-    }
-  }, {
-    key: "onChange",
-    value: function onChange(e) {
-      var _this2 = this;
-
-      e && e.preventDefault();
-      var onChange = this.props.onChange;
-      this.rendersRef.current = 0;
-      onChange && onChange(e.target.value, e);
-      requestAnimationFrame(function () {
-        _this2.syncHeight();
-      });
-    }
-  }, {
-    key: "handleResize",
-    value: function handleResize() {
-      this.rendersRef.current = 0;
-      this.syncHeight();
-    }
-  }, {
-    key: "rAFHandleResize",
-    value: function rAFHandleResize() {
-      var _this3 = this;
-
-      cancelAnimationFrame(this.rAF);
-      this.rAF = requestAnimationFrame(function () {
-        _this3.handleResize();
-      });
-    }
-  }, {
-    key: "mountingPhase",
-    value: function mountingPhase() {
-      var input = this.textareaRef;
-      var containerWindow = (0, _ownerWindow["default"])(input);
-      this.debounceHandleResize = (0, _debounce["default"])(this.handleResize);
-      containerWindow.addEventListener("resize", this.debounceHandleResize);
-
-      if (typeof ResizeObserver !== "undefined") {
-        this.resizeObserver = new ResizeObserver(this.rAFHandleResize);
-        this.resizeObserver.observe(input);
-      }
-    }
-  }, {
-    key: "unMountingPhase",
-    value: function unMountingPhase() {
-      var input = this.textareaRef;
-      var containerWindow = (0, _ownerWindow["default"])(input);
-      this.debounceHandleResize.clear();
-      cancelAnimationFrame(this.rAF);
-      containerWindow.removeEventListener("resize", this.debounceHandleResize);
-
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect();
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.sizingData.current = {
-        height: 0,
-        overflow: false
-      };
-      this.mountingPhase();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.sizingData.current = null;
-      this.unMountingPhase();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.text !== this.props.text) {
-        this.rendersRef.current = 0;
-        this.syncHeight();
-      }
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          size = _this$props2.size,
-          placeHolder = _this$props2.placeHolder,
-          needBorder = _this$props2.needBorder,
-          text = _this$props2.text,
-          isDisabled = _this$props2.isDisabled,
-          resize = _this$props2.resize,
-          maxLength = _this$props2.maxLength,
-          animated = _this$props2.animated,
-          variant = _this$props2.variant,
-          getRef = _this$props2.getRef,
-          onFocus = _this$props2.onFocus,
-          dataId = _this$props2.dataId,
-          dataSelectorId = _this$props2.dataSelectorId,
-          isReadOnly = _this$props2.isReadOnly,
-          needAppearance = _this$props2.needAppearance,
-          needReadOnlyStyle = _this$props2.needReadOnlyStyle,
-          borderColor = _this$props2.borderColor,
-          needEffect = _this$props2.needEffect,
-          autoFocus = _this$props2.autoFocus,
-          htmlId = _this$props2.htmlId,
-          a11y = _this$props2.a11y,
-          customClass = _this$props2.customClass,
-          _this$props2$minRows = _this$props2.minRows,
-          minRows = _this$props2$minRows === void 0 ? 3 : _this$props2$minRows;
+      var _this$props = this.props,
+          size = _this$props.size,
+          placeHolder = _this$props.placeHolder,
+          needBorder = _this$props.needBorder,
+          text = _this$props.text,
+          isDisabled = _this$props.isDisabled,
+          resize = _this$props.resize,
+          maxLength = _this$props.maxLength,
+          animated = _this$props.animated,
+          variant = _this$props.variant,
+          getRef = _this$props.getRef,
+          onFocus = _this$props.onFocus,
+          dataId = _this$props.dataId,
+          dataSelectorId = _this$props.dataSelectorId,
+          isReadOnly = _this$props.isReadOnly,
+          needAppearance = _this$props.needAppearance,
+          needReadOnlyStyle = _this$props.needReadOnlyStyle,
+          borderColor = _this$props.borderColor,
+          needEffect = _this$props.needEffect,
+          autoFocus = _this$props.autoFocus,
+          htmlId = _this$props.htmlId,
+          a11y = _this$props.a11y,
+          customClass = _this$props.customClass;
       var ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby;
       var resizes = {
-        horizontal: "resizeX",
-        vertical: "resizeY",
-        both: "resizeboth",
-        none: "noresize"
+        horizontal: 'resizeX',
+        vertical: 'resizeY',
+        both: 'resizeboth',
+        none: 'noresize'
       };
       var options = {};
 
       if (isReadOnly) {
-        options.readOnly = "readOnly";
+        options.readOnly = 'readOnly';
       }
 
       if (isDisabled) {
-        options.disabled = "disabled";
+        options.disabled = 'disabled';
       }
 
       if (autoFocus) {
         options.autoFocus = true;
       }
 
-      var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(_TextareaModule["default"][size], " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], "  ").concat(animated ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : "", "   ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? "" : _TextareaModule["default"].effect) : "".concat(_TextareaModule["default"].basic);
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("textarea", _extends({
+      var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(_TextareaModule["default"][size], " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], "  ").concat(animated ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', "   ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect) : "".concat(_TextareaModule["default"].basic);
+      return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
-        className: "".concat(customClass, " ").concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : "", " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)]),
+        className: "".concat(customClass, " ").concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : '', " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)]),
         placeholder: placeHolder
       }, options, {
         "data-id": dataId,
@@ -276,17 +138,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         onKeyDown: this.onKeyDown,
         onFocus: onFocus,
         onBlur: this.onBlur,
-        ref: this.inputRef,
+        ref: getRef,
         value: text,
         id: htmlId,
-        "data-selector-id": dataSelectorId,
-        rows: minRows
-      })), /*#__PURE__*/_react["default"].createElement("textarea", {
-        "aria-hidden": true,
-        readOnly: true,
-        ref: this.hiddenTextareaRef,
-        tabIndex: -1,
-        className: "".concat(customClass, " ").concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : "", " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)], " ").concat(_TextareaModule["default"].forceHiddenStyle)
+        "data-selector-id": dataSelectorId
       }));
     }
   }]);