@zohodesk/components 1.0.0-temp-79 → 1.0.0-temp-80

package/es/Radio/Radio.module.css

@@ -1,106 +1,112 @@
-.varClass {
-  /* radio default variables */
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
-  --radio_bg_color: none;
-  --radio_stroke_width: var(--zd_size2);
-  --radio_stroke_color: var(--zdt_radio_default_stroke);
-  --radio_fill: none;
-  --radio_inner_stroke_width: 0;
-  --radio_label_margin: 0 0 0 var(--zd_size6)/*rtl: 0 var(--zd_size6) 0 0*/;
-}
-.container {
-  composes: varClass;
-}
-.pointer {
-  cursor: pointer;
-}
-.readonly,.disabled {
-  cursor: not-allowed;
-}
-.radio {
-  composes: offSelection from '../common/common.module.css';
-  width: var(--radio_width);
-  height: var(--radio_height);
-  background: var(--radio_bg_color);
-  border-radius: 50%;
-  stroke: var(--radio_stroke_color);
-}
-.radio,
-.centerPath {
-  fill: var(--radio_fill);
-}
-.filled {
-  --radio_bg_color: var(--zdt_radio_default_bg);
-}
-
-.medium {
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
-}
-.small {
-  --radio_width: var(--zd_size13);
-  --radio_height: var(--zd_size13);
-}
-.radioLabel {
-  font-size: 0;
-  display: block;
-}
-.rdBox {
-  fill: none;
-  stroke-width: var(--radio_stroke_width);
-  stroke-linecap: round;
-  stroke: inherit;
-}
-.centerPath {
-  --radio_fill: inherit;
-  transform-origin: center;
-  stroke-width: var(--radio_inner_stroke_width);
-}
-.checked .centerPath {
-  animation: circleAnimate var(--zd_transition3) ease forwards;
-}
-.rdBoxprimary,
-.hoverEfffect:hover .hoverprimary
-/* .hoverEfffect:focus .hoverprimary  */
-{
-  --radio_stroke_color: var(--zdt_radio_primary_stroke);
-}
-
-.rdBoxdanger,
-.hoverEfffect:hover .hoverdanger
-/* .hoverEfffect:focus .hoverdanger */
- {
-  --radio_stroke_color: var(--zdt_radio_danger_stroke);
-}
-
-.centerPathprimary {
-  --radio_fill: var(--zdt_radio_primary_fill);
-}
-.centerPathdanger {
-  --radio_fill: var(--zdt_radio_danger_fill);
-}
-
-.active:hover .primaryLabel,
-/* .active:focus .primaryLabel, */
-.primarycheckedActive {
-  --label_text_color: var(--zdt_radio_label_primary_text);
-}
-
-.active:hover .dangerLabel,
-/* .active:focus .dangerLabel, */
-.dangercheckedActive {
-  --label_text_color: var(--zdt_radio_label_danger_text);
-}
-
-.text {
-  margin: var(--radio_label_margin);
-}
-@keyframes circleAnimate {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
+.varClass {
+  /* radio default variables */
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
+  --radio_bg_color: none;
+  --radio_stroke_width: var(--zd_size2);
+  --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;
+}
+.pointer {
+  cursor: pointer;
+}
+.readonly, .disabled {
+  cursor: not-allowed;
+}
+.radio {
+  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%;
+}
+.radio,
+.centerPath {
+  fill: var(--radio_fill);
+}
+.filled {
+  --radio_bg_color: var(--zdt_radio_default_bg);
+}
+
+.medium {
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
+}
+.small {
+  --radio_width: var(--zd_size13);
+  --radio_height: var(--zd_size13);
+}
+.radioLabel {
+  font-size: 0;
+  display: block;
+}
+.rdBox {
+  fill: none;
+  stroke-width: var(--radio_stroke_width);
+  stroke-linecap: round;
+  stroke: inherit;
+}
+.centerPath {
+  --radio_fill: inherit;
+  stroke-width: var(--radio_inner_stroke_width);
+  transform-origin: center;
+}
+[dir=ltr] .checked .centerPath {
+  animation: circleAnimate var(--zd_transition3) ease forwards;
+}
+[dir=rtl] .checked .centerPath {
+  animation: circleAnimate var(--zd_transition3) ease forwards;
+}
+.rdBoxprimary,
+.hoverEfffect:hover .hoverprimary
+/* .hoverEfffect:focus .hoverprimary  */
+{
+  --radio_stroke_color: var(--zdt_radio_primary_stroke);
+}
+
+.rdBoxdanger,
+.hoverEfffect:hover .hoverdanger
+/* .hoverEfffect:focus .hoverdanger */
+ {
+  --radio_stroke_color: var(--zdt_radio_danger_stroke);
+}
+
+.centerPathprimary {
+  --radio_fill: var(--zdt_radio_primary_fill);
+}
+.centerPathdanger {
+  --radio_fill: var(--zdt_radio_danger_fill);
+}
+
+.active:hover .primaryLabel,
+/* .active:focus .primaryLabel, */
+.primarycheckedActive {
+  --label_text_color: var(--zdt_radio_label_primary_text);
+}
+
+.active:hover .dangerLabel,
+/* .active:focus .dangerLabel, */
+.dangercheckedActive {
+  --label_text_color: var(--zdt_radio_label_danger_text);
+}
+
+.text {
+  margin: var(--radio_label_margin);
+}
+@keyframes circleAnimate {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

package/es/Radio/docs/Radio__custom.docs.js

@@ -9,27 +9,25 @@ export default class Radio__custom extends Component {
       checked: false
     };
   }
-
   onChange() {
     this.setState({
       checked: !this.state.checked
     });
   }
-
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase',
-      borderTop: '1px solid #e3e6eb'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase',
+        borderTop: '1px solid #e3e6eb'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", {
@@ -233,9 +231,7 @@ export default class Radio__custom extends Component {
       text: "Danger"
     }))));
   }
