@zohodesk/components 1.0.0-alpha-232 → 1.0.0-alpha-235

package/es/common/docStyle.module.css

@@ -1,11 +1,11 @@
 .cboth::after {
   content: '.';
+  clear: both;
   display: block;
   font-size: 0;
   height: 0;
   line-height: 0;
   visibility: hidden;
-  clear: both;
 }
 
 .m10 {
@@ -16,14 +16,10 @@
   margin: 50px;
 }
 
-[dir=ltr] .pl10 {
+.pl10 {
   padding-left: 10px;
 }
 
-[dir=rtl] .pl10 {
-  padding-right: 10px;
-}
-
 .p10 {
   padding: 10px;
 }
@@ -65,14 +61,10 @@
   margin-bottom: 20px;
 }
 
-[dir=ltr] .mr20 {
+.mr20 {
   margin-right: 20px;
 }
 
-[dir=rtl] .mr20 {
-  margin-left: 20px;
-}
-
 .w60 {
   width: 60%;
 }
@@ -98,25 +90,22 @@
 }
 
 .dark {
-  composes: p10;
   background-color: var(--dot_black);
+  composes: p10;
 }
 
 .table {
-  composes: p10;
-  composes: cboth;
   border: 1px solid var(--zd_smoke84);
   border-radius: 3px;
+  composes: p10;
+  composes: cboth;
 }
 
-[dir=ltr] .table .w60, [dir=ltr] .table .w40 {
+.table .w60,
+.table .w40 {
   float: left;
 }
 
-[dir=rtl] .table .w60, [dir=rtl] .table .w40 {
-  float: right;
-}
-
 .tableheading {
   composes: blue;
   background:var(--zd_smoke1);
@@ -128,10 +117,10 @@
   composes: p10;
   composes: m10;
   width: 200px;
-  composes: tcenter;
-  font-weight: bold;
   border: 1px solid var(--zd_smoke83);
   border-radius: 3px;
+  composes: tcenter;
+  font-weight: bold;
 }
 
 .palette .palettecard {
@@ -147,10 +136,10 @@
 
 .fontlist {
   composes: tcenter;
-  composes: p10;
-  composes: m10;
   border: 1px solid var(--zd_smoke83);
   border-radius: 3px;
+  composes: p10;
+  composes: m10;
 }
 
 .fontlist span {
@@ -159,9 +148,9 @@
 }
 
 .cover {
+  border: 1px solid var(--zd_smoke1);
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_smoke1);
   border-radius: 5px;
 }
 
@@ -205,7 +194,8 @@
   background-color: #e2e4e6;
   padding: 5px;
 }
-.content, .trow {
+.content,
+.trow {
   padding: 5px;
 }
 .trow {
@@ -215,19 +205,14 @@
   background-color: #f6f6f6;
 }
 .colorvalue {
-  font-size: 13px;
-  color: #000;
   background-color: #e2e4e6;
   padding: 3px;
+  margin-right: 3px;
   border-radius: 5px;
+  font-size: 13px;
+  color: #000;
   cursor: pointer;
 }
-[dir=ltr] .colorvalue {
-  margin-right: 3px;
-}
-[dir=rtl] .colorvalue {
-  margin-left: 3px;
-}
 .rect {
   width: 40px;
   height: 40px;
@@ -243,25 +228,20 @@
   flex-direction: column;
   border: 1px dotted #ccc;
   padding: 4px 6px;
-}
-[dir=ltr] .nestedDiv {
   margin-right: 5px;
 }
-[dir=rtl] .nestedDiv {
-  margin-left: 5px;
-}
 .para {
   font-size: 13px;
   margin-bottom: 5px;
 }
 
 [data-mode='default'] {
-  color: #000;
   background: #fff;
+  color: #000;
 }
 [data-mode='dark'] {
-  color: #E2E4E6;
   background: #232B38;
+  color: #E2E4E6;
 }
 
 .baseHue {
@@ -275,13 +255,8 @@
   --avatar_bg_color: hsl(var(--hue), 100%, 90%);
   --avatar_border_color: hsl(var(--hue), 100%, 60%);
   --avatar_text_color: hsl(var(--hue), 100%, 40%);
-}
-[dir=ltr] .customAvatar {
   --avatar_border_radius: 0 12px/*rtl: 12px 0*/;
 }
-[dir=rtl] .customAvatar {
-  --avatar_border_radius: 12px 0;
-}
 .customAvatar:hover {
   --avatar_border_width: 2px;
   --avatar_bg_color: hsl(var(--hue), 100%, 85%);
@@ -416,15 +391,10 @@
 .customDropbox {
   composes: baseHue;
   --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
+  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
   --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
   --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 90%);
 }
-[dir=ltr] .customDropbox {
-  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
-}
-[dir=rtl] .customDropbox {
-  --dropbox_border_radius: 0 30px;
-}
 .customDropbox:hover {
   --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 80%);
   --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 80%);
