@zohodesk/components 1.0.0-temp-46 → 1.0.0-temp-49

package/es/DropBox/DropBox.js

@@ -66,7 +66,7 @@ export class DropBoxElement extends React.Component {
     } = this.props;
     let {
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
 
     if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
       isAbsolutePositioningNeeded = true;
@@ -212,7 +212,7 @@ export default class DropBox extends React.Component {
     } : {};
     const {
       direction
-    } = this.context;
+    } = this.context || {};
     const dropBoxEle = /*#__PURE__*/React.createElement(DropBoxElement, _extends({
       isModel: isModel,
       direction: direction

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/Label/Label.module.css

@@ -4,7 +4,7 @@
   --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
-  --label_line_height: 1.28;
+  --label_line_height: var(--zd_size18);
 }
 .label {
   composes: varClass;
@@ -17,18 +17,15 @@
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
-  --label_line_height: 1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
-  --label_line_height: 1.38;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
 }
 .large {
   --label_font_size: var(--zd_font_size26);
-  --label_line_height: 0.69;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {

package/es/Label/__tests__/Label.spec.js

@@ -1,5 +1,3 @@
-import "core-js/modules/web.url.to-json";
-
 /* eslint-disable no-undef */
 import React from 'react';
 import Label from '../Label';

package/es/Layout/utils.js

@@ -15,7 +15,8 @@ export function createProps(propTypes, props, classNames) {
 export function isInteger(value) {
   return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
 }
-export function setProps(childProps, props, values = {}) {
+export function setProps(childProps, props) {
+  let values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   Object.keys(values).map(value => {
     if (props[value]) {
       childProps[values[value]] = props[value];

package/es/ListItem/ListContainer.js

@@ -0,0 +1,118 @@
+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); }
+
+/**** Libraries ****/
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '../Layout';
+import CssProvider from '../Provider/CssProvider';
+import style from './ListItem.module.css';
+
+const ListContainer = props => {
+  const {
+    size,
+    active,
+    highlight,
+    autoHover,
+    palette,
+    title,
+    disableTitle,
+    needTick,
+    isLink,
+    href,
+    target,
+    needBorder,
+    isDisabled,
+    children,
+    dataId,
+    a11y,
+    customClass,
+    customProps,
+    onClick,
+    onMouseEnter,
+    onMouseOver,
+    eleRef
+  } = props;
+  const {
+    role,
+    ariaSelected
+  } = a11y;
+  const options = {};
+
+  if (isLink) {
+    options.href = href;
+    options.target = `_${target}`;
+  }
+
+  if (active) {
+    options['data-selected'] = active;
+  }
+
+  if (!isDisabled && !isLink && active) {
+    options.tabindex = '0';
+  }
+
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    role: role,
+    "aria-selected": ariaSelected,
+    isCover: false,
+    align: "vertical",
+    alignBox: "row",
+    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
+    dataId: dataId,
+    onClick: !isDisabled && onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseOver: onMouseOver,
+    eleRef: eleRef,
+    tagName: isLink ? 'a' : 'li',
+    "data-title": isDisabled ? disableTitle : title
+  }, options, customProps), children);
+};
+
+ListContainer.defaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  isLink: false,
+  target: 'blank',
+  needBorder: true,
+  a11y: {},
+  customClass: '',
+  customProps: {}
+};
+export default ListContainer;
+ListContainer.propTypes = {
+  active: PropTypes.bool,
+  autoHover: PropTypes.bool,
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  highlight: PropTypes.bool,
+  href: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isLink: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  target: PropTypes.oneOf(['blank', 'self']),
+  title: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaSelected: PropTypes.bool
+  }),
+  customClass: PropTypes.string,
+  customProps: PropTypes.object
+};
+
+if (false) {
+  ListContainer.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide'
+  };
+}

package/es/ListItem/ListItem.js

@@ -1,15 +1,13 @@
-import "core-js/modules/es.string.replace";
-
 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); }
 
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Box } from '../Layout';
+import { Box } from '../Layout';
+import ListContainer from './ListContainer';
 /**** Components ****/
 
 import Icon from '@zohodesk/icons/lib/Icon';
-import CssProvider from '../Provider/CssProvider';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -74,48 +72,40 @@ export default class ListItem extends React.Component {
       customProps
     } = this.props;
     let {
-      ListItemProps = {}
+      ListItemProps = {},
+      ContainerProps = {}
     } = customProps;
     let {
       customListItem = '',
       customTickIcon = ''
     } = customClass;
     let {
-      role,
-      ariaSelected,
       ariaHidden = true
     } = a11y;
     let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
