@zohodesk/dot 1.0.0 → 1.2.0

package/es/v1/Link/Link.js

@@ -0,0 +1,95 @@
+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); }
+
+import React, { useContext, useRef } from 'react';
+import { defaultProps } from '../../Link/props/defaultProps';
+import { propTypes } from '../../Link/props/propTypes';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+import LinkContext from '../../Link/LinkContext';
+import style from '../../Link/Link.module.css';
+export default function Link(props) {
+  let {
+    children,
+    href,
+    target,
+    urlData,
+    urlName,
+    className,
+    title,
+    download,
+    rel,
+    dataId,
+    customProps,
+    ariaLabel,
+    hasReload,
+    onClick
+  } = props;
+  const {
+    options
+  } = useContext(LinkContext);
+  const {
+    isLink,
+    constructURL,
+    onCallBack
+  } = options;
+  let urlOutput = href ? href : constructURL(urlName, urlData);
+  let option = useRef({});
+
+  if (download) {
+    option.current.download = true;
+  }
+
+  let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
+  let others = Object.keys(props).filter(key => ignoreKeys.indexOf(key) == -1).reduce((res, key) => {
+    res[key] = props[key];
+    return res;
+  }, {});
+
+  function callBack(e) {
+    if (e && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
+      cancelBubblingEffect(e);
+      return;
+    }
+
+    onClick && onClick(e);
+
+    if (!hasReload && target != '_blank') {
+      e && e.preventDefault();
+    }
+
+    cancelBubblingEffect(e);
+    !onClick && onCallBack && onCallBack(e);
+  }
+
+  function addHttp(url) {
+    /* eslint-disable */
+    if (!/^(f|ht)tps?:\/\//i.test(url)) {
+      url = 'http://' + url;
+    }
+    /* eslint-enable */
+
+
+    return url;
+  } //urlOutput = addHttp(urlOutput);
+
+
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: isLink && urlOutput ? urlOutput : 'javascript:void(0);',
+    target: target,
+    "data-title": title,
+    className: `${style.container}  ${className ? className : ''}`
+  }, option.current, {
+    rel: rel,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, others, {
+    onClick: callBack
+  }, customProps, {
+    "aria-label": ariaLabel
+  }), children);
+}
+Link.defaultProps = defaultProps;
+Link.propTypes = propTypes; // if (__DOCS__) {
+//   Link.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/MessageBanner/MessageBanner.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { defaultProps } from '../../MessageBanner/props/defaultProps';
+import { propTypes } from '../../MessageBanner/props/propTypes';
+import Link from '../../Link/Link';
+import { Icon } from '@zohodesk/icons';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from '../../MessageBanner/MessageBanner.module.css';
+export default function MessageBanner(props) {
+  let {
+    type,
+    message,
+    onClose,
+    href,
+    onClick,
+    urlText,
+    palette,
+    customClass,
+    dataId,
+    dataSelectorId
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: `${style[`type_${type}`]} ${style[`palette_${palette}`]} ${customClass}`,
+    alignBox: "row",
+    isCover: false,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.content,
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "both"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.message,
+    adjust: true,
+    shrink: true,
+    "data-title": message
+  }, message), href && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
+    href: href,
+    onClick: onClick,
+    className: style.link,
+    target: "_blank"
+  }, urlText)))), onClose ? /*#__PURE__*/React.createElement(Box, {
+    className: style.close,
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-closee",
+    size: "35"
+  }))) : null);
+}
+MessageBanner.defaultProps = defaultProps;
+MessageBanner.propTypes = propTypes; // if (__DOCS__) {
+//   MessageBanner.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/TagWithIcon/TagWithIcon.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { defaultProps } from '../../TagWithIcon/props/defaultProps';
+import { propTypes } from '../../TagWithIcon/props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Icon from '@zohodesk/icons/es/Icon';
+import style from '../../TagWithIcon/TagWithIcon.module.css';
+export default function TagWithIcon(props) {
+  const {
+    text,
+    iconName,
+    iconSize,
+    palette,
+    iconClass,
+    isBold,
+    size,
+    dataId,
+    className,
+    title
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    isInline: true,
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: `${style.wrapper} ${style[palette]} ${style[size]} ${className}`,
+    dataId: dataId,
+    title: title
+  }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: `${text ? style.iconSpace : ''} ${iconClass} `
+  }) : null, text ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "data-title": text,
+    className: `${style.text} ${style[size]}_text ${isBold ? style.bold : ''}`
+  }, text) : null);
+}
+TagWithIcon.propTypes = propTypes;
+TagWithIcon.defaultProps = defaultProps;

