@zohodesk/components 1.0.0-temp-187 → 1.0.0-temp-188

package/README.md

@@ -32,6 +32,16 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.24
+
+- **Animation** - style object moved to utils.
+
+# 1.2.23
+
+- **DropBoxElement** - A dropdown has been incorporated as one of the main focus areas, utilizing the `data-a11y-focus-main-area` attribute.
+
+- **Select, Tab, TabContentWrapper** - A11y changes.
+
 # 1.2.22
 
 - **Tags,TextArea, Textbox, Checkbox** - Cursor css changes for variable autoconversion

package/es/Animation/Animation.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
-import style from '../common/transition.module.css';
+import { animationStyle } from './utils';
 export default class Animation extends React.Component {
   constructor(props) {
     super(props);
@@ -19,91 +19,9 @@ export default class Animation extends React.Component {
       onExit = () => {},
       delayClassName = null
     } = this.props;
-    const animation = {
-      zoomIn: {
-        enter: style.zoomInEnter,
-        enterActive: style.zoomInEnterActive,
-        enterDone: style.zoomInEnterActive,
-        exit: style.zoomInLeave,
-        exitActive: style.zoomInLeaveActive,
-        exitDone: style.zoomInLeaveActive,
-        appear: style.zoomInEnter,
-        appearActive: style.zoomInEnterActive
-      },
-      scaleIn: {
-        enter: style.scaleInEnter,
-        enterActive: style.scaleInEnterActive,
-        enterDone: style.scaleInEnterActive,
-        exit: style.scaleInLeave,
-        exitActive: style.scaleInLeaveActive,
-        exitDone: style.scaleInLeaveActive,
-        appear: style.scaleInEnter,
-        appearActive: style.scaleInEnterActive
-      },
-      fadeIn: {
-        enter: style.fadeInEnter,
-        enterActive: style.fadeInEnterActive,
-        enterDone: style.fadeInEnterActive,
-        exit: style.fadeInLeave,
-        exitActive: style.fadeInLeaveActive,
-        exitDone: style.fadeInLeaveActive,
-        appear: style.fadeInEnter,
-        appearActive: style.fadeInEnterActive
-      },
-      slideLeft: {
-        enter: style.slideLeftEnter,
-        enterActive: style.slideLeftEnterActive,
-        enterDone: style.slideLeftEnterActive,
-        exit: style.slideLeftLeave,
-        exitActive: style.slideLeftLeaveActive,
-        exitDone: style.slideLeftLeaveActive,
-        appear: style.slideLeftEnter,
-        appearActive: style.slideLeftEnterActive
-      },
-      slideDown: {
-        enter: style.slideDownEnter,
-        enterActive: style.slideDownEnterActive,
-        enterDone: style.slideDownEnterActive,
-        exit: style.slideDownLeave,
-        exitActive: style.slideDownLeaveActive,
-        exitDone: style.slideDownLeaveActive,
-        appear: style.slideDownEnter,
-        appearActive: style.slideDownEnterActive
-      },
-      skewIn: {
-        enter: style.skewInEnter,
-        enterActive: style.skewInEnterActive,
-        enterDone: style.skewInEnterActive,
-        exit: style.skewInLeave,
-        exitActive: style.skewInLeaveActive,
-        exitDone: style.skewInLeaveActive,
-        appear: style.skewInEnter,
-        appearActive: style.skewInEnterActive
-      },
-      none: {
-        enter: style.noneEnter,
-        enterActive: style.noneEnterActive,
-        enterDone: style.noneEnterActive,
-        exit: style.noneLeave,
-        exitActive: style.noneLeaveActive,
-        exitDone: style.noneLeaveActive,
-        appear: style.noneEnter,
-        appearActive: style.noneEnterActive
-      },
-      default: {
-        enter: style.defaultEnter,
-        enterActive: style.defaultEnterActive,
-        enterDone: style.defaultEnterActive,
-        exit: style.defaultLeave,
-        exitActive: style.defaultLeaveActive,
-        exitDone: style.defaultLeaveActive,
-        appear: style.defaultEnter,
-        appearActive: style.defaultEnterActive
-      }
-    };
-    let newClassNames = delayClassName ? Object.assign({}, animation[name], {
-      exit: `${delayClassName} ${animation[name].exit}`
-    }) : animation[name];
+    let newClassNames = delayClassName ? Object.assign({}, animationStyle[name], {
+      exit: `${delayClassName} ${animationStyle[name].exit}`
+    }) : animationStyle[name];
     return /*#__PURE__*/React.createElement(CSSTransition, {
       classNames: newClassNames && newClassNames,
       in: isActive,

package/es/Animation/utils.js

@@ -0,0 +1,83 @@
+import style from '../common/transition.module.css';
+export const animationStyle = {
+  zoomIn: {
+    enter: style.zoomInEnter,
+    enterActive: style.zoomInEnterActive,
+    enterDone: style.zoomInEnterActive,
+    exit: style.zoomInLeave,
+    exitActive: style.zoomInLeaveActive,
+    exitDone: style.zoomInLeaveActive,
+    appear: style.zoomInEnter,
+    appearActive: style.zoomInEnterActive
+  },
+  scaleIn: {
+    enter: style.scaleInEnter,
+    enterActive: style.scaleInEnterActive,
+    enterDone: style.scaleInEnterActive,
+    exit: style.scaleInLeave,
+    exitActive: style.scaleInLeaveActive,
+    exitDone: style.scaleInLeaveActive,
+    appear: style.scaleInEnter,
+    appearActive: style.scaleInEnterActive
+  },
+  fadeIn: {
+    enter: style.fadeInEnter,
+    enterActive: style.fadeInEnterActive,
+    enterDone: style.fadeInEnterActive,
+    exit: style.fadeInLeave,
+    exitActive: style.fadeInLeaveActive,
+    exitDone: style.fadeInLeaveActive,
+    appear: style.fadeInEnter,
+    appearActive: style.fadeInEnterActive
+  },
+  slideLeft: {
+    enter: style.slideLeftEnter,
+    enterActive: style.slideLeftEnterActive,
+    enterDone: style.slideLeftEnterActive,
+    exit: style.slideLeftLeave,
+    exitActive: style.slideLeftLeaveActive,
+    exitDone: style.slideLeftLeaveActive,
+    appear: style.slideLeftEnter,
+    appearActive: style.slideLeftEnterActive
+  },
+  slideDown: {
+    enter: style.slideDownEnter,
+    enterActive: style.slideDownEnterActive,
+    enterDone: style.slideDownEnterActive,
+    exit: style.slideDownLeave,
+    exitActive: style.slideDownLeaveActive,
+    exitDone: style.slideDownLeaveActive,
+    appear: style.slideDownEnter,
+    appearActive: style.slideDownEnterActive
+  },
+  skewIn: {
+    enter: style.skewInEnter,
+    enterActive: style.skewInEnterActive,
+    enterDone: style.skewInEnterActive,
+    exit: style.skewInLeave,
+    exitActive: style.skewInLeaveActive,
+    exitDone: style.skewInLeaveActive,
+    appear: style.skewInEnter,
+    appearActive: style.skewInEnterActive
+  },
+  none: {
+    enter: style.noneEnter,
+    enterActive: style.noneEnterActive,
+    enterDone: style.noneEnterActive,
+    exit: style.noneLeave,
+    exitActive: style.noneLeaveActive,
+    exitDone: style.noneLeaveActive,
+    appear: style.noneEnter,
+    appearActive: style.noneEnterActive
+  },
+  default: {
+    enter: style.defaultEnter,
+    enterActive: style.defaultEnterActive,
+    enterDone: style.defaultEnterActive,
+    exit: style.defaultLeave,
+    exitActive: style.defaultLeaveActive,
+    exitDone: style.defaultLeaveActive,
+    appear: style.defaultEnter,
+    appearActive: style.defaultEnterActive
+  }
+};

package/es/CheckBox/CheckBox.module.css

@@ -9,42 +9,52 @@
   --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
   --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .container {
   composes: varClass;
   stroke: var(--checkbox_stroke_color);
 }
+
 .container, .pointer, .readonly {
   cursor: var(--checkbox_cursor);
 }
+
 .pointer {
   --checkbox_cursor: pointer;
 }
+
 .readonly {
   --checkbox_cursor: default;
 }
+
 .cbBox {
   fill: none;
   stroke-width: var(--checkbox_stroke_width);
   stroke-linecap: round;
   stroke: inherit;
 }
+
 .tickPath {
   composes: cbBox;
   stroke-dasharray: 40;
 }
+
 .boxContainer {
   composes: offSelection from '../common/common.module.css';
   /* css:theme-validation:ignore */
   border-radius: 2px;
   background-color: var(--checkbox_bg_color);
 }
+
 .filled {
   --checkbox_bg_color: inherit;
 }
+
 .medium {
   width: 16px;
   height: 16px;
 }
+
 .small {
   width: 13px;
   height: 13px;
@@ -82,18 +92,23 @@
 [dir=rtl] .checkedtickPath {
   animation: tickAnimate var(--zd_transition3) ease forwards;
 }
+
 .linePath {
   transform-origin: center;
 }
+
 [dir=ltr] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
+
 [dir=rtl] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
+
 [dir=ltr] .text {
   margin-left: 6px;
 }
+
 [dir=rtl] .text {
   margin-right: 6px;
 }
@@ -102,19 +117,25 @@
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
 }
+
 .primary:hover
+
 /* .primary:focus  */
-{
+  {
   --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .checkedprimary {
   --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .danger:hover
+
 /* .danger:focus */
- {
+  {
   --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
 }
+
 .checkeddanger {
   --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
 }
@@ -124,19 +145,25 @@
   /* css:theme-validation:ignore */
   color: var(--checkbox_checked_active_color);
 }
+
 .activeprimaryLabel:hover
+
 /* .activeprimaryLabel:focus  */
-{
+  {
   --label_text_color: var(--zdt_checkbox_label_primary_text);
 }
+
 .checkedprimaryLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .activedangerLabel:hover
+
 /* .activedangerLabel:focus  */
-{
+  {
   --label_text_color: var(--zdt_checkbox_label_danger_text);
 }
+
 .checkeddangerLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
 }
@@ -144,6 +171,7 @@
   0% {
     stroke-dashoffset: 40;
   }
+
   100% {
     stroke-dashoffset: 0;
   }
@@ -153,7 +181,8 @@
   0% {
     transform: scaleX(0);
   }
+
   100% {
     transform: scaleX(1);
   }
-}
+}

package/es/ListItem/props/defaultProps.js

@@ -29,7 +29,7 @@ export const ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false
+  needMultiLineText: true
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,

package/es/Tag/Tag.module.css

@@ -21,15 +21,21 @@
   /* tag normal icon default variables */
   --tag_icon_bg_color: var(--zdt_tag_icon_bg);
 }[dir=ltr] .varClass {
-  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
+  --tag_closeicon_border_radius: 0 12px 12px 0
+    /*rtl: 12px 0 0 12px*/
+  ;
   --tag_closeicon_padding: 0 7px 0 6px
-    /*rtl: 0 6px 0 7px*/;
-  --tag_icon_margin: 0 0 0 5px /*rtl: 0 5px 0 0*/;
+    /*rtl: 0 6px 0 7px*/
+  ;
+  --tag_icon_margin: 0 0 0 5px
+    /*rtl: 0 5px 0 0*/
+  ;
 }[dir=rtl] .varClass {
-  --tag_closeicon_border_radius: 12px 0 0 12px;
-  --tag_closeicon_padding: 0 6px 0 7px;
-  --tag_icon_margin: 0 5px 0 0;
+  --tag_closeicon_border_radius: 0 12px 12px 0  ;
+  --tag_closeicon_padding: 0 7px 0 6px  ;
+  --tag_icon_margin: 0 0 0 5px  ;
 }
+
 .container {
   composes: varClass;
   composes: dInflex alignVertical flexrow from '../common/common.module.css';
@@ -51,49 +57,62 @@
   padding: var(--tag_padding);
   cursor: var(--tag_cursor);
 }
+
 .disabled {
   pointer-events: none;
   --tag_text_color: var(--zdt_tag_disabled_text);
 }
+
 .readonly,
 .disabled {
   --tag_cursor: not-allowed;
 }
+
 .pointer {
   --tag_cursor: pointer;
 }
+
 .lgRadius {
   --tag_border_radius: 25px;
 }
+
 .smRadius {
   --tag_border_radius: 3px;
 }
+
 .text {
   composes: dotted flexgrow from '../common/common.module.css';
 }
+
 .smalltext,
 .mediumtext {
   font-size: var(--tag_font_size);
 }
+
 .smalltext, .mediumtext {
   padding: var(--tag_inner_text_padding);
 }
+
 .small {
   --tag_height: 20px;
   --tag_padding: 1px;
   --tag_inner_text_padding: 0 7px;
 }
+
 [dir=ltr] .small .avatar {
   transform: scale(0.8) translateX(-2px);
   margin-right: -8px;
 }
+
 [dir=rtl] .small .avatar {
   transform: scale(0.8) translateX(2px);
   margin-left: -8px;
 }
+
 .smalltext {
   --tag_font_size: 12px;
 }
+
 .activesmallEffect {
   --tag_inner_text_padding: 0 25px 0 7px;
 }
@@ -103,9 +122,11 @@
   --tag_padding: 2px;
   --tag_inner_text_padding: 0 6px;
 }
+
 .mediumtext {
   --tag_font_size: 13px;
 }
+
 .activemediumEffect {
   --tag_inner_text_padding: 0 25px 0 6px;
 }
@@ -113,10 +134,12 @@
 .selected .close {
   display: block;
 }
+
 .activedanger,
 .closedanger:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_danger_bg);
 }
+
 .activeprimary,
 .closeprimary:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_primary_hover_bg);
@@ -125,6 +148,7 @@
 .container:hover .close {
   display: block;
 }
+
 .close {
   /* css:theme-validation:ignore */
   color: var(--tag_closeicon_color);
@@ -138,41 +162,58 @@
   border-radius: var(--tag_closeicon_border_radius);
   background: var(--tag_closeicon_bg_color);
 }
+
 [dir=ltr] .close {
   right: 0;
 }
+
 [dir=rtl] .close {
   left: 0;
 }
+
 [dir=ltr] .lgRadiusClose {
-  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
+  --tag_closeicon_border_radius: 0 12px 12px 0
+    /*rtl: 12px 0 0 12px*/
+  ;
 }
+
 [dir=rtl] .lgRadiusClose {
-  --tag_closeicon_border_radius: 12px 0 0 12px;
+  --tag_closeicon_border_radius: 0 12px 12px 0  ;
 }
+
 [dir=ltr] .smRadiusClose {
-  --tag_closeicon_border_radius: 0 3px 3px 0 /*rtl: 3px 0 0 3px*/;
+  --tag_closeicon_border_radius: 0 3px 3px 0
+    /*rtl: 3px 0 0 3px*/
+  ;
 }
+
 [dir=rtl] .smRadiusClose {
-  --tag_closeicon_border_radius: 3px 0 0 3px;
+  --tag_closeicon_border_radius: 0 3px 3px 0  ;
 }
+
 .closedanger {
   --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
 }
+
 .closeprimary {
   --tag_closeicon_bg_color: var(--zdt_tag_closeprimary_bg);
 }
+
 .default,
-.danger,.defaultLink {
+.danger,
+.defaultLink {
   --tag_bg_color: var(--zdt_tag_default_danger_bg);
 }
+
 .effect.default:hover {
   --tag_bg_color: var(--zdt_tag_default_hover_bg);
 }
+
 .activedefault,
 .effect.activedefault:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
+
 .activeprimaryClose,
 .activeprimaryClose:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_primary_bg);
@@ -181,37 +222,46 @@
 .effect.danger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
+
 .activedanger,
 .effect.activedanger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
+
 .activedangerClose,
 .activedangerClose:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_danger_bg);
 }
