@zohodesk/components 1.0.0-alpha-195 → 1.0.0-alpha-199

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_bg_black);
+  composes: p10;
 }
 
 .table {
-  composes: p10;
-  composes: cboth;
   border: 1px solid var(--zd_border_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_bg_smoke1);
@@ -128,10 +117,10 @@
   composes: p10;
   composes: m10;
   width: 200px;
-  composes: tcenter;
-  font-weight: bold;
   border: 1px solid var(--zd_border_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_border_smoke83);
   border-radius: 3px;
+  composes: p10;
+  composes: m10;
 }
 
 .fontlist span {
@@ -159,9 +148,9 @@
 }
 
 .cover {
+  border: 1px solid var(--zd_border_smoke1);
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_border_smoke1);
   border-radius: 5px;
 }
 
@@ -199,12 +188,12 @@
 }
 
 [data-mode='default'] {
-  color: #000;
   background: #fff;
+  color: #000;
 }
 [data-mode='dark'] {
-  color: #E2E4E6;
   background: #232B38;
+  color: #E2E4E6;
 }
 
 .baseHue {
@@ -218,13 +207,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%);
@@ -359,15 +343,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%);
@@ -571,39 +550,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;
@@ -638,10 +602,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%);
@@ -668,8 +632,6 @@
 .tBoxIconRead,
 .tBoxIconDisable {
   composes: baseHue;
-}
-.tBoxIconRead, .tBoxIconDisable {
   background-color: hsl(var(--hue), 100%, 90%);
   margin: 5px 0;
 }
@@ -683,11 +645,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%);
@@ -697,9 +659,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: 0.3s;
   transition-property: all;
@@ -9,8 +8,6 @@
 .zoomInEnter.zoomInEnterActive,
 .zoomInLeave {
   opacity: 1;
-}
-.zoomInEnter.zoomInEnterActive, .zoomInLeave {
   transform: perspective(1px) scale(1) translateZ(0);
   transition-duration: 0.3s;
   transition-property: all;
@@ -18,20 +15,15 @@
 
 .scaleInEnter,
 .scaleInLeave.scaleInLeaveActive {
-  opacity: 0;
-}
-
-.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
   transform: scale(0);
+  opacity: 0;
   transition-duration: 0.3s;
   transition-property: all;
 }
 .scaleInEnter.scaleInEnterActive,
 .scaleInLeave {
-  opacity: 1;
-}
-.scaleInEnter.scaleInEnterActive, .scaleInLeave {
   transform: scale(1);
+  opacity: 1;
   transition-duration: 0.3s;
   transition-property: all;
 }
@@ -39,9 +31,6 @@
 .fadeInEnter,
 .fadeInLeave.fadeInLeaveActive {
   opacity: 0;
-}
-
-.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
   transition-duration: 0.3s;
   transition-property: all;
 }
@@ -49,9 +38,6 @@
 .fadeInEnter.fadeInEnterActive,
 .fadeInLeave {
   opacity: 1;
-}
-
-.fadeInEnter.fadeInEnterActive, .fadeInLeave {
   transition-duration: 0.3s;
   transition-property: all;
 }
@@ -59,27 +45,14 @@
 .slideLeftEnter,
 .slideLeftLeave.slideLeftLeaveActive {
   opacity: 0;
-}
-
-.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(110%);
   transition-duration: 0.3s;
   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: 0.3s;
   transition-property: all;
@@ -88,9 +61,6 @@
 .slideDownEnter,
 .slideDownLeave.slideDownLeaveActive {
   opacity: 0;
-}
-
-.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
   transform: translateY(-100%);
   transition-duration: 0.3s;
   transition-property: all;
@@ -99,9 +69,6 @@
 .slideDownEnter.slideDownEnterActive,
 .slideDownLeave {
   opacity: 1;
-}
-
-.slideDownEnter.slideDownEnterActive, .slideDownLeave {
   transform: translateY(0%);
   transition-duration: 0.3s;
   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: 0.3s;
   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: 0.3s;
   transition-property: all;
@@ -144,3 +98,9 @@
 .defaultLeave {
   display: block;
 }
+
+.noneEnter,
+.noneEnter.noneEnterActive,
+.noneLeave,
+.noneLeave.noneLeaveActive {
+}

package/es/deprecated/customscroll_Old.module.css

@@ -30,10 +30,10 @@
 }
 
 .customscroll ::-webkit-scrollbar-thumb {
-  min-height: var(--zd_size28);
   background-color: rgba(0, 0, 0, 0.2);
   background-clip: padding-box;
   border: solid transparent;
+  min-height: var(--zd_size28);
   border-radius: var(--zd_size10);
 }
 

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/es/utils/ContextOptimizer.js

