@zohodesk/components 1.0.0-temp-199.12 → 1.0.0-temp-220

package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -72,3 +72,393 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`AdvancedMultiSelect rendering the options array with objects and string 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper   effect "
+    data-id="multiSelectComp"
+    data-selector-id="advancedMultiSelect"
+    data-test-id="multiSelectComp"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="multiSelectComp_textBox"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_textBox"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="textBoxIcon"
+              data-selector-id="textBoxIcon"
+              data-test-id="textBoxIcon"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-multiselectable="true"
+      class="main container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="multiSelectComp_dropbox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="multiSelectComp_dropbox"
+      dot-ui-element="dropbox"
+      id="1"
+      role="listbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow boxPadding radius bounce defaultPalette"
+        data-id="multiSelectComp_dropbox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="multiSelectComp_dropbox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="box flex cover coldir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="small grow basis shrinkOn scrolly"
+                data-id="CardContent"
+                data-selector-id="cardContent"
+                data-test-id="CardContent"
+              >
+                <div
+                  class="flex coldir"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                  tabindex="0"
+                >
+                  <div
+                    class="shrinkOff"
+                    data-id="multiSelectComp_Options"
+                    data-selector-id="box"
+                    data-test-id="multiSelectComp_Options"
+                  >
+                    <li
+                      aria-label="Apple"
+                      aria-selected="false"
+                      class="list medium  default defaultHover  mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="true"
+                      data-id="Apple"
+                      data-selector-id="listItem"
+                      data-test-id="Apple"
+                      data-title="Apple"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Apple
+                      </div>
+                    </li>
+                    <li
+                      aria-label="Orange"
+                      aria-selected="false"
+                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="false"
+                      data-id="Orange"
+                      data-selector-id="listItem"
+                      data-test-id="Orange"
+                      data-title="Orange"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Orange
+                      </div>
+                    </li>
+                    <li
+                      aria-label="string test"
+                      aria-selected="false"
+                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="false"
+                      data-id="string test"
+                      data-selector-id="listItem"
+                      data-test-id="string test"
+                      data-title="string test"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        string test
+                      </div>
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AdvancedMultiSelect rendering the options array with only objects using allowValueFallback 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper   effect "
+    data-id="multiSelectComp"
+    data-selector-id="advancedMultiSelect"
+    data-test-id="multiSelectComp"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="multiSelectComp_textBox"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_textBox"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="textBoxIcon"
+              data-selector-id="textBoxIcon"
+              data-test-id="textBoxIcon"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-multiselectable="true"
+      class="main container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="multiSelectComp_dropbox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="multiSelectComp_dropbox"
+      dot-ui-element="dropbox"
+      id="1"
+      role="listbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow boxPadding radius bounce defaultPalette"
+        data-id="multiSelectComp_dropbox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="multiSelectComp_dropbox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="box flex cover coldir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="small grow basis shrinkOn scrolly"
+                data-id="CardContent"
+                data-selector-id="cardContent"
+                data-test-id="CardContent"
+              >
+                <div
+                  class="flex coldir"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                  tabindex="0"
+                >
+                  <div
+                    class="shrinkOff"
+                    data-id="multiSelectComp_Options"
+                    data-selector-id="box"
+                    data-test-id="multiSelectComp_Options"
+                  >
+                    <li
+                      aria-label="Apple"
+                      aria-selected="false"
+                      class="list medium  default defaultHover  mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="true"
+                      data-id="Apple"
+                      data-selector-id="listItem"
+                      data-test-id="Apple"
+                      data-title="Apple"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Apple
+                      </div>
+                    </li>
+                    <li
+                      aria-label="Orange"
+                      aria-selected="false"
+                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="false"
+                      data-id="Orange"
+                      data-selector-id="listItem"
+                      data-test-id="Orange"
+                      data-title="Orange"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Orange
+                      </div>
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/MultiSelect/props/defaultProps.js

@@ -38,7 +38,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {}
+  allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -72,7 +72,8 @@ export const AdvancedMultiSelect_defaultProps = {
   dataSelectorId: 'advancedMultiSelect',
   customClass: {},
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  allowValueFallback: true
 };
 export const EmptyState_defaultProps = {
   dataId: 'empty',
@@ -119,7 +120,8 @@ export const MultiSelect_defaultProps = {
   selectedOptionsCount: 0,
   cardHeaderName: '',
   needResponsive: true,
-  customProps: {}
+  customProps: {},
+  allowValueFallback: true
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -155,15 +157,14 @@ export const MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
+  customProps: {},
   needResponsive: true,
-  customProps: {}
+  allowValueFallback: true
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium',
   dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
-  a11y: {},
-  customClass: {},
-  needMultiLineText: false
+  a11y: {}
 };

package/es/MultiSelect/props/propTypes.js

@@ -110,10 +110,10 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
-  isFocus: PropTypes.bool
+  isFocus: PropTypes.bool,
+  allowValueFallback: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -178,11 +178,7 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  })),
-  customClass: PropTypes.shape({
-    containerClass: PropTypes.string
-  }),
-  needMultiLineText: PropTypes.bool
+  }))
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -254,9 +250,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  allowValueFallback: PropTypes.bool
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/Popup/Popup.js

@@ -74,8 +74,7 @@ const Popup = function (Component) {
         isMobile: false
       };
       this.togglePopup = this.togglePopup.bind(this);
-      this.documentClickHandler = this.documentClickHandler.bind(this);
-      this.documentClickHandler1 = this.documentClickHandler1.bind(this);
+      this.handleDocumentInteraction = this.handleDocumentInteraction.bind(this);
       this.removeClose = this.removeClose.bind(this);
       this.documentKeyupHandler = this.documentKeyupHandler.bind(this);
       this.openPopupOnly = this.openPopupOnly.bind(this);
@@ -133,11 +132,10 @@ const Popup = function (Component) {
       popups[group] = groupPopups;
 
       if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
-        document.addEventListener('click', this.documentClickHandler, false);
+        document.addEventListener('click', this.handleDocumentInteraction, true);
         document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
 
         window.addEventListener('resize', this.handleResize);
-        document.addEventListener('click', this.documentClickHandler1, true);
         document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.addEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -224,11 +222,10 @@ const Popup = function (Component) {
       }
 
       if (noPopups) {
-        document.removeEventListener('click', this.documentClickHandler);
+        document.removeEventListener('click', this.handleDocumentInteraction, true);
         document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
 
         window.removeEventListener('resize', this.handleResize);
-        document.removeEventListener('click', this.documentClickHandler1, true);
         document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.removeEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -617,29 +614,29 @@ const Popup = function (Component) {
       return needPrevent;
     }
 
-    documentClickHandler1(e) {
+    handleDocumentInteraction(e) {
       const needPrevent = this.handleGetNeedPrevent(e);
 
       if (needPrevent) {
         this.removeClose(e);
         this.handleCloseLastOpenedGroup();
-      }
-    }
-
-    documentClickHandler() {
-      try {
-        Object.keys(popups).forEach(groupName => {
-          const groupPopups = popups[groupName] || [];
-          groupPopups.forEach(popup => {
-            popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !isTextSelected() && popup.setState({
-              isPopupOpen: false,
-              isPopupReady: false
+      } else {
+        try {
+          Object.keys(popups).forEach(groupName => {
+            const groupPopups = popups[groupName] || [];
+            groupPopups.forEach(popup => {
+              if (popup.placeHolderElement && popup.dropElement && popup.placeHolderElement !== e.target && !popup.placeHolderElement.contains(e.target) && popup.dropElement !== e.target && !popup.dropElement.contains(e.target)) {
+                popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !isTextSelected() && popup.setState({
+                  isPopupOpen: false,
+                  isPopupReady: false
+                });
+              }
             });
           });
-        });
-        lastOpenedGroup = [];
-      } catch (e) {// eslint-disable-next-line no-console
-        //console.error('popup component not unmounted properly', e);
+          lastOpenedGroup = [];
+        } catch (error) {// eslint-disable-next-line no-console
+          //console.error('popup component not unmounted properly', error);
+        }
       }
     }
 

package/es/Select/GroupSelect.js

@@ -170,10 +170,12 @@ export class GroupSelectComponent extends PureComponent {
 
   handleGetGroupSelectOptions(props) {
     let {
-      groupedOptions
+      groupedOptions,
+      allowValueFallback
     } = props;
     return this.getGroupSelectOptions({
-      groupedOptions
+      groupedOptions,
+      allowValueFallback
     });
   }
 
@@ -591,9 +593,6 @@ export class GroupSelectComponent extends PureComponent {
       dataSelectorId,
       customProps
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -792,8 +791,7 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...SuggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/Select.js

@@ -250,6 +250,7 @@ export class SelectComponent extends Component {
       options,
       valueField,
       textField,
+      allowValueFallback,
       customProps = {}
     } = props;
     let {
@@ -259,7 +260,8 @@ export class SelectComponent extends Component {
       options,
       valueField,
       textField,
-      listItemProps
+      listItemProps,
+      allowValueFallback
     });
   }
 

package/es/Select/SelectWithAvatar.js

@@ -40,14 +40,16 @@ class SelectWithAvatarComponent extends SelectComponent {
       options,
       valueField,
       textField,
-      imageField
+      imageField,
+      allowValueFallback
     } = props;
     return this.formatOptions({
       options,
       valueField,
       textField,
       imageField,
-      optionType: 'avatar'
+      optionType: 'avatar',
+      allowValueFallback
     });
   }
 
@@ -163,12 +165,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef,
-      customProps
+      getTargetRef
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -325,8 +323,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        },
-        ...SuggestionsProps
+        }
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/SelectWithIcon.js

@@ -367,8 +367,7 @@ class SelectWithIcon extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      TextBoxIconProps = {},
-      ListItemProps = {}
+      TextBoxIconProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -531,8 +530,7 @@ class SelectWithIcon extends Component {
             role: 'option',
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
-          },
-          ...ListItemProps
+          }
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,