@zohodesk/components 1.0.0-temp-198 → 1.0.0-temp-199

package/es/RippleEffect/RippleEffect.module.css

@@ -1,92 +1,92 @@
-.effect {
-  position: relative;
-  border-radius: var(--zd_size4);
-}
-.border {
-  border: solid 1px var(--zdt_rippleeffect_default_border);
-}
-.default.defaultHover {
-  border-color: var(--zdt_rippleeffect_hover_border);
-}
-.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
-/* .hoverEffect:focus.primary.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_primary_border);
-}
-.primary.defaultHover, .hoverEffect:hover.primary.active.border
-/* .hoverEffect:focus.primary.active.border  */
-{
-  border-color: var(--zdt_rippleeffect_primary_active_border);
-}
-.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
-/* .hoverEffect:focus.primaryLight.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.defaultHover, .hoverEffect:hover.green.borderHover
-/* .hoverEffect:focus.green.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.hoverEffect:hover.default.defaultHover
-/* .hoverEffect:focus.default.defaultHover */
- {
-  border-color: var(--zdt_rippleeffect_slate_border);
-}
-.hoverEffect:hover.default.borderHover
-/* .hoverEffect:focus.default.borderHover */
- {
-  border-color: var(--zdt_rippleeffect_navy_border);
-}
-.hoverEffect:hover.default.bgHover
-/* .hoverEffect:focus.default.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_hover_bg);
-}
-.hoverEffect:hover.primaryLight.bgHover
-/* .hoverEffect:focus.primaryLight.bgHover  */
-{
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.primaryFilled {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.hoverEffect:hover.primaryFilled, .primaryFilled.active {
-  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
-}
-.hoverEffect:hover.green.bgHover
-/* .hoverEffect:focus.green.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.active {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.green.active.border {
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.primary.active {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.danger.defaultHover, .hoverEffect:hover.danger.borderHover
-/* .hoverEffect:focus.danger.borderHover */
- {
-  border-color: var(--zdt_rippleeffect_danger_border);
-}
-.hoverEffect:hover.danger.bgHover, .danger.active {
-  background-color: var(--zdt_rippleeffect_danger_bg);
-}
-.hoverEffect:hover.primaryDark.bgHover
-/* .hoverEffect:focus.primaryDark.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_primary_dark_bg);
-}
-.notAllowed {
-  cursor: not-allowed;
-}
+.effect {
+  position: relative;
+  border-radius: var(--zd_size4);
+}
+.border {
+  border: solid 1px var(--zdt_rippleeffect_default_border);
+}
+.default.defaultHover {
+  border-color: var(--zdt_rippleeffect_hover_border);
+}
+.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
+/* .hoverEffect:focus.primary.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_primary_border);
+}
+.primary.defaultHover, .hoverEffect:hover.primary.active.border
+/* .hoverEffect:focus.primary.active.border  */
+{
+  border-color: var(--zdt_rippleeffect_primary_active_border);
+}
+.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
+/* .hoverEffect:focus.primaryLight.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.defaultHover, .hoverEffect:hover.green.borderHover
+/* .hoverEffect:focus.green.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.hoverEffect:hover.default.defaultHover
+/* .hoverEffect:focus.default.defaultHover */
+ {
+  border-color: var(--zdt_rippleeffect_slate_border);
+}
+.hoverEffect:hover.default.borderHover
+/* .hoverEffect:focus.default.borderHover */
+ {
+  border-color: var(--zdt_rippleeffect_navy_border);
+}
+.hoverEffect:hover.default.bgHover
+/* .hoverEffect:focus.default.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_hover_bg);
+}
+.hoverEffect:hover.primaryLight.bgHover
+/* .hoverEffect:focus.primaryLight.bgHover  */
+{
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.primaryFilled {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.hoverEffect:hover.primaryFilled, .primaryFilled.active {
+  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
+}
+.hoverEffect:hover.green.bgHover
+/* .hoverEffect:focus.green.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.active {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.green.active.border {
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.primary.active {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.danger.defaultHover, .hoverEffect:hover.danger.borderHover
+/* .hoverEffect:focus.danger.borderHover */
+ {
+  border-color: var(--zdt_rippleeffect_danger_border);
+}
+.hoverEffect:hover.danger.bgHover, .danger.active {
+  background-color: var(--zdt_rippleeffect_danger_bg);
+}
+.hoverEffect:hover.primaryDark.bgHover
+/* .hoverEffect:focus.primaryDark.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_primary_dark_bg);
+}
+.notAllowed {
+  cursor: not-allowed;
+}

package/es/Select/GroupSelect.js

@@ -584,8 +584,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
@@ -769,7 +773,8 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`
+          dataId: `${dataId}_Options`,
+          ...suggestionsProps
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/Select.module.css

@@ -1,135 +1,135 @@
-.input {
-  cursor: pointer;
-}
-
-.small {
-  max-height: var(--zd_size200) ;
-}
-
-.medium {
-  max-height: var(--zd_size350) ;
-}
-
-.large {
-  max-height: var(--zd_size400) ;
-}
-
-.emptyState {
-  font-size: var(--zd_font_size14) ;
-  color: var(--zdt_select_emptystate_text);
-  composes: semibold from '../common/common.module.css';
-}
-
-.box_small .emptyState {
-  padding: var(--zd_size12) var(--zd_size6) ;
-}
-
-.box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15) ;
-}
-
-.hide {
-  composes: vishidden from '../common/common.module.css';
-}
-
-.container {
-  position: relative;
-}
-/* css:lineheight-validation:ignore */
-.arrowIcon {
-  height: var(--zd_size8) ;
-  line-height: var(--zd_size8);
-}
-
-.small.search {
-  padding: 0 var(--zd_size5) ;
-}
-
-.medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0 ;
-}
-
-.title {
-  margin-bottom: var(--zd_size6) ;
-}
-
-.groupTitle {
-  margin: var(--zd_size6) 0 ;
-}
-
-.listItemContainer {
-  padding: var(--zd_size10) 0 ;
-}
-
-.responsivelistItemContainer {
-  padding: var(--zd_size10) 0 0 ;
-}
-
-.readonly {
-  --textboxicon_icon_cursor: not-allowed;
-}
-
-.transparentContainer .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.transparentContainer:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
-
-.disable {
-  color: var(--zdt_select_disable_text);
-}
-
-.leftIcon {
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  width: var(--zd_size30) ;
-}
-
-[dir=ltr] .leftIcon {
-  left: 0 ;
-}
-
-[dir=rtl] .leftIcon {
-  right: 0 ;
-}
-
-[dir=ltr] .iconSelect {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30) ;
-}
-
-.dropBoxList {
-  padding: var(--zd_size10) 0 ;
-}
-
-.responsivedropBoxList {
-  padding: var(--zd_size10) 0 0 0 ;
-}
-
-.rotate {
-  transform: rotateX(180deg);
-}
-
-.iconOnHoverStyle .arrowIcon,
-.iconOnHoverReadonly .arrowIcon,
-.iconOnHoverReadonly:hover .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.iconOnHoverStyle:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
-
-.loader {
-  padding: var(--zd_size10) ;
+.input {
+  cursor: pointer;
+}
+
+.small {
+  max-height: var(--zd_size200) ;
+}
+
+.medium {
+  max-height: var(--zd_size350) ;
+}
+
+.large {
+  max-height: var(--zd_size400) ;
+}
+
+.emptyState {
+  font-size: var(--zd_font_size14) ;
+  color: var(--zdt_select_emptystate_text);
+  composes: semibold from '../common/common.module.css';
+}
+
+.box_small .emptyState {
+  padding: var(--zd_size12) var(--zd_size6) ;
+}
+
+.box_medium .emptyState {
+  padding: var(--zd_size12) var(--zd_size15) ;
+}
+
+.hide {
+  composes: vishidden from '../common/common.module.css';
+}
+
+.container {
+  position: relative;
+}
+/* css:lineheight-validation:ignore */
+.arrowIcon {
+  height: var(--zd_size8) ;
+  line-height: var(--zd_size8);
+}
+
+.small.search {
+  padding: 0 var(--zd_size5) ;
+}
+
+.medium.search {
+  padding: var(--zd_size3) var(--zd_size20) 0 ;
+}
+
+.title {
+  margin-bottom: var(--zd_size6) ;
+}
+
+.groupTitle {
+  margin: var(--zd_size6) 0 ;
+}
+
+.listItemContainer {
+  padding: var(--zd_size10) 0 ;
+}
+
+.responsivelistItemContainer {
+  padding: var(--zd_size10) 0 0 ;
+}
+
+.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+
+.transparentContainer .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.transparentContainer:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+
+.disable {
+  color: var(--zdt_select_disable_text);
+}
+
+.leftIcon {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--zd_size30) ;
+}
+
+[dir=ltr] .leftIcon {
+  left: 0 ;
+}
+
+[dir=rtl] .leftIcon {
+  right: 0 ;
+}
+
+[dir=ltr] .iconSelect {
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=rtl] .iconSelect {
+  padding-right: var(--zd_size30) ;
+}
+
+.dropBoxList {
+  padding: var(--zd_size10) 0 ;
+}
+
+.responsivedropBoxList {
+  padding: var(--zd_size10) 0 0 0 ;
+}
+
+.rotate {
+  transform: rotateX(180deg);
+}
+
+.iconOnHoverStyle .arrowIcon,
+.iconOnHoverReadonly .arrowIcon,
+.iconOnHoverReadonly:hover .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.iconOnHoverStyle:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+
+.loader {
+  padding: var(--zd_size10) ;
 }

package/es/Select/SelectWithAvatar.js

@@ -158,8 +158,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
@@ -309,7 +313,8 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        }
+        },
+        ...suggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/SelectWithIcon.js

@@ -345,8 +345,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
@@ -500,7 +504,8 @@ 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

@@ -67,7 +67,8 @@ export const GroupSelect_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
@@ -91,7 +92,8 @@ export const SelectWithAvatar_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,
@@ -116,5 +118,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
 };