@@ -0,0 +1,38 @@
+/** ** Libraries *** */
+import { useContext, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { shallowEqual } from 'react-redux'; // Please use this component with children as inline function for force this components rerender when parent rerender regardless of reason
+// Because below componends only rerender when children or calculation are changed, unless no changes will update below
+// this component logic based on return same children reference to stop rerender.
+// Think before change logic
+// eslint-disable-next-line import/prefer-default-export
+
+export function ContextOptimizer(props) {
+  const {
+    Context,
+    children: renderF,
+    calculation
+  } = props;
+  const contextData = useContext(Context);
+  const data = calculation(contextData);
+  const {
+    current: local
+  } = useRef({
+    children: null,
+    data: null,
+    renderF: null
+  });
+
+  if (!shallowEqual(data, local.data) || local.renderF !== renderF) {
+    local.children = renderF(data);
+    local.data = data;
+    local.renderF = renderF;
+  }
+
+  return local.children;
+}
+ContextOptimizer.propTypes = {
+  calculation: PropTypes.func.isRequired,
+  children: PropTypes.func.isRequired,
+  Context: PropTypes.any.isRequired
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-195",
+  "version": "1.0.0-alpha-199",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/variables": "1.0.0-beta.21",
+    "@zohodesk/variables": "1.0.0-beta.23",
     "@zohodesk/icons": "1.0.0-beta.79",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "^1.4.1",
@@ -48,7 +48,7 @@
   },
   "peerDependencies": {
     "@zohodesk/icons": "^1.0.0-beta.79",
-    "@zohodesk/variables": "^1.0.0-beta.21",
+    "@zohodesk/variables": "^1.0.0-beta.23",
     "@zohodesk/svg": "^1.0.0-beta.33",
     "@zohodesk/virtualizer": "^1.0.3",
     "velocity-react": "^1.4.1",

package/lib/Accordion/Accordion.js

@@ -1,146 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var Accordion = /*#__PURE__*/function (_React$Component) {
-  _inherits(Accordion, _React$Component);
-
-  var _super = _createSuper(Accordion);
-
-  function Accordion(props) {
-    var _this;
-
-    _classCallCheck(this, Accordion);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      selectedItem: _this.props.selectedItem
-    };
-    _this.selectMenu = _this.selectMenu.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(Accordion, [{
-    key: "selectMenu",
-    value: function selectMenu(selectedItem) {
-      var _this$props = this.props,
-          onSelect = _this$props.onSelect,
-          disableInternalState = _this$props.disableInternalState;
-
-      if (onSelect) {
-        onSelect(selectedItem);
-      }
-
-      !disableInternalState && this.setState({
-        selectedItem: selectedItem
-      });
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
-        this.setState({
-          selectedItem: nextProps.selectedItem
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          height = _this$props2.height,
-          unMount = _this$props2.unMount,
-          disableInternalState = _this$props2.disableInternalState,
-          propSelectedItem = _this$props2.selectedItem,
-          a11y = _this$props2.a11y;
-      var selectedItem = this.state.selectedItem;
-
-      var children = _react["default"].Children.map(this.props.children, function (child) {
-        if (child) {
-          return /*#__PURE__*/_react["default"].cloneElement(child, {
-            selectedItem: disableInternalState ? propSelectedItem : selectedItem,
-            selectMenu: _this2.selectMenu,
-            unMount: unMount
-          });
-        }
-      });
-
-      var role = a11y.role,
-          ariaExpanded = a11y.ariaExpanded,
-          ariaHaspopup = a11y.ariaHaspopup;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
-        style: {
-          height: height
-        },
-        role: role,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHaspopup
-      }, children);
-    }
-  }]);
-
-  return Accordion;
-}(_react["default"].Component);
-
-exports["default"] = Accordion;
-Accordion.propTypes = {
-  children: _propTypes["default"].node,
-  className: _propTypes["default"].string,
-  disableInternalState: _propTypes["default"].bool,
-  height: _propTypes["default"].string,
-  onSelect: _propTypes["default"].func,
-  selectedItem: _propTypes["default"].string.isRequired,
-  unMount: _propTypes["default"].bool,
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string,
-    ariaExpanded: _propTypes["default"].bool,
-    ariaHaspopup: _propTypes["default"].bool
-  })
-};
-Accordion.defaultProps = {
-  unMount: true,
-  disableInternalState: false,
-  a11y: {}
-};
-
-if (false) {
-  Accordion.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide'
-  };
-}