@zohodesk/components 1.2.28 → 1.2.30

package/es/v1/Responsive/ResizeComponent.js

@@ -1,197 +0,0 @@
-/* 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/v1/Responsive/ResizeObserver.js

@@ -1,140 +0,0 @@
-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
-    };
-  }
-
-}

package/es/v1/Responsive/Responsive.js

@@ -1,194 +0,0 @@
-import React, { useContext, useEffect, useState, useMemo } from 'react'; // import React, { useState, useMemo, useCallback, useContext } from 'react';
-
-import { ResponsiveSender_defaultProps, ResponsiveReceiver_defaultProps } from './props/defaultProps';
-import { ResponsiveSender_propTypes, ResponsiveReceiver_propTypes } from './props/propTypes';
-import ResizeObserver from './ResizeObserver';
-import DOMRefWrapper from './RefWrapper';
-import { windowResizeObserver } from '../../Responsive/windowResizeObserver';
-import { getBreakPointValue, defaultMatcher } from '../../Responsive/utils/'; // const sortedBreackPointKey = [  'MOBILE_XS',  'MOBILE_S',  'MOBILE_M',  'MOBILE',  'TABLET_S',  'TABLET_M',  'TABLET',  'LAPTOP_S',  'LAPTOP_M',  'LAPTOP',  'MONITOR_M',  'MONITOR'];
-
-export const ResponsiveContext = /*#__PURE__*/React.createContext({});
-const defaultResponsiveId = 'parentReceiver';
-export class ResponsiveSender extends React.Component {
-  constructor(props) {
-    super(props); // method binding
-
-    this.onResize = this.onResize.bind(this);
-    this.containerRef = this.containerRef.bind(this);
-    this.getWidth = this.getWidth.bind(this);
-    this.state = {
-      breakPoint: null,
-      getWidth: this.getWidth
-    }; // variables
-
-    this.observer = new ResizeObserver(this.onResize);
-    this.size = null;
-  }
-
-  getWidth() {
-    if (!this.size) {
-      return 0;
-    }
-
-    const {
-      width
-    } = this.size;
-    return width;
-  }
-
-  onResize(size) {
-    // const { matcher } = this.props;
-    const {
-      breakPoint
-    } = this.state;
-    const newBreakPoint = defaultMatcher(size);
-    this.size = size;
-
-    if (breakPoint !== newBreakPoint) {
-      this.setState({
-        breakPoint: newBreakPoint
-      });
-    }
-  }
-
-  containerRef(node) {
-    this.observer.replaceObservationElement(node);
-  }
-
-  isChanged(data, key) {
-    this.memo = this.memo || {};
-    const changed = this.memo[key] !== data;
-    this.memo[key] = data;
-    return changed;
-  }
-
-  render() {
-    const parentContext = this.context;
-    const {
-      children,
-      domRefKey,
-      responsiveId
-    } = this.props;
-    let {
-      childContext
-    } = this; // NOTE: this method called here ,Because of we must update local memo.
-
-    const isStateChanged = this.isChanged(this.state, 'state');
-
-    if (this.isChanged(this.context, 'context') || isStateChanged) {
-      childContext = Object.assign({}, parentContext);
-      childContext[responsiveId] = this.state;
-      childContext[defaultResponsiveId] = this.state; // NOTE: this for fallback of if responsive receiver id wrong
-    }
-
-    this.childContext = childContext;
-    return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
-      value: childContext
-    }, /*#__PURE__*/React.createElement(DOMRefWrapper, {
-      domRefKey: domRefKey,
-      ref: this.containerRef
-    }, children));
-  }
-
-}
-ResponsiveSender.defaultProps = { ...ResponsiveSender_defaultProps,
-  responsiveId: defaultResponsiveId
-};
-ResponsiveSender.contextType = ResponsiveContext;
-ResponsiveSender.propTypes = ResponsiveSender_propTypes;
-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
-
-  let data = contextData;
-  useEffect(() => {
-    !contextData && windowResizeObserver.observe(forceUpdate);
-    return () => !contextData && windowResizeObserver.unobserve(forceUpdate);
-  }, [!!contextData]);
-
-  if (!contextData) {
-    data = {
-      breakPoint: windowResizeObserver.getBreackPoint(),
-      getWidth: () => windowResizeObserver.getSize().width
-    };
-  }
-
-  const {
-    breakPoint,
-    getWidth
-  } = data;
-  const childArg = useMemo(() => {
-    const isTouchDevice = 'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
-    return {
-      breakPoint,
-      isTouchDevice,
-
-      deviceBetween(breakPoint1, breakPoint2) {
-        const width = getWidth();
-
-        if (!width) {
-          return false;
-        } // const smallBreakPointIndex = sortedBreackPointKey.indexOf(breakPoint1);
-        // const value1 = smallBreakPointIndex < 1 ?  0 : getBreakPointValue(sortedBreackPointKey[smallBreakPointIndex-1]);
-
-
-        const value1 = getBreakPointValue(breakPoint1);
-        const value2 = getBreakPointValue(breakPoint2);
-
-        if (value1 > value2) {
-          return this.deviceBetween(breakPoint2, breakPoint1);
-        }
-
-        return value1 <= width && value2 >= width || breakPoint1 === breakPoint || breakPoint2 === breakPoint;
-      },
-
-      deviceOnly() {
-        let breakPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-        return breakPoints.includes(breakPoint);
-      },
-
-      deviceUpto(breakPoint) {
-        const width = getWidth();
-
-        if (!width) {
-          return false;
-        }
-
-        return width <= getBreakPointValue(breakPoint);
-      }
-
-    };
-  }, [breakPoint, getWidth]);
-  return childArg;
-} // function ResponsiveReceiverFunc({ children, hiddenSizes }, ref) {
-//   const { breakPoint, methods } = useResponsiveReceiver();
-//   console.log(hiddenSizes);
-//   return hiddenSizes.indexOf(breakPoint) === -1 ? (
-//     <RefWrapper ref={ref}>{children(breakPoint, methods)}</RefWrapper>
-//   ) : null;
-// }
-
-export function ResponsiveReceiver(_ref) {
-  let {
-    children,
-    responsiveId,
-    hiddenSizes,
-    eleRef,
-    domRefKey
-  } = _ref;
-  const data = useResponsiveReceiver(responsiveId);
-  const {
-    breakPoint
-  } = data;
-  const child = children(data);
-  return !hiddenSizes.includes(breakPoint) ? eleRef ? /*#__PURE__*/React.createElement(DOMRefWrapper, {
-    domRefKey: domRefKey,
-    ref: eleRef
-  }, child) : child : null;
-}
-ResponsiveReceiver.defaultProps = { ...ResponsiveReceiver_defaultProps,
-  responsiveId: defaultResponsiveId
-};
-ResponsiveReceiver.propTypes = ResponsiveReceiver_propTypes;

