@zohodesk/components 1.0.0-test-252 → 1.0.0

package/es/Popup/__tests__/Popup.spec.js

@@ -1,22 +1,29 @@
 /* eslint-disable no-undef */
+
 /**** Libraries ****/
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 /**** Components ****/
+
 import Popup from '../Popup';
+
 class SamplePopup extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     return /*#__PURE__*/React.createElement("div", null, "Sample Popup");
   }
+
 }
+
 class SamplePopupCopy extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     return /*#__PURE__*/React.createElement("div", {
       "data-id": "samplePopup",
@@ -25,26 +32,33 @@ class SamplePopupCopy extends React.Component {
       }
     }, "Sample Popup");
   }
+
 }
+
 SamplePopupCopy.propTypes = {
   removeClose: PropTypes.func
 };
+
 class SamplePopupCopy1 extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     return /*#__PURE__*/React.createElement("div", {
       "data-id": "samplePopup"
     }, "Sample Popup");
   }
+
 }
+
 describe('Popup component conditions', () => {
   it('should click same popup with removeClose', () => {
     let PopupWrapperComponent = Popup(SamplePopupCopy);
     let div = document.createElement('div');
     document.body.append(div);
     /*eslint-disable */
+
     let popupDom = ReactDOM.render( /*#__PURE__*/React.createElement(PopupWrapperComponent, null), div);
     /*eslint-enable */
 
@@ -87,6 +101,7 @@ describe('Popup component conditions', () => {
     let div = document.createElement('div');
     document.body.append(div);
     /*eslint-disable */
+
     let popupDom = ReactDOM.render( /*#__PURE__*/React.createElement(PopupWrapperComponent, null), div);
     /*eslint-enable */
 
@@ -108,15 +123,12 @@ describe('Popup component conditions', () => {
     let PopupWrapperComponent = Popup(SamplePopupCopy1);
     let popupDom = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(PopupWrapperComponent, null));
     popupDom.togglePopup();
-    expect(popupDom.state.isPopupOpen).toBeTruthy();
+    expect(popupDom.state.isPopupOpen).toBeTruthy(); //TestUtils.Simulate.keyUp(document, {keyCode:27});
 
-    //TestUtils.Simulate.keyUp(document, {keyCode:27});
     let e = document.createEvent('HTMLEvents');
     e.initEvent('keyup', false, true);
     e.keyCode = 27;
     document.dispatchEvent(e);
     expect(popupDom.state.isPopupOpen).toBeFalsy();
   });
-});
-
-//Group Popup Handling Open and close
+}); //Group Popup Handling Open and close

package/es/Popup/viewPort.js

@@ -4,6 +4,7 @@ let viewPort = {
     if (!el) {
       return;
     }
+
     let rectTemp = el.getBoundingClientRect();
     let rect = {
       height: rectTemp.height || el.clientHeight,
@@ -26,9 +27,11 @@ let viewPort = {
       x: 0,
       y: 0
     };
+
     if (customFrame) {
       customFrameRect = customFrame.getBoundingClientRect();
     }
+
     let newRect = {
       top: rect.top - customFrameRect.top,
       left: rect.left - customFrameRect.left,
@@ -61,6 +64,7 @@ let viewPort = {
     if (!el) {
       return;
     }
+
     let elRects = viewPort.frameRelativeRects(el, customFrame);
     let {
       rect
@@ -78,9 +82,11 @@ let viewPort = {
       needArrow,
       isAbsolute
     } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
     if (!el) {
       return;
     }
+
     let elViewPortEle = viewPort.getViewPortEle(el);
     let elRects = viewPort.frameRelativeRects(el, customFrame, elViewPortEle);
     let {
@@ -95,13 +101,12 @@ let viewPort = {
     let relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
     let {
       rectGap: documentGap
-    } = relativeBoxDocumentRects;
-
-    //rect => PopOverContainer, relativeBoxGap => PopOverTarget
-
+    } = relativeBoxDocumentRects; //rect => PopOverContainer, relativeBoxGap => PopOverTarget
     //Horizontal ~ ----- X axis
     //Vertical ~ ||||||| Y axis
+
     let paddingSpace = 5; // space between target and relative element
+
     let arrowSize = needArrow ? 10 : 0;
     rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
     rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
@@ -284,6 +289,7 @@ let viewPort = {
     if (!el) {
       return;
     }
+
     let elRects = viewPort.frameRelativeRects(el, customFrame);
     let {
       rectGap
@@ -310,9 +316,11 @@ let viewPort = {
       needArrow,
       isAbsolute
     });
+
     if (!viewPortPossibilities) {
       return;
     }
+
     let {
       views,
       viewsOffset,
@@ -321,10 +329,12 @@ let viewPort = {
     } = viewPortPossibilities;
     let view = null;
     let isViewFound = false;
+
     if (!isViewFound && defaultView && views[defaultView]) {
       view = defaultView;
       isViewFound = true;
     }
+
     if (!isViewFound) {
       if (customOrder.length > 0) {
         isViewFound = customOrder.some(position => {
@@ -342,9 +352,11 @@ let viewPort = {
         });
       }
     }
+
     if (!isViewFound) {
       view = defaultView;
     }
+
     return {
       view,
       views,

package/es/Provider/AvatarSize.js

@@ -2,6 +2,7 @@ import style from '../common/avatarsizes.module.css';
 let styleList = {
   small: style.small,
   xsmall: style.xsmall,
+  xxsmall: style.xxsmall,
   medium: style.medium,
   xmedium: style.xmedium,
   large: style.large,

package/es/Provider/IdProvider.js

@@ -1,29 +1,35 @@
 import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
 import { getLibraryConfig } from './Config';
 let globalId = getLibraryConfig('idCounter'),
-  deletedIndexes = [],
-  globalPrefix;
+    deletedIndexes = [],
+    globalPrefix;
 export function setGlobalIdPrefix(value) {
   globalPrefix = value;
 }
 export function removeGlobalIdPrefix() {
   globalPrefix = undefined;
 }
+
 function getGlobalIdPrefix() {
   return globalPrefix;
 }
+
 function setGlobalId(id) {
   globalId = id;
 }
+
 function getGlobalId() {
   return globalId;
 }
+
 function setDeletedIndexes(array) {
   deletedIndexes = array;
 }
+
 function getDeletedIndexes() {
   return deletedIndexes;
 }
+
 function callback(_ref) {
   let {
     globalId,
@@ -32,6 +38,7 @@ function callback(_ref) {
   setGlobalId(globalId);
   setDeletedIndexes(deletedIndexes);
 }
+
 export function useUniqueId(prefix) {
   return useNumberGenerator({
     getGlobalId,
@@ -50,11 +57,10 @@ export function getUniqueId(Component, prefix) {
     getDeletedIndexes,
     callback
   });
-}
-let Provider = {
-  docs: {
-    componentGroup: 'Provider',
-    folderName: 'Functions'
-  }
-};
-export { Provider };
+} // let Provider = {
+//   docs: {
+//     componentGroup: 'Provider',
+//     folderName: 'Functions'
+//   }
+// };
+// export { Provider };

package/es/Provider/LibraryContext.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import LibraryContextInit from './LibraryContextInit';
 import { getLibraryConfig } from './Config';
+
 const LibraryContextProvider = _ref => {
   let {
     isReducedMotion = getLibraryConfig('isReducedMotion'),
@@ -12,21 +13,22 @@ const LibraryContextProvider = _ref => {
     isReducedMotion,
     direction
   });
+
   function setGlobalContext(key, data) {
     if (value[key] != data) {
-      setValue({
-        ...value,
+      setValue({ ...value,
         [key]: data
       });
     }
   }
+
   return /*#__PURE__*/React.createElement(LibraryContextInit.Provider, {
-    value: {
-      ...value,
+    value: { ...value,
       setGlobalContext
     }
   }, children);
 };
+
 LibraryContextProvider.propTypes = {
   children: PropTypes.node.isRequired,
   isReducedMotion: PropTypes.bool,

package/es/Provider/NumberGenerator/NumberGenerator.js

@@ -5,8 +5,10 @@ export function addGlobalId(globalId) {
   } else {
     globalId = `${globalId}1`;
   }
+
   return globalId;
 }
+
 function decreaseGlobalId(number, globalId) {
   if (`${number}` == `${globalId}`) {
     if (Number.isSafeInteger(Number(globalId)) && Number.isSafeInteger(Number(globalId) - 1)) {
@@ -15,16 +17,19 @@ function decreaseGlobalId(number, globalId) {
       globalId = `${globalId}`;
       globalId = globalId.substring(0, globalId.length - 1);
     }
+
     return {
       isDeleted: true,
       globalId
     };
   }
+
   return {
     isDeleted: false,
     globalId
   };
 }
+
 export function decreaseGlobalIds(numbers, deletedIndexes, globalId) {
   deletedIndexes = [...deletedIndexes];
   [...numbers].reverse().map(number => {
@@ -32,12 +37,14 @@ export function decreaseGlobalIds(numbers, deletedIndexes, globalId) {
     globalId = result.globalId;
     !result.isDeleted && deletedIndexes.push(number);
   });
+
   for (; deletedIndexes.indexOf(globalId) != -1;) {
     let presentHighValue = globalId;
     let result = decreaseGlobalId(globalId, globalId);
     globalId = result.globalId;
     deletedIndexes = deletedIndexes.filter(ele => `${ele}` != `${presentHighValue}`);
   }
+
   return {
     globalId,
     deletedIndexes
@@ -52,9 +59,10 @@ export function useNumberGenerator(_ref) {
     callback
   } = _ref;
   let presentValues = useRef([]),
-    presentIndex = useRef(0);
+      presentIndex = useRef(0);
   prefix = typeof prefix === 'undefined' ? '' : `${prefix}_`;
   let globalPrefix = typeof getGlobalPrefix() === 'undefined' ? '' : `${getGlobalPrefix()}_`;
+
   function getNextId() {
     presentIndex.current = presentIndex.current + 1;
     let currentIndex = presentIndex.current;
@@ -66,6 +74,7 @@ export function useNumberGenerator(_ref) {
     });
     return `${globalPrefix}${prefix}${presentValues.current[currentIndex]}`;
   }
+
   useEffect(() => {
     presentValues.current = presentValues.current.filter((value, index) => index <= presentIndex.current);
   });
@@ -85,27 +94,31 @@ export function getNumberGenerators(_ref2) {
     callback
   } = _ref2;
   let presentIndex = 0,
-    presentValues = [],
-    {
-      name
-    } = Component.props;
+      presentValues = [],
+      {
+    name
+  } = Component.props;
   let didUpdateRef = Component.componentDidUpdate ? Component.componentDidUpdate.bind(Component) : undefined,
-    renderRef = Component.render.bind(Component),
-    willUnMountRef = Component.componentWillUnmount ? Component.componentWillUnmount.bind(Component) : undefined;
+      renderRef = Component.render.bind(Component),
+      willUnMountRef = Component.componentWillUnmount ? Component.componentWillUnmount.bind(Component) : undefined;
   prefix = typeof prefix !== 'undefined' ? `${prefix}_` : '';
+
   Component.componentDidUpdate = function () {
     didUpdateRef && didUpdateRef(...arguments);
     presentValues = presentValues.filter((value, index) => index <= presentIndex);
   };
+
   Component.componentWillUnmount = function () {
     callback(decreaseGlobalIds(presentValues, getDeletedIndexes(), getGlobalId()));
     willUnMountRef && willUnMountRef();
     didUpdateRef = null, renderRef = null, willUnMountRef = null;
   };
+
   Component.render = function () {
     presentIndex = -1;
     return renderRef();
   };
+
   function getNextId() {
     presentIndex += 1;
     let isValuePresent = typeof presentValues[presentIndex] !== 'undefined';
@@ -118,5 +131,6 @@ export function getNumberGenerators(_ref2) {
     });
     return `${globalPrefix}${prefix}${result}`;
   }
+
   return getNextId;
 }

package/es/Provider/ZindexProvider.js

@@ -1,26 +1,32 @@
 import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
 import { getLibraryConfig } from './Config';
 let globalId = getLibraryConfig('zindexCounter'),
-  deletedIndexes = [],
-  globalPrefix;
+    deletedIndexes = [],
+    globalPrefix;
 export function removeGlobalZIndexPrefix() {
   globalPrefix = undefined;
 }
+
 function getGlobalZIndexPrefix() {
   return globalPrefix;
 }
+
 export function setInitialZIndex(id) {
   globalId = id;
 }
+
 function getGlobalId() {
   return globalId;
 }
+
 function setDeletedIndexes(array) {
   deletedIndexes = array;
 }
+
 function getDeletedIndexes() {
   return deletedIndexes;
 }
+
 function callback(_ref) {
   let {
     globalId,
@@ -29,6 +35,7 @@ function callback(_ref) {
   setInitialZIndex(globalId);
   setDeletedIndexes(deletedIndexes);
 }
+
 export function useZIndex(prefix) {
   return useNumberGenerator({
     getGlobalId,

package/es/Provider/index.js

@@ -0,0 +1,4 @@
+export { getLibraryConfig, setLibraryConfig } from './Config';
+export { default as LibraryContextProvider } from './LibraryContext';
+export { removeGlobalZIndexPrefix, setInitialZIndex, useZIndex, getZIndex } from './ZindexProvider';
+export { setGlobalIdPrefix, removeGlobalIdPrefix, useUniqueId, getUniqueId } from './IdProvider';

package/es/Radio/Radio.js

@@ -10,6 +10,7 @@ export default class Radio extends React.Component {
     super(props);
     this.onChange = this.onChange.bind(this);
   }
+
   onChange(e) {
     let {
       onChange,
@@ -17,6 +18,7 @@ export default class Radio extends React.Component {
     } = this.props;
     onChange && onChange(value, e);
   }
+
   render() {
     let {
       id,
@@ -108,12 +110,12 @@ export default class Radio extends React.Component {
               ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
     })));
   }
+
 }
 Radio.defaultProps = defaultProps;
-Radio.propTypes = propTypes;
-if (false) {
-  Radio.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+Radio.propTypes = propTypes; // if (__DOCS__) {
+//   Radio.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Radio/Radio.module.css

@@ -3,12 +3,12 @@
   --radio_width: var(--zd_size16);
   --radio_height: var(--zd_size16);
   --radio_bg_color: none;
-  --radio_stroke_width: var(--zd_size2);
+  --radio_stroke_width: 2px;
   --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*/;
+  --radio_label_margin: 0 0 0 var(--zd_size6);
 }[dir=rtl] .varClass {
   --radio_label_margin: 0 var(--zd_size6) 0 0;
 }
@@ -46,7 +46,7 @@
   --radio_height: var(--zd_size13);
 }
 .radioLabel {
-  font-size: 0;
+  font-size: 0 ;
   display: block;
 }
 .rdBox {

package/es/Responsive/CustomResponsive.js

@@ -5,15 +5,12 @@ 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 )
+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
@@ -25,20 +22,24 @@ 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;
@@ -46,31 +47,38 @@ 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
@@ -81,8 +89,7 @@ export function ResponsiveSender(props) {
     ref: containerRef
   }, children)));
 }
-ResponsiveSender.defaultProps = {
-  ...CustomResponsiveSender_defaultProps,
+ResponsiveSender.defaultProps = { ...CustomResponsiveSender_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveSender.contextType = ResponsiveContext;
@@ -97,12 +104,15 @@ export function useResponsiveReceiver() {
 
   const resizeHandlerRef = useRef();
   const data = useRef();
+
   function updateLatestData() {
     const size = contextData.isParentSize ? contextData.getSize() : validSizeContextData.getSize();
+    const prevData = data.current;
     data.current = query({
       isTouchDevice,
       isParentSize: contextData.isParentSize,
       currentScreenSize: size,
+
       mediaQueryOR(breakPointArray) {
         return breakPointArray.some(breakPoint => {
           const {
@@ -112,6 +122,7 @@ export function useResponsiveReceiver() {
           return isHeight || isWidth;
         });
       },
+
       mediaQueryAND(breakPointArray) {
         return breakPointArray.every(breakPoint => {
           const {
@@ -121,20 +132,27 @@ export function useResponsiveReceiver() {
           return (isHeight === undefined ? true : isHeight) && (isWidth === undefined ? true : isWidth);
         });
       }
+
     });
+    const isSameValues = shallowCompare(data.current, prevData);
+
+    if (isSameValues) {
+      data.current = prevData;
+    }
+
+    return isSameValues;
   }
+
   resizeHandlerRef.current = updateLatestData;
   useEffect(() => {
     function handleResize(size) {
-      const prevData = data.current;
-      resizeHandlerRef.current(size);
-      const isSameValues = shallowCompare(data.current, prevData);
+      const isSameValues = resizeHandlerRef.current(size);
       !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);
@@ -149,11 +167,10 @@ export function useResponsiveReceiver() {
   //     contextData.resize.subscribe(handleResize);
   //   } else {
   //     windowResizeObserver.observe(handleResize);
-
   //   }
-
   // }
   // NOTE: this call for we must give updated value
+
   updateLatestData();
   return data.current;
 }
@@ -172,8 +189,7 @@ export function ResponsiveReceiver(_ref) {
     ref: eleRef
   }, child) : child;
 }
-ResponsiveReceiver.defaultProps = {
-  ...CustomResponsiveReceiver_defaultProps,
+ResponsiveReceiver.defaultProps = { ...CustomResponsiveReceiver_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveReceiver.propTypes = CustomResponsiveReceiver_propTypes;