@zohodesk/components 1.0.0-temp-168 → 1.0.0-temp-170

package/es/v1/Provider/IdProvider.js

@@ -0,0 +1,66 @@
+import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
+import { getLibraryConfig } from './Config';
+let globalId = getLibraryConfig('idCounter'),
+    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,
+    deletedIndexes
+  } = _ref;
+  setGlobalId(globalId);
+  setDeletedIndexes(deletedIndexes);
+}
+
+export function useUniqueId(prefix) {
+  return useNumberGenerator({
+    getGlobalId,
+    prefix,
+    getGlobalPrefix: getGlobalIdPrefix,
+    getDeletedIndexes,
+    callback
+  });
+}
+export function getUniqueId(Component, prefix) {
+  return getNumberGenerators({
+    Component,
+    prefix,
+    getGlobalPrefix: getGlobalIdPrefix,
+    getGlobalId,
+    getDeletedIndexes,
+    callback
+  });
+} // let Provider = {
+//   docs: {
+//     componentGroup: 'Provider',
+//     folderName: 'Functions'
+//   }
+// };
+// export { Provider };

package/es/v1/Provider/LibraryContext.js

@@ -0,0 +1,37 @@
+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'),
+    direction = getLibraryConfig('direction'),
+    children
+  } = _ref;
+  const [value, setValue] = useState({
+    isReducedMotion,
+    direction
+  });
+
+  function setGlobalContext(key, data) {
+    if (value[key] != data) {
+      setValue({ ...value,
+        [key]: data
+      });
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(LibraryContextInit.Provider, {
+    value: { ...value,
+      setGlobalContext
+    }
+  }, children);
+};
+
+LibraryContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  isReducedMotion: PropTypes.bool,
+  direction: PropTypes.string
+};
+export default LibraryContextProvider;

package/es/v1/Provider/LibraryContextInit.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const LibraryContext = /*#__PURE__*/React.createContext();
+export default LibraryContext;

package/es/v1/Provider/NumberGenerator/NumberGenerator.js

@@ -0,0 +1,136 @@
+import React, { useRef, useEffect } from 'react';
+export function addGlobalId(globalId) {
+  if (Number.isSafeInteger(Number(globalId)) && Number.isSafeInteger(Number(globalId) + 1)) {
+    globalId = Number(globalId) + 1;
+  } else {
+    globalId = `${globalId}1`;
+  }
+
+  return globalId;
+}
+
+function decreaseGlobalId(number, globalId) {
+  if (`${number}` == `${globalId}`) {
+    if (Number.isSafeInteger(Number(globalId)) && Number.isSafeInteger(Number(globalId) - 1)) {
+      globalId = Number(globalId) - 1;
+    } else {
+      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 => {
+    let result = decreaseGlobalId(number, 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
+  };
+}
+export function useNumberGenerator(_ref) {
+  let {
+    getGlobalId,
+    prefix,
+    getGlobalPrefix,
+    getDeletedIndexes,
+    callback
+  } = _ref;
+  let presentValues = useRef([]),
+      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;
+    let isValuePresent = typeof presentValues.current[currentIndex] !== 'undefined';
+    let result = isValuePresent ? presentValues.current[currentIndex] : presentValues.current[currentIndex] = addGlobalId(getGlobalId());
+    !isValuePresent && callback({
+      globalId: result,
+      deletedIndexes: getDeletedIndexes()
+    });
+    return `${globalPrefix}${prefix}${presentValues.current[currentIndex]}`;
+  }
+
+  useEffect(() => {
+    presentValues.current = presentValues.current.filter((value, index) => index <= presentIndex.current);
+  });
+  useEffect(() => () => {
+    callback(decreaseGlobalIds(presentValues.current, getDeletedIndexes(), getGlobalId()));
+  }, []);
+  presentIndex.current = -1;
+  return getNextId;
+}
+export function getNumberGenerators(_ref2) {
+  let {
+    Component,
+    prefix,
+    getGlobalPrefix,
+    getGlobalId,
+    getDeletedIndexes,
+    callback
+  } = _ref2;
+  let presentIndex = 0,
+      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;
+  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';
+    let result = isValuePresent ? presentValues[presentIndex] : presentValues[presentIndex] = addGlobalId(getGlobalId(getGlobalId()));
+    let globalPrefix = getGlobalPrefix();
+    globalPrefix = typeof globalPrefix === 'undefined' ? '' : `${globalPrefix}_`;
+    !isValuePresent && callback({
+      globalId: result,
+      deletedIndexes: getDeletedIndexes()
+    });
+    return `${globalPrefix}${prefix}${result}`;
+  }
+
+  return getNextId;
+}

package/es/v1/Provider/ZindexProvider.js

@@ -0,0 +1,57 @@
+import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
+import { getLibraryConfig } from './Config';
+let globalId = getLibraryConfig('zindexCounter'),
+    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,
+    deletedIndexes
+  } = _ref;
+  setInitialZIndex(globalId);
+  setDeletedIndexes(deletedIndexes);
+}
+
+export function useZIndex(prefix) {
+  return useNumberGenerator({
+    getGlobalId,
+    prefix,
+    getGlobalPrefix: getGlobalZIndexPrefix,
+    getDeletedIndexes,
+    callback
+  });
+}
+export function getZIndex(Component, prefix) {
+  return getNumberGenerators({
+    Component,
+    prefix,
+    getGlobalPrefix: getGlobalZIndexPrefix,
+    getGlobalId,
+    getDeletedIndexes,
+    callback
+  });
+}

