@zohodesk/components 1.6.1 → 1.6.2

package/es/v1/Button/Button.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "../../Button/css/cssJSLogic";
-import { mergeStyle } from '@zohodesk/utils';
-import style from "../../Button/css/Button.module.css";
-/*
-Button text and children props?
-use children for both cases
-toLowerCase check needed?
-*/
-
-export default function Button(props) {
-  let {
-    text,
-    disabled,
-    onClick,
-    status,
-    children,
-    dataId,
-    needAppearance,
-    getRef,
-    title,
-    dataSelectorId,
-    customProps,
-    customStyle,
-    a11y,
-    id
-  } = props;
-  const finalStyle = mergeStyle(style, customStyle);
-  const {
-    buttonClass,
-    loaderParentClass,
-    loaderChildClass
-  } = cssJSLogic({
-    props,
-    style: finalStyle
-  });
-  let statusLower = status.toLowerCase();
-  return /*#__PURE__*/React.createElement("button", {
-    className: buttonClass,
-    "data-id": disabled ? `${dataId}_disabled` : dataId,
-    "data-test-id": disabled ? `${dataId}_disabled` : dataId,
-    disabled: disabled || statusLower === 'loading',
-    onClick: onClick,
-    "data-title": title,
-    type: "button",
-    ref: getRef,
-    "data-selector-id": dataSelectorId,
-    ...customProps,
-    ...a11y,
-    id: id
-  }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
-    className: finalStyle.overlay
-  }, /*#__PURE__*/React.createElement("div", {
-    className: loaderParentClass
-  }, /*#__PURE__*/React.createElement("div", {
-    className: loaderChildClass
-  }))));
-}
-Button.defaultProps = defaultProps;
-Button.propTypes = propTypes; // if (__DOCS__) {
-//   Button.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }

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

@@ -1,18 +0,0 @@
-import { dummyFunction } from "../../../utils/dummyFunction";
-export const defaultProps = {
-  children: null,
-  dataId: 'buttonComp',
-  dataSelectorId: 'button',
-  disabled: false,
-  isBold: true,
-  needAppearance: true,
-  onClick: dummyFunction,
-  palette: 'primary',
-  rounded: false,
-  size: 'medium',
-  status: 'none',
-  text: 'Button',
-  customClass: {},
-  customProps: {},
-  a11y: {}
-};

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

@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  disabled: PropTypes.bool,
-  getRef: PropTypes.func,
-  isBold: PropTypes.bool,
-  needAppearance: PropTypes.bool,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled']),
-  rounded: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
-  status: PropTypes.oneOf(['loading', 'success', 'none']),
-  text: PropTypes.string,
-  title: PropTypes.string,
-  customClass: PropTypes.shape({
-    customButton: PropTypes.string,
-    customStatus: PropTypes.string,
-    customStatusSize: PropTypes.string
-  }),
-  customStyle: PropTypes.object,
-  customProps: PropTypes.object,
-  id: PropTypes.string,
-  a11y: PropTypes.object,
-  shouldStrikeThroughDisabled: PropTypes.bool
-};
-export default propTypes;

package/es/v1/Buttongroup/Buttongroup.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Buttongroup/Buttongroup.module.css";
-export default function Buttongroup(props) {
-  const {
-    children,
-    type,
-    buttonPosition,
-    customClass,
-    dataId,
-    dataSelectorId
-  } = props;
-  const btnGroup = [];
-  children && children.forEach(child => {
-    let btnRight = /*#__PURE__*/React.createElement("span", {
-      className: style[type]
-    }, child);
-    btnGroup.push(btnRight);
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style[`align${buttonPosition}`]
-  }, children));
-}
-Buttongroup.defaultProps = defaultProps;
-Buttongroup.propTypes = propTypes;

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

@@ -1,6 +0,0 @@
-export const defaultProps = {
-  buttonPosition: 'left',
-  children: null,
-  dataId: 'ButtonGroup',
-  dataSelectorId: 'buttonGroup'
-};

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

@@ -1,9 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  buttonPosition: PropTypes.oneOf(['left', 'right', 'center']),
-  children: PropTypes.node,
-  type: PropTypes.string.isRequired,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string
-};

package/es/v1/Card/Card.js

