@zohodesk/components 1.0.0-temp-190.2 → 1.0.0-temp-192

package/es/MultiSelect/MultiSelect.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { MultiSelect_propTypes } from './props/propTypes';
@@ -990,8 +992,12 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll
+      needSelectAll,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps = {}
+    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1064,7 +1070,7 @@ export class MultiSelectComponent extends React.Component {
       eleRef: this.suggestionContainerRef
     }, isSearching ? /*#__PURE__*/React.createElement("div", {
       className: style[palette]
-    }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+    }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       suggestions: suggestions,
       getRef: this.suggestionItemRef,
       hoverOption: hoverOption,
@@ -1077,7 +1083,7 @@ export class MultiSelectComponent extends React.Component {
       a11y: {
         role: 'option'
       }
-    }) : /*#__PURE__*/React.createElement(EmptyState, {
+    }, suggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,
       searchString: searchStr,

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -85,6 +85,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       needEffect,
       isLoading,
       keepSelectedOptions,
+      needMultiLineText,
       customProps
     } = this.props;
     let {
@@ -170,7 +171,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      }
+      },
+      needMultiLineText: needMultiLineText
     }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/Suggestions.js

@@ -29,7 +29,8 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y
+      a11y,
+      needMultiLineText
     } = this.props;
     const {
       ariaParentRole,
@@ -94,7 +95,8 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
         }));
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({}, commonProps, {
@@ -114,7 +116,8 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
         }));
       }
 
@@ -133,7 +136,8 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y
+        a11y: list_a11y,
+        needMultiLineText: needMultiLineText
       }));
     })));
   }

package/es/MultiSelect/props/defaultProps.js

@@ -35,7 +35,8 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect'
+  dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {}
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -109,7 +110,9 @@ export const MultiSelect_defaultProps = {
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
-  cardHeaderName: ''
+  cardHeaderName: '',
+  needResponsive: true,
+  customProps: {}
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -143,11 +146,14 @@ export const MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
+  needResponsive: true,
+  needMultiLineText: false,
   customProps: {}
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'
 };
 export const Suggestions_defaultProps = {
-  a11y: {}
+  a11y: {},
+  needMultiLineText: false
 };

package/es/MultiSelect/props/propTypes.js

@@ -104,7 +104,8 @@ export const MultiSelect_propTypes = {
   needSelectAll: PropTypes.bool,
   selectAllText: PropTypes.string,
   setAriaId: PropTypes.string,
-  ariaErrorId: PropTypes.string
+  ariaErrorId: PropTypes.string,
+  customProps: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -119,6 +120,7 @@ export const MultiSelectWithAvatar_propTypes = {
     photoURL: PropTypes.string
   }))]).isRequired,
   imageField: PropTypes.string,
+  needMultiLineText: PropTypes.string,
   customProps: PropTypes.shape({
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
@@ -168,7 +170,8 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  }))
+  })),
+  needMultiLineText: PropTypes.bool
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -234,7 +237,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   needToCloseOnSelect: PropTypes.func,
   searchStr: PropTypes.string,
   children: PropTypes.node,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  customProps: PropTypes.string
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/PopOver/PopOver.module.css

@@ -1,9 +1,9 @@
 .popup {
   position: relative;
-  /* css:theme-validation:ignore */
-  background-color: var(--dot_white);
+  background-color: var(--zdt_popover_default_bg);
 }
+
 .target {
   composes: offSelection from '../common/common.module.css';
   cursor: pointer;
-}
+}

