@zohodesk/components 1.0.0-alpha-211 → 1.0.0-alpha-215

package/es/Provider.js

@@ -28,6 +28,7 @@ import './Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
 import './Appearance/dark/themes/red/redDarkComponentTheme.module.css';
 import './Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
 import './Appearance/dark/mode/darkMode.module.css';
+import LibraryContext from './Provider/LibraryContextInit';
 import { setGlobalIdPrefix } from './Provider/IdProvider';
 export default class Provider extends React.Component {
   constructor(props) {
@@ -88,7 +89,12 @@ export default class Provider extends React.Component {
     let yellow = {
       backgroundColor: '#e8b923'
     };
-    return /*#__PURE__*/React.createElement(AppContainer, {
+    return /*#__PURE__*/React.createElement(LibraryContext.Provider, {
+      value: {
+        isReducedMotion: false,
+        direction: 'ltr'
+      }
+    }, /*#__PURE__*/React.createElement(AppContainer, {
       customProps: {
         ExtraProps: {
           'data-mode': appearanceName,
@@ -146,7 +152,7 @@ export default class Provider extends React.Component {
       onClick: () => this.setTheme('yellow')
     }))), /*#__PURE__*/React.createElement("div", {
       "data-portal": "portal1"
-    }));
+    })));
   }
 
 }

package/es/Radio/Radio.module.css

@@ -7,7 +7,10 @@
   --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;
@@ -22,9 +25,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 {
@@ -54,10 +57,13 @@
 }
 .centerPath {
   --radio_fill: inherit;
-  transform-origin: center;
   stroke-width: var(--radio_inner_stroke_width);
+  transform-origin: center;
+}
+[dir=ltr] .checked .centerPath {
+  animation: circleAnimate var(--zd_transition3) ease forwards;
 }
