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

package/es/MultiSelect/MultiSelect.module.css

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

package/es/MultiSelect/MultiSelectWithAvatar.js

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

package/es/MultiSelect/SelectedOptions.js

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

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

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

package/es/Popup/Popup.js

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

package/es/Popup/viewPort.js

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

package/es/Provider/Config.js

@@ -5,7 +5,8 @@ let id = {
   idPrefix: 'ZD',
   scrollFetchLimit: 80,
   isReducedMotion: false,
-  direction: 'ltr'
+  direction: 'ltr',
+  tooltipDebounce: 175
 };
 export function getLibraryConfig(key) {
   return id[key];

package/es/Provider/IdProvider.js

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

package/es/Provider/LibraryContext.js

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

package/es/Provider/NumberGenerator/NumberGenerator.js

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

package/es/Provider/ZindexProvider.js

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

package/es/Radio/Radio.js

@@ -3,7 +3,6 @@ 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) {
@@ -45,7 +44,7 @@ export default class Radio extends React.Component {
       customRadio = '',
       customLabel = ''
     } = customClass;
-    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
+    let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : 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 {
-  cursor: default;
+.readonly, .disabled {
+  cursor: not-allowed;
 }
 .radio {
   composes: offSelection from '../common/common.module.css';

package/es/Responsive/CustomResponsive.js

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

package/es/Responsive/ResizeComponent.js

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

package/es/Responsive/Responsive.js

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

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

@@ -5,10 +5,9 @@ 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(_ref) {
-  let {
-    isTouchDevice
-  } = _ref;
+function WindowSizeBar({
+  isTouchDevice
+}) {
   let [{
     windowWidth,
     windowHeight
@@ -45,12 +44,11 @@ export default class Responsive__Custom extends React.Component {
     this.switchToOr = this.handleMethodChange.bind(this, 'orFunction');
   }
 
-  customQuery(_ref2) {
-    let {
-      mediaQueryOR,
-      mediaQueryAND,
-      isTouchDevice
-    } = _ref2;
+  customQuery({
+    mediaQueryOR,
+    mediaQueryAND,
+    isTouchDevice
+  }) {
     const {
       method
     } = this.state;
@@ -154,45 +152,42 @@ 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
-    }, _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"))));
-    })));
+    }, ({
+      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")))))));
   }
 
 }