package/es/v1/Responsive/index.js

@@ -1,9 +0,0 @@
-export { ResponsiveSender as CustomResponsiveSender, ResponsiveReceiver as CustomResponsiveReceiver, useResponsiveReceiver as useCustomResponsiveReceiver } from './CustomResponsive';
-export { ResponsiveSender, ResponsiveReceiver, useResponsiveReceiver } from './Responsive';
-export { default as ResizeComponent } from './ResizeComponent'; // let Responsive = {
-//   docs: {
-//     componentGroup: 'Layout',
-//     folderName: 'Style Guide'
-//   }
-// };
-// export { Responsive };

package/es/v1/Responsive/props/defaultProps.js

@@ -1,13 +0,0 @@
-export const CustomResponsiveSender_defaultProps = {
-  domRefKey: 'eleRef'
-};
-export const CustomResponsiveReceiver_defaultProps = {
-  domRefKey: 'eleRef'
-};
-export const ResponsiveSender_defaultProps = {
-  domRefKey: 'eleRef'
-};
-export const ResponsiveReceiver_defaultProps = {
-  domRefKey: 'eleRef',
-  hiddenSizes: []
-};

package/es/v1/Responsive/props/propTypes.js

@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types';
-export const CustomResponsiveSender_propTypes = {
-  children: PropTypes.any.isRequired,
-  domRefKey: PropTypes.string,
-  responsiveId: PropTypes.string
-};
-export const CustomResponsiveReceiver_propTypes = {
-  children: PropTypes.func,
-  domRefKey: PropTypes.string,
-  eleRef: PropTypes.func,
-  query: PropTypes.func,
-  responsiveId: PropTypes.string
-};
-export const ResponsiveSender_propTypes = {
-  children: PropTypes.any.isRequired,
-  domRefKey: PropTypes.string,
-  responsiveId: PropTypes.string
-};
-export const ResponsiveReceiver_propTypes = {
-  children: PropTypes.func,
-  domRefKey: PropTypes.string,
-  eleRef: PropTypes.func,
-  hiddenSizes: PropTypes.array,
-  responsiveId: PropTypes.string
-};

package/lib/v1/Provider/AvatarSize.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = CssProvider;
-
-var _avatarsizesModule = _interopRequireDefault(require("../../common/avatarsizes.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var styleList = {
-  small: _avatarsizesModule["default"].small,
-  xsmall: _avatarsizesModule["default"].xsmall,
-  xxsmall: _avatarsizesModule["default"].xxsmall,
-  medium: _avatarsizesModule["default"].medium,
-  xmedium: _avatarsizesModule["default"].xmedium,
-  large: _avatarsizesModule["default"].large,
-  xlarge: _avatarsizesModule["default"].xlarge
-};
-
-function CssProvider(name) {
-  return styleList[name] || '';
-}

package/lib/v1/Provider/Config.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getLibraryConfig = getLibraryConfig;
-exports.setLibraryConfig = setLibraryConfig;
-var id = {
-  mobileWidth: 640,
-  zindexCounter: 3,
-  idCounter: 0,
-  idPrefix: 'ZD',
-  scrollFetchLimit: 80,
-  isReducedMotion: false,
-  direction: 'ltr',
-  tooltipDebounce: 175,
-  getTooltipContainer: function getTooltipContainer() {},
-  autoComplete: false
-};
-
-function getLibraryConfig(key) {
-  return id[key];
-}
-
-function setLibraryConfig(configObj) {
-  id = Object.assign({}, id, configObj);
-}

package/lib/v1/Provider/CssProvider.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = CssProvider;
-
-var _commonModule = _interopRequireDefault(require("../../common/common.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var styleList = {
-  hide: _commonModule["default"].hide,
-  isDisabled: _commonModule["default"].disabled,
-  isDisable: _commonModule["default"].disable,
-  isBlock: _commonModule["default"].blockEvent,
-  isFlexible: _commonModule["default"].flexgrow,
-  dotted: _commonModule["default"].dotted,
-  vMiddle: _commonModule["default"].yMiddle,
-  hMiddle: _commonModule["default"].xMiddle,
-  smooth: _commonModule["default"].ftsmooth,
-  clamp: _commonModule["default"].clamp
-};
-
-function CssProvider(name) {
-  return styleList[name] || '';
-}