-
 }
-
 if (false) {
   Radio__custom.docs = {
     componentGroup: 'Form Elements',

package/es/Radio/docs/Radio__default.docs.js

@@ -8,27 +8,25 @@ export default class Radio__default extends Component {
       checked: false
     };
   }
-
   onChange() {
     this.setState({
       checked: !this.state.checked
     });
   }
-
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase',
-      borderTop: '1px solid #e3e6eb'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase',
+        borderTop: '1px solid #e3e6eb'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", {
@@ -157,9 +155,7 @@ export default class Radio__default extends Component {
       text: "Danger"
     }))));
   }
-
 }
-
 if (false) {
   Radio__default.docs = {
     componentGroup: 'Form Elements',

package/es/Responsive/CustomResponsive.js

@@ -5,12 +5,15 @@ import ResizeObserver from './ResizeObserver';
 import DOMRefWrapper from './RefWrapper';
 import shallowCompare from './utils/shallowCompare';
 import { isBreackPointMatched, Subscribale, isTouchDevice, windowResizeObserver } from './sizeObservers';
-import { ContextOptimizer } from '../utils/ContextOptimizer'; // const commonBreakPoints = [ 480, 640, 768, 1024, 1440 ];
+import { ContextOptimizer } from '../utils/ContextOptimizer';
+
+// const commonBreakPoints = [ 480, 640, 768, 1024, 1440 ];
 // const otherBreakPoints = [320, 360, 375, 720, 1280, 1600, 1920];
-// defaultResponsiveId means if ResponsiveSender do not recive id This will be id
 
-const defaultResponsiveId = 'parent_sender'; // validSizeResponsiveId means in some parent's height and with is caluclated ( readed )
+// defaultResponsiveId means if ResponsiveSender do not recive id This will be id
+const defaultResponsiveId = 'parent_sender';
 
+// validSizeResponsiveId means in some parent's height and with is caluclated ( readed )
 const validSizeResponsiveId = 'valid_sender';
 const ResponsiveContext = /*#__PURE__*/React.createContext({
   [validSizeResponsiveId]: windowResizeObserver
@@ -22,24 +25,20 @@ export function ResponsiveSender(props) {
     domRefKey,
     responsiveId
   } = props;
-
   function init() {
     let size = {
       height: 0,
       width: 0
     };
-
     function getSize() {
       return size;
     }
-
     const childContext = {
       resize: new Subscribale(),
       getSize,
       // TODO: rename isParentSize ==> isSizeReaded (or) isMySize (or) isOriginalSize
       isParentSize: false
     };
-
     function onResize(newSize) {
       childContext.isParentSize = true;
       size = newSize;
@@ -47,38 +46,31 @@ export function ResponsiveSender(props) {
         childContext.resize.dispatch(newSize);
       });
     }
-
     const observer = new ResizeObserver(onResize);
-
     function containerRef(node) {
       observer.replaceObservationElement(node);
     }
-
     return {
       containerRef,
       childContext
     };
   }
-
   const {
     containerRef,
     childContext
   } = useMemo(init, []);
-
   function contextSelector(context) {
-    const totalContext = { ...context
+    const totalContext = {
+      ...context
     };
-    totalContext[responsiveId] = childContext; // NOTE: this for fallback of if responsive receiver id wrong or not avelable Responcive id
-
+    totalContext[responsiveId] = childContext;
+    // NOTE: this for fallback of if responsive receiver id wrong or not avelable Responcive id
     totalContext[defaultResponsiveId] = childContext;
-
     if (childContext.isParentSize) {
       totalContext[validSizeResponsiveId] = childContext;
     }
-
     return totalContext;
   }
-
   return /*#__PURE__*/React.createElement(ContextOptimizer, {
     Context: ResponsiveContext,
     calculation: contextSelector
@@ -89,7 +81,8 @@ export function ResponsiveSender(props) {
     ref: containerRef
   }, children)));
 }
-ResponsiveSender.defaultProps = { ...CustomResponsiveSender_defaultProps,
+ResponsiveSender.defaultProps = {
+  ...CustomResponsiveSender_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveSender.contextType = ResponsiveContext;
@@ -104,14 +97,12 @@ export function useResponsiveReceiver() {
 
   const resizeHandlerRef = useRef();
   const data = useRef();
-
   function updateLatestData() {
     const size = contextData.isParentSize ? contextData.getSize() : validSizeContextData.getSize();
     data.current = query({
       isTouchDevice,
       isParentSize: contextData.isParentSize,
       currentScreenSize: size,
-
       mediaQueryOR(breakPointArray) {
         return breakPointArray.some(breakPoint => {
           const {
@@ -121,7 +112,6 @@ export function useResponsiveReceiver() {
           return isHeight || isWidth;
         });
       },
-
       mediaQueryAND(breakPointArray) {
         return breakPointArray.every(breakPoint => {
           const {
@@ -131,10 +121,8 @@ export function useResponsiveReceiver() {
           return (isHeight === undefined ? true : isHeight) && (isWidth === undefined ? true : isWidth);
         });
       }
-
     });
   }
-
   resizeHandlerRef.current = updateLatestData;
   useEffect(() => {
     function handleResize(size) {
@@ -143,10 +131,10 @@ export function useResponsiveReceiver() {
       const isSameValues = shallowCompare(data.current, prevData);
       !isSameValues && forceUpdate({});
     }
-
     contextData.resize.subscribe(handleResize);
     return () => contextData.resize.unsubscribe(handleResize);
-  }, [contextData]); // const prevContextDataRef = useRef();
+  }, [contextData]);
+  // const prevContextDataRef = useRef();
   // function handleResize(size) {
   //   const prevData = data.current;
   //   resizeHandlerRef.current(size);
@@ -161,10 +149,11 @@ export function useResponsiveReceiver() {
   //     contextData.resize.subscribe(handleResize);
   //   } else {
   //     windowResizeObserver.observe(handleResize);
+
   //   }
+
   // }
   // NOTE: this call for we must give updated value
-
   updateLatestData();
   return data.current;
 }
@@ -183,7 +172,8 @@ export function ResponsiveReceiver(_ref) {
     ref: eleRef
   }, child) : child;
 }
-ResponsiveReceiver.defaultProps = { ...CustomResponsiveReceiver_defaultProps,
+ResponsiveReceiver.defaultProps = {
+  ...CustomResponsiveReceiver_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveReceiver.propTypes = CustomResponsiveReceiver_propTypes;

package/es/Responsive/RefWrapper.js

@@ -1,6 +1,5 @@
 import React, { forwardRef, useCallback, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-
 function setRef(refFunc, value) {
   if (typeof refFunc === 'function') {
     refFunc(value);
@@ -8,20 +7,22 @@ function setRef(refFunc, value) {
     refFunc.current = value;
   }
 }
-
 const DOMRefWrapper = /*#__PURE__*/forwardRef((props, refFunc) => {
   const ele = Children.only(props.children);
   const {
     domRefKey = 'eleRef'
-  } = props; // NOTE: need to  check for forward  Ref function, Because in Froward Ref case refKey is "ref"
-
-  const refKey = typeof ele.type !== 'string' ? domRefKey : 'ref'; // const setAttribute = useCallback(node => {
+  } = props;
 
+  // NOTE: need to  check for forward  Ref function, Because in Froward Ref case refKey is "ref"
+  const refKey = typeof ele.type !== 'string' ? domRefKey : 'ref';
+  // const setAttribute = useCallback(node => {
   const eleRealRefFunc = ele.props[refKey];
   const setAttribute = useCallback(ref => {
     setRef(refFunc, ref);
     setRef(eleRealRefFunc, ref);
-  }, [refFunc, eleRealRefFunc]); // let refKey = typeof ele.type === 'string' ? 'ref' : 'eleRef';
+  }, [refFunc, eleRealRefFunc]);
+
+  // let refKey = typeof ele.type === 'string' ? 'ref' : 'eleRef';
 
   let childProps = {
     [refKey]: setAttribute