package/es/v1/alert/AlertHeader/AlertHeader.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { defaultProps } from '../../../alert/AlertHeader/props/defaultProps';
+import { propTypes } from '../../../alert/AlertHeader/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Title from '../../../lookup/header/Title/Title';
+import Close from '../../../lookup/header/Close/Close';
+import style from '../../../alert/AlertHeader/AlertHeader.module.css';
+export default function AlertHeader(props) {
+  let {
+    title,
+    palette,
+    needIcon,
+    iconType,
+    onClose,
+    iconName,
+    iconSize,
+    closeTitle,
+    children,
+    breakChildren,
+    dataId,
+    iconClass
+  } = props;
+  let iconObj = {
+    delete: 'ZD-socialDelete',
+    alert: 'ZD-exclamationThincircle',
+    remoteAssist: 'ZD-taskDemo',
+    splitTicket: 'ZD-splitNew',
+    update: 'ZD-update'
+  };
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: `${style.container} ${style[palette]}`,
+    isCover: false,
+    wrap: "wrap"
+  }, needIcon ? /*#__PURE__*/React.createElement("div", {
+    className: style.iconContainer
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: iconSize,
+    name: iconName ? iconName : iconObj[iconType] ? iconObj[iconType] : iconName,
+    iconClass: `${style.iconStyle} ${iconObj[iconType] && !iconSize ? style[`icon_${iconType}`] : ''} ${style[`text_${palette}`]} ${iconClass}`
+  })) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    wrap: breakChildren ? 'wrap' : null
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.title,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Title, {
+    text: title,
+    palette: palette
+  })), children ? /*#__PURE__*/React.createElement(Box, {
+    adjust: true,
+    flexible: true
+  }, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Close, {
+    onClose: onClose,
+    title: closeTitle,
+    dataId: `${dataId}_close`
+  })) : null);
+}
+AlertHeader.propTypes = propTypes;
+AlertHeader.defaultProps = defaultProps; // if (__DOCS__) {
+//   AlertHeader.docs = {
+//     componentGroup: 'AlertHeader',
+//     folderName: 'Alert'
+//   };
+// }

package/es/v1/alert/AlertLookup/AlertLookup.js

