@zohodesk/components 1.0.0-alpha-249 → 1.0.0-alpha-250

package/es/CheckBox/CheckBox.module.css

@@ -13,9 +13,7 @@
   composes: varClass;
   stroke: var(--checkbox_stroke_color);
 }
-.container,
-.pointer,
-.readonly {
+.container, .pointer, .readonly {
   cursor: var(--checkbox_cursor);
 }
 .pointer {
@@ -56,37 +54,48 @@
   font-size: 0;
   display: block;
 }
-/*rtl:begin:ignore*/
 .tick {
   position: absolute;
   left: 0;
 }
-/*rtl:end:ignore*/
 .mediumtick {
   top: calc(var(--zd_size2) * -1);
   height: var(--zd_size20);
   width: var(--zd_size20);
 }
-/*rtl:begin:ignore*/
 .smalltick {
   top: calc(var(--zd_size3) * -1);
   height: var(--zd_size18);
   width: var(--zd_size18);
   left: calc(var(--zd_size1) * -1);
 }
-/*rtl:end:ignore*/
 
 .checkedtickPath {
   stroke-dashoffset: 40;
+}
+
+[dir=ltr] .checkedtickPath {
+  animation: tickAnimate var(--zd_transition3) ease forwards;
+}
+
+[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;
 }
-.text {
+[dir=ltr] .text {
   margin-left: var(--zd_size6);
 }
+[dir=rtl] .text {
+  margin-right: var(--zd_size6);
+}
 
 .checkedprimary,
 .checkeddanger {
@@ -129,8 +138,6 @@
 .checkeddangerLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
 }
-
-/*rtl:begin:ignore*/
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;
@@ -148,4 +155,3 @@
     transform: scaleX(1);
   }
 }
-/*rtl:end:ignore*/

package/es/DateTime/DateTime.module.css

@@ -1,23 +1,27 @@
 .semibold {
   font-family: var(--zd_semibold);
 }
