@zohodesk/components 1.4.15 → 1.4.16

package/es/Radio/props/defaultProps.js

@@ -0,0 +1,15 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  isReadOnly: false,
+  active: false,
+  palette: 'primary',
+  labelPalette: 'default',
+  labelSize: 'medium',
+  size: 'medium',
+  variant: 'default',
+  isFilled: true,
+  customClass: {},
+  customProps: {},
+  a11y: {}
+};

package/es/Radio/props/propTypes.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  active: PropTypes.bool,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  disabledTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  isFilled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  palette: PropTypes.oneOf(['primary', 'danger']),
+  size: PropTypes.oneOf(['small', 'medium']),
+  title: PropTypes.string,
+  value: PropTypes.string,
+  variant: PropTypes.oneOf(['primary', 'default']),
+  customClass: PropTypes.shape({
+    customRadioWrap: PropTypes.string,
+    customRadio: PropTypes.string,
+    customLabel: PropTypes.string
+  }),
+  customProps: PropTypes.exact({
+    ContainerProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  }),
+  a11y: PropTypes.shape({
+    ariaChecked: PropTypes.bool,
+    ariaHidden: PropTypes.bool,
+    role: PropTypes.string,
+    tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    ariaLabelledby: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    ariaReadonly: PropTypes.bool
+  }),
+  children: PropTypes.node,
+  onChange: PropTypes.func,
+  text: PropTypes.string,
+  renderRightPlaceholderNode: PropTypes.node
+};

package/es/Responsive/CustomResponsive.js

@@ -0,0 +1,195 @@
+import React, { useContext, useEffect, useState, useRef, useMemo } from 'react';
+import { CustomResponsiveSender_defaultProps, CustomResponsiveReceiver_defaultProps } from "./props/defaultProps";
+import { CustomResponsiveSender_propTypes, CustomResponsiveReceiver_propTypes } from "./props/propTypes";
+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 ];
+// 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 validSizeResponsiveId = 'valid_sender';
+const ResponsiveContext = /*#__PURE__*/React.createContext({
+  [validSizeResponsiveId]: windowResizeObserver
+});
+export function ResponsiveSender(props) {
+  // variables
+  const {
+    children,
+    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;
+      setTimeout(() => {
+        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
+    };
+    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
+  }, totalContext => /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
+    value: totalContext
+  }, /*#__PURE__*/React.createElement(DOMRefWrapper, {
+    domRefKey: domRefKey,
+    ref: containerRef
+  }, children)));
+}
+ResponsiveSender.defaultProps = { ...CustomResponsiveSender_defaultProps,
+  responsiveId: defaultResponsiveId
+};
+ResponsiveSender.contextType = ResponsiveContext;
+ResponsiveSender.propTypes = CustomResponsiveSender_propTypes;
+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];
+  const contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId] || validSizeContextData; // NOTE: this for fallback of if responsive receiver id wrong
+
+  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 {
+            isHeight,
+            isWidth
+          } = isBreackPointMatched(breakPoint, size);
+          return isHeight || isWidth;
+        });
+      },
+
+      mediaQueryAND(breakPointArray) {
+        return breakPointArray.every(breakPoint => {
+          const {
+            isHeight,
+            isWidth
+          } = isBreackPointMatched(breakPoint, size);
+          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 isSameValues = resizeHandlerRef.current(size);
+      !isSameValues && forceUpdate({});
+    }
+
+    contextData.resize.subscribe(handleResize);
+    return () => contextData.resize.unsubscribe(handleResize);
+  }, [contextData]); // const prevContextDataRef = useRef();
+  // function handleResize(size) {
+  //   const prevData = data.current;
+  //   resizeHandlerRef.current(size);
+  //   const isSammeValues = shallowCompare(data.current, prevData);
+  //   !isSammeValues && forceUpdate({});
+  // }
+  // if(prevContextDataRef.current !== contextData) {
+  //   prevContextDataRef.current = contextData;
+  //   contextData.resize.unsubscribe(handleResize);
+  //   windowResizeObserver.unobserve(handleResize);
+  //   if (contextData) {
+  //     contextData.resize.subscribe(handleResize);
+  //   } else {
+  //     windowResizeObserver.observe(handleResize);
+  //   }
+  // }
+  // NOTE: this call for we must give updated value
+
+  updateLatestData();
+  return data.current;
+}
+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, {
+    domRefKey: domRefKey,
+    ref: eleRef
+  }, child) : child;
+}
+ResponsiveReceiver.defaultProps = { ...CustomResponsiveReceiver_defaultProps,
+  responsiveId: defaultResponsiveId
+};
+ResponsiveReceiver.propTypes = CustomResponsiveReceiver_propTypes;

