@zohodesk/components 1.2.40 → 1.2.41

package/es/v1/Tab/Tabs.js

@@ -1,18 +1,20 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
-import Tab from "./Tab";
-import { Tabs_defaultProps } from "./props/defaultProps";
-import { Tabs_propTypes } from "./props/propTypes";
-import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from "../../utils/Common";
-import { Box, Container } from "../Layout";
-import ResizeObserver from "../../Responsive/ResizeObserver";
-import ListItem from "../ListItem/ListItem";
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
+import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
+import Tab from './Tab';
+import { Tabs_defaultProps } from './props/defaultProps';
+import { Tabs_propTypes } from './props/propTypes';
+import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from '../../utils/Common';
+import { Box, Container } from '../Layout';
+import ResizeObserver from '../../Responsive/ResizeObserver';
+import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
-import tabsStyle from "./v1Tabs.module.css";
-import Popup from "../Popup/Popup";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
-import btnstyle from "../../semantic/Button/semanticButton.module.css";
+import tabsStyle from './v1Tabs.module.css';
+import Popup from '../Popup/Popup';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
+import btnstyle from '../../semantic/Button/semanticButton.module.css';
 
 const Tabs = props => {
   const [totalDimension, setTotalDimension] = useState(null);
@@ -20,6 +22,7 @@ const Tabs = props => {
   const highlightInitialDimension = useRef(null);
   const [renderVirtualTabs, setRenderVirtualTabs] = useState(true);
   const [tabKeys, setTabKeys] = useState([]);
+  const [searchValue, setSearchValue] = useState('');
   const tabsObserver = useRef(new ResizeObserver(onResize));
   const tabObserver = useRef({});
   const highlight = useRef(null);
@@ -49,9 +52,66 @@ const Tabs = props => {
     childType,
     containerClass,
     dataSelectorId,
-    selectedTab
+    selectedTab,
+    showTitleInMoreOptions,
+    searchErrorText,
+    placeHolderText,
+    searchBoxSize,
+    isPopupOpen,
+    closePopupOnly
   } = props;
 
+  function handleChange(value, e) {
+    setSearchValue(value);
+  }
+
+  function handleSearchValueClear(e) {
+    setSearchValue('');
+  }
+
+  function getMoreList(_ref) {
+    let {
+      moreTabs
+    } = _ref;
+    const validElements = [];
+    React.Children.map(moreTabs, child => {
+      const isValidElement = /*#__PURE__*/React.isValidElement(child);
+
+      if (isValidElement) {
+        validElements.push(child.props);
+      }
+    });
+    return validElements;
+  }
+
+  function handleFilterSuggestions(_ref2) {
+    let {
+      moreTabs
+    } = _ref2;
+    const options = getMoreList({
+      moreTabs
+    });
+    const filteredOptions = options.filter(list => {
+      const {
+        text,
+        title
+      } = list;
+      const value = text ? text : showTitleInMoreOptions ? title : '';
+      return value.toLowerCase().includes(searchValue.toLowerCase());
+    });
+    return filteredOptions;
+  }
+
+  function renderEmptyState() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: tabsStyle.emptyStateContainer
+    }, /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: tabsStyle.emptyStateTitle
+    }, searchErrorText));
+  }
+
   function onTabResize(size, target) {
     let newDim = Object.assign({}, tabDimensions);
     let elemDim = getTotalDimension(target, align);
@@ -101,6 +161,11 @@ const Tabs = props => {
       }
     };
   }, []);
