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

package/es/v1/DropDown/DropDown.js

@@ -0,0 +1,52 @@
+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 function DropDown(props) {
+  let {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(PopOver, props, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
+}
+DropDown.propTypes = DropDown_propTypes;
+export function DropDownTarget(props) {
+  let {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", null, children);
+}
+DropDownTarget.propTypes = DropDownTarget_propTypes;
+export function DropDownContainer(props) {
+  let {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", null, " ", children, " ");
+}
+DropDownContainer.propTypes = DropDownContainer_propTypes;
+export function DropDownItemContainer(props) {
+  let {
+    children,
+    dataId,
+    getRef,
+    onScroll
+  } = props;
+
+  function handleScroll(e) {
+    onScroll && onScroll(e);
+  }
+
+  function getReference(ele) {
+    getRef && getRef(ele);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.listGroup,
+    onScroll: handleScroll,
+    ref: getReference,
+    "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,36 @@
+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 function DropDownHeading(props) {
+  let {
+    text,
+    title = text,
+    children,
+    customClass,
+    palette,
+    htmlId,
+    a11y,
+    dataId,
+    dataSelectorId
+  } = 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;

package/es/v1/DropDown/DropDownItem.js

@@ -0,0 +1,56 @@
+import React, { useRef } 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 function DropDownItem(props) {
+  let {
+    value,
+    active,
+    children,
+    hightlight,
+    dataId,
+    customClass = '',
+    index,
+    getRef,
+    onClick,
+    id,
+    onHover
+  } = props;
+  const eleRef = useRef(null);
+
+  function getReference(ele) {
+    eleRef.current = ele;
+    getRef && getRef(ele, index);
+  }
+
+  function getSelectedElement() {
+    return eleRef.current ? eleRef.current : null;
+  }
+
+  function handleClick(e) {
+    onClick && onClick(id, value, index, e);
+  }
+
+  function handleHover(e) {
+    onHover && onHover(id, value, index, e);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.list} ${customClass} ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''}`,
+    onClick: handleClick,
+    onMouseOver: handleHover,
+    ref: getReference,
+    "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,55 @@
+import React, { useEffect, useRef } 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 function DropDownSearch(props) {
+  let {
+    name,
+    id,
+    maxLength,
+    onKeyDown,
+    onChange,
+    value,
+    onBlur,
+    size,
+    textBoxSize,
+    placeHolder,
+    customClass,
+    getRef
+  } = props;
+  let {
+    searchClass = '',
+    customTextBox = ''
+  } = customClass;
+  const inputRef = useRef(null); // eslint-disable-next-line func-call-spacing
+
+  useEffect(() => {
+    inputRef.current && input.current.focus({
+      preventScroll: true
+    });
+  }, []);
+
+  function getReference(ele) {
+    inputRef.current = ele;
+    getRef && getRef(ele);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.search} ${style[`${size}Search`]} ${searchClass}`
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    id: id,
+    inputRef: getReference,
+    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,12 @@
+import React from 'react';
+import { DropDownSeparator_propTypes } from '../../DropDown/props/propTypes';
+import style from '../../DropDown/DropDownSeparator.module.css';
+export default function DropDownSeparator(props) {
+  let {
+    customClass = ''
+  } = 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'
+//   };
+// }