@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/es/Popup/props/propTypes.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+export const ContextTypes = {
+  direction: PropTypes.string
+};
+export const PopupPropTypes = {
+  popupGroup: PropTypes.string,
+  isArrow: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  closeOnScroll: PropTypes.bool,
+  isOutsideScrollBlocked: PropTypes.bool,
+  needResizeHandling: PropTypes.bool,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  scrollDebounceTime: PropTypes.number,
+  customOrder: PropTypes.arrayOf(PropTypes.string),
+  checkBeforeClose: PropTypes.func
+};
+export const PopupWrappersPropTypes = {
+  openPopupOnly: PropTypes.func,
+  closePopupOnly: PropTypes.func,
+  togglePopup: PropTypes.func,
+  removeClose: PropTypes.func,
+  isPopupReady: PropTypes.bool,
+  position: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  getTargetRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  ...PopupPropTypes,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object
+};

package/es/Provider/AvatarSize.js

@@ -0,0 +1,13 @@
+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,
+  xlarge: style.xlarge
+};
+export default function CssProvider(name) {
+  return styleList[name] || '';
+}

package/es/Provider/Config.js

@@ -0,0 +1,21 @@
+let id = {
+  mobileWidth: 640,
+  zindexCounter: 3,
+  idCounter: 0,
+  idPrefix: 'ZD',
+  scrollFetchLimit: 80,
+  isReducedMotion: false,
+  direction: 'ltr',
+  tooltipDebounce: 175,
+  getTooltipContainer: () => {},
+  autoComplete: false,
+  portalPrefix: '',
+  getPortalContainer: () => {},
+  getRootElement: () => {}
+};
+export function getLibraryConfig(key) {
+  return id[key];
+}
+export function setLibraryConfig(configObj) {
+  id = Object.assign({}, id, configObj);
+}

package/es/Provider/CssProvider.js

@@ -0,0 +1,16 @@
+import style from "../common/common.module.css";
+let styleList = {
+  hide: style.hide,
+  isDisabled: style.disabled,
+  isDisable: style.disable,
+  isBlock: style.blockEvent,
+  isFlexible: style.flexgrow,
+  dotted: style.dotted,
+  vMiddle: style.yMiddle,
+  hMiddle: style.xMiddle,
+  smooth: style.ftsmooth,
+  clamp: style.clamp
+};
+export default function CssProvider(name) {
+  return styleList[name] || '';
+}

package/es/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;
+}
+
+export 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/Provider/LibraryContext.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import LibraryContextInit from "./LibraryContextInit";
+import { getLibraryConfig } from "./Config";
+
+const LibraryContextProvider = _ref => {
+  let {
+    isReducedMotion,
+    direction,
+    coloredTagVariant,
+    hasTagColorInheritedToText,
+    shouldIndicateSwitchState,
+    shouldStrikeThroughDisabledButton,
+    labelRequiredType,
+    shouldHighlightRequiredLabel,
+    children
+  } = _ref;
+  const [value, setValue] = useState({
+    isReducedMotion,
+    direction,
+    coloredTagVariant,
+    hasTagColorInheritedToText,
+    shouldIndicateSwitchState,
+    shouldStrikeThroughDisabledButton,
+    labelRequiredType,
+    shouldHighlightRequiredLabel
+  });
+
+  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,
+  coloredTagVariant: PropTypes.oneOf(['bold', 'subtle', 'minimal']),
+  hasTagColorInheritedToText: PropTypes.bool,
+  direction: PropTypes.string,
+  shouldIndicateSwitchState: PropTypes.bool,
+  shouldStrikeThroughDisabledButton: PropTypes.bool,
+  labelRequiredType: PropTypes.oneOf(['asterisk', 'text']),
+  shouldHighlightRequiredLabel: PropTypes.bool
+};
+LibraryContextProvider.defaultProps = {
+  isReducedMotion: getLibraryConfig('isReducedMotion'),
+  direction: getLibraryConfig('direction'),
+  coloredTagVariant: 'bold',
+  hasTagColorInheritedToText: true,
+  shouldIndicateSwitchState: false,
+  shouldStrikeThroughDisabledButton: false,
+  labelRequiredType: 'asterisk',
+  shouldHighlightRequiredLabel: true
+};
+export default LibraryContextProvider;

