@zohodesk/components 1.2.40 → 1.2.41

package/lib/Tab/Tabs.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _EmptySearch = _interopRequireDefault(require("@zohodesk/svg/lib/emptystate/version3/EmptySearch"));
+
 var _Tab = _interopRequireDefault(require("./Tab"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -29,6 +31,8 @@ var _TabsModule = _interopRequireDefault(require("./Tabs.module.css"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
+var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
+
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 
 var _CustomResponsive = require("../Responsive/CustomResponsive");
@@ -81,10 +85,11 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       tabDimensions: {},
       highlightInitialDimension: null,
       renderVirtualTabs: true,
-      tabKeys: []
+      tabKeys: [],
+      searchValue: ''
     };
 
-    _Common.bind.apply(_assertThisInitialized(_this), ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim']);
+    _Common.bind.apply(_assertThisInitialized(_this), ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim', 'handleChange', 'handleSearchValueClear', 'getMoreList', 'renderEmptyState']);
 
     _this.tabsObserver = new _ResizeObserver["default"](_this.onResize);
     _this.tabObserver = {};
@@ -188,11 +193,13 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           children = _this$props2.children,
           selectedTab = _this$props2.selectedTab,
-          childType = _this$props2.childType;
+          childType = _this$props2.childType,
+          isPopupOpen = _this$props2.isPopupOpen;
       var _this$state = this.state,
           tabDimensions = _this$state.tabDimensions,
           totalDimension = _this$state.totalDimension,
-          tabKeys = _this$state.tabKeys;
+          tabKeys = _this$state.tabKeys,
+          searchValue = _this$state.searchValue;
 
       if (prevProps.children && children) {
         /**
@@ -230,6 +237,10 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         if (prevProps.selectedTab !== selectedTab || newTabKeys.length === 1) {
           this.moveHighlight();
         }
+
+        if (prevProps.isPopupOpen != isPopupOpen && searchValue.length) {
+          this.handleSearchValueClear();
+        }
       }
     }
   }, {
@@ -431,7 +442,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "moreTabSelect",
     value: function moreTabSelect(tab, value, index, e) {
-      var onSelect = this.props.onSelect;
+      var _this$props7 = this.props,
+          onSelect = _this$props7.onSelect,
+          closePopupOnly = _this$props7.closePopupOnly;
 
       if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
         (0, _Common.cancelBubblingEffect)(e);
@@ -440,6 +453,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
 
       e.preventDefault();
       onSelect(tab);
+      closePopupOnly();
     }
   }, {
     key: "onScroll",
@@ -451,11 +465,11 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "togglePopup",
     value: function togglePopup(e) {
-      var _this$props7 = this.props,
-          boxPosition = _this$props7.boxPosition,
-          togglePopup = _this$props7.togglePopup,
-          align = _this$props7.align,
-          removeClose = _this$props7.removeClose;
+      var _this$props8 = this.props,
+          boxPosition = _this$props8.boxPosition,
+          togglePopup = _this$props8.togglePopup,
+          align = _this$props8.align,
+          removeClose = _this$props8.removeClose;
       removeClose && removeClose(e);
       var popupPosition = align === 'vertical' ? 'bottomLeft' : 'rightTop';
       boxPosition = boxPosition ? boxPosition : popupPosition;
@@ -471,45 +485,114 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }])
       };
     }
+  }, {
+    key: "handleChange",
+    value: function handleChange(value, e) {
+      this.setState({
+        searchValue: value
+      });
+    }
+  }, {
+    key: "handleSearchValueClear",
+    value: function handleSearchValueClear(e) {
+      this.setState({
+        searchValue: ''
+      });
+    }
+  }, {
+    key: "getMoreList",
+    value: function getMoreList(_ref2) {
+      var moreTabs = _ref2.moreTabs;
+      var validElements = [];
+
+      _react["default"].Children.map(moreTabs, function (child) {
+        var isValidElement = /*#__PURE__*/_react["default"].isValidElement(child);
+
+        if (isValidElement) {
+          validElements.push(child.props);
+        }
+      });
+
+      return validElements;
+    }
+  }, {
+    key: "handleFilterSuggestions",
+    value: function handleFilterSuggestions(_ref3) {
+      var moreTabs = _ref3.moreTabs;
+      var showTitleInMoreOptions = this.props.showTitleInMoreOptions;
+      var searchValue = this.state.searchValue;
+      var options = this.getMoreList({
+        moreTabs: moreTabs
+      });
+      var filteredOptions = options.filter(function (list) {
+        var text = list.text,
+            title = list.title;
+        var value = text ? text : showTitleInMoreOptions ? title : '';
+        return value.toLowerCase().includes(searchValue.toLowerCase());
+      });
+      return filteredOptions;
+    }
+  }, {
+    key: "renderEmptyState",
+    value: function renderEmptyState() {
+      var searchErrorText = this.props.searchErrorText;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: _TabsModule["default"].emptyStateContainer
+      }, /*#__PURE__*/_react["default"].createElement(_EmptySearch["default"], {
+        size: "small"
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: _TabsModule["default"].emptyStateTitle
+      }, searchErrorText));
+    }
   }, {
     key: "renderTabs",
     value: function renderTabs(mainTabs, moreTabs, isVirtual) {
       var _this8 = this;
 
-      var _this$props8 = this.props,
-          selectedTab = _this$props8.selectedTab,
-          moreButtonClass = _this$props8.moreButtonClass,
-          moreButtonActiveClass = _this$props8.moreButtonActiveClass,
-          moreBoxClass = _this$props8.moreBoxClass,
-          menuItemClass = _this$props8.menuItemClass,
-          itemClass = _this$props8.itemClass,
-          itemActiveClass = _this$props8.itemActiveClass,
-          iconName = _this$props8.iconName,
-          isPopupReady = _this$props8.isPopupReady,
-          isPopupOpen = _this$props8.isPopupOpen,
-          getContainerRef = _this$props8.getContainerRef,
-          showTitleInMoreOptions = _this$props8.showTitleInMoreOptions,
-          onSelect = _this$props8.onSelect,
-          moreContainerClass = _this$props8.moreContainerClass,
-          align = _this$props8.align,
-          type = _this$props8.type,
-          isAnimate = _this$props8.isAnimate,
-          needTabBorder = _this$props8.needTabBorder,
-          needAppearance = _this$props8.needAppearance,
-          iconSize = _this$props8.iconSize,
-          getTargetRef = _this$props8.getTargetRef,
-          position = _this$props8.position,
-          customProps = _this$props8.customProps,
-          getCustomDropBoxHeaderPlaceHolder = _this$props8.getCustomDropBoxHeaderPlaceHolder,
-          dataSelectorId = _this$props8.dataSelectorId,
-          dataId = _this$props8.dataId;
+      var _this$props9 = this.props,
+          selectedTab = _this$props9.selectedTab,
+          moreButtonClass = _this$props9.moreButtonClass,
+          moreButtonActiveClass = _this$props9.moreButtonActiveClass,
+          moreBoxClass = _this$props9.moreBoxClass,
+          menuItemClass = _this$props9.menuItemClass,
+          itemClass = _this$props9.itemClass,
+          itemActiveClass = _this$props9.itemActiveClass,
+          iconName = _this$props9.iconName,
+          isPopupReady = _this$props9.isPopupReady,
+          isPopupOpen = _this$props9.isPopupOpen,
+          getContainerRef = _this$props9.getContainerRef,
+          showTitleInMoreOptions = _this$props9.showTitleInMoreOptions,
+          onSelect = _this$props9.onSelect,
+          moreContainerClass = _this$props9.moreContainerClass,
+          align = _this$props9.align,
+          type = _this$props9.type,
+          isAnimate = _this$props9.isAnimate,
+          needTabBorder = _this$props9.needTabBorder,
+          needAppearance = _this$props9.needAppearance,
+          iconSize = _this$props9.iconSize,
+          getTargetRef = _this$props9.getTargetRef,
+          position = _this$props9.position,
+          customProps = _this$props9.customProps,
+          getCustomDropBoxHeaderPlaceHolder = _this$props9.getCustomDropBoxHeaderPlaceHolder,
+          dataSelectorId = _this$props9.dataSelectorId,
+          dataId = _this$props9.dataId,
+          placeHolderText = _this$props9.placeHolderText,
+          searchBoxSize = _this$props9.searchBoxSize,
+          removeClose = _this$props9.removeClose;
+      var searchValue = this.state.searchValue;
       var _customProps$DropBoxP = customProps.DropBoxProps,
           DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
           _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$MoreButt = customProps.MoreButtonProps,
-          MoreButtonProps = _customProps$MoreButt === void 0 ? {} : _customProps$MoreButt;
+          MoreButtonProps = _customProps$MoreButt === void 0 ? {} : _customProps$MoreButt,
+          _customProps$TextBoxI = customProps.TextBoxIconProps,
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
       var popupClass = align === 'vertical' ? _TabsModule["default"][position] ? _TabsModule["default"][position] : '' : '';
+      var moreTabsListItems = this.handleFilterSuggestions({
+        moreTabs: moreTabs
+      });
+      var hasSearch = moreTabs.length > 4;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _react["default"].Children.map(mainTabs, function (child) {
         if (!child) {
           return null;
@@ -558,8 +641,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
-      }, function (_ref2) {
-        var tabletMode = _ref2.tabletMode;
+      }, function (_ref4) {
+        var tabletMode = _ref4.tabletMode;
         return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], _extends({
           isActive: isPopupReady,
           isAnimate: true,
@@ -574,30 +657,40 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }, DropBoxProps, {
           isResponsivePadding: true,
           needFocusScope: true,
-          onClose: _this8.togglePopup,
-          dataId: "".concat(dataId, "_dropbox")
-        }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(_this8.props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          dataId: "".concat(dataId, "_dropbox"),
+          onClick: removeClose,
+          onClose: _this8.togglePopup
+        }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(_this8.props), hasSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: _TabsModule["default"].search
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
+          placeHolder: placeHolderText,
+          onChange: _this8.handleChange,
+          value: searchValue,
+          onClear: _this8.handleSearchValueClear,
+          size: searchBoxSize,
+          customProps: {
+            TextBoxProps: {
+              'data-a11y-autofocus': true
+            }
+          },
+          dataId: "".concat(dataId, "_search")
+        }, TextBoxIconProps))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           shrink: true,
           scroll: "vertical",
-          className: "".concat(tabletMode ? '' : _TabsModule["default"].menuBox, " ").concat(moreBoxClass),
+          className: "".concat(_TabsModule["default"].listWrapper, " ").concat(tabletMode ? '' : _TabsModule["default"].menuBox, " ").concat(moreBoxClass),
           onScroll: _this8.onScroll,
           dataId: "".concat(dataId, "_Tabs")
-        }, _react["default"].Children.map(moreTabs, function (child) {
-          if (!child) {
-            return null;
-          }
-
-          var _child$props = child.props,
-              text = _child$props.text,
-              id = _child$props.id,
-              title = _child$props.title,
-              isLink = _child$props.isLink,
-              href = _child$props.href,
-              children = _child$props.children,
-              dataId = _child$props.dataId;
+        }, moreTabsListItems.length ? moreTabsListItems.map(function (data) {
+          var text = data.text,
+              id = data.id,
+              title = data.title,
+              isLink = data.isLink,
+              href = data.href,
+              children = data.children,
+              dataId = data.dataId;
           var value = text ? text : showTitleInMoreOptions ? title : null;
-          return /*#__PURE__*/_react["default"].isValidElement(child) && /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
+          return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: id,
             value: value,
             onClick: _this8.moreTabSelect,
@@ -612,27 +705,27 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
             target: "self",
             dataId: "".concat(dataId, "_Tab")
           }, ListItemProps), !showTitleInMoreOptions ? children : null);
-        })));
+        }) : _this8.renderEmptyState()));
       })) : null);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props9 = this.props,
