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

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,

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',
@@ -96,8 +98,7 @@ export const SelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,

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({
@@ -177,9 +178,9 @@ export const GroupSelect_propTypes = {
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    suggestionsProps: PropTypes.object
-  })
+    TextBoxIconProps: PropTypes.object
+  }),
+  allowValueFallback: PropTypes.bool
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,
@@ -240,8 +241,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.object
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -303,7 +303,6 @@ export const SelectWithIcon_propTypes = {
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    ListItemProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   })
 };

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/Textarea/Textarea.js

@@ -89,7 +89,7 @@ export default class Textarea extends React.Component {
     }
 
     const isEditable = !(isReadOnly || isDisabled);
-    let classList = needAppearance ? `${style.container} ${size !== 'default' ? style[size] : ''} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated && size !== 'default' ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${style.basic}`;
+    let classList = needAppearance ? `${style.container} ${size !== 'default' ? style[size] : ''} ${!rows && size === 'default' ? style.defaultHeight : ''} ${!cols ? style.defaultWidth : ''} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated && size !== 'default' ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${style.basic}`;
     return /*#__PURE__*/React.createElement("textarea", {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,

package/es/Textarea/Textarea.module.css

@@ -92,6 +92,13 @@
 .effect:focus,.effect.active {
   --textarea_border_color: var(--zdt_textarea_focus_border);
 }
+
+.defaultHeight{
+  --textarea_height: var(--zd_size30);
+} 
+.defaultWidth {
+  --textarea_width: 100%;
+}
 .xsmall,
 .xmedium {
   vertical-align: middle;
@@ -108,7 +115,7 @@
   --textarea_height: var(--zd_size25);
   --textarea_line_height: 1.3077;
 }
-.small {
+ .small{
   --textarea_height: var(--zd_size30);
   --textarea_padding: var(--zd_size2) 0;
 }
@@ -139,10 +146,3 @@
   composes: semibold from '../common/common.module.css';
   --textarea_text_color: var(--zdt_textarea_black_text);
 }
-.xsmall, 
-.small, 
-.xmedium, 
-.medium, 
-.large {
-  --textarea_width: 100%;
-}

package/es/Textarea/__tests__/Textarea.spec.js

@@ -235,6 +235,24 @@ describe('Textarea component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should be render rows only ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      size: "default",
+      rows: "3"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render  cols only ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      size: "default",
+      cols: "3"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('Should be render custom Attributes ', () => {
     const {
       asFragment