@zohodesk/components 1.0.0-alpha-250 → 1.0.0-alpha-252

package/es/Provider/IdProvider.js

@@ -1,35 +1,29 @@
 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,
@@ -38,7 +32,6 @@ function callback(_ref) {
   setGlobalId(globalId);
   setDeletedIndexes(deletedIndexes);
 }
-
 export function useUniqueId(prefix) {
   return useNumberGenerator({
     getGlobalId,

package/es/Provider/LibraryContext.js

@@ -2,7 +2,6 @@ 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'),
@@ -13,22 +12,21 @@ 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,10 +5,8 @@ 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)) {
@@ -17,19 +15,16 @@ 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 => {
@@ -37,14 +32,12 @@ 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
@@ -59,10 +52,9 @@ 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;
@@ -74,7 +66,6 @@ export function useNumberGenerator(_ref) {
     });
     return `${globalPrefix}${prefix}${presentValues.current[currentIndex]}`;
   }
-
   useEffect(() => {
     presentValues.current = presentValues.current.filter((value, index) => index <= presentIndex.current);
   });
@@ -94,31 +85,27 @@ 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';
@@ -131,6 +118,5 @@ export function getNumberGenerators(_ref2) {
     });
     return `${globalPrefix}${prefix}${result}`;
   }
-
   return getNextId;
 }

package/es/Provider/ZindexProvider.js

@@ -1,32 +1,26 @@
 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,
@@ -35,7 +29,6 @@ function callback(_ref) {
   setInitialZIndex(globalId);
   setDeletedIndexes(deletedIndexes);
 }
-
 export function useZIndex(prefix) {
   return useNumberGenerator({
     getGlobalId,

package/es/Provider/docs/Provider_Id__Class.docs.js

@@ -6,7 +6,6 @@ export default class Provider_Id__Class extends React.Component {
     setGlobalIdPrefix('zohodesk');
     this.getNextId = getUniqueId(this);
   }
-
   render() {
     let id = this.getNextId();
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -15,15 +14,15 @@ export default class Provider_Id__Class extends React.Component {
       id: id
     }, "Id ", id));
   }
-
 }
-
 if (false) {
   Provider_Id__Class.docs = {
     componentGroup: 'Provider',
     folderName: 'Functions'
   };
-} // setGlobalIdPrefix  => to set prefix for all id
+}
+
+// setGlobalIdPrefix  => to set prefix for all id
 // removeGlobalIdPrefix => remove prfeix
 // useUniqueId => for function components
 // getUniqueId => for class components

package/es/Provider/docs/Provider_Id__Function.docs.js

@@ -9,7 +9,6 @@ export default function Provider_Id__Function() {
     id: id
   }, "Id ", id));
 }
-
 if (false) {
   Provider_Id__Function.docs = {
     componentGroup: 'Provider',

package/es/Provider/docs/Provider_Zindex__Class.docs.js

@@ -6,7 +6,6 @@ export default class Provider_Zindex__Class extends React.Component {
     setInitialZIndex('1000');
     this.getNextId = getZIndex(this);
   }
-
   render() {
     let zIndex = this.getNextId();
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -19,14 +18,14 @@ export default class Provider_Zindex__Class extends React.Component {
       }
     }, "Zindex  ", zIndex));
   }
-
 }
-
 if (false) {
   Provider_Zindex__Class.docs = {
     componentGroup: 'Provider',
     folderName: 'Functions'
   };
-} // setGlobalZIndexPrefix
+}
+
+// setGlobalZIndexPrefix
 // useZIndex
 // getZIndex

package/es/Provider/docs/Provider_Zindex__Function.docs.js

@@ -14,7 +14,6 @@ export default function Provider_Zindex__Function() {
     }
   }, "Zindex ", Zindex2));
 }
-
 if (false) {
   Provider_Zindex__Function.docs = {
     componentGroup: 'Provider',

package/es/Provider.js

@@ -2,8 +2,8 @@ import React from 'react';
 import AppContainer from './AppContainer/AppContainer';
 import { Container } from './Layout';
 import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
-/* default mode & theme css */
 
+/* default mode & theme css */
 import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
 import '../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
 import '../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
@@ -15,8 +15,8 @@ import '../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.m
 import '../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
 import '../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
 import '../assets/Appearance/default/mode/defaultMode.module.css';
-/* dark mode & theme css */
 
+/* dark mode & theme css */
 import '../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
 import '../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
 import '../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
@@ -28,8 +28,8 @@ import '../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.
 import '../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
 import '../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
 import '../assets/Appearance/dark/mode/darkMode.module.css';
-/* pure dark mode & theme css */
 
+/* pure dark mode & theme css */
 import '../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
 import '../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
 import '../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
@@ -54,19 +54,16 @@ export default class Provider extends React.Component {
     this.setTheme = this.setTheme.bind(this);
     this.setAppearance = this.setAppearance.bind(this);
   }
-
   setAppearance(mode) {
     this.setState({
       appearanceName: mode
     });
   }
-
   setTheme(theme) {
     this.setState({
       themeName: theme
     });
   }
-
   render() {
     let {
       appearanceName,
@@ -91,5 +88,4 @@ export default class Provider extends React.Component {
       onAppearanceChange: this.setAppearance
     })));
   }
-
 }

package/es/Radio/Radio.js

@@ -10,7 +10,6 @@ export default class Radio extends React.Component {
     super(props);
     this.onChange = this.onChange.bind(this);
   }
-
   onChange(e) {
     let {
       onChange,
@@ -18,7 +17,6 @@ export default class Radio extends React.Component {
     } = this.props;
     onChange && onChange(value, e);
   }
-
   render() {
     let {
       id,
@@ -110,11 +108,9 @@ 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',

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