@zohodesk/components 1.2.61 → 1.2.63

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

@@ -37,7 +37,8 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect'
+  dataSelectorId: 'advancedGroupMultiSelect',
+  allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -71,7 +72,8 @@ export const AdvancedMultiSelect_defaultProps = {
   dataSelectorId: 'advancedMultiSelect',
   customClass: {},
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  allowValueFallback: true
 };
 export const EmptyState_defaultProps = {
   dataId: 'empty',
@@ -118,7 +120,8 @@ export const MultiSelect_defaultProps = {
   selectedOptionsCount: 0,
   cardHeaderName: '',
   needResponsive: true,
-  customProps: {}
+  customProps: {},
+  allowValueFallback: true
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -155,7 +158,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
   customProps: {},
-  needResponsive: true
+  needResponsive: true,
+  allowValueFallback: true
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium',

package/es/MultiSelect/props/propTypes.js

@@ -112,7 +112,8 @@ export const MultiSelect_propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object
   }),
-  isFocus: PropTypes.bool
+  isFocus: PropTypes.bool,
+  allowValueFallback: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -248,7 +249,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   searchStr: PropTypes.string,
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
-  isFocus: PropTypes.bool
+  isFocus: PropTypes.bool,
+  allowValueFallback: PropTypes.bool
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/RippleEffect/RippleEffect.module.css

@@ -90,3 +90,19 @@
 .notAllowed {
   cursor: not-allowed;
 }
+.secondary.defaultHover, .hoverEffect:hover.secondary.borderHover
+/* .hoverEffect:focus.secondary.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_secondary_border);
+}
+.hoverEffect:hover.secondary.bgHover
+/* .hoverEffect:focus.secondary.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_secondary_bg);
+}
+.secondary.active {
+  background-color: var(--zdt_rippleeffect_secondary_active_bg);
+}
+.secondary.active.border {
+  border-color: var(--zdt_rippleeffect_secondary_active_border);
+}

package/es/RippleEffect/props/propTypes.js

@@ -6,7 +6,7 @@ export const propTypes = {
   isDisabled: PropTypes.bool,
   isNeedEffect: PropTypes.bool,
   needBorder: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  palette: PropTypes.oneOf(['default', 'secondary', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
   cssClassPropOfChild: PropTypes.string,
   isCopyTextEnabled: PropTypes.bool
 };

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
     });
   }
 

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
     });
   }
 

package/es/Select/props/defaultProps.js

@@ -33,7 +33,8 @@ export const Select_defaultProps = {
   iconOnHover: false,
   customProps: {},
   isLoading: false,
-  isAbsolutePositioningNeeded: true
+  isAbsolutePositioningNeeded: true,
+  allowValueFallback: true
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -70,7 +71,8 @@ export const GroupSelect_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false,
-  customProps: {}
+  customProps: {},
+  allowValueFallback: true
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',

package/es/Select/props/propTypes.js

@@ -93,7 +93,8 @@ export const Select_propTypes = {
   positionsOffset: PropTypes.object,
   targetOffset: PropTypes.object,
   isRestrictScroll: PropTypes.bool,
-  dropBoxPortalId: PropTypes.string
+  dropBoxPortalId: PropTypes.string,
+  allowValueFallback: PropTypes.bool
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({
@@ -178,7 +179,8 @@ export const GroupSelect_propTypes = {
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     TextBoxIconProps: PropTypes.object
-  })
+  }),
+  allowValueFallback: PropTypes.bool
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,

package/es/Tag/Tag.js

@@ -47,7 +47,7 @@ export default class Tag extends PureComponent {
     e && e.preventDefault();
     e.stopPropagation && e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-    onRemove && onRemove(id);
+    onRemove && onRemove(id, e);
   }
 
   getRef(el) {

package/es/utils/dropDownUtils.js

@@ -40,6 +40,8 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
 const getListItemProps = props => props.listItemProps || '';
 
+const getAllowValueFallback = props => props.allowValueFallback !== false;
+
 export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) => {
   const suggestions = [];
   const suggestionIds = [];
@@ -105,7 +107,7 @@ export const extractOptionId = id => {
   }
 };
 export const extractOptionIdFromJson = (id, localData) => localData[id] || {};
-export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps) => {
+export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback) => {
   const revampOptions = [];
   const remvampOptionIds = [];
   const normalizedAllOptions = {};
@@ -123,7 +125,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         listItemProps: listStyle
       } = option;
       let id = typeof option === 'object' ? option[impValueField || valueField] : option;
-      const value = typeof option === 'object' ? option[impTextField || textField] : option;
+      const value = typeof option === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
       const photoURL = typeof option === 'object' ? option[impImageField || imageField] : ''; // grouping options (group select/MultiSelect)
 
       id = !getIsEmptyValue(id) ? optionIdGrouping(id, prefixText) : '';
@@ -171,7 +173,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
     optionsOrder: remvampOptionIds
   };
 });
-export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength], (selectedOptions, normalizedFormatOptions, selectedOptionsLength) => {
+export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback], (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback) => {
   const output = [];
   const revampSelectedOptions = [];
   const normalizedSelectedOptions = {};
@@ -187,7 +189,8 @@ export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelect
       revampSelectedOptions.push(id);
       output.push(normalizedFormatOptions[option]);
       normalizedSelectedOptions[id] = normalizedFormatOptions[option];
-    } else if (getIsEmptyValue(id) && !getIsEmptyValue(option) && revampSelectedOptions.indexOf(option) === -1) {
+    } else if (allowValueFallback && getIsEmptyValue(id) && !getIsEmptyValue(option) && revampSelectedOptions.indexOf(option) === -1) {
+      //fallback case
       const newObj = {
         id: option,
         value: option
@@ -261,7 +264,7 @@ export const makeObjectConcat = () => createSelector([getObj1, getObj2], (obj1,
 const getGroupedOptions = props => props.groupedOptions || dummyArray;
 
 const getFormatOptions = makeFormatOptions();
-export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions], groupedOptions => {
+export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions, getAllowValueFallback], (groupedOptions, allowValueFallback) => {
   const revampedGroups = [];
   let allOptionIds = [];
   let allNormalizedOptions = {}; //all group normalized options
@@ -290,7 +293,8 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
         options,
         valueField,
         textField,
-        prefixText: groupId
+        prefixText: groupId,
+        allowValueFallback
       });
 
       if (optionsOrder.length) {

package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -139,7 +139,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
       class="overlay"
     >
       <div
-        class="success"
+        class="successstate"
       >
         <div
           class="customStautusClassName successelement primarysuccess"
@@ -260,7 +260,7 @@ exports[`Button component Should render Status of buttons - success 1`] = `
       class="overlay"
     >
       <div
-        class="success"
+        class="successstate"
       >
         <div
           class="successelement primarysuccess"