@@ -1,237 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from "./props/propTypes";
-import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from "./props/defaultProps";
-import { Container, Box } from "../Layout";
-import { getLibraryConfig } from "../../Provider/Config";
-import style from "../../Card/Card.module.css";
-/* eslint-disable react/forbid-component-props */
-
-/*
-isscroll header border change use ref
-scroll logic remove from here
-scroll logic move to virtualizer list
-*/
-
-/* performance handling pending in card component moving to ref instead of setState */
-
-export function CardHeader(props) {
-  let {
-    isScroll,
-    children,
-    dataId,
-    dataSelectorId,
-    customClass
-  } = props;
-  const cardHeader = useRef(null);
-
-  function getCardHeaderDom(ele) {
-    cardHeader.current = ele;
-  }
-
-  function setScrollClassName() {
-    if (!cardHeader.current) {
-      return null;
-    }
-  }
-
-  return /*#__PURE__*/React.createElement(Box, {
-    className: `${isScroll ? style.scroll : style.notScroll} ${customClass}`,
-    eleRef: getCardHeaderDom,
-    dataId: dataId,
-    dataSelectorId: dataSelectorId
-  }, children);
-}
-CardHeader.propTypes = CardHeader_propTypes;
-CardHeader.defaultProps = CardHeader_defaultProps;
-export function CardContent(props) {
-  let {
-    onScroll,
-    eleRef,
-    children,
-    scroll,
-    isScrollAttribute,
-    dataId,
-    dataSelectorId,
-    shrink,
-    customClass,
-    preventParentScroll
-  } = props;
-  return /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    onScroll: onScroll,
-    eleRef: eleRef,
-    scroll: scroll,
-    preventParentScroll: preventParentScroll,
-    isScrollAttribute: isScrollAttribute,
-    dataId: dataId,
-    shrink: shrink,
-    className: customClass,
-    dataSelectorId: dataSelectorId
-  }, children);
-}
-CardContent.propTypes = CardContent_propTypes;
-CardContent.defaultProps = CardContent_defaultProps;
-export default function Card(props) {
-  let {
-    onClick,
-    children,
-    isScrollAttribute,
-    dataId,
-    eleRef,
-    customClass = '',
-    htmlId,
-    a11y,
-    from,
-    limit,
-    fetchData,
-    noMoreData,
-    scrollAt,
-    noNeedUpScroll,
-    isPercentageScroll,
-    onScroll
-  } = props;
-  let {
-    role
-  } = a11y;
-  const [isScroll, setScroll] = useState(false);
-  const fromRef = useRef(from);
-  const limitRef = useRef(limit);
-  const to = useRef(from + 3 * limit);
-  const lastScrollTop = useRef(0);
-  const isFetching = useRef(false);
-  const scrollDirection = useRef(null);
-  useEffectCallOnlyAfterState(() => {
-    fromRef.current = from;
-  }, [from]);
-
-  function onCardScroll(e) {
-    let scrollContainerObj = e.currentTarget;
-    let {
-      scrollHeight
-    } = scrollContainerObj;
-    let {
-      scrollTop
-    } = scrollContainerObj;
-    let {
-      offsetHeight
-    } = scrollContainerObj;
-    onScroll && onScroll(e);
-
-    if (scrollTop > lastScrollTop.current) {
-      scrollDirection.current = 'down';
-    } else {
-      scrollDirection.current = 'up';
-    }
-
-    lastScrollTop.current = scrollTop;
-
-    if (fetchData && !isFetching.current) {
-      if (scrollDirection.current === 'down' && !noMoreData) {
-        const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
-        const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
-
-        if (prefetch) {
-          isFetching.current = true;
-          fetchData(fromRef.current + limitRef.current, limitRef.current + to.current, scrollDirection.current).then(() => {
-            to.current = limitRef.current + to.current;
-            isFetching.current = false;
-          }, () => {
-            isFetching.current = false;
-          });
-        }
-      } else {
-        if (0 >= scrollTop - scrollAt && fromRef.current !== 0 && !noNeedUpScroll) {
-          isFetching.current = true;
-          fetchData(fromRef.current - limitRef.current, to.current - limitRef.current, scrollDirection.current).then(() => {
-            to.current = to.current - limitRef.current;
-            isFetching.current = false;
-          }, () => {
-            isFetching.current = false;
-          });
-        }
-      }
-    }
-
-    if (fetchData && !noNeedUpScroll) {
-      if (fromRef.current !== 0 && scrollTop === 0 && !noNeedUpScroll) {
-        scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
-      } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
-        scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
-      }
-    } // if (isScrollShadow) {
-    //   this.onSetScroll();
-    // }
-
-  } // setScroll(isScroll) {
-  //   let { isScroll: stateIsScroll } = this.state;
-  //   if (isScroll && !stateIsScroll) {
-  //     this.setState({ isScroll: true }, () => {
-  //       this.onClearScroll();
-  //     });
-  //   } else if (!isScroll && stateIsScroll) {
-  //     this.setState({ isScroll: false });
-  //   }
-  // }
-
-
-  return /*#__PURE__*/React.createElement(Container, {
-    className: `${customClass}`,
-    isScrollAttribute: isScrollAttribute,
-    onClick: onClick,
-    dataId: dataId,
-    eleRef: eleRef
-  }, React.Children.map(children, child => {
-    if (!child) {
-      return child;
-    }
-
-    if (child.type === CardHeader || props.childTypes && child.type === props.childTypes.cardHeader) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        isScroll
-      });
-    } else if (child.type === CardContent || props.childTypes && child.type === props.childTypes.cardContent) {
-      return /*#__PURE__*/React.createElement(Box, {
-        id: htmlId,
-        role: role,
-        flexible: true,
-        scroll: child.props.scroll,
-        preventParentScroll: child.props.preventParentScroll,
-        onScroll: onCardScroll,
-        eleRef: child.props.eleRef,
-        isScrollAttribute: child.props.isScrollAttribute,
-        dataId: child.props.dataId,
-        shrink: child.props.shrink,
-        className: child.props.customClass,
-        dataSelectorId: child.props.dataSelectorId
-      }, child.props.children);
-    }
-
-    return child;
-  }));
-}
-Card.propTypes = Card_propTypes;
-Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
-//   Card.docs = {
-//     componentGroup: 'Template',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
-
-export function CardFooter(props) {
-  let {
-    children,
-    dataId,
-    customClass,
-    dataSelectorId
-  } = props;
-  return /*#__PURE__*/React.createElement(Box, {
-    className: `${customClass}`,
-    dataId: dataId,
-    dataSelectorId: dataSelectorId
-  }, children);
-}
-CardFooter.propTypes = CardFooter_propTypes;
-CardFooter.defaultProps = CardFooter_defaultProps;

