@zohodesk/components 1.2.4 → 1.2.6

package/es/v1/DropDown/DropDown.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from '../../DropDown/props/propTypes';
+import { DropDownItemContainer_defaultProps } from '../../DropDown/props/defaultProps';
+import style from '../../DropDown/DropDown.module.css';
+import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
+export default class DropDown extends React.Component {
+  render() {
+    let {
+      children
+    } = this.props;
+    return /*#__PURE__*/React.createElement(PopOver, this.props, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
+  }
+
+}
+DropDown.propTypes = DropDown_propTypes;
+export class DropDownTarget extends React.Component {
+  render() {
+    let {
+      children
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", null, children);
+  }
+
+}
+DropDownTarget.propTypes = DropDownTarget_propTypes;
+export class DropDownContainer extends React.Component {
+  render() {
+    let {
+      children
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", null, " ", children, " ");
+  }
+
+}
+DropDownContainer.propTypes = DropDownContainer_propTypes;
+export class DropDownItemContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.getRef = this.getRef.bind(this);
+    this.onScroll = this.onScroll.bind(this);
+  }
+
+  onScroll(e) {
+    let {
+      onScroll
+    } = this.props;
+    onScroll && onScroll(e);
+  }
+
+  getRef(ele) {
+    let {
+      getRef
+    } = this.props;
+    getRef && getRef(ele);
+  }
+
+  render() {
+    let {
+      children,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.listGroup,
+      onScroll: this.onScroll,
+      ref: this.getRef,
+      "data-id": dataId,
+      "data-test-id": dataId
+    }, children);
+  }
+
+}
+DropDownItemContainer.propTypes = DropDownItemContainer_propTypes;
+DropDownItemContainer.defaultProps = DropDownItemContainer_defaultProps;

package/es/v1/DropDown/DropDownHeading.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { DropDownHeading_propTypes } from '../../DropDown/props/propTypes';
+import { DropDownHeading_defaultProps } from '../../DropDown/props/defaultProps';
+import style from '../../DropDown/DropDownHeading.module.css';
+export default class DropDownHeading extends React.Component {
+  render() {
+    let {
+      text,
+      title = text,
+      children,
+      customClass,
+      palette,
+      htmlId,
+      a11y,
+      dataId,
+      dataSelectorId
+    } = this.props;
+    let {
+      role,
+      ariaLabelledby,
+      ariaLabel
+    } = a11y;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style[palette]} ${customClass}`,
+      "data-title": title,
+      role: role,
+      "aria-labelledby": ariaLabelledby,
+      "aria-label": ariaLabel,
+      id: htmlId,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      "data-selector-id": dataSelectorId // tabindex='0'
+
+    }, text, children);
+  }
+
+}
+DropDownHeading.propTypes = DropDownHeading_propTypes;
+DropDownHeading.defaultProps = DropDownHeading_defaultProps; // if (__DOCS__) {
+//   DropDownHeading.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/DropDown/DropDownItem.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { DropDownItem_propTypes } from '../../DropDown/props/propTypes';
+import { DropDownItem_defaultProps } from '../../DropDown/props/defaultProps';
+import style from '../../DropDown/DropDownItem.module.css';
+export default class DropDownItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onClick = this.onClick.bind(this);
+    this.getRef = this.getRef.bind(this);
+    this.getSelectedElement = this.getSelectedElement.bind(this);
+    this.onHover = this.onHover.bind(this);
+  }
+
+  getRef(ele) {
+    this.ele = ele;
+    let {
+      index,
+      getRef
+    } = this.props;
+    getRef && getRef(ele, index);
+  }
+
+  getSelectedElement() {
+    return this.ele ? this.ele : null;
+  }
+
+  onClick(e) {
+    let {
+      onClick,
+      id,
+      value,
+      index
+    } = this.props;
+    onClick && onClick(id, value, index, e);
+  }
+
+  onHover(e) {
+    let {
+      onHover,
+      id,
+      value,
+      index
+    } = this.props;
+    onHover && onHover(id, value, index, e);
+  }
+
+  render() {
+    let {
+      value,
+      active,
+      children,
+      hightlight,
+      dataId,
+      customClass = ''
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.list} ${customClass} ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''}`,
+      onClick: this.onClick,
+      onMouseOver: this.onHover,
+      ref: this.getRef,
+      "data-id": dataId,
+      "data-test-id": dataId
+    }, children && children[0] ? /*#__PURE__*/React.createElement("span", {
+      className: style.children
+    }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/React.createElement("span", {
+      className: style.children
+    }, " ", children, " ") : null, value ? /*#__PURE__*/React.createElement("span", {
+      className: style.value
+    }, value) : '', children && children[1] ? /*#__PURE__*/React.createElement("span", {
+      className: style.user
+    }, " ", children[1], " ") : '');
+  }
+
+}
+DropDownItem.propTypes = DropDownItem_propTypes;
+DropDownItem.defaultProps = DropDownItem_defaultProps;