-          style = _this$props9.style,
-          className = _this$props9.className,
-          dataId = _this$props9.dataId,
-          highlightClass = _this$props9.highlightClass,
-          type = _this$props9.type,
-          isAnimate = _this$props9.isAnimate,
-          needTabBorder = _this$props9.needTabBorder,
-          needBorder = _this$props9.needBorder,
-          needPadding = _this$props9.needPadding,
-          align = _this$props9.align,
-          needAppearance = _this$props9.needAppearance,
-          children = _this$props9.children,
-          containerClass = _this$props9.containerClass,
-          dataSelectorId = _this$props9.dataSelectorId;
+      var _this$props10 = this.props,
+          style = _this$props10.style,
+          className = _this$props10.className,
+          dataId = _this$props10.dataId,
+          highlightClass = _this$props10.highlightClass,
+          type = _this$props10.type,
+          isAnimate = _this$props10.isAnimate,
+          needTabBorder = _this$props10.needTabBorder,
+          needBorder = _this$props10.needBorder,
+          needPadding = _this$props10.needPadding,
+          align = _this$props10.align,
+          needAppearance = _this$props10.needAppearance,
+          children = _this$props10.children,
+          containerClass = _this$props10.containerClass,
+          dataSelectorId = _this$props10.dataSelectorId;
       var _this$state2 = this.state,
           totalDimension = _this$state2.totalDimension,
           tabDimensions = _this$state2.tabDimensions,

