@zohodesk/components 1.0.0-temp-41 → 1.0.0-temp-42

package/es/MultiSelect/MultiSelect.js

@@ -292,7 +292,7 @@ export class MultiSelectComponent extends React.Component {
     } = this.props;
     const highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27)) {
+    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27 || keyCode === 9)) {
       suggestions = this.handleFilterSuggestions();
     }
 
@@ -420,6 +420,13 @@ export class MultiSelectComponent extends React.Component {
         });
       }
     } else if (keyCode === 27) {// this.handlePopupClose(e);
+    } else if (keyCode === 9) {
+      const selectedOption = suggestions[hoverOption] || {};
+      const {
+        id
+      } = selectedOption;
+      isPopupOpen && !getIsEmptyValue(id) && this.handleSelectOption(id, e);
+      this.handlePopupClose(e);
     }
   }
 
@@ -535,7 +542,11 @@ export class MultiSelectComponent extends React.Component {
     }
   }
 
-  handleFetchOptions(...args) {
+  handleFetchOptions() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     const [APICall, searchStr] = args;
     const {
       isFetchingOptions
@@ -601,7 +612,9 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
-  handleClickSelectedOption(id = '', e) {
+  handleClickSelectedOption() {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     const {
       selectedOptions
     } = this.props;
@@ -682,7 +695,9 @@ export class MultiSelectComponent extends React.Component {
     getNextOptions && getNextOptions(searchStr);
   }
 
-  handleChange(selectedOptions = [], e) {
+  handleChange() {
+    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     const {
       optionsNormalize
     } = this.state;
@@ -855,8 +870,7 @@ export class MultiSelectComponent extends React.Component {
       a11y,
       children,
       customChildrenClass,
-      getFooter,
-      needEffect
+      getFooter
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -884,7 +898,7 @@ export class MultiSelectComponent extends React.Component {
     const ariaErrorId = this.getNextAriaId();
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -1088,8 +1102,7 @@ MultiSelectComponent.propTypes = {
   children: PropTypes.node,
   customChildrenClass: PropTypes.string,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func,
-  needEffect: PropTypes.bool
+  getFooter: PropTypes.func
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1119,8 +1132,7 @@ MultiSelectComponent.defaultProps = {
   a11y: {},
   textBoxClass: '',
   palette: 'default',
-  isSearchClearOnSelect: true,
-  needEffect: true
+  isSearchClearOnSelect: true
 };
 
 if (false) {

package/es/MultiSelect/MultiSelect.module.css

@@ -2,9 +2,14 @@
   position: relative;
 }
 
-.disabled, .readOnly {
-  cursor: not-allowed;
+.disabled {
+  composes: disabled from '../common/common.module.css';
 }
+
+.readOnly {
+  composes: readonly from '../common/common.module.css';
+}
+
 .container {
   max-height: var(--zd_size120);
   composes: oflowy from '../common/common.module.css';
@@ -17,28 +22,28 @@
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
 }
-.effect .borderColor_transparent:hover {
+.borderColor_transparent:hover {
   border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
 }
-.effect .borderColor_transparent.active {
+.borderColor_transparent.active {
   border-bottom-color: var(--zdt_multiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_multiselect_default_border);
 }
-.effect .borderColor_default:hover {
+.borderColor_default:hover {
   border-bottom-color: var(--zdt_multiselect_default_hover_border);
 }
-.effect .borderColor_default.active {
+.borderColor_default.active {
   border-bottom-color: var(--zdt_multiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_multiselect_dark_border);
 }
-.effect .borderColor_dark:hover {
+.borderColor_dark:hover {
   border-bottom-color: var(--zdt_multiselect_dark_hover_border);
 }
-.effect .borderColor_dark.active {
+.borderColor_dark.active {
   border-bottom-color: var(--zdt_multiselect_dark_active_border);
 }
 

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -87,8 +87,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       a11y,
       children,
       customChildrenClass,
-      isBoxPaddingNeed,
-      needEffect
+      isBoxPaddingNeed
     } = this.props;
     const {
       clearText = 'Clear all'
@@ -116,7 +115,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -289,7 +288,6 @@ MultiSelectWithAvatarComponent.propTypes = {
   palette: PropTypes.oneOf(['default', 'dark']),
   htmlId: PropTypes.string,
   isBoxPaddingNeed: PropTypes.bool,
-  needEffect: PropTypes.bool,
 
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
@@ -339,8 +337,7 @@ MultiSelectWithAvatarComponent.defaultProps = {
   a11y: {},
   palette: 'default',
   isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true,
-  needEffect: true
+  isSearchClearOnSelect: true
 };
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);

package/es/MultiSelect/SelectedOptions.js

@@ -37,14 +37,13 @@ export default class SelectedOptions extends React.PureComponent {
       } = option;
       const commonProps = {
         disabled: isDisabled,
-        onRemove: isDisabled || isReadOnly ? null : onRemove,
+        onRemove: isDisabled ? null : onRemove,
         text: value,
         palette: isDarkPalette,
         onSelectTag: isReadOnly ? null : onSelect,
         getRef: getRef,
         initial: value,
-        id: id,
-        isReadOnly: isReadOnly
+        id: id
       };
 
       if (optionType === 'avatar') {

package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js

@@ -39,7 +39,8 @@ export default class AdvancedGroupMultiSelect__default extends React.Component {
     return Promise.resolve();
   }
 
-  handleSelectOptions(selectedGroupOptions = []) {
+  handleSelectOptions() {
+    let selectedGroupOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     this.setState({
       selectedGroupOptions
     });

package/es/Popup/Popup.js

@@ -40,13 +40,17 @@ const defaultState = {
 
 /* eslint-disable react/prop-types */
 
-const Popup = function (Component, group = 'global', needResizeHandling = true, {
-  isAbsolutePositioningNeeded: isAbsolutePopup = true,
-  isArrow: needPopupArrow = false,
-  customOrder: customPositionOrder = [],
-  scrollDebounceTime: popupScrollDebounceTime = 0,
-  closeOnScroll: closeOnScrollPopup = false
-} = {}) {
+const Popup = function (Component) {
+  let group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
+  let needResizeHandling = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let {
+    isAbsolutePositioningNeeded: isAbsolutePopup = true,
+    isArrow: needPopupArrow = false,
+    customOrder: customPositionOrder = [],
+    scrollDebounceTime: popupScrollDebounceTime = 0,
+    closeOnScroll: closeOnScrollPopup = false
+  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
   class Popup extends React.Component {
     constructor(props) {
       super(props);
@@ -412,7 +416,9 @@ const Popup = function (Component, group = 'global', needResizeHandling = true,
       e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
     }
 
-    handlePopupPosition(defaultPosition = 'bottomCenter', isResizeHandling) {
+    handlePopupPosition() {
+      let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
+      let isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
       // isResizeHandling --->>> Window resize and dropBox resize
       const {
         direction

package/es/Popup/viewPort.js

@@ -77,10 +77,12 @@ let viewPort = {
   getViewPortEle: el => {
     return el.closest('[data-viewport-container=true]') ? el.closest('[data-viewport-container=true]') : document.documentElement;
   },
-  possibilities: (el, relativeBox, customFrame, {
-    needArrow,
-    isAbsolute
-  } = {}) => {
+  possibilities: function (el, relativeBox, customFrame) {
+    let {
+      needArrow,
+      isAbsolute
+    } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
     if (!el) {
       return;
     }
@@ -301,11 +303,14 @@ let viewPort = {
       bottom: relativeBoxGap.center.bottom - rectGap.bottom
     };
   },
-  betterView: (popup, relativeBox, defaultView = '', customFrame, {
-    needArrow,
-    isAbsolute,
-    customOrder = []
-  } = {}) => {
+  betterView: function (popup, relativeBox) {
+    let defaultView = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    let customFrame = arguments.length > 3 ? arguments[3] : undefined;
+    let {
+      needArrow,
+      isAbsolute,
+      customOrder = []
+    } = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
     let customScrollFrame = isAbsolute ? customFrame : '';
     let viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customScrollFrame, {
       needArrow,

package/es/Provider/IdProvider.js

@@ -30,10 +30,11 @@ function getDeletedIndexes() {
   return deletedIndexes;
 }
 
-function callback({
-  globalId,
-  deletedIndexes
-}) {
+function callback(_ref) {
+  let {
+    globalId,
+    deletedIndexes
+  } = _ref;
   setGlobalId(globalId);
   setDeletedIndexes(deletedIndexes);
 }

package/es/Provider/LibraryContext.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import LibraryContextInit from './LibraryContextInit';
 import { getLibraryConfig } from './Config';
 
-const LibraryContextProvider = ({
-  isReducedMotion = getLibraryConfig('isReducedMotion'),
-  direction = getLibraryConfig('direction'),
-  children
-}) => {
+const LibraryContextProvider = _ref => {
+  let {
+    isReducedMotion = getLibraryConfig('isReducedMotion'),
+    direction = getLibraryConfig('direction'),
+    children
+  } = _ref;
   const [value, setValue] = useState({
     isReducedMotion,
     direction

package/es/Provider/NumberGenerator/NumberGenerator.js

@@ -50,13 +50,14 @@ export function decreaseGlobalIds(numbers, deletedIndexes, globalId) {
     deletedIndexes
   };
 }
-export function useNumberGenerator({
-  getGlobalId,
-  prefix,
-  getGlobalPrefix,
-  getDeletedIndexes,
-  callback
-}) {
+export function useNumberGenerator(_ref) {
+  let {
+    getGlobalId,
+    prefix,
+    getGlobalPrefix,
+    getDeletedIndexes,
+    callback
+  } = _ref;
   let presentValues = useRef([]),
       presentIndex = useRef(0);
   prefix = typeof prefix === 'undefined' ? '' : `${prefix}_`;
@@ -83,14 +84,15 @@ export function useNumberGenerator({
   presentIndex.current = -1;
   return getNextId;
 }
-export function getNumberGenerators({
-  Component,
-  prefix,
-  getGlobalPrefix,
-  getGlobalId,
-  getDeletedIndexes,
-  callback
-}) {
+export function getNumberGenerators(_ref2) {
+  let {
+    Component,
+    prefix,
+    getGlobalPrefix,
+    getGlobalId,
+    getDeletedIndexes,
+    callback
+  } = _ref2;
   let presentIndex = 0,
       presentValues = [],
       {

package/es/Provider/ZindexProvider.js

@@ -27,10 +27,11 @@ function getDeletedIndexes() {
   return deletedIndexes;
 }
 
-function callback({
-  globalId,
-  deletedIndexes
-}) {
+function callback(_ref) {
+  let {
+    globalId,
+    deletedIndexes
+  } = _ref;
   setInitialZIndex(globalId);
   setDeletedIndexes(deletedIndexes);
 }

package/es/Radio/Radio.js

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Label from '../Label/Label';
 import { Container, Box } from '../Layout';
+import CssProvider from '../Provider/CssProvider';
 import style from './Radio.module.css';
 export default class Radio extends React.Component {
   constructor(props) {
@@ -44,7 +45,7 @@ export default class Radio extends React.Component {
       customRadio = '',
       customLabel = ''
     } = customClass;
-    let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
+    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
     let {
       ariaHidden,

package/es/Radio/Radio.module.css

@@ -18,8 +18,8 @@
 .pointer {
   cursor: pointer;
 }
-.readonly, .disabled {
-  cursor: not-allowed;
+.readonly {
+  cursor: default;
 }
 .radio {
   composes: offSelection from '../common/common.module.css';

package/es/Responsive/CustomResponsive.js

@@ -98,7 +98,9 @@ ResponsiveSender.propTypes = {
   domRefKey: PropTypes.string,
   responsiveId: PropTypes.string
 };
-export function useResponsiveReceiver(responsiveId = defaultResponsiveId, query) {
+export function useResponsiveReceiver() {
+  let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
+  let query = arguments.length > 1 ? arguments[1] : undefined;
   const [, forceUpdate] = useState();
   const totalContextData = useContext(ResponsiveContext);
   const validSizeContextData = totalContextData[validSizeResponsiveId];
@@ -170,13 +172,14 @@ export function useResponsiveReceiver(responsiveId = defaultResponsiveId, query)
   updateLatestData();
   return data.current;
 }
-export function ResponsiveReceiver({
-  children,
-  responsiveId,
-  query,
-  eleRef,
-  domRefKey
-}) {
+export function ResponsiveReceiver(_ref) {
+  let {
+    children,
+    responsiveId,
+    query,
+    eleRef,
+    domRefKey
+  } = _ref;
   const data = useResponsiveReceiver(responsiveId, query);
   const child = children(data);
   return eleRef ? /*#__PURE__*/React.createElement(DOMRefWrapper, {

package/es/Responsive/ResizeComponent.js

@@ -163,7 +163,9 @@ export default class ResizeComponent extends React.Component {
     }
   }
 
-  constructChildren(dataCount = 0, responsive) {
+  constructChildren() {
+    let dataCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    let responsive = arguments.length > 1 ? arguments[1] : undefined;
     const {
       childrenList,
       getData

package/es/Responsive/Responsive.js

@@ -102,7 +102,8 @@ ResponsiveSender.propTypes = {
   responsiveId: PropTypes.string // matcher: PropTypes.func
 
 };
-export function useResponsiveReceiver(responsiveId = defaultResponsiveId) {
+export function useResponsiveReceiver() {
+  let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
   const [_, forceUpdate] = useState();
   let totalContextData = useContext(ResponsiveContext);
   let contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId]; // NOTE: this for fallback of if responsive receiver id wrong
@@ -149,7 +150,8 @@ export function useResponsiveReceiver(responsiveId = defaultResponsiveId) {
         return value1 <= width && value2 >= width || breakPoint1 === breakPoint || breakPoint2 === breakPoint;
       },
 
-      deviceOnly(breakPoints = []) {
+      deviceOnly() {
+        let breakPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
         return breakPoints.includes(breakPoint);
       },
 
@@ -174,13 +176,14 @@ export function useResponsiveReceiver(responsiveId = defaultResponsiveId) {
 //   ) : null;
 // }
 
-export function ResponsiveReceiver({
-  children,
-  responsiveId,
-  hiddenSizes,
-  eleRef,
-  domRefKey
-}) {
+export function ResponsiveReceiver(_ref) {
+  let {
+    children,
+    responsiveId,
+    hiddenSizes,
+    eleRef,
+    domRefKey
+  } = _ref;
   const data = useResponsiveReceiver(responsiveId);
   const {
     breakPoint

package/es/Responsive/docs/Responsive__Custom.docs.js

@@ -5,9 +5,10 @@ import Radio from '../../Radio/Radio'; // eslint-disable-next-line css-modules/n
 
 import style from './style.module.css'; // eslint-disable-next-line react/prop-types
 
-function WindowSizeBar({
-  isTouchDevice
-}) {
+function WindowSizeBar(_ref) {
+  let {
+    isTouchDevice
+  } = _ref;
   let [{
     windowWidth,
     windowHeight
@@ -44,11 +45,12 @@ export default class Responsive__Custom extends React.Component {
     this.switchToOr = this.handleMethodChange.bind(this, 'orFunction');
   }
 
-  customQuery({
-    mediaQueryOR,
-    mediaQueryAND,
-    isTouchDevice
-  }) {
+  customQuery(_ref2) {
+    let {
+      mediaQueryOR,
+      mediaQueryAND,
+      isTouchDevice
+    } = _ref2;
     const {
       method
     } = this.state;
@@ -152,42 +154,45 @@ export default class Responsive__Custom extends React.Component {
     } = this.state;
     return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.customQuery
-    }, ({
-      isQureyMatched,
-      isTouchDevice
-    }) => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(WindowSizeBar, {
-      isTouchDevice: isTouchDevice
-    }), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      scroll: "vertical"
-    }, /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      align: "vertical",
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement(Radio, {
-      text: "AND Function",
-      onChange: this.switchToAnd,
-      name: "AndFunction",
-      checked: method === 'AndFunction'
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px'
-      }
-    }, /*#__PURE__*/React.createElement(Radio, {
-      text: "OR Function",
-      onChange: this.switchToOr,
-      name: "orFunction",
-      checked: method === 'orFunction'
-    }))), /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      align: "both",
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement(Box, {
-      shrink: true,
-      className: ` ${style.box} ${isQureyMatched ? style.selected : ''} `
-    }, "minWidth: 700, maxWidth: 800 ||  minHeight: 700, maxHeight: 800")))))));
+    }, _ref3 => {
+      let {
+        isQureyMatched,
+        isTouchDevice
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(WindowSizeBar, {
+        isTouchDevice: isTouchDevice
+      }), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        scroll: "vertical"
+      }, /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        align: "vertical",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Radio, {
+        text: "AND Function",
+        onChange: this.switchToAnd,
+        name: "AndFunction",
+        checked: method === 'AndFunction'
+      }), /*#__PURE__*/React.createElement("div", {
+        style: {
+          margin: '20px'
+        }
+      }, /*#__PURE__*/React.createElement(Radio, {
+        text: "OR Function",
+        onChange: this.switchToOr,
+        name: "orFunction",
+        checked: method === 'orFunction'
+      }))), /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        align: "both",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Box, {
+        shrink: true,
+        className: ` ${style.box} ${isQureyMatched ? style.selected : ''} `
+      }, "minWidth: 700, maxWidth: 800 ||  minHeight: 700, maxHeight: 800"))));
+    })));
   }
 
 }