package/es/v1/DropDown/DropDownSearch.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { DropDownSearch_propTypes } from '../../DropDown/props/propTypes';
+import { DropDownSearch_defaultProps } from '../../DropDown/props/defaultProps';
+import TextBox from '../TextBox/TextBox';
+import style from '../../DropDown/DropDownSearch.module.css';
+export default class DropDownSearch extends React.Component {
+  constructor(props) {
+    super(props);
+    this.getRef = this.getRef.bind(this);
+  }
+
+  componentDidMount() {
+    this.input && this.input.focus({
+      preventScroll: true
+    });
+  }
+
+  getRef(ele) {
+    let {
+      getRef
+    } = this.props;
+    this.input = ele;
+    getRef && getRef(ele);
+  }
+
+  render() {
+    let {
+      name,
+      id,
+      maxLength,
+      onKeyDown,
+      onChange,
+      value,
+      onBlur,
+      size,
+      textBoxSize,
+      placeHolder,
+      customClass
+    } = this.props;
+    let {
+      searchClass = '',
+      customTextBox = ''
+    } = customClass;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.search} ${style[`${size}Search`]} ${searchClass}`
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      id: id,
+      inputRef: this.getRef,
+      maxLength: maxLength,
+      name: name,
+      onBlur: onBlur,
+      onChange: onChange,
+      onKeyDown: onKeyDown,
+      size: textBoxSize,
+      value: value,
+      placeHolder: placeHolder,
+      customClass: customTextBox
+    }));
+  }
+
+}
+DropDownSearch.defaultProps = DropDownSearch_defaultProps;
+DropDownSearch.propTypes = DropDownSearch_propTypes;

package/es/v1/DropDown/DropDownSeparator.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DropDownSeparator_propTypes } from '../../DropDown/props/propTypes';
+import style from '../../DropDown/DropDownSeparator.module.css';
+export default class DropDownSeparator extends React.Component {
+  render() {
+    let {
+      customClass = ''
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.separator} ${customClass}`
+    });
+  }
+
+}
+DropDownSeparator.propTypes = DropDownSeparator_propTypes;

package/es/v1/Heading/Heading.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { defaultProps } from '../../Heading/props/defaultProps';
+import { propTypes } from '../../Heading/props/propTypes';
+import style from '../../Heading/Heading.module.css';
+export default function Heading(props) {
+  let {
+    tagName,
+    className,
+    onClick,
+    onDoubleClick,
+    title,
+    dataTitle,
+    dataId,
+    a11y
+  } = props;
+  return /*#__PURE__*/React.createElement(tagName, {
+    className: `${style.reset} ${className}`,
+    onClick,
+    onDoubleClick,
+    'data-title': dataTitle || title,
+    'data-id': dataId,
+    'data-test-id': dataId,
+    ...a11y
+  }, title);
+}
+Heading.propTypes = propTypes;
+Heading.defaultProps = defaultProps; // if (__DOCS__) {
+//   Heading.docs = {
+//     folderName: 'Style Guide',
+//     componentGroup: 'Accessibility'
+//   };
+// }

package/es/v1/Label/Label.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { defaultProps } from '../../Label/props/defaultProps';
+import { propTypes } from '../../Label/props/propTypes';
+import style from '../../Label/Label.module.css';
+import colors from '../../Label/LabelColors.module.css';
+export default function Label(props) {
+  const {
+    text,
+    type,
+    palette,
+    size,
+    clipped,
+    htmlFor,
+    title,
+    onClick,
+    dataId,
+    dataSelectorId,
+    variant,
+    customClass,
+    id,
+    a11y = {}
+  } = props;
+  const {
+    tabIndex
+  } = a11y;
+  return /*#__PURE__*/React.createElement("label", {
+    className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
+          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
+    htmlFor: htmlFor,
+    "data-title": title,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId,
+    onClick: onClick,
+    id: id,
+    tabIndex: tabIndex
+  }, text);
+}
+Label.defaultProps = defaultProps;
+Label.propTypes = propTypes;

