@zohodesk/components 1.2.55 → 1.2.57

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'),

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,20 +1,20 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
-import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
+import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-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',

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,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/Tooltip.module.css';
+import { whiteSpaceClassMapping } from "../../utils/cssUtils";
+import style from "../../Tooltip/Tooltip.module.css";
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(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/v1_Typography.module.css';
+import defaultStyle from "./css/v1_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/CheckBox/CheckBox.js

@@ -143,7 +143,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
         "aria-hidden": ariaHidden,
-        "data-selector-id": dataSelectorId || id
+        dataSelectorId: dataSelectorId || id
       }, CheckBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {

package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap

@@ -120,7 +120,7 @@ exports[`CheckBox component Should be render ID 1`] = `
     class="container pointer primary 
            flex rowdir vCenter"
     data-id="checkBox"
-    data-selector-id="container"
+    data-selector-id="checkBoxId"
     data-test-id="checkBox"
     role="checkbox"
     tabindex="0"
@@ -229,7 +229,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
     class="container pointer primary 
            inflex rowdir vCenter"
     data-id="checkBox"
-    data-selector-id="container"
+    data-selector-id="dataSelectorIdCheck"
     data-test-id="checkBox"
     role="checkbox"
     tabindex="0"

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -115,6 +115,8 @@ function DropBoxElement(props) {
     style: inlineStyle,
     "data-tour": tourId,
     "data-position": boxPosition,
+    "data-box-direction": boxDirection,
+    "data-arrow-position": arrowPosition,
     id: htmlId,
     role: role,
     "aria-multiselectable": ariaMultiselectable,
@@ -134,7 +136,7 @@ function DropBoxElement(props) {
   }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxElementModule["default"].closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxElementModule["default"][arrowPosition],
+    className: _DropBoxElementModule["default"].arrowPosition,
     style: arrowstyle,
     "data-id": "".concat(dataId, "_arrow"),
     "data-test-id": "".concat(dataId, "_arrow"),

package/lib/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap

@@ -5,6 +5,8 @@ exports[`DropBoxElement rendering the defult props 1`] = `
   <div
     class="main hidden container bottomStart default"
     data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
     data-id="dropBox"
     data-position="bottomStart"
     data-selector-id="dropBox"
@@ -12,14 +14,14 @@ exports[`DropBoxElement rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer bottom_shadow radius defaultPalette"
+      class="subContainer shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="end"
+        class="arrowPosition"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"