-    let options = {};
-
-    if (isLink) {
-      options.href = href;
-      options.target = `_${target}`;
-    }
-
-    if (active) {
-      options['data-selected'] = active;
-    }
-
-    if (!isDisabled && !isLink && active) {
-      options.tabindex = '0';
-    }
-
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-    return /*#__PURE__*/React.createElement(Container, _extends({
-      role: role,
-      "aria-selected": ariaSelected,
-      isCover: false,
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customListItem}`,
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
+      a11y: a11y,
+      size: size,
+      palette: palette,
+      highlight: highlight,
+      isDisabled: isDisabled,
+      active: active,
+      autoHover: autoHover,
+      needTick: needTick,
+      needBorder: needBorder,
+      customClass: customListItem,
       dataId: dataIdString,
-      onClick: !isDisabled && this.handleClick,
+      isLink: isLink,
+      href: href,
+      target: target,
+      disableTitle: disableTitle,
+      title: title,
+      onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       eleRef: this.getRef,
-      tagName: isLink ? 'a' : 'li',
-      "data-title": isDisabled ? disableTitle : title
-    }, options, ListItemProps), value ? /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: style.value

package/es/ListItem/ListItem.module.css

@@ -4,8 +4,6 @@
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
-    /*rtl: 0 0 0 var(--zd_size15)*/;
   --listitem_bg_color: var(--zdt_listitem_default_bg);
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_height: auto;
@@ -16,6 +14,11 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
+}[dir=ltr] .varClass {
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
+    /*rtl: 0 0 0 var(--zd_size15)*/;
+}[dir=rtl] .varClass {
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
   composes: varClass;
@@ -23,40 +26,49 @@
   list-style: none;
   color: var(--listitem_text_color);
   font-size: var(--zd_font_size13);
+  height: var(--listitem_height);
+  min-height: var(--listitem_min_height);
+  text-decoration: none;
   padding: var(--listitem_padding);
   border-width: var(--listitem_border_width);
   border-style: solid;
   border-color: var(--listitem_border_color);
-  height: var(--listitem_height);
-  min-height: var(--listitem_min_height);
   cursor: pointer;
-  text-decoration: none;
 }
-.list,
-.default,
-.secondary {
+.list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
-.withBorder {
+[dir=ltr] .withBorder {
   --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
 }
+[dir=rtl] .withBorder {
+  --listitem_border_width: 0 1px 0 0;
+}
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-.small {
+[dir=ltr] .small {
   --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
     var(--zd_size5)
     /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
 }
+[dir=rtl] .small {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+}
 .medium {
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
 .large {
+  --listitem_height: var(--zd_size48);
+}
+[dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
     var(--zd_size25)
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
-  --listitem_height: var(--zd_size48);
+}
+[dir=rtl] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 
 .value,
@@ -65,9 +77,14 @@
 }
 .iconBox {
   width: var(--zd_size20);
-  margin-right: var(--zd_size10);
   text-align: center;
 }
+[dir=ltr] .iconBox {
+  margin-right: var(--zd_size10);
+}
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size10);
+}
 .iconBox,
 .leftAvatar {
   font-size: 0;
@@ -76,16 +93,18 @@
   margin: var(--listitem_avatar_margin);
 }
 
-.defaultHover,
-.primaryHover,
-.secondaryHover,
-.darkHover {
+.defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
+[dir=ltr] .activewithBorder {
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .activewithBorder {
+  --listitem_border_width: 0 1px 0 0;
+}
 
 .defaultHover,
 .defaultEffect:hover,
@@ -111,10 +130,7 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault,
-.activeprimary,
-.activesecondary,
-.activedark {
+.activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
 .activedefault,
@@ -140,8 +156,15 @@
 .darkTick {
   position: absolute;
   color: var(--listitem_tickicon_color);
+}
+
+[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
   right: var(--zd_size20);
 }
+
+[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
+  left: var(--zd_size20);
+}
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
@@ -151,18 +174,27 @@
 .defaultTick > i {
   display: block;
 }
-.smallwithTick {
+[dir=ltr] .smallwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size5)
     /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
 }
-.mediumwithTick {
+[dir=rtl] .smallwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+}
+[dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size20)
     /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30)*/;
 }
-.largewithTick {
+[dir=rtl] .mediumwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30);
+}
+[dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
     var(--zd_size25)
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
 }
+[dir=rtl] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
+}