package/es/Radio/Radio.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium'] }] */
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -9,6 +11,7 @@ export default class Radio extends React.Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this);
   }
 
   onChange(e) {
@@ -19,6 +22,14 @@ export default class Radio extends React.Component {
     onChange && onChange(value, e);
   }
 
+  handleGetRef(ele) {
+    let {
+      getRef,
+      value
+    } = this.props;
+    getRef && getRef(ele, value);
+  }
+
   render() {
     let {
       id,
@@ -38,6 +49,8 @@ export default class Radio extends React.Component {
       active,
       isFilled,
       customClass,
+      customProps,
+      children,
       a11y
     } = this.props;
     let {
@@ -50,12 +63,17 @@ export default class Radio extends React.Component {
     let {
       ariaHidden,
       role = 'radio',
+      tabIndex,
       ariaChecked = checked,
       ariaLabel,
       ariaLabelledby,
       ariaReadonly = isReadOnly || disabled ? true : false
     } = a11y;
-    return /*#__PURE__*/React.createElement(Container, {
+    let {
+      ContainerProps = {},
+      LabelProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(Container, _extends({
       dataId: value ? value.toLowerCase() : 'RadioComp',
       isCover: false,
       isInline: text ? false : true,
@@ -65,13 +83,14 @@ export default class Radio extends React.Component {
       "data-title": toolTip,
       onClick: !isReadOnly && !disabled ? this.onChange : '',
       "aria-checked": ariaChecked,
-      tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+      tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+      eleRef: this.handleGetRef,
       role: role,
       "aria-Hidden": ariaHidden,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       "aria-readonly": ariaReadonly
-    }, /*#__PURE__*/React.createElement(Box, {
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
             ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
     }, /*#__PURE__*/React.createElement("input", {
@@ -97,18 +116,18 @@ export default class Radio extends React.Component {
     }) : null))), text && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.text
-    }, /*#__PURE__*/React.createElement(Label, {
+    }, /*#__PURE__*/React.createElement(Label, _extends({
       text: text,
-      palette: disabled ? 'disable' : labelPalette,
+      palette: labelPalette,
       size: labelSize,
       type: "title",
       clipped: true,
       dataId: `${text}_label`,
       variant: variant,
       title: toolTip ? toolTip : text,
-      customClass: `${checked && active && !disabled ? `${style[`${palette}checkedActive`]}` : ''} 
+      customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} 
               ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
-    })));
+    }, LabelProps))), children);
   }
 
 }

package/es/Radio/Radio.module.css

@@ -21,11 +21,13 @@
 .readonly, .disabled {
   cursor: not-allowed;
 }
+.disabled {
+  opacity: 0.7
+}
 .radio {
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
-  /* css:theme-validation:ignore */
   stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;

package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap

@@ -1145,7 +1145,7 @@ exports[`Radio rendering the accessMode when disabled  1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               primaryLabel disabled  "
         data-id="RadioText_label"
@@ -1505,7 +1505,7 @@ exports[`Radio rendering the disabled is true 1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               undefined disabled  "
         data-id="RadioText_label"
@@ -1567,7 +1567,7 @@ exports[`Radio rendering the disabledTitle 1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               primaryLabel disabled  "
         data-id="RadioText_label"

package/es/Radio/props/defaultProps.js

@@ -10,5 +10,6 @@ export const defaultProps = {
   variant: 'default',
   isFilled: true,
   customClass: {},
+  customProps: {},
   a11y: {}
 };

package/es/Radio/props/propTypes.js

@@ -4,6 +4,7 @@ export const propTypes = {
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   disabledTitle: PropTypes.string,
+  getRef: PropTypes.func,
   id: PropTypes.string,
   isFilled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
@@ -20,14 +21,20 @@ export const propTypes = {
     customRadio: PropTypes.string,
     customLabel: PropTypes.string
   }),
+  customProps: PropTypes.exact({
+    ContainerProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  }),
   a11y: PropTypes.shape({
     ariaChecked: PropTypes.bool,
     ariaHidden: PropTypes.bool,
     role: PropTypes.string,
+    tabIndex: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
     ariaLabelledby: PropTypes.string,
     ariaLabel: PropTypes.string,
     ariaReadonly: PropTypes.bool
   }),
+  children: PropTypes.node,
   onChange: PropTypes.func,
   text: PropTypes.string
 };

package/es/Ribbon/Ribbon.module.css

@@ -36,12 +36,9 @@
 .basic {
   composes: varClass;
   position: relative;
-  /* css:theme-validation:ignore */
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   line-height: var(--ribbon_line_height);
   padding: var(--ribbon_padding);
   background-color: var(--ribbon_bg_color);
@@ -368,7 +365,6 @@
   position: absolute;
   content: '';
   top: var(--ribbon_tag_before_top);
-  /* css:theme-validation:ignore */
   width: var(--ribbon_tag_before_width);
   height: var(--ribbon_tag_before_height);
   background-color: inherit;

package/es/Select/GroupSelect.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React, { PureComponent } from 'react';
 import { GroupSelect_defaultProps } from './props/defaultProps';
@@ -584,8 +586,12 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps = {}
+    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -750,7 +756,7 @@ export class GroupSelectComponent extends PureComponent {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, {
+        })), /*#__PURE__*/React.createElement(Suggestions, _extends({
           activeId: selectedId,
           suggestions: options,
           getRef: this.suggestionItemRef,
@@ -765,7 +771,7 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }));
+        }, suggestionsProps)));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,
         searchString: searchStr,

package/es/Select/SelectWithAvatar.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { SelectWithAvatar_defaultProps } from './props/defaultProps';
@@ -158,8 +160,12 @@ class SelectWithAvatarComponent extends SelectComponent {
       htmlId,
       needEffect,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps = {}
+    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -294,7 +300,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           role: 'heading'
         }
-      })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
@@ -310,7 +316,7 @@ class SelectWithAvatarComponent extends SelectComponent {
           ariaParentRole: 'listbox',
           role: 'option'
         }
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
+      }, suggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/Select/SelectWithIcon.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { Component } from 'react';
 import { SelectWithIcon_defaultProps } from './props/defaultProps';
 import { SelectWithIcon_propTypes } from './props/propTypes';
@@ -345,8 +347,12 @@ class SelectWithIcon extends Component {
       i18nKeys,
       htmlId,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      customProps
     } = this.props;
+    const {
+      listItemProps = {}
+    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -477,7 +483,7 @@ class SelectWithIcon extends Component {
           iconSize,
           iconColor
         } = options;
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, {
+        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
           key: options[idKey],
           value: options[valueKey],
           size: "medium",
@@ -501,7 +507,7 @@ class SelectWithIcon extends Component {
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
           }
-        });
+        }, listItemProps));
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/props/defaultProps.js

@@ -66,7 +66,8 @@ export const GroupSelect_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
@@ -90,7 +91,8 @@ export const SelectWithAvatar_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,
@@ -115,5 +117,6 @@ export const SelectWithIcon_defaultProps = {
   needIcon: true,
   iconSize: '14',
   i18nKeys: {},
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };

package/es/Select/props/propTypes.js

@@ -169,7 +169,8 @@ export const GroupSelect_propTypes = {
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  isDefaultSelectValue: PropTypes.bool
+  isDefaultSelectValue: PropTypes.bool,
+  customProps: PropTypes.string
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,
@@ -230,7 +231,8 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  customProps: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -284,5 +286,6 @@ export const SelectWithIcon_propTypes = {
   searchBoxSize: PropTypes.string,
   needResponsive: PropTypes.bool,
   boxSize: PropTypes.string,
-  emptyMessage: PropTypes.string
+  emptyMessage: PropTypes.string,
+  customProps: PropTypes.string
 };

package/es/Switch/Switch.module.css

@@ -26,7 +26,6 @@
   display: inline-block;
   position: relative;
   transition: box-shadow var(--zd_transition3) ease-in-out;
-  /* css:theme-validation:ignore */
   background-color: var(--switch_off_bg_color);
   border-radius: 20px;
   cursor: pointer;
@@ -45,7 +44,6 @@
   right: 50% ;
   transition: all var(--zd_transition2);
   box-shadow: var(--switch_cricle_box_shadow);
-  /* css:theme-validation:ignore */
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
 }

package/es/Tag/Tag.module.css

@@ -34,13 +34,10 @@
   composes: dInflex alignVertical flexrow from '../common/common.module.css';
   position: relative;
   vertical-align: middle;
-  /* css:theme-validation:ignore */
   color: var(--tag_text_color);
-  /* css:theme-validation:ignore */
   font-size: var(--tag_font_size);
   letter-spacing: var(--tag_letter_spacing);
   height: var(--tag_height);
-  /* css:theme-validation:ignore */
   max-width: 100% ;
   background-color: var(--tag_bg_color);
   border-radius: var(--tag_border_radius);
@@ -125,13 +122,11 @@
   display: block;
 }
 .close {
-  /* css:theme-validation:ignore */
   color: var(--tag_closeicon_color);
   display: none;
   position: absolute;
   top: 0 ;
   bottom: 0 ;
-  /* css:theme-validation:ignore */
   padding: var(--tag_closeicon_padding);
   cursor: var(--tag_closeicon_cursor);
   border-radius: var(--tag_closeicon_border_radius);
@@ -229,7 +224,6 @@
 }
 
 .icon {
-  /* css:theme-validation:ignore */
   margin: var(--tag_icon_margin);
   background-color: var(--tag_icon_bg_color);
 }