@zohodesk/components 1.3.1 → 1.3.2

package/README.md

@@ -1,37 +1,16 @@
 # DOT Style Guide
 
-In this Package, we Provide Some Basic Components to Build Web App
-
-- Avatar
-- AvatarTeam
-- Accordion
-- Animation
-- Button
-- Buttongroup
-- Card
-- CheckBox
-- DateTime
-- DropBox
-- Icon
-- Label
-- Layout
-- ListItem
-- MultiSelect
-- Popup
-- Radio
-- Responsive
-- Ribbon
-- Select
-- GroupSelect
-- Stencils
-- Switch
-- Tab
-- Tag
-- Textarea
-- TextBox
-- TextBoxIcon
-- Tooltip
+Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
+
+# 1.3.2
 
+- **Popup**
+  - Added `scrollDebounceTime` prop to support debounce control for fixed popup scroll behavior.
+- **VelocityAnimationGroup** - Added support for the following props:
+  - `onEnterComplete` - Callback triggered after enter animation completes.
+  - `onExitComplete` - Callback triggered after exit animation completes.
+  - `postEnterStyles` - Inline styles applied to the element once the enter animation has finished.  
+  
 # 1.3.1
 
 - **dropDownUtils** - The isObjectContainsSearchString function logic has been updated to use some instead of filter, and additional conditions have been added to prevent potential runtime issues.

package/es/Popup/Popup.js