package/es/v1/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/v1/Radio/Radio.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { defaultProps } from '../../Radio/props/defaultProps';
+import { propTypes } from '../../Radio/props/propTypes';
+import Label from '../Label/Label';
+import { Container, Box } from '../Layout';
+import style from '../../Radio/Radio.module.css';
+
+const Radio = props => {
+  let {
+    id,
+    name,
+    value,
+    checked,
+    disabled,
+    isReadOnly,
+    palette,
+    disabledTitle,
+    title,
+    text,
+    labelPalette,
+    size,
+    labelSize,
+    variant,
+    active,
+    isFilled,
+    customClass,
+    a11y
+  } = props;
+  let {
+    customRadioWrap = '',
+    customRadio = '',
+    customLabel = ''
+  } = customClass;
+  let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
+  let toolTip = disabled ? disabledTitle : title ? title : null;
+  let {
+    ariaHidden,
+    role = 'radio',
+    ariaChecked = checked,
+    ariaLabel,
+    ariaLabelledby,
+    ariaReadonly = isReadOnly || disabled ? true : false
+  } = a11y;
+
+  function onChange(e) {
+    const {
+      onChange
+    } = props;
+    onChange && onChange(value, e);
+  }
+
+  return /*#__PURE__*/React.createElement(Container, {
+    dataId: value ? value.toLowerCase() : 'RadioComp',
+    isCover: false,
+    isInline: text ? false : true,
+    alignBox: "row",
+    align: "both",
+    className: `${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${isReadOnly || disabled ? '' : style.hoverEfffect} ${checked ? style.checked : ''} ${customRadioWrap}`,
+    "data-title": toolTip,
+    onClick: !isReadOnly && !disabled ? onChange : '',
+    "aria-checked": ariaChecked,
+    tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+    role: role,
+    "aria-Hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-readonly": ariaReadonly
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
+          ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    id: id,
+    name: name,
+    value: value
+  }), /*#__PURE__*/React.createElement("label", {
+    className: `${style.radioLabel} ${accessMode}`
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 40"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "19",
+    className: `${style.rdBox}`
+  }), checked ? /*#__PURE__*/React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "11.03",
+    className: `${style.centerPath}`
+  }) : null))), text && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    className: style.text
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: text,
+    palette: disabled ? 'disable' : labelPalette,
+    size: labelSize,
+    type: "title",
+    clipped: true,
+    dataId: `${text}_label`,
+    variant: variant,
+    title: toolTip ? toolTip : text,
+    customClass: `${checked && active && !disabled ? `${style[`${palette}checkedActive`]}` : ''} 
+            ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
+  })));
+};
+
+export default Radio;
+Radio.defaultProps = defaultProps;
+Radio.propTypes = propTypes; // if (__DOCS__) {
+//   Radio.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Responsive/CustomResponsive.js

@@ -0,0 +1,195 @@
+import React, { useContext, useEffect, useState, useRef, useMemo } from 'react';
+import { CustomResponsiveSender_defaultProps, CustomResponsiveReceiver_defaultProps } from '../../Responsive/props/defaultProps';
+import { CustomResponsiveSender_propTypes, CustomResponsiveReceiver_propTypes } from '../../Responsive/props/propTypes';
+import ResizeObserver from './ResizeObserver';
+import DOMRefWrapper from './RefWrapper';
+import shallowCompare from '../../Responsive/utils/shallowCompare';
+import { isBreackPointMatched, Subscribale, isTouchDevice, windowResizeObserver } from '../../Responsive/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/v1/Responsive/RefWrapper.js

@@ -0,0 +1,39 @@
+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
+};
+DOMRefWrapper.displayName = 'DOMRefWrapper';
+export default DOMRefWrapper;