-.checked .centerPath {
+[dir=rtl] .checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
 .rdBoxprimary,

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

package/es/Responsive/docs/Responsive__default.docs.js

@@ -8,80 +8,83 @@ import { Container, Box } from '../../Layout';
 import style from './style.module.css';
 export default class Responsive__default extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, null, ({
-      breakPoint,
-      deviceUpto,
-      deviceBetween,
-      deviceOnly,
-      isTouchDevice
-    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-      className: style.header
-    }, ` ${breakPoint} ${isTouchDevice} `), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      scroll: "vertical"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.subHeading
-    }, "Common Break Points"), /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['MOBILE']) ? style.selected : ''} `
-    }, "MOBILE - 480"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['TABLET_S']) ? style.selected : ''}  `
-    }, "TABLET_S - 640"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['TABLET']) ? style.selected : ''} `
-    }, "TABLET - 768"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['LAPTOP_S']) ? style.selected : ''}  `
-    }, "LAPTOP_S - 1024"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['LAPTOP']) ? style.selected : ''} `
-    }, "LAPTOP - 1440")), /*#__PURE__*/React.createElement("div", {
-      className: style.subHeading
-    }, "Other Break Points"), /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['MONITOR']) ? style.selected : ''} `
-    }, "MONITOR - 1920"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['MONITOR_M']) ? style.selected : ''} `
-    }, "MONITOR_M - 1600"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['LAPTOP_M']) ? style.selected : ''}  `
-    }, "LAPTOP_M - 1280"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['TABLET_M']) ? style.selected : ''} `
-    }, "TABLET_M - 720"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['MOBILE_M']) ? style.selected : ''} `
-    }, "MOBILE_M - 375.04"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['MOBILE_S']) ? style.selected : ''}  `
-    }, "MOBILE_S - 360"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceOnly(['MOBILE_XS']) ? style.selected : ''} `
-    }, "MOBILE_XS - 320")), /*#__PURE__*/React.createElement("div", {
-      className: style.subHeading
-    }, "Device Between"), /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceBetween('MOBILE_XS', 'TABLET') ? style.selected : ''} `
-    }, "MOBILE - TABLET"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceBetween('TABLET_M', 'LAPTOP') ? style.selected : ''} `
-    }, "TABLET - LAPTOP"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceBetween('LAPTOP_M', 'MONITOR') ? style.selected : ''}  `
-    }, "LAPTOP - MONITOR")), /*#__PURE__*/React.createElement("div", {
-      className: style.subHeading
-    }, "Device Upto"), /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceUpto('MONITOR') ? style.selected : ''} `
-    }, "MONITOR"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceUpto('LAPTOP') ? style.selected : ''} `
-    }, "LAPTOP"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceUpto('TABLET') ? style.selected : ''}  `
-    }, "TABLET"), /*#__PURE__*/React.createElement(Box, {
-      className: ` ${style.box} ${deviceUpto('MOBILE') ? style.selected : ''}  `
-    }, "MOBILE"))))));
+    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, null, _ref => {
+      let {
+        breakPoint,
+        deviceUpto,
+        deviceBetween,
+        deviceOnly,
+        isTouchDevice
+      } = _ref;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+        className: style.header
+      }, ` ${breakPoint} ${isTouchDevice} `), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        scroll: "vertical"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.subHeading
+      }, "Common Break Points"), /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MOBILE']) ? style.selected : ''} `
+      }, "MOBILE - 480"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['TABLET_S']) ? style.selected : ''}  `
+      }, "TABLET_S - 640"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['TABLET']) ? style.selected : ''} `
+      }, "TABLET - 768"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['LAPTOP_S']) ? style.selected : ''}  `
+      }, "LAPTOP_S - 1024"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['LAPTOP']) ? style.selected : ''} `
+      }, "LAPTOP - 1440")), /*#__PURE__*/React.createElement("div", {
+        className: style.subHeading
+      }, "Other Break Points"), /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MONITOR']) ? style.selected : ''} `
+      }, "MONITOR - 1920"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MONITOR_M']) ? style.selected : ''} `
+      }, "MONITOR_M - 1600"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['LAPTOP_M']) ? style.selected : ''}  `
+      }, "LAPTOP_M - 1280"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['TABLET_M']) ? style.selected : ''} `
+      }, "TABLET_M - 720"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MOBILE_M']) ? style.selected : ''} `
+      }, "MOBILE_M - 375.04"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MOBILE_S']) ? style.selected : ''}  `
+      }, "MOBILE_S - 360"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceOnly(['MOBILE_XS']) ? style.selected : ''} `
+      }, "MOBILE_XS - 320")), /*#__PURE__*/React.createElement("div", {
+        className: style.subHeading
+      }, "Device Between"), /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceBetween('MOBILE_XS', 'TABLET') ? style.selected : ''} `
+      }, "MOBILE - TABLET"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceBetween('TABLET_M', 'LAPTOP') ? style.selected : ''} `
+      }, "TABLET - LAPTOP"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceBetween('LAPTOP_M', 'MONITOR') ? style.selected : ''}  `
+      }, "LAPTOP - MONITOR")), /*#__PURE__*/React.createElement("div", {
+        className: style.subHeading
+      }, "Device Upto"), /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        alignBox: "row",
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceUpto('MONITOR') ? style.selected : ''} `
+      }, "MONITOR"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceUpto('LAPTOP') ? style.selected : ''} `
+      }, "LAPTOP"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceUpto('TABLET') ? style.selected : ''}  `
+      }, "TABLET"), /*#__PURE__*/React.createElement(Box, {
+        className: ` ${style.box} ${deviceUpto('MOBILE') ? style.selected : ''}  `
+      }, "MOBILE"))));
+    }));
   }
 
 }

package/es/Responsive/docs/style.module.css

@@ -1,18 +1,21 @@
 .header{
-  background-color: #c60000;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
   color: #fff;
   font-size: 24px;
+  background-color: #c60000;
   padding: 10px;
   text-align: center;
   margin: 10px 6px;
+}[dir=ltr] .header{
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}[dir=rtl] .header{
+  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
 }
 .box{
   height: 80px;
-  background-color: #ffbb11;
-  text-align: center;
   line-height: 80px;
   min-width: 300px;
+  background-color: #ffbb11;
+  text-align: center;
   margin:6px;
   padding: 0 100x;
 }
@@ -20,10 +23,10 @@
   background-color: #60de55
 }
 .subHeading{
-  text-align: center;
-  padding: 10px;
   position: sticky;
   top: 0;
+  text-align: center;
+  padding: 10px;
   background-color: #fff
 }
 
@@ -37,11 +40,17 @@
   position: absolute;
   width: 60%;
   top: 50%;
-  transform: translate(-50%,-50%);
-  left: 50%;
   border: 1px solid #aaa;
   border-radius: 4px
 }
+[dir=ltr] .wrapper{
+  transform: translate(-50%,-50%);
+  left: 50%
+}
+[dir=rtl] .wrapper{
+  transform: translate(50%,-50%);
+  right: 50%
+}
 .avatar{
   margin:20px auto
 }

package/es/Responsive/sizeObservers.js

@@ -68,7 +68,11 @@ export class Subscribale {
     this.subscribers.length && this.disconnect();
   }
 
-  dispatch(...args) {
+  dispatch() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     this.subscribers.forEach(subscriber => {
       subscriber(...args);
     });