@zohodesk/components 1.3.0 → 1.3.2

package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -85,7 +85,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -184,7 +184,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -283,7 +283,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -382,7 +382,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/MultiSelect/Suggestions.js

@@ -83,7 +83,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           avatarPalette = _this$props.avatarPalette,
           palette = _this$props.palette,
           htmlId = _this$props.htmlId,
-          a11y = _this$props.a11y;
+          a11y = _this$props.a11y,
+          needMultiLineText = _this$props.needMultiLineText;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -116,7 +117,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         });
 
         var commonProps = _objectSpread({
-          isDisabled: isDisabled
+          isDisabled: isDisabled,
+          needMultiLineText: needMultiLineText
         }, listItemCustomProps);
 
         if (listItemProps) {

package/lib/MultiSelect/props/defaultProps.js

@@ -181,6 +181,7 @@ var SelectedOptions_defaultProps = {
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
-  a11y: {}
+  a11y: {},
+  needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -197,6 +197,7 @@ var Suggestions_propTypes = {
   palette: _propTypes["default"].string,
   selectedOptions: _propTypes["default"].array,
   htmlId: _propTypes["default"].string,
+  needMultiLineText: _propTypes["default"].bool,
   suggestions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),

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/lib/utils/dropDownUtils.js

@@ -150,16 +150,24 @@ var getListItemProps = function getListItemProps(props) {
 
 var getSearchFields = function getSearchFields(props) {
   return props.searchFields || ['value'];
-};
+}; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
+//   const matchedFields = searchFields.filter(element => {
+//     return getSearchString(obj[element]).indexOf(searchStr) !== -1
+//   });
+//   return matchedFields.length !== 0;
+// }
+
 
 var isObjectContainsSearchString = function isObjectContainsSearchString() {
   var searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var obj = arguments.length > 2 ? arguments[2] : undefined;
-  var matchedFields = searchFields.filter(function (element) {
-    return (0, _Common.getSearchString)(obj[element]).indexOf(searchStr) !== -1;
+  var obj = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return searchFields.some(function (field) {
+    var val = obj[field];
+    if (val === null || val === undefined) return false;
+    var str = (0, _Common.getSearchString)(val);
+    return str && str.indexOf(searchStr) !== -1;
   });
-  return matchedFields.length !== 0;
 };
 
 var getAllowValueFallback = function getAllowValueFallback(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -65,13 +65,13 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@zohodesk-private/color-variable-preprocessor": "1.2.0",
-    "@zohodesk-private/css-variable-migrator": "^1.0.7",
+    "@zohodesk-private/css-variable-migrator": "^1.0.8",
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@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",