@zohodesk/components 1.0.0-temp-168 → 1.0.0-temp-170

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

@@ -497,8 +497,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "handleValueInputChange",
     value: function handleValueInputChange(e) {
-      var which = e.which;
-      var typeString = String.fromCharCode(which);
+      var typeString = (0, _Common.getKeyValue)(e);
       var _this$props7 = this.props,
           isPopupOpen = _this$props7.isPopupOpen,
           autoSelectOnType = _this$props7.autoSelectOnType;
@@ -862,6 +861,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.js

@@ -606,8 +606,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleValueInputChange",
     value: function handleValueInputChange(e) {
-      var which = e.which;
-      var typeString = String.fromCharCode(which);
+      var typeString = (0, _Common.getKeyValue)(e);
       var _this$props8 = this.props,
           isPopupOpen = _this$props8.isPopupOpen,
           autoSelectOnType = _this$props8.autoSelectOnType;

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

@@ -9,6 +9,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var Select_propTypes = {
   animationStyle: _propTypes["default"].string,
   autoComplete: _propTypes["default"].bool,
@@ -183,7 +189,10 @@ var GroupSelect_propTypes = {
   isDefaultSelectValue: _propTypes["default"].bool
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
-var SelectWithAvatar_propTypes = {
+
+var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propTypes), {}, {
+  textBoxClass: _propTypes["default"].string,
+  imageField: _propTypes["default"].string,
   animationStyle: _propTypes["default"].string,
   avatarPalette: _propTypes["default"].string,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
@@ -241,7 +250,8 @@ var SelectWithAvatar_propTypes = {
   needEffect: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string
-};
+});
+
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
 var SelectWithIcon_propTypes = {
   animationStyle: _propTypes["default"].oneOf(['default', 'bounce']),