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

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

@@ -1,8 +1,8 @@
 .popup {
   position: relative;
-  background-color: var(--dot_bg_white);
+  background-color: var(--dot_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/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

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")))))));
   }
 
 }