-.boxPadding {
+[dir=ltr] .boxPadding {
   padding-right: var(--zd_size19);
   padding-left: var(--zd_size19);
 }
+[dir=rtl] .boxPadding {
+  padding-left: var(--zd_size19);
+  padding-right: var(--zd_size19);
+}
 .container {
-  border-radius: 3px;
-  background-color: var(--zdt_datetime_default_bg);
   font-size: var(--zd_font_size16);
   composes: offSelection from '../common/common.module.css';
+  border-radius: 3px;
+  background-color: var(--zdt_datetime_default_bg);
 }
 .header {
   min-height: var(--zd_size36);
+  composes: boxPadding;
   text-align: center;
   background-color: var(--zdt_datetime_header_bg);
   border-radius: 0 0 2px 2px;
   border-bottom: 1px solid var(--zdt_datetime_header_border);
-  composes: boxPadding;
 }
 
 .datesStr {
@@ -35,17 +39,25 @@
 .datesStr {
   font-size: var(--zd_font_size13);
   color: var(--zdt_datetime_datestr_text);
+}
+.thArrow, .datesStr {
   cursor: pointer;
 }
 .thArrow:hover,
 .datesStr:hover {
   color: var(--zdt_datetime_datestr_text);
+}
+.thArrow:hover, .datesStr:hover {
   background: var(--zdt_datetime_datestr_hover_bg);
 }
 
-.navigation {
+[dir=ltr] .navigation {
   margin-left: var(--zd_size2);
 }
+
+[dir=rtl] .navigation {
+  margin-right: var(--zd_size2);
+}
 .thMonYear {
   font-size: var(--zd_font_size13);
   line-height: var(--zd_size24);
@@ -61,9 +73,9 @@
 }
 .days {
   min-height: var(--zd_size36);
-  padding-top: var(--zd_size7);
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
+  padding-top: var(--zd_size7);
 }
 .daysStr {
   font-size: var(--zd_font_size10);
@@ -73,8 +85,8 @@
 }
 .dateRow {
   height: var(--zd_size28);
-  margin: var(--zd_size1) 0 var(--zd_size5);
   composes: alignBetween from '../common/common.module.css';
+  margin: var(--zd_size1) 0 var(--zd_size5);
 }
 .dateRow:last-child {
   margin-bottom: 0;
@@ -93,8 +105,11 @@
 
 .today,
 .today:hover {
-  background-color: var(--zdt_datetime_today_bg);
   color: var(--zdt_datetime_today_text);
+}
+
+.today, .today:hover {
+  background-color: var(--zdt_datetime_today_bg);
   border-radius: 50%;
 }
 
@@ -108,8 +123,8 @@
 .dropDown {
   width: var(--zd_size60);
   display: inline-block;
-  margin: 0 var(--zd_size4);
   position: relative;
+  margin: 0 var(--zd_size4);
 }
 .footer {
   margin-top: var(--zd_size10);
@@ -125,9 +140,16 @@
 }
 
 .downArrow {
-  margin-left: var(--zd_size2);
   color: var(--zdt_datetime_daystr_text);
 }
+
+[dir=ltr] .downArrow {
+  margin-left: var(--zd_size2);
+}
+
+[dir=rtl] .downArrow {
+  margin-right: var(--zd_size2);
+}
 .dateText {
   cursor: pointer;
 }
@@ -139,17 +161,22 @@
   font-size: var(--zd_font_size11);
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
-  margin-top: var(--zd_size14);
   composes: semibold;
   display: block;
+  margin-top: var(--zd_size14);
 }
 .yearContainer {
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
 }
+[dir=ltr] .yearContainer {
+  left: 0;
+}
+[dir=rtl] .yearContainer {
+  right: 0;
+}
 .subContainer {
   position: relative;
 }

package/es/DateTime/DateWidget.module.css

@@ -3,9 +3,7 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
-.readOnly,
-.readOnly > input,
-.disabled {
+.readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }
 .enabled {
@@ -17,10 +15,16 @@
 .inputLine {
   position: absolute;
   bottom: 0;
+  transition: border var(--zd_transition2) linear 0s;
+  border-bottom: 1px solid var(--zdt_datewidget_input_border);
+}
+[dir=ltr] .inputLine {
   left: 0;
   right: 0;
-  border-bottom: 1px solid var(--zdt_datewidget_input_border);
-  transition: border var(--zd_transition2) linear 0s;
+}
+[dir=rtl] .inputLine {
+  right: 0;
+  left: 0;
 }
 .enabled:hover .inputLine {
   border-bottom-color: var(--zdt_datewidget_enabled_border);

package/es/DateTime/YearView.module.css

@@ -1,27 +1,32 @@
-.boxPadding {
+[dir=ltr] .boxPadding {
   padding-right: var(--zd_size19);
   padding-left: var(--zd_size19);
+}[dir=rtl] .boxPadding {
+  padding-left: var(--zd_size19);
+  padding-right: var(--zd_size19);
 }
 .month {
   width: 30.333%;
+  font-size: var(--zd_font_size12);
+  line-height: var(--zd_size26);
+  height: var(--zd_size26);
+  color: var(--zdt_yearview_month_text);
   text-align: center;
   margin: 0 0 var(--zd_size1);
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
-  font-size: var(--zd_font_size12);
-  line-height: var(--zd_size26);
-  height: var(--zd_size26);
-  color: var(--zdt_yearview_month_text);
 }
 .month:hover {
   background-color: var(--zdt_yearview_month_hover_bg);
 }
 .currentMonth,
 .currentMonth:hover {
-  background-color: var(--zdt_yearview_currentmonth_bg);
   color: var(--zdt_yearview_currentmonth_text);
 }
+.currentMonth, .currentMonth:hover {
+  background-color: var(--zdt_yearview_currentmonth_bg);
+}
 .yearBox {
   border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
 }
@@ -49,9 +54,14 @@
   color: var(--zdt_yearview_year_hover_text);
 }
 .arrowActive {
-  transform: rotate(180deg);
   color: var(--zdt_yearview_year_hover_text);
 }
+[dir=ltr] .arrowActive {
+  transform: rotate(180deg);
+}
+[dir=rtl] .arrowActive {
+  transform: rotate(-180deg);
+}
 .container {
   height: 100%;
   overflow-y: auto;

package/es/DropBox/DropBox.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { Fragment } from 'react';
 import { defaultProps } from './props/defaultProps';

package/es/DropBox/DropBox.module.css

@@ -28,8 +28,7 @@
   padding: var(--dropbox_padding);
   box-shadow: var(--dropbox_box_shadow);
 }
-.defaultPalette,
-.darkPalette {
+.defaultPalette, .darkPalette {
   background-color: var(--dropbox_bg_color);
 }
 .radius {
@@ -84,11 +83,13 @@
 .bottom_shadow {
   --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
-.defaultShadow {
+[dir=ltr] .defaultShadow {
   box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
+[dir=rtl] .defaultShadow {
+  box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
 /* box direction styles */
-/*rtl:begin:ignore*/
 .topStart {
   bottom: 100%;
   right: 0;
@@ -272,7 +273,6 @@
   bottom: var(--zd_size28);
   transform: rotate(-90deg) translateX(-50%);
 }
-/*rtl:end:ignore*/
 .hidden {
   visibility: hidden;
   opacity: 0;
@@ -282,7 +282,10 @@
 .hidden .subContainer {
   box-shadow: none;
 }
-.animationBasic {
+[dir=ltr] .animationBasic {
+  animation-duration: var(--zd_transition2);
+}
+[dir=rtl] .animationBasic {
   animation-duration: var(--zd_transition2);
 }
 .fadeIn {
@@ -291,11 +294,24 @@
 }
 .bounce {
   composes: animationBasic;
+}
+[dir=ltr] .bounce {
+  animation-name: animation;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+[dir=rtl] .bounce {
   animation-name: animation;
   animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
 .slideUp {
   composes: modeForward from '../common/animation.module.css';
+}
+[dir=ltr] .slideUp {
+  animation-duration: var(--zd_transition3);
+  animation-name: slideUp;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+[dir=rtl] .slideUp {
   animation-duration: var(--zd_transition3);
   animation-name: slideUp;
   animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
@@ -325,16 +341,23 @@
 .responsive {
   position: absolute;
   bottom: 0;
-  left: 0;
   width: 100%;
   max-height: 90%;
 }
 
+[dir=ltr] .responsive {
+  left: 0;
+}
+
+[dir=rtl] .responsive {
+  right: 0;
+}
+
 .closeBar {
   height: 6px;
+  width: 20%;
   border-radius: 5px;
   background-color: var(--dropbox_mob_close_bg_color);
-  width: 20%;
   cursor: pointer;
   margin: 0 auto var(--zd_size10);
 }
@@ -346,19 +369,32 @@
 }
 .activateInDelay {
   composes: modeForward from '../common/animation.module.css';
+  pointer-events: none;
+}
+[dir=ltr] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+[dir=rtl] .activateInDelay {
   animation-duration: var(--zd_transition1);
   animation-delay: var(--zd_transition2);
-  pointer-events: none;
   animation-name: activateInDelay;
 }
 .freezeLayer {
   position: absolute;
   top: 0;
-  left: 0;
   bottom: 0;
-  right: 0;
   composes: activateInDelay;
 }
+[dir=ltr] .freezeLayer {
+  left: 0;
+  right: 0;
+}
+[dir=rtl] .freezeLayer {
+  right: 0;
+  left: 0;
+}
 .freeze {
   composes: varClass;
   background: var(--dropbox_mob_bg_color);

package/es/DropDown/DropDownHeading.module.css

@@ -33,11 +33,15 @@
 .light {
   composes: default;
 }
-.light::after,
-.dark::after {
-  left: var(--dropdownheading_underline_left);
+.light::after, .dark::after {
   background-color: var(--dropdownheading_underline_bg_color);
 }
+[dir=ltr] .light::after, [dir=ltr] .dark::after {
+  left: var(--dropdownheading_underline_left);
+}
+[dir=rtl] .light::after, [dir=rtl] .dark::after {
+  right: var(--dropdownheading_underline_left);
+}
 
 .dark {
   composes: default;

package/es/DropDown/DropDownItem.module.css

@@ -6,24 +6,32 @@
 
   /* dropdownitem user default variables */
   --dropdownitem-user-width: var(--zd_size42);
-  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
   --dropdownitem-user-border-style: solid;
   --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
   --dropdownitem-user-cursor: pointer;
+}[dir=ltr] .varClass {
+  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+}[dir=rtl] .varClass {
+  --dropdownitem-user-border-width: 0 1px 0 0;
 }
 .list {
   composes: varClass;
   composes: dflex alignVertical from '../common/common.module.css';
   position: relative;
-  padding: var(--dropdownitem-padding);
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13);
-  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+  padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
   cursor: pointer;
   background-color: var(--dropdownitem-bg-color);
 }
+[dir=ltr] .list {
+  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .list {
+  border-width: 0 1px 0 0;
+}
 
 .listActive {
   --dropdownitem-border-color: var(--zdt_dropdown_listactive_border);
@@ -33,16 +41,27 @@
   --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
 }
 
-.padding {
+[dir=ltr] .padding {
   --dropdownitem-padding: 0 var(--zd_size50) 0 0/*rtl: 0 0 0 var(--zd_size50)*/;
 }
 
+[dir=rtl] .padding {
+  --dropdownitem-padding: 0 0 0 var(--zd_size50);
+}
+
 .children {
-  margin-right: var(--zd_size10);
   display: inline-block;
   font-size: 0;
 }
 
+[dir=ltr] .children {
+  margin-right: var(--zd_size10);
+}
+
+[dir=rtl] .children {
+  margin-left: var(--zd_size10);
+}
+
 .value {
   composes: dotted flexgrow from '../common/common.module.css';
 }
@@ -51,7 +70,6 @@
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
   opacity: 0;
   visibility: hidden;
@@ -62,6 +80,14 @@
   cursor: var(--dropdownitem-user-cursor);
 }
 
+[dir=ltr] .user {
+  right: 0;
+}
+
+[dir=rtl] .user {
+  left: 0;
+}
+
 .list:hover .user {
   opacity: 1;
   visibility: visible;

package/es/Heading/Heading.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Heading.module.css';
+export default class Heading extends React.Component {
+  render() {
+    let {
+      tagName,
+      className,
+      onClick,
+      onDoubleClick,
+      title,
+      dataTitle,
+      dataId,
+      a11y
+    } = this.props;
+    return /*#__PURE__*/React.createElement(tagName, {
+      className: `${style.reset} ${className}`,
+      onClick,
+      onDoubleClick,
+      'data-title': dataTitle || title,
+      'data-id': dataId,
+      ...a11y
+    }, title);
+  }
+
+}
+Heading.propTypes = propTypes;
+Heading.defaultProps = defaultProps;
+
+if (false) {
+  Heading.docs = {
+    folderName: 'Style Guide',
+    componentGroup: 'Accessibility'
+  };
+}

package/es/Heading/Heading.module.css

@@ -0,0 +1,5 @@
+.reset {
+  font: initial;
+  margin: initial;
+}
+

package/es/Heading/docs/Heading__default.docs.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import Heading from '../Heading';
+export default class Heading__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+      title: "Heading Text",
+      a11y: {
+        'tabindex': '0',
+        'aria-label': 'customAriaLabel'
+      }
+    }));
+  }
+
+}
+
+if (false) {
+  Heading__default.docs = {
+    folderName: 'Style Guide',
+    componentGroup: 'Accessibility'
+  };
+}

package/es/Heading/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  tagName: 'h1',
+  a11y: {},
+  className: ''
+};

package/es/Heading/props/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  a11y: PropTypes.object
+};

package/es/ListItem/ListContainer.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React, { useCallback } from 'react';

package/es/ListItem/ListItem.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React from 'react';