@@ -89,8 +89,8 @@ const Popup = function (Component) {
       this.getIsOutsideScrollBlocked = this.getIsOutsideScrollBlocked.bind(this);
       this.getNeedArrow = this.getNeedArrow.bind(this);
       this.getCustomPositionOrder = this.getCustomPositionOrder.bind(this);
-      this.handleOpenPopupPositionChange = this.handleOpenPopupPositionChange.bind(this); // this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
-
+      this.handleOpenPopupPositionChange = this.handleOpenPopupPositionChange.bind(this);
+      this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
       this.getCloseOnScrollPopup = this.getCloseOnScrollPopup.bind(this);
       this.handleCloseLastOpenedGroup = this.handleCloseLastOpenedGroup.bind(this);
       this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -107,7 +107,6 @@ const Popup = function (Component) {
       this.updateVisibilityOnIntersection = this.updateVisibilityOnIntersection.bind(this);
       this.handleAddingScrollToUpdatePosition = this.handleAddingScrollToUpdatePosition.bind(this);
       this.handleRemovingScrollToUpdatePosition = this.handleRemovingScrollToUpdatePosition.bind(this);
-      this.updatePositionOnScroll = this.updatePositionOnScroll.bind(this);
       this.setContainerDynamicPositioning = this.setContainerDynamicPositioning.bind(this);
       this.updatePopupState = this.updatePopupState.bind(this);
       this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
@@ -122,8 +121,9 @@ const Popup = function (Component) {
       this.customPositionOrder = customPositionOrder;
       this.scrollDebounceTime = popupScrollDebounceTime;
       this.closeOnScroll = closeOnScrollPopup;
-      this.isOutsideScrollBlock = isOutsideScrollBlock; // const { scrollDebounceTime } = this.getScrollDebounceTime(this);
-      // this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
+      this.isOutsideScrollBlock = isOutsideScrollBlock;
+      const scrollDebounceTime = this.getScrollDebounceTime(this);
+      this.updatePositionOnScroll = scrollDebounceTime > 0 ? debounce(this.updatePositionOnScroll.bind(this), scrollDebounceTime) : this.updatePositionOnScroll.bind(this); // this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
     }
 
     componentDidMount() {
@@ -426,6 +426,7 @@ const Popup = function (Component) {
       const {
         dropElement
       } = this;
+      if (!dropElement) return;
 
       if (entry.isIntersecting === true) {
         this.isTargetElementVisible = true;
@@ -451,12 +452,17 @@ const Popup = function (Component) {
         needPopupArrow
       } = popup;
       return isArrow !== undefined ? isArrow : needPopupArrow;
-    } // getScrollDebounceTime(popup) {
-    //   const { scrollDebounceTime } = popup.props;
-    //   const { scrollDebounceTime: popupScrollDebounceTime } = popup;
-    //   return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
-    // }
+    }
 
+    getScrollDebounceTime(popup) {
+      const {
+        scrollDebounceTime
+      } = popup.props;
+      const {
+        scrollDebounceTime: popupScrollDebounceTime
+      } = popup;
+      return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
+    }
 
     getCloseOnScrollPopup(popup) {
       const {

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -16,6 +16,38 @@ function clearProps(props) {
 export default class VelocityAnimationGroup extends React.Component {
   constructor(props) {
     super(props);
+    this.handleEnterComplete = this.handleEnterComplete.bind(this);
+    this.handleExitComplete = this.handleExitComplete.bind(this);
+  }
+
+  handleEnterComplete(elements) {
+    const {
+      onEnterComplete,
+      postEnterStyles
+    } = this.props;
+
+    if (typeof onEnterComplete === 'function') {
+      onEnterComplete(elements);
+    }
+
+    if (postEnterStyles && typeof postEnterStyles === 'object') {
+      elements.forEach(rootElement => {
+        Object.entries(postEnterStyles).forEach(_ref => {
+          let [cssProperty, cssValue] = _ref;
+          rootElement.style[cssProperty] = cssValue;
+        });
+      });
+    }
+  }
+
+  handleExitComplete(elements) {
+    const {
+      onExitComplete
+    } = this.props;
+
+    if (typeof onExitComplete === 'function') {
+      onExitComplete(elements);
+    }
   }
 
   render() {
@@ -35,7 +67,10 @@ export default class VelocityAnimationGroup extends React.Component {
       enterDelay,
       isCustomized,
       name,
-      needUIPack
+      needUIPack,
+      onEnterComplete,
+      onExitComplete,
+      postEnterStyles
     } = this.props;
     let {
       direction,
@@ -76,13 +111,15 @@ export default class VelocityAnimationGroup extends React.Component {
       animation: isCustomized ? enterAnimationObj[name] : needUIPack ? `transition.${enterName}In` : enterName,
       duration: !isReducedMotion ? enterDuration : 0,
       delay: enterDelay ? enterDelay : 0,
-      display: isFlex ? 'flex' : ''
+      display: isFlex ? 'flex' : '',
+      complete: onEnterComplete || postEnterStyles ? this.handleEnterComplete : undefined
     };
     let exitAnimation = {
       animation: isCustomized ? exitAnimationObj[name] : needUIPack ? `transition.${exitName ? exitName : enterName}Out` : exitName ? exitName : enterName,
       duration: !isReducedMotion ? exitDuration : 0,
       delay: exitDelay ? exitDelay : 0,
-      display: 'none'
+      display: 'none',
+      complete: onExitComplete ? this.handleExitComplete : undefined
     };
     return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
       enter: enterAnimation,

package/es/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js

@@ -15,5 +15,8 @@ export const propTypes = {
   isFlex: PropTypes.bool,
   name: PropTypes.oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
   needUIPack: PropTypes.bool,
-  runOnMount: PropTypes.bool
+  runOnMount: PropTypes.bool,
+  onEnterComplete: PropTypes.func,
+  onExitComplete: PropTypes.func,
+  postEnterStyles: PropTypes.object
 };

package/lib/Popup/Popup.js

@@ -162,8 +162,8 @@ var Popup = function Popup(Component) {
       _this.getIsOutsideScrollBlocked = _this.getIsOutsideScrollBlocked.bind(_assertThisInitialized(_this));
       _this.getNeedArrow = _this.getNeedArrow.bind(_assertThisInitialized(_this));
       _this.getCustomPositionOrder = _this.getCustomPositionOrder.bind(_assertThisInitialized(_this));
-      _this.handleOpenPopupPositionChange = _this.handleOpenPopupPositionChange.bind(_assertThisInitialized(_this)); // this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
-
+      _this.handleOpenPopupPositionChange = _this.handleOpenPopupPositionChange.bind(_assertThisInitialized(_this));
+      _this.getScrollDebounceTime = _this.getScrollDebounceTime.bind(_assertThisInitialized(_this));
       _this.getCloseOnScrollPopup = _this.getCloseOnScrollPopup.bind(_assertThisInitialized(_this));
       _this.handleCloseLastOpenedGroup = _this.handleCloseLastOpenedGroup.bind(_assertThisInitialized(_this));
       _this.handleDocumentMouseDown = _this.handleDocumentMouseDown.bind(_assertThisInitialized(_this));
@@ -180,7 +180,6 @@ var Popup = function Popup(Component) {
       _this.updateVisibilityOnIntersection = _this.updateVisibilityOnIntersection.bind(_assertThisInitialized(_this));
       _this.handleAddingScrollToUpdatePosition = _this.handleAddingScrollToUpdatePosition.bind(_assertThisInitialized(_this));
       _this.handleRemovingScrollToUpdatePosition = _this.handleRemovingScrollToUpdatePosition.bind(_assertThisInitialized(_this));
-      _this.updatePositionOnScroll = _this.updatePositionOnScroll.bind(_assertThisInitialized(_this));
       _this.setContainerDynamicPositioning = _this.setContainerDynamicPositioning.bind(_assertThisInitialized(_this));
       _this.updatePopupState = _this.updatePopupState.bind(_assertThisInitialized(_this));
       _this.handleScrollAndBlockEvents = _this.handleScrollAndBlockEvents.bind(_assertThisInitialized(_this));
@@ -195,8 +194,11 @@ var Popup = function Popup(Component) {
       _this.customPositionOrder = customPositionOrder;
       _this.scrollDebounceTime = popupScrollDebounceTime;
       _this.closeOnScroll = closeOnScrollPopup;
-      _this.isOutsideScrollBlock = isOutsideScrollBlock; // const { scrollDebounceTime } = this.getScrollDebounceTime(this);
-      // this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
+      _this.isOutsideScrollBlock = isOutsideScrollBlock;
+
+      var scrollDebounceTime = _this.getScrollDebounceTime(_assertThisInitialized(_this));
+
+      _this.updatePositionOnScroll = scrollDebounceTime > 0 ? (0, _Common.debounce)(_this.updatePositionOnScroll.bind(_assertThisInitialized(_this)), scrollDebounceTime) : _this.updatePositionOnScroll.bind(_assertThisInitialized(_this)); // this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
 
       return _this;
     }
@@ -513,6 +515,7 @@ var Popup = function Popup(Component) {
       key: "updateVisibilityOnIntersection",
       value: function updateVisibilityOnIntersection(entry) {
         var dropElement = this.dropElement;
+        if (!dropElement) return;
 
         if (entry.isIntersecting === true) {
           this.isTargetElementVisible = true;
@@ -534,12 +537,14 @@ var Popup = function Popup(Component) {
         var isArrow = popup.props.isArrow;
         var needPopupArrow = popup.needPopupArrow;
         return isArrow !== undefined ? isArrow : needPopupArrow;
-      } // getScrollDebounceTime(popup) {
-      //   const { scrollDebounceTime } = popup.props;
-      //   const { scrollDebounceTime: popupScrollDebounceTime } = popup;
-      //   return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
-      // }
-
+      }
+    }, {
+      key: "getScrollDebounceTime",
+      value: function getScrollDebounceTime(popup) {
+        var scrollDebounceTime = popup.props.scrollDebounceTime;
+        var popupScrollDebounceTime = popup.scrollDebounceTime;
+        return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
+      }
     }, {
       key: "getCloseOnScrollPopup",
       value: function getCloseOnScrollPopup(popup) {

package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,6 +27,20 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 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); }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -63,35 +75,75 @@ var VelocityAnimationGroup = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(VelocityAnimationGroup);
 
   function VelocityAnimationGroup(props) {
+    var _this;
+
     _classCallCheck(this, VelocityAnimationGroup);
 
-    return _super.call(this, props);
+    _this = _super.call(this, props);
+    _this.handleEnterComplete = _this.handleEnterComplete.bind(_assertThisInitialized(_this));
+    _this.handleExitComplete = _this.handleExitComplete.bind(_assertThisInitialized(_this));
+    return _this;
   }
 
   _createClass(VelocityAnimationGroup, [{
+    key: "handleEnterComplete",
+    value: function handleEnterComplete(elements) {
+      var _this$props = this.props,
+          onEnterComplete = _this$props.onEnterComplete,
+          postEnterStyles = _this$props.postEnterStyles;
+
+      if (typeof onEnterComplete === 'function') {
+        onEnterComplete(elements);
+      }
+
+      if (postEnterStyles && _typeof(postEnterStyles) === 'object') {
+        elements.forEach(function (rootElement) {
+          Object.entries(postEnterStyles).forEach(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2),
+                cssProperty = _ref2[0],
+                cssValue = _ref2[1];
+
+            rootElement.style[cssProperty] = cssValue;
+          });
+        });
+      }
+    }
+  }, {
+    key: "handleExitComplete",
+    value: function handleExitComplete(elements) {
+      var onExitComplete = this.props.onExitComplete;
+
+      if (typeof onExitComplete === 'function') {
+        onExitComplete(elements);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          enterName = _this$props.enterName,
-          exitName = _this$props.exitName,
-          enterDuration = _this$props.enterDuration,
-          exitDuration = _this$props.exitDuration,
-          isActive = _this$props.isActive,
-          component = _this$props.component,
-          runOnMount = _this$props.runOnMount,
-          enterShowStyle = _this$props.enterShowStyle,
-          enterHideStyle = _this$props.enterHideStyle,
-          exitDelay = _this$props.exitDelay,
-          isFlex = _this$props.isFlex,
-          enterDelay = _this$props.enterDelay,
-          isCustomized = _this$props.isCustomized,
-          name = _this$props.name,
-          needUIPack = _this$props.needUIPack;
-
-      var _ref = this.context || {},
-          direction = _ref.direction,
-          isReducedMotion = _ref.isReducedMotion;
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          enterName = _this$props2.enterName,
+          exitName = _this$props2.exitName,
+          enterDuration = _this$props2.enterDuration,
+          exitDuration = _this$props2.exitDuration,
+          isActive = _this$props2.isActive,
+          component = _this$props2.component,
+          runOnMount = _this$props2.runOnMount,
+          enterShowStyle = _this$props2.enterShowStyle,
+          enterHideStyle = _this$props2.enterHideStyle,
+          exitDelay = _this$props2.exitDelay,
+          isFlex = _this$props2.isFlex,
+          enterDelay = _this$props2.enterDelay,
+          isCustomized = _this$props2.isCustomized,
+          name = _this$props2.name,
+          needUIPack = _this$props2.needUIPack,
+          onEnterComplete = _this$props2.onEnterComplete,
+          onExitComplete = _this$props2.onExitComplete,
+          postEnterStyles = _this$props2.postEnterStyles;
+
+      var _ref3 = this.context || {},
+          direction = _ref3.direction,
+          isReducedMotion = _ref3.isReducedMotion;
 
       var childProps = clearProps(this.props);
       var enterAnimationObj = {
@@ -128,13 +180,15 @@ var VelocityAnimationGroup = /*#__PURE__*/function (_React$Component) {
         animation: isCustomized ? enterAnimationObj[name] : needUIPack ? "transition.".concat(enterName, "In") : enterName,
         duration: !isReducedMotion ? enterDuration : 0,
         delay: enterDelay ? enterDelay : 0,
-        display: isFlex ? 'flex' : ''
+        display: isFlex ? 'flex' : '',
+        complete: onEnterComplete || postEnterStyles ? this.handleEnterComplete : undefined
       };
       var exitAnimation = {
         animation: isCustomized ? exitAnimationObj[name] : needUIPack ? "transition.".concat(exitName ? exitName : enterName, "Out") : exitName ? exitName : enterName,
         duration: !isReducedMotion ? exitDuration : 0,
         delay: exitDelay ? exitDelay : 0,
-        display: 'none'
+        display: 'none',
+        complete: onExitComplete ? this.handleExitComplete : undefined
       };
       return /*#__PURE__*/_react["default"].createElement(_velocityReact.VelocityTransitionGroup, _extends({
         enter: enterAnimation,

package/lib/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js

@@ -25,6 +25,9 @@ var propTypes = {
   isFlex: _propTypes["default"].bool,
   name: _propTypes["default"].oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
   needUIPack: _propTypes["default"].bool,
-  runOnMount: _propTypes["default"].bool
+  runOnMount: _propTypes["default"].bool,
+  onEnterComplete: _propTypes["default"].func,
+  onExitComplete: _propTypes["default"].func,
+  postEnterStyles: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -71,7 +71,7 @@
     "@zohodesk/a11y": "2.3.4",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.75",
+    "@zohodesk/icons": "1.0.78",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
@@ -86,7 +86,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.75",
+    "@zohodesk/icons": "1.0.78",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",