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

package/es/ListItem/ListItemWithRadio.js

@@ -6,12 +6,14 @@ import Radio from '../Radio/Radio';
 import { Container, Box } from '../Layout';
 import CssProvider from '../Provider/CssProvider';
 import style from './ListItem.module.css';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.onHover = this.onHover.bind(this);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -43,6 +45,16 @@ export default class ListItemWithRadio extends React.Component {
     onHover && onHover(id, value, index, e);
   }
 
+  responsiveFunc({
+    mediaQueryOR
+  }) {
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       size,
@@ -79,13 +91,18 @@ export default class ListItemWithRadio extends React.Component {
       options.tabindex = '0';
     }
 
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, ({
+      mobileToTab
+    }) => /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
       align: "vertical",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''}  ${isDisabled ? CssProvider('isDisable') : ''} `,
+      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''}  ${isDisabled ? CssProvider('isDisable') : ''} `,
       className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
         ${isDisabled ? CssProvider('isDisable') : ''} ${customListItem}`,
       dataId: dataId,
@@ -111,7 +128,7 @@ export default class ListItemWithRadio extends React.Component {
       shrink: true,
       "data-title": disableTitle ? null : title,
       className: style.value
-    }, value));
+    }, value)));
   }
 
 }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -254,9 +254,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     }) : this.togglePopup(e);
   }
 
-  handleClickSelectedOption() {
-    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleClickSelectedOption(id = '', e) {
     let {
       selectedOptionIds
     } = this.state;
@@ -527,11 +525,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     });
   }
 
-  handleFetchOptions() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  handleFetchOptions(...args) {
     let [APICall, searchStr] = args;
     let {
       isFetchingOptions
@@ -644,9 +638,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     this.handleChange([]);
   }
 
-  handleChange() {
-    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleChange(selectedOptions = [], e) {
     let {
       onChange,
       needToCloseOnSelect,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -76,9 +76,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return suggestions;
   }
 
-  handleChange() {
-    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleChange(selectedOptions = [], e) {
     const {
       optionsNormalize,
       searchStr

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -9,9 +9,9 @@
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
+  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
@@ -40,40 +40,25 @@
 .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
-[dir=ltr] .container.medium {
+.container.medium {
   padding: 0 var(--zd_size34) var(--zd_size7) 0;
 }
-[dir=rtl] .container.medium {
-  padding: 0 0 var(--zd_size7) var(--zd_size34);
-}
 .container.xmedium {
-  min-height: var(--zd_size30);
-}
-[dir=ltr] .container.xmedium {
   padding: 0 var(--zd_size34) var(--zd_size1) 0;
-}
-[dir=rtl] .container.xmedium {
-  padding: 0 0 var(--zd_size1) var(--zd_size34);
+  min-height: var(--zd_size30);
 }
 
 .delete {
   position: absolute;
   bottom: 0;
-  color: var(--zdt_advancedmultiselect_delete_text);
+  right: var(--zd_size15);
   padding-bottom: var(--zd_size10);
+  color: var(--zdt_advancedmultiselect_delete_text);
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
-[dir=ltr] .delete {
-  right: var(--zd_size15);
-}
-
-[dir=rtl] .delete {
-  left: var(--zd_size15);
-}
-
 .delete:hover {
   color: var(--zdt_advancedmultiselect_delete_hover_text);
 }
@@ -119,9 +104,9 @@
 .more {
   font-size: var(--zd_font_size14);
   color: var(--zdt_advancedmultiselect_more_text);
-  font-family: inherit;
   cursor: pointer;
   margin-top: var(--zd_size5);
+  font-family: inherit;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/MultiSelect/MultiSelect.js

@@ -535,11 +535,7 @@ export class MultiSelectComponent extends React.Component {
     }
   }
 
-  handleFetchOptions() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  handleFetchOptions(...args) {
     const [APICall, searchStr] = args;
     const {
       isFetchingOptions
@@ -605,9 +601,7 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
-  handleClickSelectedOption() {
-    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleClickSelectedOption(id = '', e) {
     const {
       selectedOptions
     } = this.props;
@@ -688,9 +682,7 @@ export class MultiSelectComponent extends React.Component {
     getNextOptions && getNextOptions(searchStr);
   }
 
-  handleChange() {
-    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleChange(selectedOptions = [], e) {
     const {
       optionsNormalize
     } = this.state;

package/es/MultiSelect/MultiSelect.module.css

@@ -15,9 +15,9 @@
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
+  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
@@ -52,16 +52,16 @@
 }
 
 .container.xmedium {
-  min-height: var(--zd_size30);
   padding-bottom: var(--zd_size3);
+  min-height: var(--zd_size30);
 }
 
 .delete {
-  font: inherit;
   padding: var(--zd_size2) var(--zd_size6);
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
+  font: inherit;
 }
 .delete,
 .defaultDelete {
@@ -91,22 +91,14 @@
   max-width: 100%;
 }
 
-[dir=ltr] .container.xmedium .tag {
+.container.xmedium .tag {
   margin: var(--zd_size2) var(--zd_size10) 0 0;
 }
 
-[dir=rtl] .container.xmedium .tag {
-  margin: var(--zd_size2) 0 0 var(--zd_size10);
-}
-
-[dir=ltr] .container.medium .tag {
+.container.medium .tag {
   margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
 
-[dir=rtl] .container.medium .tag {
-  margin: var(--zd_size5) 0 0 var(--zd_size10);
-}
-
 .box {
   background: var(--zdt_multiselect_box_bg);
 }
@@ -142,10 +134,8 @@
 }
 .dark,
 .darkBox {
-  color: var(--zdt_multiselect_darkmsg_text);
-}
-.dark, .darkBox {
   background: var(--zdt_multiselect_darkmsg_bg);
+  color: var(--zdt_multiselect_darkmsg_text);
 }
 
 .hide {
@@ -170,13 +160,8 @@
 .custmInputWrapper {
   position: absolute;
   top: 0;
-  width: 100%;
-}
-[dir=ltr] .custmInputWrapper {
   left: 0;
-}
-[dir=rtl] .custmInputWrapper {
-  right: 0;
+  width: 100%;
 }
 .title {
   margin-bottom: var(--zd_size6);
@@ -190,9 +175,6 @@
 .iconContainer {
   padding-top: var(--zd_size3)
 }
-[dir=ltr] .clearIconSpace {
+.clearIconSpace {
   padding-right: var(--zd_size37)
 }
-[dir=rtl] .clearIconSpace {
-  padding-left: var(--zd_size37)
-}

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,9 @@
 .tag {
   max-width: 100%;
 }
-[dir=ltr] .xmedium {
+.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 {
+.medium {
   margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10);
-}

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/PopOver/PopOver.module.css

@@ -3,6 +3,6 @@
   background-color: var(--dot_bg_white);
 }
 .target {
-  composes: offSelection from '../common/common.module.css';
   cursor: pointer;
+  composes: offSelection from '../common/common.module.css';
 }

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.module.css

@@ -7,10 +7,7 @@
   --radio_stroke_color: var(--zdt_radio_default_stroke);
   --radio_fill: none;
   --radio_inner_stroke_width: 0;
-}[dir=ltr] .varClass {
   --radio_label_margin: 0 0 0 var(--zd_size6)/*rtl: 0 var(--zd_size6) 0 0*/;
-}[dir=rtl] .varClass {
-  --radio_label_margin: 0 var(--zd_size6) 0 0;
 }
 .container {
   composes: varClass;
@@ -25,9 +22,9 @@
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
-  stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;
+  stroke: var(--radio_stroke_color);
 }
 .radio,
 .centerPath {
@@ -57,13 +54,10 @@
 }
 .centerPath {
   --radio_fill: inherit;
-  stroke-width: var(--radio_inner_stroke_width);
   transform-origin: center;
+  stroke-width: var(--radio_inner_stroke_width);
 }
-[dir=ltr] .checked .centerPath {
-  animation: circleAnimate var(--zd_transition3) ease forwards;
-}
-[dir=rtl] .checked .centerPath {
+.checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
 .rdBoxprimary,

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