@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -409,8 +409,8 @@ class AdvancedGroupMultiSelect extends React.Component {
     if (suggestionsLen && isPopupOpen && keyCode === 38) {
       //up arrow
 
-      /*if (hoverOption === 0) { //disable first to last option higlight
-        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
+      /*if (hoverOption === 0) { //disable first to last option higlight
+        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
       }*/
       if (hoverIndex) {
         this.setState({
@@ -420,9 +420,9 @@ class AdvancedGroupMultiSelect extends React.Component {
     } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
       //down arrow
 
-      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
-        //disable last to first option higlight
-        !isNextOptions && this.setState({ hoverOption: 0 });
+      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
+        //disable last to first option higlight
+        !isNextOptions && this.setState({ hoverOption: 0 });
       }*/
       if (isNextOptions && suggestionsLen >= 5 && hoverIndex === suggestionsLen - 3) {
         getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
@@ -1004,13 +1004,12 @@ class AdvancedGroupMultiSelect extends React.Component {
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: `${style.box} ${style[`${palette}Box`]}`,
         onScroll: this.handleScroll
-      }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        needSelectAll: needSelectAll,
+      }, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestionOptionIds,
         dataId: dataId
-      })), isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
+      })) : null, isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
@@ -1066,11 +1065,14 @@ class AdvancedGroupMultiSelect extends React.Component {
 }
 
 AdvancedGroupMultiSelect.defaultProps = AdvancedGroupMultiSelect_defaultProps;
-AdvancedGroupMultiSelect.propTypes = AdvancedGroupMultiSelect_propTypes; // if (__DOCS__) {
+AdvancedGroupMultiSelect.propTypes = AdvancedGroupMultiSelect_propTypes;
+const AdvancedGroupMultiSelectComponent = Popup(AdvancedGroupMultiSelect);
+AdvancedGroupMultiSelectComponent.defaultProps = AdvancedGroupMultiSelect.defaultProps;
+AdvancedGroupMultiSelectComponent.propTypes = AdvancedGroupMultiSelect.propTypes; // if (__DOCS__) {
 //   AdvancedGroupMultiSelect.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
 // }
 
-export default Popup(AdvancedGroupMultiSelect);
+export default AdvancedGroupMultiSelectComponent;

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -1,5 +1,3 @@
-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 { AdvancedMultiSelect_propTypes } from './props/propTypes';
@@ -488,7 +486,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}Center`,
         getRef: getContainerRef,
@@ -502,11 +500,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         a11y: {
           role: 'listbox',
           ariaMultiselectable: true
-        }
-      }, DropBoxProps, {
+        },
+        ...DropBoxProps,
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
-      }), isLoading ? /*#__PURE__*/React.createElement(Container, {
+      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
       }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -514,17 +512,16 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: style.box,
         onScroll: this.handleScroll
-      }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        needSelectAll: needSelectAll,
+      }, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestions,
         dataId: dataIdSelectAllEle
-      })), /*#__PURE__*/React.createElement(CardContent, {
+      })) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
         suggestions: suggestions,
         selectedOptions: allselectedOptionIds,
         getRef: this.suggestionItemRef,
@@ -535,8 +532,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         listItemSize: listItemSize,
         a11y: {
           role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+        },
+        ...SuggestionsProps
+      }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,
@@ -556,7 +554,8 @@ AdvancedMultiSelectComponent.propTypes = AdvancedMultiSelect_propTypes;
 AdvancedMultiSelectComponent.defaultProps = AdvancedMultiSelect_defaultProps;
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 const AdvancedMultiSelect = Popup(AdvancedMultiSelectComponent);
-AdvancedMultiSelect.defaultProps = AdvancedMultiSelectComponent.defaultProps; // if (__DOCS__) {
+AdvancedMultiSelect.defaultProps = AdvancedMultiSelectComponent.defaultProps;
+AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes; // if (__DOCS__) {
 //   AdvancedMultiSelectComponent.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'

package/es/MultiSelect/MobileHeader/MobileHeader.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import Button from '../../Button/Button';
+import { Container, Box } from '../../Layout';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './MobileHeader.module.css';
+export default function MobileHeader(props) {
+  let {
+    i18nKeys,
+    onClick,
+    selectedOptions,
+    children
+  } = props;
+  const i18nText = Object.assign({}, i18nKeys, {
+    mobileHeaderText: i18nKeys.mobileHeaderText ? `${i18nKeys.mobileHeaderText}` : `${selectedOptions.length} Selected`
+  });
+  let {
+    mobilePrimaryButtonText,
+    mobileSecondaryButtonText,
+    mobileHeaderText
+  } = i18nText;
+  const showMobileHeader = i18nKeys.mobileHeaderText || !i18nKeys.mobileHeaderText && selectedOptions.length >= 1;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement(Container, {
+    isCover: false,
+    align: "vertical",
+    alignContent: "between",
+    alignBox: "row",
+    className: style.header
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.cardHeading,
+    "data-title": showMobileHeader ? mobileHeaderText : null,
+    flexible: true
+  }, showMobileHeader && mobileHeaderText), /*#__PURE__*/React.createElement(Box, {
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClick,
+    isBold: true,
+    size: "medium",
+    text: selectedOptions.length >= 1 ? mobilePrimaryButtonText : mobileSecondaryButtonText,
+    palette: "plainPrimary",
+    customClass: {
+      customButton: style.buttonText
+    },
+    "data-title": mobilePrimaryButtonText
+  }))), children);
+}
+MobileHeader.defaultProps = defaultProps;
+MobileHeader.propTypes = propTypes;

package/es/MultiSelect/MobileHeader/MobileHeader.module.css

@@ -0,0 +1,16 @@
+.container{
+    padding: 0 var(--zd_size20) var(--zd_size12) var(--zd_size20) ;
+  }
+  .header{
+    padding-bottom: var(--zd_size4) ;
+  }
+  .cardHeading{
+    font-size: var(--zd_font_size16) ;
+    color: var(--zdt_multiselect_res_title_text);
+    composes: bold dotted from '../../common/common.module.css'
+  }
+  .buttonText{
+    font-size: var(--zd_font_size15) ;
+    composes: dotted from '../../common/common.module.css';
+    padding: 0 
+  }

package/es/MultiSelect/MobileHeader/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  selectedOptions: [],
+  i18nKeys: {
+    mobilePrimaryButtonText: 'Done',
+    mobileSecondaryButtonText: 'Close'
+  }
+};

package/es/MultiSelect/MobileHeader/props/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  i18nKeys: PropTypes.object,
+  onClick: PropTypes.func,
+  selectedOptions: PropTypes.array,
+  children: PropTypes.node
+};