package/es/v1/Layout/Box.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { BoxProps as propTypes } from '../../Layout/props/propTypes';
+import { BoxDefaultProps as defaultProps } from '../../Layout/props/defaultProps';
+/* eslint css-modules/no-unused-class: 0 */
+
+import { createProps, getClass, setProps } from '../../Layout/utils';
+import style from '../../Layout/Layout.module.css';
+/* eslint-disable  react/no-unused-prop-types*/
+
+function getBoxClassNames(props) {
+  const {
+    hidden,
+    className,
+    flexible,
+    adjust,
+    isFirst,
+    isLast,
+    shrink,
+    column,
+    align,
+    scroll,
+    preventParentScroll
+  } = props;
+  const modificators = [className];
+
+  if (flexible && !adjust) {
+    modificators.push(getClass(style, 'grow'));
+    modificators.push(getClass(style, 'basis'));
+  } else if (flexible && adjust) {
+    modificators.push(getClass(style, 'grow'));
+  }
+
+  if (isFirst) {
+    modificators.push(getClass(style, 'first'));
+  }
+
+  if (isLast) {
+    modificators.push(getClass(style, 'last'));
+  }
+
+  if (adjust) {
+    modificators.push(getClass(style, 'basisAuto'));
+  }
+
+  if (shrink) {
+    modificators.push(getClass(style, 'shrinkOn'));
+  } else {
+    modificators.push(getClass(style, 'shrinkOff'));
+  }
+
+  if (hidden) {
+    hidden.forEach(key => {
+      modificators.push(getClass(style, `hidden-screen-${key}`));
+    });
+  }
+
+  if (column) {
+    modificators.push(getClass(style, `col-${column}`));
+  }
+
+  if (align) {
+    let alignClassMapping = {
+      start: 'selfStart',
+      end: 'selfEnd',
+      center: 'selfCenter'
+    };
+    let alignClass = alignClassMapping[align];
+    modificators.push(getClass(style, alignClass));
+  }
+
+  if (scroll) {
+    let scrollClassMapping = {
+      horizontal: 'scrollx',
+      vertical: 'scrolly',
+      both: 'scrollboth',
+      none: 'scrollnone'
+    };
+    let scrollClass = scrollClassMapping[scroll];
+    modificators.push(getClass(style, scrollClass));
+  }
+
+  if (preventParentScroll) {
+    let ParentScrollClassMapping = {
+      horizontal: 'preventScrollBubbleX',
+      vertical: 'preventScrollBubbleY',
+      both: 'preventScrollBubbleBoth'
+    };
+    let parentScrollClass = ParentScrollClassMapping[preventParentScroll];
+    modificators.push(getClass(style, parentScrollClass));
+  }
+
+  return modificators;
+}
+
+function getBoxProps(props) {
+  return createProps(propTypes, props, getBoxClassNames(props));
+}
+
+export default function Box(props) {
+  let {
+    tagName
+  } = props;
+  let componentProps = setProps({ ...getBoxProps(props)
+  }, props, {
+    isScrollAttribute: 'data-scroll',
+    eleRef: 'ref',
+    dataId: 'data-id',
+    testId: 'data-test-id',
+    tourId: 'data-tour',
+    dataSelectorId: 'data-selector-id'
+  });
+  return /*#__PURE__*/React.createElement(tagName, componentProps);
+}
+Box.propTypes = propTypes;
+Box.defaultProps = defaultProps;