+
 .secondary {
   --tag_bg_color: var(--zdt_tag_secondary_bg);
   --tag_text_color: var(--zdt_tag_secondary_text);
 }
+
 .activesecondary,
 .effect.secondary:hover {
   --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
 }
+
 .activedefaultLink,
-.effect.defaultLink:hover{
---tag_bg_color: var(--zdt_tag_defaultLink_hover_bg);
---tag_text_color: var(--zdt_tag_defaultLink_hover_text);
-};
+.effect.defaultLink:hover {
+  --tag_bg_color: var(--zdt_tag_defaultLink_hover_bg);
+  --tag_text_color: var(--zdt_tag_defaultLink_hover_text);
+}
+
+;
 
 .pureDotted {
   --tag_bg_color: var(--zdt_tag_pure_bg);
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_pure_border);
 }
+
 .effect.pureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_hover_bg);
   --tag_border_color: var(--zdt_tag_pure_hover_border);
 }
+
 .activepureDotted,
 .effect.activepureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_bg);
@@ -222,6 +272,7 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_primary_border);
 }
+
 .effect.primaryDotted:hover,
 .activeprimaryDotted,
 .primary,
@@ -234,28 +285,35 @@
   margin: var(--tag_icon_margin);
   background-color: var(--tag_icon_bg_color);
 }
-.icon > i {
+
+.icon>i {
   display: block;
 }
+
 .dark {
   --tag_bg_color: var(--zdt_tag_dark_bg);
   --tag_text_color: var(--zdt_tag_dark_text);
 }
+
 .effect.dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
   --tag_text_color: var(--zdt_tag_dark_hover_text);
 }
+
 .darkTagClose {
   --tag_closeicon_bg_color: var(--zdt_tag_dark_close_bg);
   --tag_closeicon_color: var(--zdt_tag_dark_close_text);
 }
+
 .darkTagClose:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_dark_close_hover_bg);
   --tag_closeicon_color: var(--zdt_tag_secondary_text);
 }
+
 .pureDarkDotted {
   composes: dark pureDotted;
 }
+
 .darkPrimaryDotted {
   composes: dark primaryDotted;
 }

package/es/TextBox/TextBox.module.css

@@ -50,6 +50,7 @@
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 /* css:lineheight-validation:ignore */
 .container {
   composes: basic;