@zohodesk/components 1.0.0-temp-195 → 1.0.0-temp-196

package/es/v1/Select/SelectWithIcon.js

@@ -1,25 +1,25 @@
 import React, { Component } from 'react';
-import { SelectWithIcon_defaultProps } from "./props/defaultProps";
-import { SelectWithIcon_propTypes } from "./props/propTypes";
+import { SelectWithIcon_defaultProps } from './props/defaultProps';
+import { SelectWithIcon_propTypes } from './props/propTypes';
 /**** Components ****/
 
-import Popup from "../Popup/Popup";
-import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
+import Popup from '../Popup/Popup';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Icon } from '@zohodesk/icons';
-import ListItemWithIcon from "../ListItem/ListItemWithIcon";
-import Card, { CardHeader, CardContent } from "../Card/Card";
-import EmptyState from "../MultiSelect/EmptyState";
-import { Container, Box } from "../Layout";
-import { getUniqueId } from "../../Provider/IdProvider";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
+import ListItemWithIcon from '../ListItem/ListItemWithIcon';
+import Card, { CardHeader, CardContent } from '../Card/Card';
+import EmptyState from '../MultiSelect/EmptyState';
+import { Container, Box } from '../Layout';
+import { getUniqueId } from '../../Provider/IdProvider';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
 
-import { scrollTo, findScrollEnd } from "../../utils/Common.js";
+import { scrollTo, findScrollEnd } from '../../utils/Common.js';
 /**** CSS ****/
 