package/es/Responsive/RefWrapper.js

@@ -0,0 +1,38 @@
+import React, { forwardRef, useCallback, Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+
+function setRef(refFunc, value) {
+  if (typeof refFunc === 'function') {
+    refFunc(value);
+  } else if (refFunc instanceof Object) {
+    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 => {
+
+  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';
+
+  let childProps = {
+    [refKey]: setAttribute
+  };
+  return /*#__PURE__*/cloneElement(ele, childProps);
+});
+DOMRefWrapper.defaultProps = {
+  domRefKey: 'eleRef'
+};
+DOMRefWrapper.propTypes = {
+  domRefKey: PropTypes.any,
+  children: PropTypes.any
+};
+export default DOMRefWrapper;

package/es/Responsive/ResizeComponent.js

@@ -0,0 +1,197 @@
+/* eslint-disable */
+// QUestions to be discussed
+//1) mutation.type === 'characterData' needed ???
+// 2) debounce Mutation observer and resize observer
+import React from 'react';
+import PropTypes from 'prop-types';
+import ResizeObserver from "./ResizeObserver";
+import { getElementSpace, debounce } from "../utils/Common";
+export default class ResizeComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.noSpaceForChildren = false;
+    this.childrenCurrentList = [];
+    this.widthCheck = debounce(this.widthCheck.bind(this), 10); // this.widthCheck = this.widthCheck.bind(this);
+
+    this.onResize = this.onResize.bind(this);
+    this.onResizeMutation = this.onResizeMutation.bind(this);
+    this.tabsObserver = new ResizeObserver(this.onResize);
+    this.tabObserver = new MutationObserver(this.onResizeMutation);
+    this.reset = this.reset.bind(this);
+    this.constructChildren = this.constructChildren.bind(this);
+    this.querySelector = this.querySelector.bind(this);
+  }
+
+  querySelector() {
+    if (this.props.wrapperDivRef && this.props.wrapperDivRef.current) {
+      return this.props.wrapperDivRef.current.querySelectorAll('[data-responsive="true"]');
+    } else {
+      return [];
+    }
+  }
+
+  onResizeMutation(mutations) {
+    // console.log(mutations);
+    let {
+      childrenList
+    } = this.props;
+
+    for (const mutation of mutations) {
+      if (mutation.type === 'childList') {
+        if (mutation.addedNodes.length) {
+          let newAdded = false;
+          mutation.addedNodes.forEach(mut => {
+            // Here we can listen for icon nodes. Confirm with bk
+            if (mut.attributes && mut.attributes['data-responsive'] && (childrenList.length !== this.querySelector().length || this.childrenCurrentList.length !== this.querySelector().length)) {
+              newAdded = true;
+            }
+          });
+
+          if (newAdded) {
+            //console.log('A child node has been added ', mutation);
+            this.onResize();
+          }
+        } else if (mutation.removedNodes.length) {// ?? removed nodes ku check pannanum ah ??
+          // console.log('A child node has been removed ', mutation);
+        }
+      } else if (mutation.type === 'attributes') {//console.log('The ' + mutation.attributeName + ' attribute was modified.', mutation);
+      } else if (mutation.type === 'characterData') {// To Call While Changing InnerText, Remove Below line If Required. But It might affect Performance.
+        // this.onResize();
+      }
+    } // mutations.forEach(mutation => {
+    //   if (mutation.target === foo &&
+    //     mutation.attributeName === 'style' &&
+    //     oldWidth !== foo.style.width) {
+    //       foo.textContent = 'Width changed from ' +
+    //         oldWidth + ' to ' + foo.style.width;
+    //       oldWidth = foo.style.width;
+    //   }
+    // });
+
+  }
+
+  componentDidMount() {
+    if (this.props.wrapperDivRef && this.props.wrapperDivRef.current) {
+      this.tabsObserver.observe(this.props.wrapperDivRef.current);
+      this.tabObserver.observe(this.props.wrapperDivRef.current, {
+        characterData: true,
+        attributes: true,
+        childList: true,
+        subtree: true,
+        attributeFilter: ['data-responsive']
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    this.reset();
+  }
+
+  reset() {
+    this.childrenCurrentList = [];
+    this.tabsObserver.disconnect();
+    this.tabObserver && this.tabObserver.disconnect();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.childrenCurrentList.length === 0) {
+      this.childrenCurrentList = this.querySelector();
+      this.widthCheck();
+    }
+
+    if (this.props.resizeId !== prevProps.resizeId) {
+      // Completely reset the observers and set new observer if id is changed
+      this.reset();
+
+      if (this.props.wrapperDivRef && this.props.wrapperDivRef.current) {
+        this.tabsObserver.observe(this.props.wrapperDivRef.current);
+        this.tabObserver.observe(this.props.wrapperDivRef.current, {
+          characterData: true,
+          attributes: true,
+          childList: true,
+          subtree: true,
+          attributeFilter: ['data-responsive']
+        });
+      }
+    }
+  }
+
+  onResize() {
+    // if (this.childrenCurrentList.length !== 0) {
+    this.childrenCurrentList = [];
+    this.constructChildren(0, false); //}
+  } // shouldComponentUpdate() {
+  //   return this.childrenCurrentList.length === 0
+  // }
+
+
+  widthCheck() {
+    let wrapperDivRef = this.props.wrapperDivRef.current;
+    let moreDivRef = this.props.moreDivRef.current;
+
+    if (wrapperDivRef && this.childrenCurrentList.length > 0) {
+      const childrenWidthList = this.childrenCurrentList; // this.childrenCurrentList = childrenWidthList;
+
+      const moreWidth = getElementSpace(moreDivRef).neededSpace; //console.log(moreWidth,'moreWidth');
+
+      let totalWidth = getElementSpace(wrapperDivRef).availableInsideSpace - moreWidth;
+      let _childrenTotalWidth = 0;
+      let dataCount = 0;
+      this.noSpaceForChildren = false;
+
+      if (totalWidth <= moreWidth) {
+        this.noSpaceForChildren = true;
+      } else {
+        for (let i = 0; i < childrenWidthList.length; i++) {
+          let currentWidth = getElementSpace(childrenWidthList[i]).neededSpace;
+          _childrenTotalWidth += currentWidth; // console.log(_childrenTotalWidth, currentWidth, totalWidth)
+
+          if (i === childrenWidthList.length - 1 && moreWidth >= currentWidth) {
+            totalWidth += moreWidth;
+          }
+
+          if (totalWidth <= _childrenTotalWidth) {
+            dataCount = i;
+            break;
+          }
+        }
+      }
+
+      this.constructChildren(dataCount, true);
+    } else {
+      this.constructChildren(0, false);
+    }
+  }
+
+  constructChildren() {
+    let dataCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    let responsive = arguments.length > 1 ? arguments[1] : undefined;
+    const {
+      childrenList,
+      getData
+    } = this.props; // If the data count is zero we assume that we can render all the items - data count will be zero only when we want to calculate the whole list width
+
+    dataCount = dataCount || childrenList && childrenList.length;
+    getData({
+      responsiveHook: responsive,
+      validListCount: this.noSpaceForChildren ? 0 : dataCount
+    });
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children);
+  }
+
+}
+ResizeComponent.propTypes = {
+  children: PropTypes.node,
+  getData: PropTypes.func,
+  resizeId: PropTypes.number,
+  childrenList: PropTypes.array,
+  wrapperDivRef: PropTypes.any,
+  moreDivRef: PropTypes.any
+};
+ResizeComponent.defaultProps = {
+  getData: () => {},
+  resizeId: null
+};

package/es/Responsive/ResizeObserver.js

@@ -0,0 +1,76 @@
+function getBorderBoxSizeFromEntry(entry) {
+  const {
+    borderBoxSize
+  } = entry;
+  return borderBoxSize[0];
+}
+
+function getSize(entry) {
+  const borderBoxSize = getBorderBoxSizeFromEntry(entry);
+  return {
+    height: borderBoxSize.blockSize,
+    width: borderBoxSize.inlineSize
+  };
+}
+
+export default class ResizeObserverPolyfill {
+  constructor(onResize) {
+    this.resizeHandler = this.resizeHandler.bind(this);
+    this.onResize = onResize;
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+    this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandler);
+  }
+
+  replaceResizeHandler(onResize) {
+    this.onResize = onResize;
+  }
+
+  getEntry(entries) {
+    return entries[0];
+  }
+
+  resizeHandler(entries) {
+    if (!this.targetNode || !entries.length) {
+      return;
+    }
+
+    const entry = this.getEntry(entries);
+    const currentSize = getSize(entry);
+
+    if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
+      return;
+    }
+
+    this.size = currentSize;
+    this.onResize(this.size, this.targetNode);
+    return true;
+  }
+
+  observe(targetNode) {
+    this.targetNode = targetNode;
+    this.resizeObserverInstance.observe(targetNode);
+  }
+
+  replaceObservationElement(targetNode) {
+    if (this.targetNode === targetNode) {
+      return;
+    }
+
+    this.targetNode && this.disconnect();
+    targetNode && this.observe(targetNode);
+  }
+
+  disconnect() {
+    this.resizeObserverInstance.disconnect();
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+  }
+
+}

