@zohodesk/components 1.2.39 → 1.2.41

package/README.md

@@ -32,6 +32,15 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.41
+
+- **Tabs** 
+  - Search implemented in more popup (v0& v1)
+
+# 1.2.40
+
+- **Radio** - renderRightPlaceholderNode prop supported
+
 # 1.2.39
 
 - **LibraryContext** - coloredTagVariant, hasTagColorInheritedToText properties added

package/es/Radio/Radio.js

@@ -49,7 +49,8 @@ export default class Radio extends React.Component {
       customClass,
       customProps,
       children,
-      a11y
+      a11y,
+      renderRightPlaceholderNode
     } = this.props;
     let {
       customRadioWrap = '',
@@ -127,7 +128,7 @@ export default class Radio extends React.Component {
       customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} 
               ${style[`${palette}Label`]} ${accessMode} ${customLabel}`,
       ...LabelProps
-    })), children);
+    })), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }
 
 }

package/es/Radio/props/propTypes.js

@@ -36,5 +36,6 @@ export const propTypes = {
   }),
   children: PropTypes.node,
   onChange: PropTypes.func,
-  text: PropTypes.string
+  text: PropTypes.string,
+  renderRightPlaceholderNode: PropTypes.node
 };

package/es/Tab/Tabs.js

@@ -8,6 +8,7 @@
     }]
 */
 import React from 'react';
+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';
@@ -18,6 +19,7 @@ import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
 import tabsStyle from './Tabs.module.css';
 import Popup from '../Popup/Popup';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import btnstyle from '../semantic/Button/semanticButton.module.css';
@@ -30,9 +32,10 @@ class Tabs extends React.Component {
       tabDimensions: {},
       highlightInitialDimension: null,
       renderVirtualTabs: true,
-      tabKeys: []
+      tabKeys: [],
+      searchValue: ''
     };
-    bind.apply(this, ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim']);
+    bind.apply(this, ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim', 'handleChange', 'handleSearchValueClear', 'getMoreList', 'renderEmptyState']);
     this.tabsObserver = new ResizeObserver(this.onResize);
     this.tabObserver = {};
   }
@@ -130,12 +133,14 @@ class Tabs extends React.Component {
     let {
       children,
       selectedTab,
-      childType
+      childType,
+      isPopupOpen
     } = this.props;
     let {
       tabDimensions,
       totalDimension,
-      tabKeys
+      tabKeys,
+      searchValue
     } = this.state;
 
     if (prevProps.children && children) {
@@ -169,6 +174,10 @@ class Tabs extends React.Component {
       if (prevProps.selectedTab !== selectedTab || newTabKeys.length === 1) {
         this.moveHighlight();
       }
+
+      if (prevProps.isPopupOpen != isPopupOpen && searchValue.length) {
+        this.handleSearchValueClear();
+      }
     }
   }
 
@@ -363,7 +372,8 @@ class Tabs extends React.Component {
 
   moreTabSelect(tab, value, index, e) {
     let {
-      onSelect
+      onSelect,
+      closePopupOnly
     } = this.props;
 
     if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
@@ -373,6 +383,7 @@ class Tabs extends React.Component {
 
     e.preventDefault();
     onSelect(tab);
+    closePopupOnly();
   }
 
   onScroll(e) {
@@ -407,6 +418,70 @@ class Tabs extends React.Component {
     };
   }
 
+  handleChange(value, e) {
+    this.setState({
+      searchValue: value
+    });
+  }
+
+  handleSearchValueClear(e) {
+    this.setState({
+      searchValue: ''
+    });
+  }
+
+  getMoreList(_ref2) {
+    let {
+      moreTabs
+    } = _ref2;
+    const validElements = [];
+    React.Children.map(moreTabs, child => {
+      const isValidElement = /*#__PURE__*/React.isValidElement(child);
+
+      if (isValidElement) {
+        validElements.push(child.props);
+      }
+    });
+    return validElements;
+  }
+
+  handleFilterSuggestions(_ref3) {
+    let {
+      moreTabs
+    } = _ref3;
+    const {
+      showTitleInMoreOptions
+    } = this.props;
+    const {
+      searchValue
+    } = this.state;
+    const options = this.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;
+  }
+
+  renderEmptyState() {
+    const {
+      searchErrorText
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: tabsStyle.emptyStateContainer
+    }, /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: tabsStyle.emptyStateTitle
+    }, searchErrorText));
+  }
+
   renderTabs(mainTabs, moreTabs, isVirtual) {
     let {
       selectedTab,
@@ -434,14 +509,25 @@ class Tabs extends React.Component {
       customProps,
       getCustomDropBoxHeaderPlaceHolder,
       dataSelectorId,
-      dataId
+      dataId,
+      placeHolderText,
+      searchBoxSize,
+      removeClose
     } = this.props;
+    const {
+      searchValue
+    } = this.state;
     let {
       DropBoxProps = {},
       ListItemProps = {},
-      MoreButtonProps = {}
+      MoreButtonProps = {},
+      TextBoxIconProps = {}
     } = customProps;
     let popupClass = align === 'vertical' ? tabsStyle[position] ? tabsStyle[position] : '' : '';
+    const moreTabsListItems = this.handleFilterSuggestions({
+      moreTabs
+    });
+    const hasSearch = moreTabs.length > 4;
     return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(mainTabs, child => {
       if (!child) {
         return null;
@@ -491,10 +577,10 @@ class Tabs extends React.Component {
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
+    }, _ref4 => {
       let {
         tabletMode
-      } = _ref2;
+      } = _ref4;
       return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         isActive: isPopupReady,
         isAnimate: true,
@@ -509,20 +595,32 @@ class Tabs extends React.Component {
         ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
-        onClose: this.togglePopup,
-        dataId: `${dataId}_dropbox`
-      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
+        dataId: `${dataId}_dropbox`,
+        onClick: removeClose,
+        onClose: this.togglePopup
+      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
+        className: tabsStyle.search
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        placeHolder: placeHolderText,
+        onChange: this.handleChange,
+        value: searchValue,
+        onClear: this.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: this.onScroll,
         dataId: `${dataId}_Tabs`
-      }, React.Children.map(moreTabs, child => {
-        if (!child) {
-          return null;
-        }
-
+      }, moreTabsListItems.length ? moreTabsListItems.map(data => {
         let {
           text,
           id,
@@ -531,9 +629,9 @@ class Tabs extends React.Component {
           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: this.moreTabSelect,
@@ -549,7 +647,7 @@ class Tabs extends React.Component {
           dataId: `${dataId}_Tab`,
           ...ListItemProps
         }, !showTitleInMoreOptions ? children : null);
-      })));
+      }) : this.renderEmptyState()));
     })) : null);
   }
 

package/es/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/es/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/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/Card/props/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 export const CardHeader_propTypes = {
-  children: PropTypes.element,
+  children: PropTypes.node,
   dataId: PropTypes.string,
   isScroll: PropTypes.bool,
   customClass: PropTypes.string,

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

@@ -84,7 +84,7 @@ export const DateTime_propTypes = {
 export const DateWidget_propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default']),
   cantEditOnPopupOpen: PropTypes.bool,
-  children: PropTypes.object,
+  children: PropTypes.node,
   className: PropTypes.string,
   closePopupOnly: PropTypes.func,
   dataId: PropTypes.string,

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { DropBoxPropTypes } from './../../DropBox/props/propTypes';
 export const propTypes = { ...DropBoxPropTypes,
-  children: PropTypes.element,
+  children: PropTypes.node,
   customClass: PropTypes.object,
   isResponsivePadding: PropTypes.bool,
   alignBox: PropTypes.oneOf(['column', 'row'])

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
-  children: PropTypes.element,
+  children: PropTypes.node,
   dataId: PropTypes.string,
   palette: PropTypes.oneOf(['default', 'danger', 'primary', 'secondary', 'info', 'dark']),
   size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),

package/es/v1/Tab/Tabs.js

@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
+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';
@@ -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/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) ;
 }