package/es/v1/Layout/Container.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import { ContainerProps as propTypes } from '../../Layout/props/propTypes';
+import { ContainerDefaultProps as defaultProps } from '../../Layout/props/defaultProps';
+/* eslint css-modules/no-unused-class: 0 */
+
+import { createProps, getClass, setProps } from '../../Layout/utils';
+import style from '../../Layout/Layout.module.css';
+/* eslint-disable  react/no-unused-prop-types*/
+
+function getContainerClassNames(props) {
+  const {
+    hidden,
+    className,
+    isInline,
+    isCover,
+    alignBox,
+    alignContent,
+    wrap,
+    align,
+    scroll,
+    preventParentScroll
+  } = props;
+  const modificators = [className];
+
+  if (hidden) {
+    hidden.forEach(key => {
+      modificators.push(getClass(style, `hidden-screen-${key}`));
+    });
+  }
+
+  if (isInline) {
+    modificators.push(getClass(style, 'inflex'));
+  } else {
+    modificators.push(getClass(style, 'flex'));
+  }
+
+  if (isCover) {
+    modificators.push(getClass(style, 'cover'));
+  }
+
+  let alignBoxClassMapping = {
+    row: 'rowdir',
+    column: 'coldir',
+    'row-reverse': 'rowReverse',
+    'column-reverse': 'colReverse'
+  };
+  let alignClass = alignBoxClassMapping[alignBox];
+  modificators.push(getClass(style, alignClass));
+
+  if (alignContent) {
+    let alignContentClassMapping = {
+      start: 'alignStart',
+      end: 'alignEnd',
+      center: 'alignCenter',
+      around: 'alignAround',
+      between: 'alignBetween'
+    };
+    let alignContentClass = alignContentClassMapping[alignContent];
+    modificators.push(getClass(style, alignContentClass));
+  }
+
+  if (wrap) {
+    let wrapClassMapping = {
+      wrap: 'wrap',
+      'wrap-reverse': 'wrapReverse'
+    };
+    let wrapClass = wrapClassMapping[wrap];
+    modificators.push(getClass(style, wrapClass));
+  }
+
+  if (align) {
+    let alignClassMapping = {
+      horizontal: 'hCenter',
+      vertical: 'vCenter',
+      both: 'both',
+      between: 'between',
+      around: 'around',
+      right: 'right',
+      left: 'left',
+      top: 'top',
+      bottom: 'bottom',
+      baseline: 'baseline'
+    };
+    let alignClass = alignClassMapping[align];
+    modificators.push(getClass(style, alignClass));
+  }
+
+  if (scroll) {
+    let scrollClassMapping = {
+      horizontal: 'scrollx',
+      vertical: 'scrolly',
+      both: 'scrollboth',
+      none: 'scrollnone'
+    };
+    let scrollClass = scrollClassMapping[scroll];
+    modificators.push(getClass(style, scrollClass));
+  }
+
+  if (preventParentScroll) {
+    let ParentScrollClassMapping = {
+      horizontal: 'preventScrollBubbleX',
+      vertical: 'preventScrollBubbleY',
+      both: 'preventScrollBubbleBoth'
+    };
+    let parentScrollClass = ParentScrollClassMapping[preventParentScroll];
+    modificators.push(getClass(style, parentScrollClass));
+  }
+
+  return modificators;
+}
+
+function getContainerProps(props) {
+  return createProps(propTypes, props, getContainerClassNames(props));
+}
+
+export default function Container(props) {
+  let {
+    tagName
+  } = props;
+  let componentProps = setProps({ ...getContainerProps(props)
+  }, props, {
+    isScrollAttribute: 'data-scroll',
+    eleRef: 'ref',
+    dataId: 'data-id',
+    testId: 'data-test-id',
+    tourId: 'data-tour',
+    dataSelectorId: 'data-selector-id'
+  });
+  return /*#__PURE__*/React.createElement(tagName, componentProps);
+}
+Container.propTypes = propTypes;
+Container.defaultProps = defaultProps;

package/es/v1/Layout/index.js

@@ -0,0 +1,2 @@
+export { default as Container } from './Container';
+export { default as Box } from './Box';

package/es/v1/ListItem/ListContainer.js

@@ -0,0 +1,102 @@
+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); }
+
+/**** Libraries ****/
+import React, { useCallback } from 'react';
+import { Container } from '../Layout';
+import CssProvider from '../../Provider/CssProvider';
+import style from '../../ListItem/ListItem.module.css';
+import { ListContainerDefaultProps } from '../../ListItem/props/defaultProps';
+import { ListContainer_Props } from '../../ListItem/props/propTypes';
+import { useResponsiveReceiver } from '../Responsive/CustomResponsive';
+
+const ListContainer = props => {
+  const {
+    size,
+    active,
+    highlight,
+    autoHover,
+    palette,
+    title,
+    disableTitle,
+    needTick,
+    isLink,
+    href,
+    target,
+    needBorder,
+    isDisabled,
+    children,
+    dataId,
+    dataSelectorId,
+    a11y,
+    customClass,
+    customProps,
+    onClick,
+    onMouseEnter,
+    onMouseOver,
+    eleRef
+  } = props;
+  const responsiveFunc = useCallback(_ref => {
+    let {
+      mediaQueryOR,
+      isTouchDevice
+    } = _ref;
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }]),
+      isTouchDevice: isTouchDevice
+    };
+  }, []);
+  const {
+    mobileToTab,
+    isTouchDevice
+  } = useResponsiveReceiver('Helmet', responsiveFunc);
+  const {
+    role,
+    ariaSelected,
+    ariaLabel,
+    insetFocus = true
+  } = a11y;
+  const options = {};
+
+  if (isLink) {
+    options.href = href;
+    options.target = `_${target}`;
+  }
+
+  if (active) {
+    options['data-selected'] = active;
+  }
+
+  if (!isDisabled && !isLink) {
+    options.tabindex = '0';
+  }
+
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    role: role,
+    "data-a11y-inset-focus": insetFocus,
+    "aria-selected": ariaSelected,
+    "aria-label": ariaLabel,
+    isCover: false,
+    align: "vertical",
+    alignBox: "row",
+    className: `${style.list} ${style[size]} ${mobileToTab && isTouchDevice ? style.responsiveHeight : ''} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId,
+    onClick: !isDisabled && onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseOver: onMouseOver,
+    eleRef: eleRef,
+    tagName: isLink ? 'a' : 'li',
+    "data-title": isDisabled ? disableTitle : title
+  }, options, customProps), children);
+};
+
+ListContainer.defaultProps = ListContainerDefaultProps;
+ListContainer.propTypes = ListContainer_Props;
+export default ListContainer; // if (__DOCS__) {
+//   ListContainer.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }