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

package/es/ListItem/ListContainer.js

@@ -31,8 +31,7 @@ const ListContainer = props => {
     onClick,
     onMouseEnter,
     onMouseOver,
-    eleRef,
-    align
+    eleRef
   } = props;
   const responsiveFunc = useCallback(_ref => {
     let {
@@ -78,7 +77,7 @@ const ListContainer = props => {
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,
-    align: align,
+    align: "vertical",
     alignBox: "row",
     className: `${style.list} ${style[size]} ${mobileToTab && isTouchDevice ? style.responsiveHeight : ''} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
     dataId: dataId,

package/es/ListItem/ListItem.js

@@ -100,8 +100,7 @@ export default class ListItem extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.autoHeight : ''} ${customListItem}`,
-      align: needMultiLineText ? 'baseline' : 'vertical',
+      customClass: customListItem,
       dataId: dataIdString,
       dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
@@ -123,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} ${needMultiLineText ? style.tickIconCenter : ''} ${customTickIcon}`,
+      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItem.module.css

@@ -73,7 +73,8 @@
   line-height: 1.5385;
 }
 .multiLineValue{
-  composes: lineClamp from '../common/common.module.css';
+  word-break: break-word;
+  composes: clamp from '../common/common.module.css'
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -202,13 +203,3 @@
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
-.autoHeight {
-  --listitem_height: auto;
-}
-.tickIconCenter {
-  top: 50% ;
-  transform: translateY(-50%);
-}
-.alignItemBaseline {
-  align-self: baseline;
-}

package/es/ListItem/ListItemWithAvatar.js

@@ -107,7 +107,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.autoHeight : ''} ${customListItem}`,
+      customClass: customListItem,
       dataId: `${dataIdString}_ListItemWithAvatar`,
       dataSelectorId: `${dataSelectorId}`,
       onClick: this.handleClick,
@@ -118,7 +118,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps: ListItemProps,
       ...ContainerProps
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: `${needMultiLineText ? style.alignItemBaseline : ''} ${style.leftAvatar}`
+      className: style.leftAvatar
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -147,7 +147,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} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithIcon.js

@@ -95,8 +95,7 @@ export default class ListItemWithIcon extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.autoHeight : ''} ${customClass}`,
-      align: needMultiLineText && iconClass && !iconName ? 'baseline' : 'vertical',
+      customClass: customClass,
       dataId: dataIdString,
       dataSelectorId: dataSelectorId,
       isLink: isLink,
@@ -126,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} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/props/defaultProps.js

@@ -12,8 +12,7 @@ export const ListContainerDefaultProps = {
   customClass: '',
   customProps: {},
   dataSelectorId: 'listContainer',
-  needMultiLineText: false,
-  align: 'vertical'
+  needMultiLineText: false
 };
 export const ListItemDefaultProps = {
   active: false,

package/es/ListItem/props/propTypes.js

@@ -27,8 +27,7 @@ export const ListContainer_Props = {
   }),
   customClass: PropTypes.string,
   customProps: PropTypes.object,
-  eleRef: PropTypes.func,
-  align: PropTypes.string
+  eleRef: PropTypes.func
 };
 export const ListItem_Props = {
   active: PropTypes.bool,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -121,12 +121,14 @@ class AdvancedGroupMultiSelect extends React.Component {
   handleFormatSelectedOptions(selectedOptionDetails, props) {
     let {
       valueField,
-      textField
+      textField,
+      allowValueFallback
     } = props;
     return this.formatSelectedOptions({
       options: selectedOptionDetails,
       valueField,
-      textField
+      textField,
+      allowValueFallback
     });
   }
 
@@ -182,6 +184,9 @@ class AdvancedGroupMultiSelect extends React.Component {
   }
 
   handleSelectedOptionIdChange(selectedGroupOptions, normalizedFormatOptions, normalizedSelectedOptions) {
+    const {
+      allowValueFallback
+    } = this.props;
     let newSelectedOptions = selectedGroupOptions.map(option => optionIdGrouping(option.id, option.groupId));
     let selectedOptionsLength = newSelectedOptions.length;
     let formatOptions = this.objectConcat({
@@ -191,7 +196,8 @@ class AdvancedGroupMultiSelect extends React.Component {
     return this.getSelectedOptions({
       selectedOptions: newSelectedOptions,
       normalizedFormatOptions: formatOptions,
-      selectedOptionsLength
+      selectedOptionsLength,
+      allowValueFallback
     });
   }
 
@@ -238,10 +244,12 @@ class AdvancedGroupMultiSelect extends React.Component {
 
   handleGetGroupSelectOptions(props) {
     let {
+      allowValueFallback,
       groupedOptions = []
     } = props;
     return this.getGroupSelectOptions({
-      groupedOptions
+      groupedOptions,
+      allowValueFallback
     });
   }
 
@@ -876,12 +884,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       needEffect,
       autoComplete,
       getTargetRef,
-      isFocus,
-      customProps
+      isFocus
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     let {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -1061,8 +1065,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...SuggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -146,7 +146,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       iconSize,
       prefixText,
       optionType,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     } = props;
     return this.formatOptions({
       options,
@@ -157,7 +158,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       prefixText,
       optionType,
       iconSize,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     });
   }
 
@@ -168,7 +170,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     } = this.state || {};
     const {
       selectedOptionsLimit,
-      selectedOptionDetails
+      selectedOptionDetails,
+      allowValueFallback
     } = props;
     showedSelectedOptionsCount = getIsEmptyValue(showedSelectedOptionsCount) ? selectedOptionsLimit : showedSelectedOptionsCount;
     const {
@@ -181,7 +184,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return this.getSelectedOptions({
       selectedOptions,
       normalizedFormatOptions: formatOptions,
-      selectedOptionsLength: showedSelectedOptionsCount
+      selectedOptionsLength: showedSelectedOptionsCount,
+      allowValueFallback: allowValueFallback
     });
   }
 
@@ -193,7 +197,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       optionType,
       iconName,
       iconSize,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     } = props;
     return this.formatSelectedOptions({
       options: selectedOptionDetails,
@@ -203,7 +208,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       optionType,
       iconName,
       iconSize,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     });
   }
 

package/es/MultiSelect/MultiSelect.js

@@ -216,7 +216,8 @@ export class MultiSelectComponent extends React.Component {
       valueField,
       textField,
       prefixText,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     } = props;
     return this.formatOptions({
       options,
@@ -224,14 +225,19 @@ export class MultiSelectComponent extends React.Component {
       textField,
       prefixText,
       optionType: 'default',
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     });
   }
 
-  handleGetSelectedOptions(selectedOptions, normalizedFormatOptions) {
+  handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
+    const {
+      allowValueFallback
+    } = props;
     return this.getSelectedOptions({
       selectedOptions,
-      normalizedFormatOptions
+      normalizedFormatOptions,
+      allowValueFallback
     });
   }
 
@@ -1011,12 +1017,8 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll,
-      customProps
+      needSelectAll
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1106,8 +1108,7 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      },
-      ...SuggestionsProps
+      }
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -41,7 +41,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       valueField,
       textField,
       imageField,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     } = props;
     return this.formatOptions({
       options,
@@ -49,7 +50,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       textField,
       imageField,
       optionType: 'avatar',
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     });
   }
 

package/es/MultiSelect/Suggestions.js

@@ -27,24 +27,18 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y,
-      customClass,
-      needMultiLineText
+      a11y
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
-    const {
-      containerClass = ''
-    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable,
-      className: containerClass
+      "aria-multiselectable": ariaMultiselectable
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''
@@ -69,7 +63,6 @@ export default class Suggestions extends React.PureComponent {
       });
       const commonProps = {
         isDisabled,
-        needMultiLineText,
         ...listItemCustomProps
       };
 

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

@@ -9,4 +9,32 @@ describe('AdvancedMultiSelect', () => {
     } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  const options = [{
+    id: 1,
+    text: 'Apple'
+  }, {
+    id: 2,
+    text: 'Orange'
+  }, 'string test'];
+  test('rendering the options array with objects and string', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: options
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the options array with only objects using allowValueFallback', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: options,
+      allowValueFallback: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });