@zohodesk/components 1.2.40 → 1.2.41

package/lib/v1/Tab/Tabs.js

@@ -11,6 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _useEffectCallOnlyAfterState = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState"));
 
+var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
+
+var _EmptySearch = _interopRequireDefault(require("@zohodesk/svg/lib/emptystate/version3/EmptySearch"));
+
 var _Tab = _interopRequireDefault(require("./Tab"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -86,6 +90,11 @@ var Tabs = function Tabs(props) {
       tabKeys = _useState8[0],
       setTabKeys = _useState8[1];
 
+  var _useState9 = (0, _react.useState)(''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      searchValue = _useState10[0],
+      setSearchValue = _useState10[1];
+
   var tabsObserver = (0, _react.useRef)(new _ResizeObserver["default"](onResize));
   var tabObserver = (0, _react.useRef)({});
   var highlight = (0, _react.useRef)(null);
@@ -114,7 +123,60 @@ var Tabs = function Tabs(props) {
       childType = props.childType,
       containerClass = props.containerClass,
       dataSelectorId = props.dataSelectorId,
-      selectedTab = props.selectedTab;
+      selectedTab = props.selectedTab,
+      showTitleInMoreOptions = props.showTitleInMoreOptions,
+      searchErrorText = props.searchErrorText,
+      placeHolderText = props.placeHolderText,
+      searchBoxSize = props.searchBoxSize,
+      isPopupOpen = props.isPopupOpen,
+      closePopupOnly = props.closePopupOnly;
+
+  function handleChange(value, e) {
+    setSearchValue(value);
+  }
+
+  function handleSearchValueClear(e) {
+    setSearchValue('');
+  }
+
+  function getMoreList(_ref) {
+    var moreTabs = _ref.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;
+  }
+
+  function handleFilterSuggestions(_ref2) {
+    var moreTabs = _ref2.moreTabs;
+    var options = 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;
+  }
+
+  function renderEmptyState() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _v1TabsModule["default"].emptyStateContainer
+    }, /*#__PURE__*/_react["default"].createElement(_EmptySearch["default"], {
+      size: "small"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: _v1TabsModule["default"].emptyStateTitle
+    }, searchErrorText));
+  }
 
   function onTabResize(size, target) {
     var newDim = Object.assign({}, tabDimensions);
@@ -167,6 +229,11 @@ var Tabs = function Tabs(props) {
       }
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    if (searchValue.length) {
+      handleSearchValueClear();
+    }
+  }, [isPopupOpen]);
 
   function setMaxDim() {
     var totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -393,6 +460,7 @@ var Tabs = function Tabs(props) {
 
     e.preventDefault();
     onSelect(tab);
+    closePopupOnly();
   }
 
   function onScrollLocal(e) {
@@ -407,8 +475,8 @@ var Tabs = function Tabs(props) {
     togglePopup(e, boxPosition);
   }
 
-  function responsiveFunc(_ref) {
-    var mediaQueryOR = _ref.mediaQueryOR;
+  function responsiveFunc(_ref3) {
+    var mediaQueryOR = _ref3.mediaQueryOR;
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -445,8 +513,14 @@ var Tabs = function Tabs(props) {
         _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' ? _v1TabsModule["default"][position] ? _v1TabsModule["default"][position] : '' : '';
+    var moreTabsListItems = 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;
@@ -495,8 +569,8 @@ var Tabs = function Tabs(props) {
     })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
       query: 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,
@@ -512,29 +586,39 @@ var Tabs = function Tabs(props) {
         isResponsivePadding: true,
         needFocusScope: true,
         onClose: togglePopupLocal,
+        onClick: removeClose,
         dataId: "".concat(dataId, "_dropbox")
-      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), hasSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _v1TabsModule["default"].search
+      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
+        placeHolder: placeHolderText,
+        onChange: handleChange,
+        value: searchValue,
+        onClear: 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 ? '' : _v1TabsModule["default"].menuBox, " ").concat(moreBoxClass),
+        className: "".concat(_v1TabsModule["default"].listWrapper, " ").concat(tabletMode ? '' : _v1TabsModule["default"].menuBox, " ").concat(moreBoxClass),
         onScroll: onScrollLocal,
         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: moreTabSelect,
@@ -549,7 +633,7 @@ var Tabs = function Tabs(props) {
           target: "self",
           dataId: "".concat(dataId, "_Tab")
         }, ListItemProps), !showTitleInMoreOptions ? children : null);
-      })));
+      }) : renderEmptyState()));
     })) : null);
   }
 

package/lib/v1/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/v1/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/Tab/v1Tabs.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.40",
+  "version": "1.2.41",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -70,10 +70,10 @@
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.2.3",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/hooks": "2.0.4",
-    "@zohodesk/icons": "1.0.50",
-    "@zohodesk/svg": "1.1.14",
-    "@zohodesk/utils": "1.3.13",
+    "@zohodesk/hooks": "2.0.5",
+    "@zohodesk/icons": "1.0.56",
+    "@zohodesk/svg": "1.1.19",
+    "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
@@ -86,14 +86,14 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.50",
+    "@zohodesk/icons": "1.0.56",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/svg": "1.1.14",
+    "@zohodesk/svg": "1.1.19",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/hooks": "2.0.4",
-    "@zohodesk/utils": "1.3.13",
+    "@zohodesk/hooks": "2.0.5",
+    "@zohodesk/utils": "1.3.14",
     "@zohodesk/a11y": "2.2.3"
   }
-}
+}