@zohodesk/components 1.2.18 → 1.2.20

package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -9,7 +9,6 @@ exports[`Switch rendering the CustomClass 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium SwtichCustomSwitchSize shrinkOff"
@@ -26,6 +25,7 @@ exports[`Switch rendering the CustomClass 1`] = `
       <label
         class="label switch_mediumLabel SwtichCustomSwitch"
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -52,7 +52,6 @@ exports[`Switch rendering the CustomProps 1`] = `
     data-switch="true"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -69,6 +68,7 @@ exports[`Switch rendering the CustomProps 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -95,7 +95,6 @@ exports[`Switch rendering the ID 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -112,6 +111,7 @@ exports[`Switch rendering the ID 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -137,7 +137,6 @@ exports[`Switch rendering the Name 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -155,6 +154,7 @@ exports[`Switch rendering the Name 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -171,7 +171,6 @@ exports[`Switch rendering the Title 1`] = `
     data-test-id="containerComponent"
     data-title="LabelTitle"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -188,6 +187,7 @@ exports[`Switch rendering the Title 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -203,7 +203,6 @@ exports[`Switch rendering the Value 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -220,6 +219,7 @@ exports[`Switch rendering the Value 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -235,7 +235,6 @@ exports[`Switch rendering the checked 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -253,6 +252,7 @@ exports[`Switch rendering the checked 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -268,7 +268,6 @@ exports[`Switch rendering the dataId 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -287,6 +286,7 @@ exports[`Switch rendering the dataId 1`] = `
         data-id="data-Switch"
         data-test-id="data-Switch"
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -302,7 +302,6 @@ exports[`Switch rendering the defult props 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -317,6 +316,7 @@ exports[`Switch rendering the defult props 1`] = `
       />
       <label
         class="label switch_mediumLabel "
+        tabindex="0"
       />
     </div>
   </div>
@@ -333,7 +333,6 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
     data-test-id="containerComponent"
     data-title="data-disableTitle"
     role="switch"
-    tabindex="-1"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -351,6 +350,7 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="-1"
       />
     </div>
   </div>
@@ -366,7 +366,6 @@ exports[`Switch rendering the isReadOnly 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="-1"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -382,6 +381,7 @@ exports[`Switch rendering the isReadOnly 1`] = `
       />
       <label
         class="label switch_mediumLabel "
+        tabindex="-1"
       />
     </div>
   </div>
@@ -397,7 +397,6 @@ exports[`Switch rendering the labelSize of- danger 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -414,6 +413,7 @@ exports[`Switch rendering the labelSize of- danger 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -439,7 +439,6 @@ exports[`Switch rendering the labelSize of- default 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -456,6 +455,7 @@ exports[`Switch rendering the labelSize of- default 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -481,7 +481,6 @@ exports[`Switch rendering the labelSize of- large 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -498,6 +497,7 @@ exports[`Switch rendering the labelSize of- large 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -523,7 +523,6 @@ exports[`Switch rendering the labelSize of- mandatory 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -540,6 +539,7 @@ exports[`Switch rendering the labelSize of- mandatory 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -565,7 +565,6 @@ exports[`Switch rendering the labelSize of- medium 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -582,6 +581,7 @@ exports[`Switch rendering the labelSize of- medium 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -607,7 +607,6 @@ exports[`Switch rendering the labelSize of- primary 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -624,6 +623,7 @@ exports[`Switch rendering the labelSize of- primary 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -649,7 +649,6 @@ exports[`Switch rendering the labelSize of- secondary 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -666,6 +665,7 @@ exports[`Switch rendering the labelSize of- secondary 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -691,7 +691,6 @@ exports[`Switch rendering the labelSize of- small 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -708,6 +707,7 @@ exports[`Switch rendering the labelSize of- small 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -733,7 +733,6 @@ exports[`Switch rendering the size of- medium 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -750,6 +749,7 @@ exports[`Switch rendering the size of- medium 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -765,7 +765,6 @@ exports[`Switch rendering the size of- small 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_small  shrinkOff"
@@ -782,6 +781,7 @@ exports[`Switch rendering the size of- small 1`] = `
       <label
         class="label switch_smallLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -797,7 +797,6 @@ exports[`Switch rendering the text 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -814,6 +813,7 @@ exports[`Switch rendering the text 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label

package/es/Tag/Tag.module.css

@@ -34,10 +34,13 @@
   composes: dInflex alignVertical flexrow from '../common/common.module.css';
   position: relative;
   vertical-align: middle;
+  /* css:theme-validation:ignore */
   color: var(--tag_text_color);
+  /* css:theme-validation:ignore */
   font-size: var(--tag_font_size);
   letter-spacing: var(--tag_letter_spacing);
   height: var(--tag_height);
+  /* css:theme-validation:ignore */
   max-width: 100% ;
   background-color: var(--tag_bg_color);
   border-radius: var(--tag_border_radius);
@@ -122,11 +125,13 @@
   display: block;
 }
 .close {
+  /* css:theme-validation:ignore */
   color: var(--tag_closeicon_color);
   display: none;
   position: absolute;
   top: 0 ;
   bottom: 0 ;
+  /* css:theme-validation:ignore */
   padding: var(--tag_closeicon_padding);
   cursor: var(--tag_closeicon_cursor);
   border-radius: var(--tag_closeicon_border_radius);
@@ -224,6 +229,7 @@
 }
 
 .icon {
+  /* css:theme-validation:ignore */
   margin: var(--tag_icon_margin);
   background-color: var(--tag_icon_bg_color);
 }

package/es/TextBox/TextBox.module.css

@@ -25,29 +25,37 @@
   -moz-appearance: none;
   appearance: none;
   letter-spacing: var(--textbox_letter_spacing);
+  /* css:theme-validation:ignore */
   border: var(--textbox_border_width);
   cursor: var(--textbox_cursor);
 }
 .basic::placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .basic::-webkit-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .basic::-moz-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .basic::-ms-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .container {
   composes: basic;
+  /* css:theme-validation:ignore */
   transition: border var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s;
   width: var(--textbox_width);
+  /* css:theme-validation:ignore */
   color: var(--textbox_text_color);
   font-size: var(--textbox_font_size);
   height: var(--textbox_height);
+  /* css:theme-validation:ignore */
   line-height: var(--textbox_line_height);
   background-color: var(--textbox_bg_color);
   -webkit-transition: border var(--zd_transition2) linear 0s;
@@ -68,15 +76,19 @@
   --textbox_bg_color: none;
 }
 .container::placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .container::-webkit-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .container::-moz-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .container::-ms-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .pointer {
@@ -87,12 +99,20 @@
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
 }
+.effect:hover,
+.effect:focus {
+  /* css:theme-validation:ignore */
+}
 .effect:hover, .effect:focus {
   border-color: var(--textbox_border_color);
 }
 .border {
   --textbox_border_width: 0 0 1px 0;
 }
+.borderColor_transparent,
+.borderColor_default {
+  /* css:theme-validation:ignore */
+}
 .borderColor_transparent, .borderColor_default {
   border-color: var(--textbox_border_color);
 }

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -24,6 +24,7 @@
   cursor: var(--textboxicon_icon_cursor);
 }
 .iconContainer {
+  /* css:theme-validation:ignore */
   color: var(--textboxicon_icon_color);
 }
 .effect:hover .iconContainer,
@@ -50,6 +51,10 @@
   right: 0 ;
   left: 0 ;
 }
+.line,
+.borderColor_default {
+  /* css:theme-validation:ignore */
+}
 .line, .borderColor_default {
   background-color: var(--textboxicon_line_color);
 }

package/es/Textarea/Textarea.module.css

@@ -19,6 +19,7 @@
   appearance: none;
   outline: 0;
   letter-spacing: 0.1px;
+  /* css:theme-validation:ignore */
   color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
 }
@@ -26,15 +27,19 @@
   border-width: var(--textarea_border_width);
 }
 .basic::placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-webkit-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-moz-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-ms-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic:disabled {
@@ -67,6 +72,7 @@
   min-width: var(--zd_size100) ;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
+  /* css:theme-validation:ignore */
   height: var(--textarea_height);
   -webkit-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;

package/es/Tooltip/Tooltip.module.css

@@ -49,7 +49,9 @@
   height: 11px;
   border-top: solid 6px var(--zdt_tooltip_default_bg);
   border-left: solid 6px var(--zdt_tooltip_default_bg);
+  /* css:theme-validation:ignore */
   border-right: solid 6px transparent;
+  /* css:theme-validation:ignore */
   border-bottom: solid 6px transparent;
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   z-index: -1;
@@ -69,7 +71,9 @@
   height: 11px;
   border-top: solid 6px var(--zdt_tooltip_default_bg);
   border-left: solid 6px var(--zdt_tooltip_default_bg);
+  /* css:theme-validation:ignore */
   border-right: solid 6px transparent;
+  /* css:theme-validation:ignore */
   border-bottom: solid 6px transparent;
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   z-index: -1;

package/es/common/customscroll.module.css

@@ -23,9 +23,17 @@
   -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
   -ms-scrollbar-face-color: var(--zd-scroll-thump);
 }
+.scroll::-webkit-scrollbar,
+.scroll ::-webkit-scrollbar {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
   background: var(--zd-scroll-corner-bg);
 }
+.scroll::-webkit-scrollbar:hover,
+.scroll ::-webkit-scrollbar:hover {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
   background: var(--zd-scroll-bg);
 }
@@ -43,6 +51,11 @@
   width: 0 ;
   height: 0 ;
 }
+.scroll::-webkit-scrollbar-track:vertical,
+.scroll ::-webkit-scrollbar-track:vertical {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+}
 [dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
@@ -51,13 +64,26 @@
   border-right: 1px solid transparent;
   border-left: 1px solid transparent;
 }
+.scroll::-webkit-scrollbar-track:vertical:hover,
+.scroll ::-webkit-scrollbar-track:vertical:hover {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
   border-color: var(--zd-scroll-border);
 }
+.scroll::-webkit-scrollbar-track:horizontal,
+.scroll ::-webkit-scrollbar-track:horizontal {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
 }
+.scroll::-webkit-scrollbar-track:horizontal:hover,
+.scroll ::-webkit-scrollbar-track:horizontal:hover {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
   border-color: var(--zd-scroll-border);
 }
@@ -66,6 +92,8 @@
 }
 .scroll::-webkit-scrollbar-thumb,
 .scroll ::-webkit-scrollbar-thumb {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   /* display: none; */
 }
 .scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
@@ -74,6 +102,11 @@
   background-clip: padding-box;
   border: 3px solid transparent;
 }
+.scroll::-webkit-scrollbar-thumb:hover,
+.scroll ::-webkit-scrollbar-thumb:hover {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
   background: var(--zd-scroll-thump-hoverbg);
   background-clip: padding-box;
@@ -83,6 +116,10 @@
 .scroll *:hover > ::-webkit-scrollbar-thumb {
   display: block;
 } */
+.scroll::-webkit-scrollbar-corner,
+.scroll ::-webkit-scrollbar-corner {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
   background: var(--zd-scroll-corner-bg);
 }

package/es/v1/Accordion/Accordion.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { Accordion_defaultProps } from '../../Accordion/props/defaultProps';
-import { Accordion_propTypes } from '../../Accordion/props/propTypes';
+import { Accordion_defaultProps } from './props/defaultProps';
+import { Accordion_propTypes } from './props/propTypes';
 export default function Accordion(props) {
   const {
     className,

package/es/v1/Accordion/AccordionItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AccordionItem_defaultProps } from '../../Accordion/props/defaultProps';
-import { AccordionItem_propTypes } from '../../Accordion/props/propTypes';
+import { AccordionItem_defaultProps } from './props/defaultProps';
+import { AccordionItem_propTypes } from './props/propTypes';
 import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
 import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 export default function AccordionItem(props) {

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

@@ -0,0 +1,12 @@
+export const Accordion_defaultProps = {
+  unMount: true,
+  disableInternalState: false,
+  a11y: {},
+  dataId: 'Accordion',
+  dataSelectorId: 'accordion'
+};
+export const AccordionItem_defaultProps = {
+  a11y: {},
+  dataId: 'AccordionItem',
+  dataSelectorId: 'accordionItem'
+};

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

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+export const Accordion_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableInternalState: PropTypes.bool,
+  height: PropTypes.string,
+  onSelect: PropTypes.func,
+  selectedItem: PropTypes.string.isRequired,
+  unMount: PropTypes.bool,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaExpanded: PropTypes.bool,
+    ariaHaspopup: PropTypes.bool
+  })
+};
+export const AccordionItem_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  equalityCheck: PropTypes.func,
+  id: PropTypes.string,
+  selectMenu: PropTypes.func,
+  selectedItem: PropTypes.string,
+  unMount: PropTypes.bool,
+  unMountItem: PropTypes.bool,
+  innerClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  })
+};

package/es/v1/Animation/Animation.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { defaultProps } from '../../Animation/props/defaultProps';
-import { propTypes } from '../../Animation/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
 import style from '../../common/transition.module.css';
 export default function Animation(props) {

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

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  name: 'fadeIn',
+  unmountOnExit: true
+};