@zohodesk/components 1.0.0-temp-212 → 1.0.0-temp-199.4

package/es/Layout/index.js

@@ -1,5 +1,5 @@
-export { default as Container } from './Container';
-export { default as Box } from './Box'; // let Layout = {
+export { default as Container } from "./Container";
+export { default as Box } from "./Box"; // let Layout = {
 //   docs: {
 //     componentGroup: 'Layout',
 //     folderName: 'Style Guide',

package/es/ListItem/ListContainer.js

@@ -1,11 +1,11 @@
 /**** Libraries ****/
 import React, { useCallback } from 'react';
-import { Container } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
-import style from './ListItem.module.css';
-import { ListContainerDefaultProps } from './props/defaultProps';
-import { ListContainer_Props } from './props/propTypes';
-import { useResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { Container } from "../Layout";
+import CssProvider from "../Provider/CssProvider";
+import style from "./ListItem.module.css";
+import { ListContainerDefaultProps } from "./props/defaultProps";
+import { ListContainer_Props } from "./props/propTypes";
+import { useResponsiveReceiver } from "../Responsive/CustomResponsive";
 
 const ListContainer = props => {
   const {

package/es/ListItem/ListItem.js

@@ -1,15 +1,15 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box } from '../Layout';
-import ListContainer from './ListContainer';
-import { ListItemDefaultProps } from './props/defaultProps';
-import { ListItem_Props } from './props/propTypes';
+import { Box } from "../Layout";
+import ListContainer from "./ListContainer";
+import { ListItemDefaultProps } from "./props/defaultProps";
+import { ListItem_Props } from "./props/propTypes";
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
-import style from './ListItem.module.css';
+import style from "./ListItem.module.css";
 export default class ListItem extends React.Component {
   constructor(props) {
     super(props);
@@ -100,7 +100,7 @@ export default class ListItem extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: customListItem,
+      customClass: `${needMultiLineText ? style.txtAlignBaseLine + ' ' + style.autoHeight : ''} ${customListItem}`,
       dataId: dataIdString,
       dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
@@ -122,7 +122,7 @@ export default class ListItem extends React.Component {
       adjust: true,
       className: style.children
     }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
+      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItem.module.css

@@ -17,8 +17,9 @@
 }[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }
+
 .list {
   composes: varClass;
   position: relative;
@@ -34,62 +35,84 @@
   border-color: var(--listitem_border_color);
   cursor: pointer;
 }
+
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
+
 [dir=ltr] .withBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+  --listitem_border_width: 0 0 0 1px
+    /*rtl: 0 1px 0 0*/
+  ;
 }
+
 [dir=rtl] .withBorder {
-  --listitem_border_width: 0 1px 0 0;
+  --listitem_border_width: 0 0 0 1px  ;
 }
+
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
+
 [dir=ltr] .small {
   --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
+
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
+
 .medium {
   --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
+
 .large {
   --listitem_height: var(--zd_size48);
 }
+
 [dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
+
 [dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
+
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
 }
-.value, .multiLineValue {
+
+.value {
   line-height: 1.5385;
 }
-.multiLineValue{
+
+.multiLineValue {
+  line-height: 1.5385;
   word-break: break-word;
-  composes: clamp from '../common/common.module.css'
+  -webkit-line-clamp: 3;
+  composes: clamp from '../common/common.module.css';
 }
+
 .iconBox {
   width: var(--zd_size20) ;
   text-align: center;
 }
+
 [dir=ltr] .iconBox {
   margin-right: var(--zd_size10) ;
 }
+
 [dir=rtl] .iconBox {
   margin-left: var(--zd_size10) ;
 }
+
 .iconBox,
 .leftAvatar {
   font-size: 0 ;
 }
+
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
@@ -97,61 +120,78 @@
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
+
 .activewithBorder {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
+
 [dir=ltr] .activewithBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+  --listitem_border_width: 0 0 0 1px
+    /*rtl: 0 1px 0 0*/
+  ;
 }
+
 [dir=rtl] .activewithBorder {
-  --listitem_border_width: 0 1px 0 0;
+  --listitem_border_width: 0 0 0 1px  ;
 }
 
 .defaultHover,
 .defaultEffect:hover
+
 /* .defaultEffect:focus  */
-{
+  {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
+
 .primaryHover,
 .primaryEffect:hover
+
 /* .primaryEffect:focus */
- {
+  {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
+
 .secondaryHover,
 .secondaryEffect:hover
+
 /* .secondaryEffect:focus  */
-{
+  {
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
+
 .darkHover,
 .darkEffect:hover
+
 /* .darkEffect:focus */
- {
+  {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
+
 .activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
+
 .activedefault,
 .activedefault:hover,
 .activeprimary,
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
+
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
+
 .dark {
   --listitem_bg_color: var(--zdt_listitem_dark_bg);
   --listitem_text_color: var(--zdt_listitem_dark_text);
 }
+
 .activedark {
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
@@ -170,36 +210,63 @@
 [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
   left: var(--zd_size20) ;
 }
+
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
+
 .darkTick {
   --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
 }
-.defaultTick > i {
+
+.defaultTick>i {
   display: block;
 }
+
 [dir=ltr] .smallwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
+
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
+
 [dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
+
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
+
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
+
 [dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
+
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
   font-size: var(--zd_font_size15) ;
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
+
+.autoHeight {
+  height: auto ;
+}
+
+.tickIconCenter {
+  top: 50% ;
+  transform: translateY(-50%);
+}
+
+.txtAlignBaseLine {
+  align-items: baseline;
+}
+
+.alignSelfTop {
+  align-self: start;
+}

package/es/ListItem/ListItemWithAvatar.js

@@ -1,17 +1,17 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box } from '../Layout';
-import ListContainer from './ListContainer';
-import { ListItemWithAvatarDefaultProps } from './props/defaultProps';
-import { ListItemWithAvatar_Props } from './props/propTypes';
+import { Box } from "../Layout";
+import ListContainer from "./ListContainer";
+import { ListItemWithAvatarDefaultProps } from "./props/defaultProps";
+import { ListItemWithAvatar_Props } from "./props/propTypes";
 /**** Components ****/
 
-import Avatar from '../Avatar/Avatar';
-import AvatarTeam from '../AvatarTeam/AvatarTeam';
+import Avatar from "../Avatar/Avatar";
+import AvatarTeam from "../AvatarTeam/AvatarTeam";
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
-import style from './ListItem.module.css';
+import style from "./ListItem.module.css";
 export default class ListItemWithAvatar extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -105,7 +105,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: customListItem,
+      customClass: `${needMultiLineText ? style.autoHeight : ''} ${customListItem}`,
       dataId: `${dataIdString}_ListItemWithAvatar`,
       dataSelectorId: `${dataSelectorId}`,
       onClick: this.handleClick,
@@ -116,7 +116,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps: ListItemProps,
       ...ContainerProps
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: style.leftAvatar
+      className: `${needMultiLineText ? style.alignSelfTop : ''} ${style.leftAvatar}`
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -143,7 +143,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: style.tickIcon,
+      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithCheckBox.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import ListContainer from './ListContainer';
-import { ListItemWithCheckBoxDefaultProps } from './props/defaultProps';
-import { ListItemWithCheckBox_Props } from './props/propTypes';
-import CheckBox from '../CheckBox/CheckBox';
-import { Box } from '../Layout';
-import style from './ListItem.module.css';
+import ListContainer from "./ListContainer";
+import { ListItemWithCheckBoxDefaultProps } from "./props/defaultProps";
+import { ListItemWithCheckBox_Props } from "./props/propTypes";
+import CheckBox from "../CheckBox/CheckBox";
+import { Box } from "../Layout";
+import style from "./ListItem.module.css";
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
     super(props);

package/es/ListItem/ListItemWithIcon.js

@@ -1,13 +1,13 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box } from '../Layout';
+import { Box } from "../Layout";
 import { Icon } from '@zohodesk/icons';
-import ListContainer from './ListContainer';
-import { ListItemWithIconDefaultProps } from './props/defaultProps';
-import { ListItemWithIcon_Props } from './props/propTypes';
+import ListContainer from "./ListContainer";
+import { ListItemWithIconDefaultProps } from "./props/defaultProps";
+import { ListItemWithIcon_Props } from "./props/propTypes";
 /**** CSS ****/
 
-import style from './ListItem.module.css';
+import style from "./ListItem.module.css";
 export default class ListItemWithIcon extends React.Component {
   constructor(props) {
     super(props);
@@ -95,7 +95,7 @@ export default class ListItemWithIcon extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: customClass,
+      customClass: `${needMultiLineText ? style.autoHeight : ''} ${needMultiLineText && iconClass && !iconName ? style.txtAlignBaseLine : ''} ${customClass}`,
       dataId: dataIdString,
       dataSelectorId: dataSelectorId,
       isLink: isLink,
@@ -125,7 +125,7 @@ export default class ListItemWithIcon extends React.Component {
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: style.tickIcon,
+      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithRadio.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import Radio from '../Radio/Radio';
-import { Box } from '../Layout';
-import ListContainer from './ListContainer';
-import { ListItemWithRadioDefaultProps } from './props/defaultProps';
-import { ListItemWithRadio_Props } from './props/propTypes';
-import style from './ListItem.module.css';
+import Radio from "../Radio/Radio";
+import { Box } from "../Layout";
+import ListContainer from "./ListContainer";
+import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
+import { ListItemWithRadio_Props } from "./props/propTypes";
+import style from "./ListItem.module.css";
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
     super(props);

package/es/ListItem/__tests__/ListContainer.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListContainer from '../ListContainer';
+import ListContainer from "../ListContainer";
 describe('ListContainer', () => {
   test('rendering the defult props', () => {
     const {

package/es/ListItem/__tests__/ListItem.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListItem from '../ListItem';
+import ListItem from "../ListItem";
 describe('ListItem', () => {
   test('rendering the defult props', () => {
     const {

package/es/ListItem/__tests__/ListItemWithAvatar.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListItemWithAvatar from '../ListItemWithAvatar';
+import ListItemWithAvatar from "../ListItemWithAvatar";
 describe('ListItemWithAvatar', () => {
   test('rendering the defult props', () => {
     const {

package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListItemWithCheckBox from '../ListItemWithCheckBox';
+import ListItemWithCheckBox from "../ListItemWithCheckBox";
 describe('ListItemWithCheckBox', () => {
   test('rendering the defult props', () => {
     const {

package/es/ListItem/__tests__/ListItemWithIcon.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListItemWithIcon from '../ListItemWithIcon';
+import ListItemWithIcon from "../ListItemWithIcon";
 describe('ListItemWithIcon', () => {
   test('rendering the defult props', () => {
     const {

package/es/ListItem/__tests__/ListItemWithRadio.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ListItemWithRadio from '../ListItemWithRadio';
+import ListItemWithRadio from "../ListItemWithRadio";
 describe('ListItemWithRadio', () => {
   test('rendering the defult props', () => {
     const {

package/es/ListItem/index.js

@@ -1,6 +1,6 @@
-export { default as ListContainer } from './ListContainer';
-export { default as ListItem } from './ListItem';
-export { default as ListItemWithAvatar } from './ListItemWithAvatar';
-export { default as ListItemWithCheckBox } from './ListItemWithCheckBox';
-export { default as ListItemWithIcon } from './ListItemWithIcon';
-export { default as ListItemWithRadio } from './ListItemWithRadio';
+export { default as ListContainer } from "./ListContainer";
+export { default as ListItem } from "./ListItem";
+export { default as ListItemWithAvatar } from "./ListItemWithAvatar";
+export { default as ListItemWithCheckBox } from "./ListItemWithCheckBox";
+export { default as ListItemWithIcon } from "./ListItemWithIcon";
+export { default as ListItemWithRadio } from "./ListItemWithRadio";

package/es/Modal/Modal.js

@@ -1,9 +1,9 @@
 /**** Libraries ****/
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../AppContainer/AppContainer.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../AppContainer/AppContainer.module.css";
 let createdPortalIds = [];
 let newPortalPrefix = 'CPortal';
 let portalChildrenTopIndexValues;

package/es/Modal/__tests__/Modal.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Modal from '../Modal';
+import Modal from "../Modal";
 describe('Modal', () => {
   test('rendering the defult props', () => {
     const {

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1,31 +1,31 @@
 import React from 'react';
-import { AdvancedGroupMultiSelect_propTypes } from './props/propTypes';
-import { AdvancedGroupMultiSelect_defaultProps } from './props/defaultProps';
+import { AdvancedGroupMultiSelect_propTypes } from "./props/propTypes";
+import { AdvancedGroupMultiSelect_defaultProps } from "./props/defaultProps";
 /**** Components ****/
 
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import Popup from '../Popup/Popup';
-import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
-import { Container, Box } from '../Layout';
-import DropDownHeading from '../DropDown/DropDownHeading';
-import MultiSelectHeader from '../MultiSelect/MultiSelectHeader';
-import SelectedOptions from '../MultiSelect/SelectedOptions';
-import Suggestions from '../MultiSelect/Suggestions';
-import EmptyState from '../MultiSelect/EmptyState';
-import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
-import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import Popup from "../Popup/Popup";
+import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
+import { Container, Box } from "../Layout";
+import DropDownHeading from "../DropDown/DropDownHeading";
+import MultiSelectHeader from "../MultiSelect/MultiSelectHeader";
+import SelectedOptions from "../MultiSelect/SelectedOptions";
+import Suggestions from "../MultiSelect/Suggestions";
+import EmptyState from "../MultiSelect/EmptyState";
+import Card, { CardContent, CardHeader, CardFooter } from "../Card/Card";
+import { getUniqueId } from "../Provider/IdProvider";
+import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
-import style from './MultiSelect.module.css';
+import style from "./MultiSelect.module.css";
 /**** Methods ****/
 
-import { debounce, scrollTo, getIsEmptyValue, getSearchString } from '../utils/Common.js';
-import { makeGetMultiSelectSelectedOptions, makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, makeGetOptionIdChange, extractOptionId, makeFormatOptions, makeObjectConcat } from '../utils/dropDownUtils';
+import { debounce, scrollTo, getIsEmptyValue, getSearchString } from "../utils/Common.js";
+import { makeGetMultiSelectSelectedOptions, makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, makeGetOptionIdChange, extractOptionId, makeFormatOptions, makeObjectConcat } from "../utils/dropDownUtils";
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -875,8 +875,12 @@ class AdvancedGroupMultiSelect extends React.Component {
       palette,
       needEffect,
       autoComplete,
-      getTargetRef
+      getTargetRef,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps
+    } = customProps;
     let {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -1055,7 +1059,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           },
-          dataId: `${dataId}_Options`
+          dataId: `${dataId}_Options`,
+          ...suggestionsProps
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,