package/lib/Tab/Tabs.module.css

@@ -123,15 +123,45 @@
 .bottomRightToLeft,
 .topRightToLeft,
 .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1); 
+  right: calc(var(--tab_position_gap) * -1);
 }
 
 .bottomLeftToRight,
 .topLeftToRight,
 .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1); 
+  left: calc(var(--tab_position_gap) * -1);
 }
 
 .hidden {
   visibility: hidden;
+}
+
+.search {
+  padding: 0 var(--zd_size20) 0 ;
+}
+
+.emptyStateContainer {
+  padding-bottom: var(--zd_size15) ;
+}
+
+.emptyStateTitle {
+  font-family: var(--zd_semibold);
+  word-wrap: break-word;
+  font-size: var(--zd_font_size16) ;
+  max-width: var(--zd_size430) ;
+  text-align: center;
+}
+
+[dir=ltr] .emptyStateTitle {
+  margin-left: auto ;
+  margin-right: auto ;
+}
+
+[dir=rtl] .emptyStateTitle {
+  margin-right: auto ;
+  margin-left: auto ;
+}
+
+.listWrapper {
+  padding-top: var(--zd_size10) ;
 }

package/lib/Tab/props/defaultProps.js

@@ -39,7 +39,10 @@ var Tabs_defaultProps = {
   iconSize: '7',
   containerClass: '',
   customProps: {},
-  dataSelectorId: 'tabs'
+  dataSelectorId: 'tabs',
+  searchBoxSize: 'small',
+  searchErrorText: 'No results',
+  placeHolderText: 'Search'
 };
 exports.Tabs_defaultProps = Tabs_defaultProps;
 var TabWrapper_defaultProps = {

package/lib/Tab/props/propTypes.js

@@ -97,12 +97,17 @@ var Tabs_propTypes = {
   getTargetRef: _propTypes["default"].func,
   containerClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
+    TextBoxIconProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object,
     ListItemProps: _propTypes["default"].object,
     MoreButtonProps: _propTypes["default"].object
   }),
   getCustomDropBoxHeaderPlaceHolder: _propTypes["default"].func,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  placeHolderText: _propTypes["default"].string,