+  useEffect(() => {
+    if (searchValue.length) {
+      handleSearchValueClear();
+    }
+  }, [isPopupOpen]);
 
   function setMaxDim() {
     let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -320,6 +385,7 @@ const Tabs = props => {
 
     e.preventDefault();
     onSelect(tab);
+    closePopupOnly();
   }
 
   function onScrollLocal(e) {
@@ -334,10 +400,10 @@ const Tabs = props => {
     togglePopup(e, boxPosition);
   }
 
-  function responsiveFunc(_ref) {
+  function responsiveFunc(_ref3) {
     let {
       mediaQueryOR
-    } = _ref;
+    } = _ref3;
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -374,9 +440,14 @@ const Tabs = props => {
     let {
       DropBoxProps = {},
       ListItemProps = {},
-      MoreButtonProps = {}
+      MoreButtonProps = {},
+      TextBoxIconProps = {}
     } = customProps;
     let popupClass = align === 'vertical' ? tabsStyle[position] ? tabsStyle[position] : '' : '';
+    const moreTabsListItems = handleFilterSuggestions({
+      moreTabs
+    });
+    const hasSearch = moreTabs.length > 4;
     return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(mainTabs, child => {
       if (!child) {
         return null;
@@ -426,10 +497,10 @@ const Tabs = props => {
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
+    }, _ref4 => {
       let {
         tabletMode
-      } = _ref2;
+      } = _ref4;
       return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         isActive: isPopupReady,
         isAnimate: true,
@@ -445,19 +516,31 @@ const Tabs = props => {
         isResponsivePadding: true,
         needFocusScope: true,
         onClose: togglePopupLocal,
+        onClick: removeClose,
         dataId: `${dataId}_dropbox`
-      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
+      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
+        className: tabsStyle.search
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        placeHolder: placeHolderText,
+        onChange: handleChange,
+        value: searchValue,
+        onClear: handleSearchValueClear,
+        size: searchBoxSize,
+        customProps: {
+          TextBoxProps: {
+            'data-a11y-autofocus': true
+          }
+        },
+        dataId: `${dataId}_search`,
+        ...TextBoxIconProps
+      })) : null, /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
-        className: `${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
+        className: `${tabsStyle.listWrapper} ${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
         onScroll: onScrollLocal,
         dataId: `${dataId}_Tabs`
-      }, React.Children.map(moreTabs, child => {
-        if (!child) {
-          return null;
-        }
-
+      }, moreTabsListItems.length ? moreTabsListItems.map(data => {
         let {
           text,
           id,
@@ -466,9 +549,9 @@ const Tabs = props => {
           href,
           children,
           dataId
-        } = child.props;
+        } = data;
         const value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, {
+        return /*#__PURE__*/React.createElement(ListItem, {
           key: id,
           value: value,
           onClick: moreTabSelect,
@@ -484,7 +567,7 @@ const Tabs = props => {
           dataId: `${dataId}_Tab`,
           ...ListItemProps
         }, !showTitleInMoreOptions ? children : null);
-      })));
+      }) : renderEmptyState()));
     })) : null);
   }
 

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/Tab/props/defaultProps.js

@@ -30,7 +30,10 @@ export const Tabs_defaultProps = {
   iconSize: '7',
   containerClass: '',
   customProps: {},
-  dataSelectorId: 'tabs'
+  dataSelectorId: 'tabs',
+  searchBoxSize: 'small',
+  searchErrorText: 'No results',
+  placeHolderText: 'Search'
 };
 export const TabWrapper_defaultProps = {
   hookToDisableInternalState: false,

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

@@ -84,12 +84,17 @@ export const Tabs_propTypes = {
   getTargetRef: PropTypes.func,
   containerClass: PropTypes.string,
   customProps: PropTypes.shape({
+    TextBoxIconProps: PropTypes.object,
     DropBoxProps: PropTypes.object,
     ListItemProps: PropTypes.object,
     MoreButtonProps: PropTypes.object
   }),
   getCustomDropBoxHeaderPlaceHolder: PropTypes.func,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  placeHolderText: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  searchErrorText: PropTypes.string,
+  closePopupOnly: PropTypes.func
 };
 export const TabWrapper_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),

package/es/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/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,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getLibraryConfig } from "../../Provider/Config";
-import style from "../../Tooltip/Tooltip.module.css";
-import ResizeObserver from "../../Responsive/ResizeObserver";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getLibraryConfig } from '../../Provider/Config';
+import style from '../../Tooltip/Tooltip.module.css';
+import ResizeObserver from '../../Responsive/ResizeObserver';
 import selectn from 'selectn';
 export default class Tooltip extends React.Component {
   constructor(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';