@@ -0,0 +1,104 @@
+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 from 'react';
+import { defaultProps } from '../../../alert/AlertLookup/props/defaultProps';
+import { propTypes } from '../../../alert/AlertLookup/props/propTypes';
+/**** Components ****/
+
+import Button from '@zohodesk/components/lib/Button/Button';
+import AlertHeader from '../AlertHeader/AlertHeader';
+import Lookup from '../../../lookup/Lookup/Lookup';
+import Section from '../../../lookup/Section/Section';
+import FormAction from '../../../FormAction/FormAction';
+/**** CSS ****/
+
+import style from '../../../alert/AlertLookup/AlertLookup.module.css';
+export default function AlertLookup(props) {
+  let {
+    isActive,
+    palette,
+    size,
+    type,
+    title,
+    message,
+    confirmationMessage,
+    submitText,
+    cancelText,
+    onSubmitClick,
+    onCancelClick,
+    children,
+    forwardRef,
+    onClose,
+    headerChildren,
+    wrapHeader,
+    sectionClassName,
+    dataId,
+    onLookupClick,
+    customClass,
+    needIcon,
+    iconName,
+    iconClass,
+    iconSize,
+    customProps,
+    isHtmlContent,
+    onEsc
+  } = props;
+  const {
+    LookupProps = {},
+    AlertHeaderProps = {},
+    PrimaryButtonProps = {},
+    SecondaryButtonProps = {}
+  } = customProps;
+  return /*#__PURE__*/React.createElement(Lookup, _extends({
+    needFocusScope: true,
+    onClose: onEsc == 'close' ? onClose : onCancelClick,
+    isActive: isActive,
+    size: size,
+    dataId: dataId,
+    forwardRef: forwardRef,
+    onClick: onLookupClick,
+    customClass: customClass
+  }, LookupProps), /*#__PURE__*/React.createElement(AlertHeader, _extends({
+    title: title,
+    palette: palette,
+    iconType: type,
+    needIcon: Boolean(type) || needIcon,
+    onClose: onClose,
+    breakChildren: wrapHeader,
+    iconName: iconName,
+    iconClass: iconClass,
+    iconSize: iconSize
+  }, AlertHeaderProps), headerChildren ? headerChildren() : null), /*#__PURE__*/React.createElement(Section, {
+    alignBox: "row",
+    className: style.section
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${style.innerSection} ${sectionClassName}`
+  }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }) : /*#__PURE__*/React.createElement("div", null, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
+    className: style.text
+  }, confirmationMessage))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(FormAction, {
+    size: "small",
+    paddingLeftSize: "xsmall"
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    text: submitText,
+    dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
+    onClick: onSubmitClick,
+    palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled'
+  }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+    dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
+    text: cancelText,
+    onClick: onCancelClick,
+    palette: "secondary"
+  }, SecondaryButtonProps))) : null));
+}
+AlertLookup.propTypes = propTypes;
+AlertLookup.defaultProps = defaultProps; // if (__DOCS__) {
+//   AlertLookup.docs = {
+//     componentGroup: 'AlertLookup',
+//     folderName: 'Alert'
+//   };
+// }

package/es/v1/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { defaultProps } from '../../../emptystate/CommonEmptyState/props/defaultProps';
+import { propTypes } from '../../../emptystate/CommonEmptyState/props/propTypes';
+import Link from '../../Link/Link';
+import style from '../../../emptystate/CommonEmptyState/CommonEmptyState.module.css';
+export default function CommonEmptyState(props) {
+  let {
+    title,
+    description,
+    linkDescription,
+    linkUrl,
+    linkText,
+    linkTarget,
+    onUrlClick,
+    getEmptyState,
+    className,
+    dataId,
+    isFluid,
+    children,
+    size,
+    palette,
+    customClass
+  } = props;
+  let {
+    titleClass = '',
+    descriptionClass = ''
+  } = customClass;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${style[size]} ${className} ${!isFluid ? style.fluid : ''} ${style[palette]}`,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/React.createElement("div", {
+    className: `${style.title} ${titleClass}`
+  }, title) : null, description ? /*#__PURE__*/React.createElement("div", {
+    className: style.linkWrapper
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${style.desc} ${descriptionClass}`
+  }, description), !linkDescription && linkText ? /*#__PURE__*/React.createElement(Link, {
+    href: linkUrl,
+    className: style.link,
+    target: linkTarget,
+    onClick: onUrlClick,
+    dataId: `${dataId}_primarylink`
+  }, linkText) : null) : null, linkDescription || !description && !linkDescription && linkText ? /*#__PURE__*/React.createElement("div", {
+    className: style.linkDescWrapper
+  }, linkDescription ? /*#__PURE__*/React.createElement("span", {
+    className: `${style.linkDesc}`
+  }, linkDescription) : null, linkText ? /*#__PURE__*/React.createElement(Link, {
+    href: linkUrl,
+    className: style.link,
+    target: linkTarget,
+    onClick: onUrlClick,
+    dataId: `${dataId}_secondarylink`
+  }, linkText) : null) : null, children ? /*#__PURE__*/React.createElement("div", {
+    className: style.children
+  }, children) : null);
+}
+CommonEmptyState.propTypes = propTypes;
+CommonEmptyState.defaultProps = defaultProps; // if (__DOCS__) {
+//   CommonEmptyState.docs = {
+//     componentGroup: 'EmptyState'
+//   };
+// }

package/es/v1/emptystate/EditionPage/EditionPage.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { defaultProps } from '../../../emptystate/EditionPage/props/defaultProps';
+import { propTypes } from '../../../emptystate/EditionPage/props/propTypes';
+import EmptyCrmPotential from '@zohodesk/svg/lib/v1/emptystate/version3/EmptyCrmPotential';
+import style from '../../../emptystate/EditionPage/EditionPage.css';
+export default function EditionPage(props) {
+  let {
+    title,
+    subtitle,
+    information,
+    dataId,
+    footerText,
+    onButtonClick,
+    butttonText,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.editionContainer,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.svg
+  }, /*#__PURE__*/React.createElement(EmptyCrmPotential, null)), /*#__PURE__*/React.createElement("div", {
+    className: style.header
+  }, title), subtitle ? /*#__PURE__*/React.createElement("div", {
+    className: style.description
+  }, subtitle) : null, /*#__PURE__*/React.createElement("div", {
+    className: style.description
+  }, information ? `${information} ` : null, butttonText ? /*#__PURE__*/React.createElement("span", {
+    className: style.button,
+    "data-id": `${dataId}_button`,
+    "data-test-id": `${dataId}_button`,
+    onClick: onButtonClick
+  }, butttonText) : null), children ? /*#__PURE__*/React.createElement("div", {
+    className: style.content
+  }, children) : null, footerText ? /*#__PURE__*/React.createElement("div", {
+    "data-id": `${dataId}_footerText`,
+    "data-test-id": `${dataId}_footerText`,
+    className: style.footer
+  }, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: footerText
+    }
+  })) : null);
+}
+EditionPage.defaultProps = defaultProps;
+EditionPage.propTypes = propTypes; // if (__DOCS__) {
+//   EditionPage.docs = {
+//     componentGroup: 'EmptyState'
+//   };
+// }

package/es/v1/lookup/Lookup/Lookup.js

@@ -0,0 +1,105 @@
+/*** Libraries ***/
+import React, { useRef, useCallback } from 'react';
+import { defaultProps } from '../../../lookup/Lookup/props/defaultProps';
+import { propTypes } from '../../../lookup/Lookup/props/propTypes';
+/*** Components ***/
+
+import FreezeLayer from '../../../FreezeLayer/FreezeLayer';
+import { Container } from '@zohodesk/components/lib/Layout';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
+/*** CSS ***/
+
+import style from '../../../lookup/Lookup/Lookup.module.css';
+/*eslint-disable react/forbid-component-props */
+
+export default function Lookup(props) {
+  const {
+    isActive,
+    children,
+    size,
+    dataId,
+    forwardRef,
+    onClick,
+    customClass,
+    htmlId,
+    a11y,
+    childAnimationName,
+    onClose,
+    needFocusScope,
+    customProps,
+    onKeyDown
+  } = props;
+  const {
+    role = 'dialog',
+    ariaLabelledby,
+    ariaDescribedby,
+    ariaModal = isActive ? true : undefined
+  } = a11y;
+  const {
+    focusScopeProps = {}
+  } = customProps;
+  const {
+    autoFocus = true,
+    restoreFocus = true,
+    needArrowLoop = false,
+    needTabLoop = true,
+    enableEnterAction = false
+  } = focusScopeProps;
+  const createRef = useRef(null);
+  const handleKeyDown = useCallback(e => {
+    onKeyDown && onKeyDown(e);
+  }, [onKeyDown]);
+  useEffect(() => {
+    if (isActive) {
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isActive]);
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+  const content = /*#__PURE__*/React.createElement("div", {
+    ref: createRef,
+    tabIndex: "-1",
+    "data-a11y-need-focus-style": "false",
+    role: role,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-modal": ariaModal,
+    id: htmlId,
+    className: `${style.box} ${style[`${size}Size`]}`,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, children);
+  return /*#__PURE__*/React.createElement(FreezeLayer, {
+    align: "horizontal",
+    animationName: "fade",
+    childAnimationName: childAnimationName,
+    isActive: isActive,
+    palette: "snow",
+    forwardRef: forwardRef,
+    onClick: onClick,
+    customClass: customClass
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: style.container,
+    dataId: "fldValue"
+  }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+    needTabLoop: needTabLoop,
+    needArrowLoop: needArrowLoop,
+    elementRef: createRef,
+    autoFocus: autoFocus,
+    restoreFocus: restoreFocus,
+    onClose: onClose,
+    enableEnterAction: enableEnterAction
+  }, content) : content));
+}
+Lookup.propTypes = propTypes;
+Lookup.defaultProps = defaultProps; // if (__DOCS__) {
+//   Lookup.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

package/es/v1/setup/table/Table/Table.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/Table/props/defaultProps';
+import { propTypes } from '../../../../setup/table/Table/props/propTypes';
+import { Container } from '@zohodesk/components/lib/Layout';
+export default function Table(props) {
+  let {
+    children,
+    dataId,
+    customClass
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    dataId: dataId,
+    className: customClass
+  }, children);
+}
+Table.propTypes = propTypes;
+Table.defaultProps = defaultProps; // if (__DOCS__) {
+//   Table.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/setup/table/TableBody/TableBody.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/TableBody/props/defaultProps';
+import { propTypes } from '../../../../setup/table/TableBody/props/propTypes';
+import { Box } from '@zohodesk/components/lib/Layout';
+export default function TableBody(props) {
+  let {
+    children,
+    eleRef,
+    onScroll = () => {},
+    customClass
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    eleRef: eleRef,
+    flexible: true,
+    scroll: "vertical",
+    onScroll: onScroll,
+    className: customClass
+  }, children);
+}
+TableBody.propTypes = propTypes;
+TableBody.defaultProps = defaultProps; // if (__DOCS__) {
+//   TableBody.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/setup/table/TableData/TableData.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/TableData/props/defaultProps';
+import { propTypes } from '../../../../setup/table/TableData/props/propTypes';
+import { Box } from '@zohodesk/components/lib/Layout';
+import style from '../../../../setup/table/TableData/SetupTableData.module.css';
+export default function TableData(props) {
+  let {
+    children,
+    flexible,
+    shrink,
+    align,
+    type,
+    dataId,
+    customClass,
+    eleRef
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    dataId: dataId,
+    flexible: flexible,
+    shrink: shrink,
+    eleRef: eleRef,
+    className: `${customClass} ${style.container} ${type ? style[type] : ''} ${align ? style[align] ? style[align] : '' : ''}`
+  }, children);
+}
+TableData.defaultProps = defaultProps;
+TableData.propTypes = propTypes; // if (__DOCS__) {
+//   TableData.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }