@zohodesk/components 1.0.0-temp-80 → 1.0.0-temp-81

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -21,6 +21,7 @@ var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 var _IdProvider = require("../Provider/IdProvider");
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 var _CustomResponsive = require("../Responsive/CustomResponsive");
+var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -116,7 +117,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         children = _this$props.children,
         customChildrenClass = _this$props.customChildrenClass,
         isBoxPaddingNeed = _this$props.isBoxPaddingNeed,
-        needEffect = _this$props.needEffect;
+        needEffect = _this$props.needEffect,
+        isLoading = _this$props.isLoading;
       var _i18nKeys = i18nKeys,
         _i18nKeys$clearText = _i18nKeys.clearText,
         clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -248,7 +250,10 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           selectAllText: selectAllText,
           suggestions: suggestions,
           dataId: dataId
-        })), /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        })), isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          align: "both",
+          className: _MultiSelectModule["default"].loader
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
           eleRef: _this2.suggestionContainerRef
@@ -273,7 +278,10 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           palette: palette,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        })))));
+        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          isCover: false,
+          align: "both"
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))));
       }) : null);
     }
   }]);

package/lib/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,15 @@
-.tag {
-  max-width: 100%;
-}
-[dir=ltr] .xmedium {
-  margin: 0 var(--zd_size10) var(--zd_size2) 0;
-}
-[dir=rtl] .xmedium {
-  margin: 0 0 var(--zd_size2) var(--zd_size10);
-}
-[dir=ltr] .medium {
-  margin: var(--zd_size5) var(--zd_size10) 0 0;
-}
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10);
-}
+.tag {
+  max-width: 100%;
+}
+[dir=ltr] .xmedium {
+  margin: 0 var(--zd_size10) var(--zd_size2) 0;
+}
+[dir=rtl] .xmedium {
+  margin: 0 0 var(--zd_size2) var(--zd_size10);
+}
+[dir=ltr] .medium {
+  margin: var(--zd_size5) var(--zd_size10) 0 0;
+}
+[dir=rtl] .medium {
+  margin: var(--zd_size5) 0 0 var(--zd_size10);
+}

package/lib/MultiSelect/props/defaultProps.js

@@ -39,7 +39,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
   a11y: {},
   isSearchClearOnSelect: true,
   needEffect: true,
-  palette: 'default'
+  palette: 'default',
+  isLoading: false
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
 var AdvancedMultiSelect_defaultProps = {
@@ -69,7 +70,8 @@ var AdvancedMultiSelect_defaultProps = {
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
   customProps: {},
-  needEffect: true
+  needEffect: true,
+  isLoading: false
 };
 exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
 var EmptyState_defaultProps = {
@@ -109,7 +111,8 @@ var MultiSelect_defaultProps = {
   palette: 'default',
   isSearchClearOnSelect: true,
   needEffect: true,
-  boxSize: 'default'
+  boxSize: 'default',
+  isLoading: false
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -141,7 +144,8 @@ var MultiSelectWithAvatar_defaultProps = {
   palette: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
-  needEffect: true
+  needEffect: true,
+  isLoading: false
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {

package/lib/MultiSelect/props/propTypes.js

@@ -56,7 +56,8 @@ var AdvancedGroupMultiSelect_propTypes = {
   htmlId: _propTypes["default"].string,
   isSearchClearOnSelect: _propTypes["default"].bool,
   palette: _propTypes["default"].oneOf(['default', 'dark']),
-  needEffect: true
+  needEffect: true,
+  isLoading: _propTypes["default"].bool
 };
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 var AdvancedMultiSelect_propTypes = {
@@ -139,7 +140,8 @@ var AdvancedMultiSelect_propTypes = {
   customProps: _propTypes["default"].shape({
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
-  })
+  }),
+  isLoading: _propTypes["default"].bool
 };
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;
 var EmptyState_propTypes = {
@@ -243,7 +245,8 @@ var MultiSelect_propTypes = {
   disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
   getFooter: _propTypes["default"].func,
   needEffect: _propTypes["default"].bool,
-  boxSize: _propTypes["default"].string
+  boxSize: _propTypes["default"].string,
+  isLoading: _propTypes["default"].bool
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -322,7 +325,8 @@ var MultiSelectWithAvatar_propTypes = {
   children: _propTypes["default"].node,
   customChildrenClass: _propTypes["default"].string,
   isSearchClearOnSelect: _propTypes["default"].bool,
-  disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string)
+  disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  isLoading: _propTypes["default"].bool
 };
 exports.MultiSelectWithAvatar_propTypes = MultiSelectWithAvatar_propTypes;
 var SelectedOptions_propTypes = {

package/lib/PopOver/PopOver.module.css

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

package/lib/Popup/PositionMapping.json

@@ -1,74 +1,74 @@
-{ 
-    "absolutePositionMapping" : {
-        "bottomCenter": "bottomCenter",
-        "bottomRight": "bottomLeftToRight",
-        "bottomLeft": "bottomRightToLeft",
-        "topCenter": "topCenter",
-        "topRight": "topLeftToRight",
-        "topLeft": "topRightToLeft",
-        "rightCenter": "rightCenter",
-        "rightBottom": "rightTopToBottom",
-        "rightTop": "rightBottomToTop",
-        "leftCenter": "leftCenter",
-        "leftBottom": "leftTopToBottom",
-        "leftTop": "leftBottomToTop",
-        "bottomLeftToRight": "bottomLeftToRight",
-        "bottomRightToLeft": "bottomRightToLeft",
-        "topLeftToRight": "topLeftToRight",
-        "topRightToLeft": "topRightToLeft",
-        "rightTopToBottom": "rightTopToBottom",
-        "rightBottomToTop": "rightBottomToTop",
-        "leftTopToBottom": "leftTopToBottom"
-    },
-    "rtlAbsolutePositionMapping" : {
-        "bottomCenter": "bottomCenter",
-        "bottomRight": "bottomRightToLeft",
-        "bottomLeft": "bottomLeftToRight",
-        "topCenter": "topCenter",
-        "topRight": "topRightToLeft",
-        "topLeft": "topLeftToRight",
-        "rightCenter": "leftCenter",
-        "rightBottom": "leftTopToBottom",
-        "rightTop": "leftBottomToTop",
-        "leftCenter": "rightCenter",
-        "leftBottom": "rightTopToBottom",
-        "leftTop": "rightBottomToTop",
-        "bottomLeftToRight": "bottomLeftToRight",
-        "bottomRightToLeft": "bottomRightToLeft",
-        "topLeftToRight": "topLeftToRight",
-        "topRightToLeft": "topRightToLeft",
-        "rightTopToBottom": "rightTopToBottom",
-        "rightBottomToTop": "rightBottomToTop",
-        "leftTopToBottom": "leftTopToBottom"
-    },
-    "rtlFixedPositionMapping": {
-        "bottomCenter":"bottomCenter",
-        "bottomLeftToRight": "bottomRightToLeft",
-        "bottomCenterToRight": "bottomCenterToLeft",
-        "bottomRightToLeft": "bottomLeftToRight",
-        "bottomCenterToLeft": "bottomCenterToRight",
-        "topCenter": "topCenter",
-        "topLeftToRight": "topRightToLeft",
-        "topCenterToRight": "topCenterToLeft",
-        "topRightToLeft": "topLeftToRight",
-        "topCenterToLeft": "topCenterToRight",
-        "rightTopToBottom": "leftTopToBottom",
-        "rightCenterToBottom": "leftCenterToBottom",
-        "rightCenter": "leftCenter",
-        "rightBottomToTop": "leftBottomToTop",
-        "rightCenterToTop": "leftCenterToTop",
-        "leftTopToBottom": "rightTopToBottom",
-        "leftCenterToBottom": "rightCenterToBottom",
-        "leftCenter": "rightCenter",
-        "leftBottomToTop": "rightBottomToTop",
-        "leftCenterToTop": "rightCenterToTop",
-        "bottomRight": "bottomLeft",
-        "bottomLeft": "bottomRight",
-        "topRight": "topLeft",
-        "topLeft": "topRight",
-        "rightBottom": "leftBottom",
-        "rightTop": "leftTop",
-        "leftBottom": "rightBottom",
-        "leftTop": "rightTop"      
-    }
+{ 
+    "absolutePositionMapping" : {
+        "bottomCenter": "bottomCenter",
+        "bottomRight": "bottomLeftToRight",
+        "bottomLeft": "bottomRightToLeft",
+        "topCenter": "topCenter",
+        "topRight": "topLeftToRight",
+        "topLeft": "topRightToLeft",
+        "rightCenter": "rightCenter",
+        "rightBottom": "rightTopToBottom",
+        "rightTop": "rightBottomToTop",
+        "leftCenter": "leftCenter",
+        "leftBottom": "leftTopToBottom",
+        "leftTop": "leftBottomToTop",
+        "bottomLeftToRight": "bottomLeftToRight",
+        "bottomRightToLeft": "bottomRightToLeft",
+        "topLeftToRight": "topLeftToRight",
+        "topRightToLeft": "topRightToLeft",
+        "rightTopToBottom": "rightTopToBottom",
+        "rightBottomToTop": "rightBottomToTop",
+        "leftTopToBottom": "leftTopToBottom"
+    },
+    "rtlAbsolutePositionMapping" : {
+        "bottomCenter": "bottomCenter",
+        "bottomRight": "bottomRightToLeft",
+        "bottomLeft": "bottomLeftToRight",
+        "topCenter": "topCenter",
+        "topRight": "topRightToLeft",
+        "topLeft": "topLeftToRight",
+        "rightCenter": "leftCenter",
+        "rightBottom": "leftTopToBottom",
+        "rightTop": "leftBottomToTop",
+        "leftCenter": "rightCenter",
+        "leftBottom": "rightTopToBottom",
+        "leftTop": "rightBottomToTop",
+        "bottomLeftToRight": "bottomLeftToRight",
+        "bottomRightToLeft": "bottomRightToLeft",
+        "topLeftToRight": "topLeftToRight",
+        "topRightToLeft": "topRightToLeft",
+        "rightTopToBottom": "rightTopToBottom",
+        "rightBottomToTop": "rightBottomToTop",
+        "leftTopToBottom": "leftTopToBottom"
+    },
+    "rtlFixedPositionMapping": {
+        "bottomCenter":"bottomCenter",
+        "bottomLeftToRight": "bottomRightToLeft",
+        "bottomCenterToRight": "bottomCenterToLeft",
+        "bottomRightToLeft": "bottomLeftToRight",
+        "bottomCenterToLeft": "bottomCenterToRight",
+        "topCenter": "topCenter",
+        "topLeftToRight": "topRightToLeft",
+        "topCenterToRight": "topCenterToLeft",
+        "topRightToLeft": "topLeftToRight",
+        "topCenterToLeft": "topCenterToRight",
+        "rightTopToBottom": "leftTopToBottom",
+        "rightCenterToBottom": "leftCenterToBottom",
+        "rightCenter": "leftCenter",
+        "rightBottomToTop": "leftBottomToTop",
+        "rightCenterToTop": "leftCenterToTop",
+        "leftTopToBottom": "rightTopToBottom",
+        "leftCenterToBottom": "rightCenterToBottom",
+        "leftCenter": "rightCenter",
+        "leftBottomToTop": "rightBottomToTop",
+        "leftCenterToTop": "rightCenterToTop",
+        "bottomRight": "bottomLeft",
+        "bottomLeft": "bottomRight",
+        "topRight": "topLeft",
+        "topLeft": "topRight",
+        "rightBottom": "leftBottom",
+        "rightTop": "leftTop",
+        "leftBottom": "rightBottom",
+        "leftTop": "rightTop"      
+    }
 }

package/lib/Provider.js

@@ -10,56 +10,38 @@ var _AppContainer = _interopRequireDefault(require("./AppContainer/AppContainer"
 var _Layout = require("./Layout");
 var _ThemeTool = _interopRequireDefault(require("../../common/lib/ThemeTool/ThemeTool"));
 require("../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
-require("../assets/Appearance/default/themes/blue/contrast/blueDefaultCTAThemeContrast.module.css");
 require("../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
-require("../assets/Appearance/default/themes/green/contrast/greenDefaultCTAThemeContrast.module.css");
 require("../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
-require("../assets/Appearance/default/themes/orange/contrast/orangeDefaultCTAThemeContrast.module.css");
 require("../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
-require("../assets/Appearance/default/themes/red/contrast/redDefaultCTAThemeContrast.module.css");
 require("../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
-require("../assets/Appearance/default/themes/yellow/contrast/yellowDefaultCTAThemeContrast.module.css");
 require("../assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
 require("../assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
 require("../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
 require("../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css");
 require("../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
 require("../assets/Appearance/default/mode/defaultMode.module.css");
-require("../assets/Appearance/default/mode/contrast/defaultContrast.module.css");
 require("../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
-require("../assets/Appearance/dark/themes/blue/contrast/blueDarkCTAThemeContrast.module.css");
 require("../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
-require("../assets/Appearance/dark/themes/green/contrast/greenDarkCTAThemeContrast.module.css");
 require("../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
-require("../assets/Appearance/dark/themes/orange/contrast/orangeDarkCTAThemeContrast.module.css");
 require("../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
-require("../assets/Appearance/dark/themes/red/contrast/redDarkCTAThemeContrast.module.css");
 require("../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
-require("../assets/Appearance/dark/themes/yellow/contrast/yellowDarkCTAThemeContrast.module.css");
 require("../assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
 require("../assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
 require("../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
 require("../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css");
 require("../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
 require("../assets/Appearance/dark/mode/darkMode.module.css");
-require("../assets/Appearance/dark/mode/contrast/darkContrast.module.css");
 require("../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
-require("../assets/Appearance/pureDark/themes/blue/contrast/bluePureDarkCTAThemeContrast.module.css");
 require("../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
-require("../assets/Appearance/pureDark/themes/green/contrast/greenPureDarkCTAThemeContrast.module.css");
 require("../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
-require("../assets/Appearance/pureDark/themes/orange/contrast/orangePureDarkCTAThemeContrast.module.css");
 require("../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
-require("../assets/Appearance/pureDark/themes/red/contrast/redPureDarkCTAThemeContrast.module.css");
 require("../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
-require("../assets/Appearance/pureDark/themes/yellow/contrast/yellowPureDarkCTAThemeContrast.module.css");
 require("../assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css");
 require("../assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css");
 require("../assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css");
 require("../assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css");
 require("../assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css");
 require("../assets/Appearance/pureDark/mode/pureDarkMode.module.css");
-require("../assets/Appearance/pureDark/mode/contrast/pureDarkContrast.module.css");
 var _LibraryContextInit = _interopRequireDefault(require("./Provider/LibraryContextInit"));
 var _IdProvider = require("./Provider/IdProvider");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -83,12 +65,10 @@ var Provider = /*#__PURE__*/function (_React$Component) {
     (0, _IdProvider.setGlobalIdPrefix)('ZD');
     _this.state = {
       appearanceName: 'default',
-      themeName: 'blue',
-      isContrastChecked: false
+      themeName: 'blue'
     };
     _this.setTheme = _this.setTheme.bind(_assertThisInitialized(_this));
     _this.setAppearance = _this.setAppearance.bind(_assertThisInitialized(_this));
-    _this.setContrast = _this.setContrast.bind(_assertThisInitialized(_this));
     return _this;
   }
   _createClass(Provider, [{
@@ -105,22 +85,12 @@ var Provider = /*#__PURE__*/function (_React$Component) {
         themeName: theme
       });
     }
-  }, {
-    key: "setContrast",
-    value: function setContrast() {
-      this.setState(function (prevState) {
-        return {
-          isContrastChecked: !prevState.isContrastChecked
-        };
-      });
-    }
   }, {
     key: "render",
     value: function render() {
       var _this$state = this.state,
         appearanceName = _this$state.appearanceName,
-        themeName = _this$state.themeName,
-        isContrastChecked = _this$state.isContrastChecked;
+        themeName = _this$state.themeName;
       return /*#__PURE__*/_react["default"].createElement(_LibraryContextInit["default"].Provider, {
         value: {
           isReducedMotion: false,
@@ -132,15 +102,12 @@ var Provider = /*#__PURE__*/function (_React$Component) {
             'data-mode': appearanceName,
             'data-theme': themeName
           }
-        },
-        className: isContrastChecked ? 'contrast' : ''
+        }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         scroll: "vertical"
       }, this.props.children), /*#__PURE__*/_react["default"].createElement(_ThemeTool["default"], {
         onThemeChange: this.setTheme,
-        onAppearanceChange: this.setAppearance,
-        onContrastChange: this.setContrast,
-        isChecked: isContrastChecked
+        onAppearanceChange: this.setAppearance
       })));
     }
   }]);