@@ -628,39 +598,24 @@
 }
 .flagRibbon {
   composes: ribbon;
-}
-[dir=ltr] .flagRibbon {
   --ribbon_padding: 10px 20px/*rtl: 10px 20px*/;
   --ribbon_flag_border_width: 20px 10px 20px 0/*rtl: 20px 0 20px 10px*/;
 }
-[dir=rtl] .flagRibbon {
-  --ribbon_padding: 10px 20px;
-  --ribbon_flag_border_width: 20px 0 20px 10px;
-}
 .tagRibbon {
   composes: ribbon;
+  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
+  border-color: hsl(var(--hue), 100%, 50%);
+  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
+  margin-left: 30px;
+  padding: 18px 30px/*rtl: 18px 30px*/;
   height: 56px;
   --ribbon_tag_before_width: 40px;
   --ribbon_tag_before_height: 40px;
+  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
   --ribbon_tag_before_border_color: hsl(var(--hue), 100%, 50%);
   --ribbon_tag_before_left: -20px;
   --ribbon_tag_before_top: 6px;
   --ribbon_tag_before_border_radius: 0;
-  border-color: hsl(var(--hue), 100%, 50%);
-}
-[dir=ltr] .tagRibbon {
-  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
-  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
-  margin-left: 30px;
-  padding: 18px 30px/*rtl: 18px 30px*/;
-  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
-}
-[dir=rtl] .tagRibbon {
-  border-width: 2px 0 2px 2px;
-  border-radius: 6px 0 0 6px;
-  margin-right: 30px;
-  padding: 18px 30px;
-  --ribbon_tag_before_border_width: 2px 2px 0 0;
 }
 .boxRibbon {
   composes: ribbon;
@@ -695,10 +650,10 @@
 /* custom textboxicon css */
 .customTboxwrap {
   composes: baseHue;
-  --textboxicon_icon_margin: 4px 10px;
-  --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
   background-color: hsl(var(--hue), 100%, 90%);
   margin: 5px 0;
+  --textboxicon_icon_margin: 4px 10px;
+  --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
 }
 .customTbox {
   --textbox_text_color: hsl(var(--hue), 100%, 50%);
@@ -725,8 +680,6 @@
 .tBoxIconRead,
 .tBoxIconDisable {
   composes: baseHue;
-}
-.tBoxIconRead, .tBoxIconDisable {
   background-color: hsl(var(--hue), 100%, 90%);
   margin: 5px 0;
 }
@@ -740,11 +693,11 @@
 /* custom textarea css */
 .customTextarea {
   composes: baseHue;
+  background-color: hsl(var(--hue), 100%, 97%);
   --textarea_border_width: 1px;
   --textarea_border_color: hsl(var(--hue), 100%, 50%);
   --textarea_text_color: hsl(var(--hue), 100%, 50%);
   --textarea_padding: 2px 10px;
-  background-color: hsl(var(--hue), 100%, 97%);
 }
 .customTextarea:hover {
   --textarea_border_color: hsl(var(--hue), 100%, 40%);
@@ -754,9 +707,9 @@
 }
 .disabledTarea {
   composes: baseHue;
+  background-color: hsl(var(--hue), 100%, 97%);
   --textarea_border_width: 1px;
   --textarea_border_color: hsl(var(--hue), 100%, 80%);
   --textarea_text_color: hsl(var(--hue), 100%, 80%);
   --textarea_padding: 2px 10px;
-  background-color: hsl(var(--hue), 100%, 97%);
 }

package/es/common/transition.module.css

@@ -1,7 +1,6 @@
 .zoomInEnter,
 .zoomInLeave.zoomInLeaveActive {
   opacity: 0;
-}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
   transform: perspective(1px) scale(1.5) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -9,8 +8,6 @@
 .zoomInEnter.zoomInEnterActive,
 .zoomInLeave {
   opacity: 1;
-}
-.zoomInEnter.zoomInEnterActive, .zoomInLeave {
   transform: perspective(1px) scale(1) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -18,20 +15,15 @@
 
 .scaleInEnter,
 .scaleInLeave.scaleInLeaveActive {
-  opacity: 0;
-}
-
-.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
   transform: scale(0);
+  opacity: 0;
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 .scaleInEnter.scaleInEnterActive,
 .scaleInLeave {
-  opacity: 1;
-}
-.scaleInEnter.scaleInEnterActive, .scaleInLeave {
   transform: scale(1);
+  opacity: 1;
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -39,9 +31,6 @@
 .fadeInEnter,
 .fadeInLeave.fadeInLeaveActive {
   opacity: 0;
-}
-
-.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -49,9 +38,6 @@
 .fadeInEnter.fadeInEnterActive,
 .fadeInLeave {
   opacity: 1;
-}
-
-.fadeInEnter.fadeInEnterActive, .fadeInLeave {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -59,27 +45,14 @@
 .slideLeftEnter,
 .slideLeftLeave.slideLeftLeaveActive {
   opacity: 0;
-}
-
-.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(110%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 
-[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
-  transform: translateX(110%);
-}
-
-[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
-  transform: translateX(-110%);
-}
-
 .slideLeftEnter.slideLeftEnterActive,
 .slideLeftLeave {
   opacity: 1;
-}
-
-.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
   transform: translateX(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -88,9 +61,6 @@
 .slideDownEnter,
 .slideDownLeave.slideDownLeaveActive {
   opacity: 0;
-}
-
-.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
   transform: translateY(-100%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -99,9 +69,6 @@
 .slideDownEnter.slideDownEnterActive,
 .slideDownLeave {
   opacity: 1;
-}
-
-.slideDownEnter.slideDownEnterActive, .slideDownLeave {
   transform: translateY(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -110,27 +77,14 @@
 .skewInEnter,
 .skewInLeave.skewInLeaveActive {
   opacity: 0;
-}
-
-.skewInEnter, .skewInLeave.skewInLeaveActive {
+  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 
-[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
-  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
-}
-
-[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
-  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
-}
-
 .skewInEnter.skewInEnterActive,
 .skewInLeave {
   opacity: 1;
-}
-
-.skewInEnter.skewInEnterActive, .skewInLeave {
   transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -144,3 +98,9 @@
 .defaultLeave {
   display: block;
 }
+
+.noneEnter,
+.noneEnter.noneEnterActive,
+.noneLeave,
+.noneLeave.noneLeaveActive {
+}

package/es/semantic/Button/semanticButton.module.css

@@ -1,9 +1,9 @@
 .buttonReset {
-  outline: 0;
-  font: inherit;
-  color: inherit;
   border: inherit;
+  outline: 0;
   background-color: inherit;
+  font: inherit;
   padding: 0;
+  color: inherit;
   text-align: inherit;
 }

package/lib/DropBox/DropBox.js

@@ -171,7 +171,7 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
         } : {};
       }
 
-      boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
+      boxPosition = boxPosition ? boxPosition : 'bottomCenter';
       var boxDirection = _DropBoxPositionMapping.positionMapping[boxPosition].direction;
       /*getting box direction*/
 

package/lib/ListItem/ListContainer.js

@@ -51,19 +51,16 @@ var ListContainer = function ListContainer(props) {
       onMouseOver = props.onMouseOver,
       eleRef = props.eleRef;
   var responsiveFunc = (0, _react.useCallback)(function (_ref) {
-    var mediaQueryOR = _ref.mediaQueryOR,
-        isTouchDevice = _ref.isTouchDevice;
+    var mediaQueryOR = _ref.mediaQueryOR;
     return {
       mobileToTab: mediaQueryOR([{
         maxWidth: 700
-      }]),
-      isTouchDevice: isTouchDevice
+      }])
     };
   }, []);
 
   var _useResponsiveReceive = (0, _CustomResponsive.useResponsiveReceiver)('Helmet', responsiveFunc),
-      mobileToTab = _useResponsiveReceive.mobileToTab,
-      isTouchDevice = _useResponsiveReceive.isTouchDevice;
+      mobileToTab = _useResponsiveReceive.mobileToTab;
 
   var role = a11y.role,
       ariaSelected = a11y.ariaSelected;
@@ -88,7 +85,7 @@ var ListContainer = function ListContainer(props) {
     isCover: false,
     align: "vertical",
     alignBox: "row",
-    className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(mobileToTab && isTouchDevice ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
+    className: "".concat(_ListItemModule["default"].list, "  ").concat(mobileToTab ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
     dataId: dataId,
     onClick: !isDisabled && onClick,
     onMouseEnter: onMouseEnter,

package/lib/ListItem/ListItem.js

@@ -135,7 +135,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: dataIdString,
         isLink: isLink,
         href: href,

package/lib/ListItem/ListItem.module.css

@@ -184,10 +184,10 @@
 [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_size39)*/;
+    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
+  --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)
@@ -199,7 +199,12 @@
 }
 .responsiveHeight {
   --listitem_height: var(--zd_size45);
-  font-size: var(--zd_font_size15);
-  padding-top: var(--zd_size10);
-  padding-bottom: var(--zd_size10);
+}
+[dir=ltr] .responsiveHeight {
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
+    var(--zd_size20)
+    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
+}
+[dir=rtl] .responsiveHeight {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -147,7 +147,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         onClick: this.handleClick,
         onMouseEnter: this.handleMouseEnter,

package/lib/ListItem/ListItemWithCheckBox.js

@@ -125,7 +125,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
         onClick: this.onClick,
         onMouseOver: this.onHover,

package/lib/ListItem/ListItemWithIcon.js

@@ -132,7 +132,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customClass,
+        customClass: "".concat(customClass),
         dataId: dataIdString,
         isLink: isLink,
         href: href,

package/lib/ListItem/ListItemWithRadio.js

@@ -126,7 +126,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: dataId,
         onClick: this.onClick,
         onMouseOver: this.onHover,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-232",
+  "version": "1.0.0-alpha-235",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -20,8 +20,9 @@
     "docs": "npm run dubCheck && react-cli docs",
     "build": " react-cli build:component:cmjs",
     "buildlocal": " react-cli build:component:cmjs && npm run rtl",
-    "build:dev": "npm run build:es --module:mode=dev -- -w",
+    "build:dev": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
     "build:es": "react-cli build:library:es",
+    "rtl:watch": "react-cli rtl ./src ./es -w",
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "react-cli clean assets &&  npm run init &&  npm run build && npm run build:es && npm run rtl",
@@ -35,11 +36,11 @@
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/variables": "1.0.0-beta.29",
-    "@zohodesk/icons": "1.0.0-beta.92",
+    "@zohodesk/icons": "1.0.0-beta.98",
     "@zohodesk/virtualizer": "1.0.3",
-    "velocity-react": "^1.4.1",
+    "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.41"
+    "@zohodesk/svg": "1.0.0-beta.42"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -48,11 +49,11 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "^1.0.0-beta.92",
-    "@zohodesk/variables": "^1.0.0-beta.29",
-    "@zohodesk/svg": "^1.0.0-beta.41",
-    "@zohodesk/virtualizer": "^1.0.3",
-    "velocity-react": "^1.4.1",
+    "@zohodesk/icons": "1.0.0-beta.98",
+    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/svg": "1.0.0-beta.42",
+    "@zohodesk/virtualizer": "1.0.3",
+    "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3"
   },
   "react-cli": {
@@ -60,6 +61,7 @@
       "runner": "preprocess/index.js"
     },
     "docs": {
+      "disableES5Transpile": true,
       "componentFolder": "./src",
       "cssUniqueness": "false",
       "rtlExclude": [