@zohodesk/components 1.0.0-temp-225-1 → 1.0.0-temp-227

package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap

@@ -0,0 +1,341 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover rowdir"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover rowReverse"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TabWrapper rendering the align prop of - vertical 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover rowdir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover colReverse"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover rowdir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/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/Tab/props/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 export const Tab_propTypes = {
   activeClass: PropTypes.string,
-  align: PropTypes.string,
+  align: PropTypes.oneOf(['vertical', 'horizontal']),
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -101,7 +101,7 @@ export const Tabs_propTypes = {
   targetOffset: PropTypes.object
 };
 export const TabWrapper_propTypes = {
-  align: PropTypes.oneOf(['vertical', 'horizontal']),
+  align: PropTypes.oneOf(['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse']),
   children: PropTypes.node,
   dataId: PropTypes.string,
   defaultTab: PropTypes.string,

package/es/Tab/utils/tabConfigs.js

@@ -0,0 +1,18 @@
+export const TAB_ALIGN_MAPPING = {
+  vertical: 'column',
+  horizontal: 'row',
+  'vertical-reverse': 'column-reverse',
+  'horizontal-reverse': 'row-reverse'
+};
+export const TAB_DIRECTION_MAPPING = {
+  vertical: 'column',
+  horizontal: 'row',
+  'vertical-reverse': 'column',
+  'horizontal-reverse': 'row'
+};
+export const TAB_POPUP_POSITION_MAPPING = {
+  vertical: 'bottomLeft',
+  horizontal: 'rightTop',
+  'vertical-reverse': 'topLeft',
+  'horizontal-reverse': 'leftTop'
+};

package/es/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React, { PureComponent } 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 { getUniqueId } from '../Provider/IdProvider';
-import style from './Tag.module.css';
+import Avatar from "../Avatar/Avatar";
+import { Container } from "../Layout";
+import Button from "../semantic/Button/Button";
+import { getUniqueId } from "../Provider/IdProvider";
+import style from "./Tag.module.css";
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',

package/es/Tag/__tests__/Tag.spec.js

@@ -1,6 +1,13 @@
 import React from 'react';
-import Tag from '../Tag';
-import { render } from "@testing-library/react";
+import { render, cleanup } from "@testing-library/react";
+import { setGlobalId } from "../../Provider/IdProvider";
+import Tag from "../Tag";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+});
 describe('Tag component', () => {
   const size = ['small', 'medium'];
   const palette = ['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink'];

package/es/Tag/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as AvatarPropTypes } from '../../Avatar/props/propTypes.js';
+import { propTypes as AvatarPropTypes } from "../../Avatar/props/propTypes.js";
 import { IconProps as IconPropTypes } from '@zohodesk/icons/es/Icon/props/propTypes';
 export const propTypes = {
   active: PropTypes.bool,

package/es/TextBox/TextBox.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
 
-import style from './TextBox.module.css';
+import style from "./TextBox.module.css";
 export default class TextBox extends React.PureComponent {
   constructor(props) {
     super(props);

package/es/TextBox/__tests__/TextBox.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Textbox from '../Textbox';
+import Textbox from "../Textbox";
 import { render } from "@testing-library/react";
 describe('Textbox component', () => {
   const type = ['text', 'password', 'number'];

package/es/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React 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.module.css';
+import btnStyle from "../semantic/Button/semanticButton.module.css";
+import style from "./TextBoxIcon.module.css";
 /* eslint-disable react/forbid-component-props */
 
 export default class TextBoxIcon extends React.Component {
@@ -109,7 +109,8 @@ export default class TextBoxIcon extends React.Component {
       isScrollPrevent,
       customProps,
       needInputFocusOnWrapperClick,
-      renderRightPlaceholderNode
+      renderRightPlaceholderNode,
+      renderCustomClearComponent
     } = this.props;
     const {
       isActive
@@ -167,7 +168,10 @@ export default class TextBoxIcon extends React.Component {
       className: `${style.iconContainer} ${customTBoxIcon}`
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"
-    }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? /*#__PURE__*/React.createElement(Box, {
+    }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? typeof renderCustomClearComponent == 'function' ? renderCustomClearComponent({
+      clearText,
+      handleClear: this.handleClear
+    }) : /*#__PURE__*/React.createElement(Box, {
       className: `${btnStyle.buttonReset} ${style.icon}`,
       onClick: this.handleClear,
       dataId: `${dataId}_ClearIcon`,

package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TextBoxIcon from '../TextBoxIcon';
+import TextBoxIcon from "../TextBoxIcon";
 import { render } from "@testing-library/react";
 describe('TextBoxIcon component', () => {
   const type = ['text', 'password', 'number'];

package/es/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,
@@ -50,5 +50,6 @@ export const propTypes = { ...TextBox_propTypes,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object
   }),
-  renderRightPlaceholderNode: PropTypes.node
+  renderRightPlaceholderNode: PropTypes.node,
+  renderCustomClearComponent: PropTypes.func
 };

package/es/Textarea/Textarea.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */
 
-import style from './Textarea.module.css';
+import style from "./Textarea.module.css";
 export default class Textarea extends React.Component {
   constructor(props) {
     super(props);

package/es/Textarea/__tests__/Textarea.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Textarea from '../Textarea';
+import Textarea from "../Textarea";
 import { render } from "@testing-library/react";
 describe('Textarea component', () => {
   const size = ['xsmall', 'small', 'xmedium', 'medium', 'large'];

package/es/Tooltip/Tooltip.js

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

package/es/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/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/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,9 +1,9 @@
 import React 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 class VelocityAnimation extends React.Component {
   constructor(props) {
     super(props);

package/es/VelocityAnimation/VelocityAnimation/__tests__/VelocityAnimation.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import VelocityAnimation from '../VelocityAnimation';
+import VelocityAnimation from "../VelocityAnimation";
 describe('VelocityAnimation', () => {
   test('rendering the defult props', () => {
     const {