@zohodesk/components 1.1.1 → 1.2.1

package/lib/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/lib/Select/GroupSelect.js

@@ -862,6 +862,7 @@ GroupSelectComponent.defaultProps = _defaultProps.GroupSelect_defaultProps;
 GroupSelectComponent.displayName = 'GroupSelect';
 var GroupSelect = (0, _Popup["default"])(GroupSelectComponent);
 GroupSelect.defaultProps = GroupSelectComponent.defaultProps;
+GroupSelect.propTypes = GroupSelectComponent.propTypes;
 var _default = GroupSelect; // if (__DOCS__) {
 //   GroupSelect.docs = {
 //     componentGroup: 'Form Elements',

package/lib/Select/Select.module.css

@@ -1,109 +1,109 @@
-.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;
-}
-.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;
+}
+.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/lib/Select/SelectWithAvatar.js

@@ -380,7 +380,8 @@ SelectWithAvatarComponent.propTypes = _propTypes.SelectWithAvatar_propTypes;
 SelectWithAvatarComponent.defaultProps = _defaultProps.SelectWithAvatar_defaultProps;
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 var SelectWithAvatar = (0, _Popup["default"])(SelectWithAvatarComponent);
-SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps; // if (__DOCS__) {
+SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps;
+SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes; // if (__DOCS__) {
 //   SelectWithAvatar.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'

package/lib/Select/SelectWithIcon.js

@@ -581,13 +581,15 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 SelectWithIcon.propTypes = _propTypes.SelectWithIcon_propTypes;
-SelectWithIcon.defaultProps = _defaultProps.SelectWithIcon_defaultProps; // if (__DOCS__) {
+SelectWithIcon.defaultProps = _defaultProps.SelectWithIcon_defaultProps;
+var SelectWithIconComponent = (0, _Popup["default"])(SelectWithIcon);
+SelectWithIconComponent.defaultProps = SelectWithIcon.defaultProps;
+SelectWithIconComponent.propTypes = SelectWithIcon.propTypes; // if (__DOCS__) {
 //   SelectWithIcon.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
 // }
 
-var _default = (0, _Popup["default"])(SelectWithIcon);
-
+var _default = SelectWithIconComponent;
 exports["default"] = _default;

package/lib/Select/props/propTypes.js

@@ -96,7 +96,13 @@ var Select_propTypes = {
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
-  isAbsolutePositioningNeeded: _propTypes["default"].bool
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  openPopupOnly: _propTypes["default"].bool,
+  ariaLabelledby: _propTypes["default"].string,
+  positionsOffset: _propTypes["default"].array,
+  targetOffset: _propTypes["default"].array,
+  isRestrictScroll: _propTypes["default"].bool,
+  dropBoxPortalId: _propTypes["default"].string
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {
@@ -143,12 +149,9 @@ var GroupSelect_propTypes = {
   animationStyle: _propTypes["default"].string,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   defaultDropBoxPosition: _propTypes["default"].oneOf(['bottom', 'top', 'left', 'right']),
-  isAnimate: _propTypes["default"].bool,
-  onFocus: _propTypes["default"].func,
   size: _propTypes["default"].oneOf(['medium', 'xmedium']),
   textBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'xmedium']),
   title: _propTypes["default"].string,
-  variant: _propTypes["default"].string,
   needResponsive: _propTypes["default"].bool,
   className: _propTypes["default"].string,
   textBoxVariant: _propTypes["default"].string,
@@ -176,7 +179,8 @@ var GroupSelect_propTypes = {
     searchEmptyText: _propTypes["default"].string
   }),
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  isDefaultSelectValue: _propTypes["default"].bool
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
 var SelectWithAvatar_propTypes = {
@@ -284,6 +288,13 @@ var SelectWithIcon_propTypes = {
   valueKey: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  needBorder: _propTypes["default"].bool,
+  searchBoxSize: _propTypes["default"].string,
+  needResponsive: _propTypes["default"].bool,
+  boxSize: _propTypes["default"].string,
+  emptyMessage: _propTypes["default"].string
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;