package/es/v1/Card/index.js

@@ -1,4 +0,0 @@
-export { default as Card } from "./Card";
-export { CardHeader } from "./Card";
-export { CardContent } from "./Card";
-export { CardFooter } from "./Card";

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

@@ -1,25 +0,0 @@
-export const Card_defaultProps = {
-  isScrollAttribute: false,
-  // isScrollShadow: true,
-  onClick: null,
-  scrollAt: '10',
-  a11y: {},
-  isPercentageScroll: false
-};
-export const CardHeader_defaultProps = {
-  dataId: 'CardHeader',
-  customClass: '',
-  dataSelectorId: 'cardHeader'
-};
-export const CardContent_defaultProps = {
-  isScrollAttribute: false,
-  scroll: 'vertical',
-  dataId: 'CardContent',
-  customClass: '',
-  dataSelectorId: 'cardContent'
-};
-export const CardFooter_defaultProps = {
-  dataId: 'CardFooter',
-  customClass: '',
-  dataSelectorId: 'cardFooter'
-};

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

@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-export const CardHeader_propTypes = {
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  isScroll: PropTypes.bool,
-  customClass: PropTypes.string,
-  dataSelectorId: PropTypes.string
-};
-export const CardContent_propTypes = {
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  eleRef: PropTypes.func,
-  isScrollAttribute: PropTypes.bool,
-  onScroll: PropTypes.func,
-  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
-  shrink: PropTypes.bool,
-  customClass: PropTypes.string,
-  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both']),
-  dataSelectorId: PropTypes.string
-};
-export const Card_propTypes = {
-  childTypes: PropTypes.object,
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  fetchData: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  from: PropTypes.number,
-  isScrollAttribute: PropTypes.bool,
-  // isScrollShadow: PropTypes.bool,
-  limit: PropTypes.number,
-  noMoreData: PropTypes.bool,
-  noNeedUpScroll: PropTypes.bool,
-  onClick: PropTypes.func,
-  onScroll: PropTypes.func,
-  scrollAt: PropTypes.string,
-  customClass: PropTypes.string,
-  htmlId: PropTypes.string,
-  a11y: PropTypes.shape({
-    role: PropTypes.string
-  }),
-  isPercentageScroll: PropTypes.bool,
-  eleRef: PropTypes.func
-};
-export const CardFooter_propTypes = {
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string
-};

package/es/v1/CheckBox/CheckBox.js