-import style from "../../Select/Select.module.css";
+import style from '../../Select/Select.module.css';
 
 class SelectWithIcon extends Component {
   constructor(props) {

package/es/v1/Select/index.js

@@ -1,4 +1,4 @@
-export { default as Select } from "./Select";
-export { default as GroupSelect } from "./GroupSelect";
-export { default as SelectWithAvatar } from "./SelectWithAvatar";
-export { default as SelectWithIcon } from "./SelectWithIcon";
+export { default as Select } from './Select';
+export { default as GroupSelect } from './GroupSelect';
+export { default as SelectWithAvatar } from './SelectWithAvatar';
+export { default as SelectWithIcon } from './SelectWithIcon';

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

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from "../../../Provider/Config";
+import { getLibraryConfig } from '../../../Provider/Config';
 export const Select_defaultProps = {
   animationStyle: 'bounce',
   autoComplete: getLibraryConfig('autoComplete'),
@@ -59,6 +59,7 @@ export const GroupSelect_defaultProps = {
   dataIdDownIcon: 'downIcon',
   dataIdLoading: 'loading',
   dataIdSrchEmptyMsg: 'searchEmptyMessage',
+  dataId: 'GroupSelect',
   isPopupOpenOnEnter: false,
   borderColor: 'default',
   needTick: true,

package/es/v1/Stencils/Stencils.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Stencils/Stencils.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../Stencils/Stencils.module.css';
 
 function Stencils(props) {
   let {

package/es/v1/Switch/Switch.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Label from "../Label/Label";
-import style from "../../Switch/Switch.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '../Layout';
+import Label from '../Label/Label';
+import style from '../../Switch/Switch.module.css';
 
 const Switch = props => {
   let {

package/es/v1/Tab/Tab.js

@@ -1,9 +1,9 @@
 import React, { useMemo, useCallback } from 'react';
-import { Tab_defaultProps } from "./props/defaultProps";
-import { Tab_propTypes } from "./props/propTypes";
-import { Box, Container } from "../Layout";
-import { cs } from "../../utils/Common";
-import styles from "./v1Tab.module.css";
+import { Tab_defaultProps } from './props/defaultProps';
+import { Tab_propTypes } from './props/propTypes';
+import { Box, Container } from '../Layout';
+import { cs } from '../../utils/Common';
+import styles from './v1Tab.module.css';
 const tabTypes = {
   alpha: {
     active: 'alphaActive',

package/es/v1/Tab/TabContent.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TabContent_defaultProps } from "./props/defaultProps";
-import { TabContent_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
-import style from "./v1TabContent.module.css";
+import { TabContent_defaultProps } from './props/defaultProps';
+import { TabContent_propTypes } from './props/propTypes';
+import { Container } from '../Layout';
+import style from './v1TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
 
 const TabContent = _ref => {

package/es/v1/Tab/TabContentWrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TabContentWrapper_defaultProps } from "./props/defaultProps";
-import { TabContentWrapper_propTypes } from "./props/propTypes";
-import { Box } from "../Layout";
+import { TabContentWrapper_defaultProps } from './props/defaultProps';
+import { TabContentWrapper_propTypes } from './props/propTypes';
+import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
 const TabContentWrapper = _ref => {

package/es/v1/Tab/TabWrapper.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import { TabWrapper_defaultProps } from "./props/defaultProps";
-import { TabWrapper_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
+import { TabWrapper_defaultProps } from './props/defaultProps';
+import { TabWrapper_propTypes } from './props/propTypes';
+import { Container } from '../Layout';
 
 function TabWrapper(_ref) {
   let {

package/es/v1/Tab/Tabs.js

@@ -1,18 +1,18 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
-import Tab from "./Tab";
-import { Tabs_defaultProps } from "./props/defaultProps";
-import { Tabs_propTypes } from "./props/propTypes";
-import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from "../../utils/Common";
-import { Box, Container } from "../Layout";
-import ResizeObserver from "../../Responsive/ResizeObserver";
-import ListItem from "../ListItem/ListItem";
+import Tab from './Tab';
+import { Tabs_defaultProps } from './props/defaultProps';
+import { Tabs_propTypes } from './props/propTypes';
+import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from '../../utils/Common';
+import { Box, Container } from '../Layout';
+import ResizeObserver from '../../Responsive/ResizeObserver';
+import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
-import tabsStyle from "./v1Tabs.module.css";
-import Popup from "../Popup/Popup";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
-import btnstyle from "../../semantic/Button/semanticButton.module.css";
+import tabsStyle from './v1Tabs.module.css';
+import Popup from '../Popup/Popup';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
+import btnstyle from '../../semantic/Button/semanticButton.module.css';
 
 const Tabs = props => {
   const [totalDimension, setTotalDimension] = useState(null);

package/es/v1/Tab/index.js

@@ -1,5 +1,5 @@
-export { default as TabWrapper } from "./TabWrapper";
-export { default as TabContentWrapper } from "./TabContentWrapper";
-export { default as TabContent } from "./TabContent";
-export { default as Tabs } from "./Tabs";
-export { default as Tab } from "./Tab";
+export { default as TabWrapper } from './TabWrapper';
+export { default as TabContentWrapper } from './TabContentWrapper';
+export { default as TabContent } from './TabContent';
+export { default as Tabs } from './Tabs';
+export { default as Tab } from './Tab';

package/es/v1/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import Avatar from "../Avatar/Avatar";
-import { Container } from "../Layout";
-import Button from "../semantic/Button/Button";
-import { useUniqueId } from "../../Provider/IdProvider";
-import style from "../../Tag/Tag.module.css";
+import Avatar from '../Avatar/Avatar';
+import { Container } from '../Layout';
+import Button from '../semantic/Button/Button';
+import { useUniqueId } from '../../Provider/IdProvider';
+import style from '../../Tag/Tag.module.css';
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
@@ -41,6 +41,7 @@ function Tag(props) {
     tooltip,
     avatarPalette,
     customClass,
+    customAttributes,
     a11y,
     needEffect,
     isReadOnly,
@@ -90,7 +91,8 @@ function Tag(props) {
     "data-title": tooltip ? tooltip : text,
     tabIndex: disabled ? '-1' : '0',
     "aria-labelledby": getAriaId,
-    "data-selector-id": dataSelectorId
+    "data-selector-id": dataSelectorId,
+    ...customAttributes
   }, hasAvatar ? /*#__PURE__*/React.createElement("div", {
     className: style.avatar
   }, /*#__PURE__*/React.createElement(Avatar, {

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

@@ -7,6 +7,7 @@ export const defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
+  customAttributes: {},
   a11y: {},
   needEffect: true,
   isReadOnly: false,

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

@@ -26,6 +26,7 @@ export const propTypes = {
     customTagIcon: PropTypes.string,
     customAvatar: PropTypes.string
   }),
+  customAttributes: PropTypes.object,
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
   }),

package/es/v1/TextBox/TextBox.js

@@ -1,7 +1,7 @@
 import React, { memo, useRef, useCallback } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../TextBox/TextBox.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../TextBox/TextBox.module.css';
 
 function TextBox(props) {
   let {

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import TextBox from "../TextBox/TextBox";
-import { Container, Box } from "../Layout";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import TextBox from '../TextBox/TextBox';
+import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import btnStyle from "../../semantic/Button/semanticButton.module.css";
-import style from "../../TextBoxIcon/TextBoxIcon.module.css";
+import btnStyle from '../../semantic/Button/semanticButton.module.css';
+import style from '../../TextBoxIcon/TextBoxIcon.module.css';
 /* eslint-disable react/forbid-component-props */
 
 export default function TextBoxIcon(props) {

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as TextBox_propTypes } from "../../TextBox/props/propTypes";
+import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
 export const propTypes = { ...TextBox_propTypes,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,

package/es/v1/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Textarea/Textarea.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../Textarea/Textarea.module.css';
 export default function Textarea(props) {
   let {
     size,

package/es/v1/Tooltip/Tooltip.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getLibraryConfig } from "../../Provider/Config";
-import style from "../../Tooltip/Tooltip.module.css";
-import ResizeObserver from "../../Responsive/ResizeObserver";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getLibraryConfig } from '../../Provider/Config';
+import style from '../../Tooltip/Tooltip.module.css';
+import ResizeObserver from '../../Responsive/ResizeObserver';
 import selectn from 'selectn';
 export default class Tooltip extends React.Component {
   constructor(props) {

package/es/v1/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import defaultStyle from "./css/Typography.module.css";
+import defaultStyle from './css/Typography.module.css';
 
 const Typography = props => {
   const {

package/es/v1/Typography/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping, lineheightMapping } from "../utils";
+import { letterspacingMapping, lineheightMapping } from '../utils';
 export default function cssJSLogic(_ref) {
   let {
     props,

package/es/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from "../../../Provider/LibraryContextInit";
+import LibraryContext from '../../../Provider/LibraryContextInit';
 export default function VelocityAnimation(props) {
   let {
     children,

package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from "../../../Provider/LibraryContextInit";
+import LibraryContext from '../../../Provider/LibraryContextInit';
 
 function clearProps(props) {
   let newProps = Object.assign({}, props);

package/es/v1/semantic/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../../semantic/Button/semanticButton.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../../semantic/Button/semanticButton.module.css';
 export default function Button(props) {
   const {
     value,

package/es/v1/semantic/index.js

@@ -1 +1 @@
-export { default as SemanticButton } from "./Button/Button";
+export { default as SemanticButton } from './Button/Button';

package/lib/AppContainer/__tests__/AppContainer.spec.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _AppContainer = _interopRequireDefault(require("../AppContainer.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('AppContainer', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], {
+      className: "AppcontainerClass"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the needTooltip is false', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], {
+      needTooltip: false
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the tooltipClass', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], {
+      tooltipClass: "customTooltipClass"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the tooltipParentClass', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], {
+      tooltipParentClass: "tooltipParentClass"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom props', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], {
+      customProps: {
+        ExtraProps: {
+          'data-props': true
+        },
+        ContainerProps: {
+          'data-container': true
+        }
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('eleRef prop is a function', function () {
+    var mockEleRef = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], {
+      eleRef: mockEleRef
+    }));
+    expect(mockEleRef).toHaveBeenCalled();
+  });
+  test('rendering the childern as element', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "Children"))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the childern as element in array', function () {
+    var children = [/*#__PURE__*/_react["default"].createElement("div", {
+      key: "child1"
+    }, "Child 1"), /*#__PURE__*/_react["default"].createElement("span", {
+      key: "child2"
+    }, "Child 2")];
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], null, children)),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});