+  searchBoxSize: _propTypes["default"].string,
+  searchErrorText: _propTypes["default"].string,
+  closePopupOnly: _propTypes["default"].func
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {

package/lib/v1/Card/props/propTypes.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var CardHeader_propTypes = {
-  children: _propTypes["default"].element,
+  children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
   isScroll: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,

package/lib/v1/DateTime/props/propTypes.js

@@ -110,7 +110,7 @@ exports.DateTime_propTypes = DateTime_propTypes;
 var DateWidget_propTypes = {
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
   cantEditOnPopupOpen: _propTypes["default"].bool,
-  children: _propTypes["default"].object,
+  children: _propTypes["default"].node,
   className: _propTypes["default"].string,
   closePopupOnly: _propTypes["default"].func,
   dataId: _propTypes["default"].string,

package/lib/v1/ResponsiveDropBox/props/propTypes.js

@@ -18,7 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 propTypes = _objectSpread(_objectSpread({}, _propTypes2.DropBoxPropTypes), {}, {
-  children: _propTypes["default"].element,
+  children: _propTypes["default"].node,
   customClass: _propTypes["default"].object,
   isResponsivePadding: _propTypes["default"].bool,
   alignBox: _propTypes["default"].oneOf(['column', 'row'])

package/lib/v1/Ribbon/props/propTypes.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
-  children: _propTypes["default"].element,
+  children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
   palette: _propTypes["default"].oneOf(['default', 'danger', 'primary', 'secondary', 'info', 'dark']),
   size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),