package/es/Provider/LibraryContextInit.js

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

package/es/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/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/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

@@ -0,0 +1,149 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium'] }] */
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import Label from "../Label/Label";
+import Typography from "../Typography/Typography";
+import { Container, Box } from "../Layout";
+import CssProvider from "../Provider/CssProvider";
+import style from "./Radio.module.css";
+export default class Radio extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this);
+  }
+
+  onChange(e) {
+    let {
+      onChange,
+      value
+    } = this.props;
+    onChange && onChange(value, e);
+  }
+
+  handleGetRef(ele) {
+    let {
+      getRef,
+      value
+    } = this.props;
+    getRef && getRef(ele, value);
+  }
+
+  render() {
+    let {
+      id,
+      name,
+      value,
+      checked,
+      disabled,
+      isReadOnly,
+      palette,
+      disabledTitle,
+      title,
+      text,
+      labelPalette,
+      size,
+      labelSize,
+      variant,
+      active,
+      isFilled,
+      customClass,
+      customProps,
+      children,
+      a11y,
+      secondaryText,
+      renderRightPlaceholderNode
+    } = this.props;
+    let {
+      customRadioWrap = '',
+      customRadio = '',
+      customLabel = '',
+      customSecondaryText = ''
+    } = customClass;
+    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
+    let toolTip = disabled ? disabledTitle : title ? title : null;
+    const isEditable = !(isReadOnly || disabled);
+    let {
+      ariaHidden,
+      role = 'radio',
+      tabIndex,
+      ariaChecked = checked,
+      ariaLabel,
+      ariaLabelledby,
+      ariaReadonly = !isEditable ? true : false
+    } = a11y;
+    let {
+      ContainerProps = {},
+      LabelProps = {},
+      secondaryTextProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      dataId: value ? value.toLowerCase() : 'RadioComp',
+      isCover: false,
+      isInline: text ? false : true,
+      alignBox: "row",
+      align: "both",
+      className: `${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${!isEditable ? '' : style.hoverEfffect} ${checked ? style.checked : ''} ${customRadioWrap}`,
+      "data-title": toolTip,
+      onClick: !isReadOnly && !disabled ? this.onChange : '',
+      "aria-checked": ariaChecked,
+      tabindex: !isEditable || ariaHidden ? '-1' : tabIndex || '0',
+      eleRef: this.handleGetRef,
+      role: role,
+      "aria-Hidden": ariaHidden,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-readonly": ariaReadonly
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
+      className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
+            ${!isEditable ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio} ${!isEditable ? `${style.disabled}` : ''} ${secondaryText ? style.withSecondaryText : ''}`,
+      align: secondaryText ? "start" : undefined
+    }, /*#__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 || secondaryText) && /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.labelContainer
+    }, text && /*#__PURE__*/React.createElement(Label, _extends({
+      text: text,
+      palette: labelPalette,
+      size: labelSize,
+      type: "title",
+      clipped: true,
+      dataId: `${text}_label`,
+      variant: variant,
+      title: toolTip ? toolTip : text,
+      customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} ${disabled ? `${style.disabled}` : ''}
+                  ${style[`${palette}Label`]} ${isEditable ? style.pointer : ''} ${isReadOnly ? style.readonly : ''}  ${customLabel}`
+    }, LabelProps)), secondaryText ? /*#__PURE__*/React.createElement(Typography, _extends({
+      $ui_size: "12",
+      $ui_lineHeight: "1.2"
+    }, secondaryTextProps, {
+      $i18n_dataTitle: toolTip ? null : secondaryText,
+      $ui_className: `${style.secondaryText} ${customSecondaryText}`
+    }), secondaryText) : null), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+  }
+
+}
+Radio.defaultProps = defaultProps;
+Radio.propTypes = propTypes;