package/es/Responsive/ResizeObserverWithPolyfill.js

@@ -0,0 +1,140 @@
+const hasResizeObserver = !!window.ResizeObserver;
+const mutationObserverOptions = {
+  //NOTE: we donot consider child Count
+  // childList: true,
+  attributes: true
+};
+
+function getSize(element) {
+  let {
+    offsetHeight,
+    offsetWidth
+  } = element; // const { height, width } = element.getBoundingClientRect();
+
+  return {
+    height: offsetHeight,
+    width: offsetWidth
+  };
+}
+
+function dispatch() {
+  let resizeResponsive = new Event('resizeResponsive');
+  window.dispatchEvent(resizeResponsive);
+}
+
+if (!hasResizeObserver) {
+  let interval = null;
+  window.addEventListener('resize', () => {
+    clearTimeout(interval);
+    interval = setTimeout(dispatch, 100);
+  });
+} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
+
+
+export default class ResizeObserverPolyfill {
+  constructor(onResize) {
+    // method finding
+    this.transitionEndHandler = this.transitionEndHandler.bind(this);
+    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
+    this.resizeHandler = this.resizeHandler.bind(this);
+    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
+    this.debounce = this.debounce.bind(this);
+    this.onResize = onResize;
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+
+    if (hasResizeObserver) {
+      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
+    } else {
+      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
+    }
+  }
+
+  replaceResizeHandler(onResize) {
+    this.onResize = onResize;
+  }
+
+  resizeHandler() {
+    if (!this.targetNode) {
+      return;
+    }
+
+    const currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+
+    if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
+      return;
+    }
+
+    this.size = currentSize;
+    this.onResize(this.size, this.targetNode);
+    return true;
+  }
+
+  resizeHandlerDispatch() {
+    if (!this.resizeHandler() || hasResizeObserver) {
+      return;
+    }
+
+    dispatch();
+  }
+
+  debounce() {
+    clearTimeout(this.interval);
+    this.interval = setTimeout(this.resizeHandler, 100);
+  }
+
+  transitionEndHandler(event) {
+    if (event.propertyName.indexOf('color') === -1) {
+      this.resizeHandlerDispatch();
+    }
+  }
+
+  addEventListeners(targetNode) {
+    targetNode.addEventListener('transitionend', this.transitionEndHandler);
+    window.addEventListener('resizeResponsive', this.debounce);
+    targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
+    targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+  }
+
+  removeEventListeners(targetNode) {
+    targetNode.removeEventListener('transitionend', this.transitionEndHandler);
+    window.removeEventListener('resizeResponsive', this.debounce);
+    targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
+    targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+  }
+
+  observe(targetNode) {
+    this.targetNode = targetNode;
+
+    if (hasResizeObserver) {
+      this.resizeObserverInstance.observe(targetNode);
+    } else {
+      this.addEventListeners(targetNode);
+      this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
+    }
+  }
+
+  replaceObservationElement(targetNode) {
+    if (this.targetNode === targetNode) {
+      return;
+    }
+
+    this.targetNode && this.disconnect();
+    targetNode && this.observe(targetNode);
+    targetNode && this.resizeHandlerDispatch();
+  }
+
+  disconnect() {
+    this.targetNode && this.removeEventListeners(this.targetNode);
+    hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+  }
+
+}