@@ -1,161 +0,0 @@
-import React from 'react';
-import { propTypes } from "./props/propTypes";
-import { defaultProps } from "./props/defaultProps";
-import Label from "../Label/Label";
-import { Container, Box } from "../Layout";
-import CssProvider from "../../Provider/CssProvider";
-import style from "../../CheckBox/CheckBox.module.css";
-
-const CheckBox = props => {
-  let {
-    id,
-    checked,
-    disabled,
-    isReadOnly,
-    disabledTitle,
-    title,
-    palette,
-    text,
-    size,
-    labelPalette,
-    labelSize,
-    isFilled,
-    isClipped,
-    getRef,
-    getContainerRef,
-    variant,
-    active,
-    dataId,
-    name,
-    activeStyle,
-    a11y,
-    customClass,
-    customProps,
-    dataSelectorId
-  } = props;
-
-  function onChange(e) {
-    const {
-      onChange
-    } = props;
-    onChange && onChange(!checked, e);
-  }
-
-  function handleGetContainerRef(ele) {
-    getContainerRef && getContainerRef(ele, id);
-  }
-
-  let {
-    CheckBoxProps = {},
-    LabelProps = {}
-  } = customProps;
-  let {
-    customCheckBox = '',
-    customLabel = '',
-    customCBoxSize = '',
-    customTickSize = ''
-  } = customClass;
-  let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
-  let toolTip = disabled ? disabledTitle : title ? title : null;
-  let {
-    ariaLabel,
-    ariaLabelledby,
-    ariaHidden,
-    role = 'checkbox',
-    ariaChecked = checked
-  } = a11y;
-  return /*#__PURE__*/React.createElement(Container, {
-    dataId: dataId,
-    isCover: false,
-    isInline: text ? false : true,
-    alignBox: "row",
-    align: "vertical",
-    className: `${style.container} ${accessMode} ${isReadOnly || disabled ? '' : `${style[palette]}`}
-      ${checked ? `${style[`checked${palette}`]}` : ''} ${customCheckBox}`,
-    "data-title": toolTip,
-    onClick: isReadOnly || disabled ? null : onChange,
-    tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
-    "aria-checked": ariaChecked,
-    eleRef: handleGetContainerRef,
-    role: role,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    "aria-hidden": ariaHidden,
-    "data-selector-id": dataSelectorId || id,
-    ...CheckBoxProps
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "hidden",
-    id: id,
-    ref: getRef,
-    name: name
-  }), /*#__PURE__*/React.createElement("label", {
-    className: `${style.checkbox} ${accessMode} ${style[size]} ${customCBoxSize}`
-  }, activeStyle == 'tick' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 40 40"
-  }, checked ? /*#__PURE__*/React.createElement("path", {
-    xmlns: "http://www.w3.org/2000/svg",
-    d: "M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44",
-    className: `${style.cbBox}`
-  }) : /*#__PURE__*/React.createElement("rect", {
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "1",
-    y: "1",
-    width: "38",
-    height: "38",
-    rx: "4",
-    className: `${style.cbBox}`
-  })), checked ? /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 44 44",
-    className: `${style.tick} ${style[`${size}tick`]} ${customTickSize} ${disabled ? CssProvider('isDisabled') : ''}`
-  }, /*#__PURE__*/React.createElement("polyline", {
-    points: "12.56 19 19.61 26.06 40.39 5.28",
-    className: `${style.tickPath} ${style.checkedtickPath}`
-  })) : null) : /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 40 40"
-  }, /*#__PURE__*/React.createElement("rect", {
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "1",
-    y: "1",
-    width: "38",
-    height: "38",
-    rx: "4",
-    className: `${style.cbBox}`
-  }), checked ? /*#__PURE__*/React.createElement("line", {
-    xmlns: "http://www.w3.org/2000/svg",
-    className: `${style.linePath} ${style.cbBox}`,
-    x1: "11.47",
-    y1: "20",
-    x2: "28.53",
-    y2: "20"
-  }) : null))), text && /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    className: style.text
-  }, /*#__PURE__*/React.createElement(Label, {
-    text: text,
-    palette: disabled ? 'disable' : labelPalette,
-    id: id,
-    size: labelSize,
-    type: "title",
-    clipped: isClipped,
-    variant: variant,
-    customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
-                          ${checked && active ? `${style[`checked${palette}Label`]}` : ''}
-                          ${accessMode} ${customLabel}`,
-    title: toolTip ? toolTip : text,
-    ...LabelProps
-  })));
-};
-
-export default CheckBox;
-CheckBox.defaultProps = defaultProps;
-CheckBox.propTypes = propTypes; // if (__DOCS__) {
-//   CheckBox.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }

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

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