@zohodesk/components 1.0.0-temp-191 → 1.0.0-temp-192

package/lib/Select/SelectWithIcon.js

@@ -45,6 +45,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); }
+
 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); } }
@@ -410,7 +412,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props7.i18nKeys,
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
-          dataSelectorId = _this$props7.dataSelectorId;
+          dataSelectorId = _this$props7.dataSelectorId,
+          customProps = _this$props7.customProps;
+      var _customProps$listItem = customProps.listItemProps,
+          listItemProps = _customProps$listItem === void 0 ? {} : _customProps$listItem;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -536,7 +541,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           var iconName = options.iconName,
               iconSize = options.iconSize,
               iconColor = options.iconColor;
-          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
             key: options[idKey],
             value: options[valueKey],
             size: "medium",
@@ -560,7 +565,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
               ariaSelected: selectedId === options[idKey],
               ariaLabel: options[valueKey]
             }
-          });
+          }, listItemProps));
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/Select/props/defaultProps.js

@@ -79,7 +79,8 @@ var GroupSelect_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
 var SelectWithAvatar_defaultProps = {
@@ -104,7 +105,8 @@ var SelectWithAvatar_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
@@ -116,5 +118,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -186,7 +186,8 @@ var GroupSelect_propTypes = {
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
-  isDefaultSelectValue: _propTypes["default"].bool
+  isDefaultSelectValue: _propTypes["default"].bool,
+  customProps: _propTypes["default"].string
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
 
@@ -249,7 +250,8 @@ var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propType
   htmlId: _propTypes["default"].string,
   needEffect: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  customProps: _propTypes["default"].string
 });
 
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
@@ -305,6 +307,7 @@ var SelectWithIcon_propTypes = {
   searchBoxSize: _propTypes["default"].string,
   needResponsive: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
-  emptyMessage: _propTypes["default"].string
+  emptyMessage: _propTypes["default"].string,
+  customProps: _propTypes["default"].string
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/Stencils/Stencils.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* stencils default variables */
-  --stencil_height: 9px;
+  --stencil_height: var(--zd_size9);
   --stencil_width: 100%;
   --stencil_border_radius: 5px;
 }
@@ -11,14 +11,23 @@
   border-radius: var(--stencil_border_radius);
 }
 .stencil {
-  animation-name: placeHolderShimmer;
+  background-size: 800px 1px;
+}
+[dir=ltr] .stencil {
+  animation-name:  placeHolderShimmer-ltr ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+[dir=rtl] .stencil {
+  animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  background-size: 800px 1px;
 }
-@keyframes placeHolderShimmer {
+@keyframes placeHolderShimmer-ltr {
   0% {
     background-position: calc(var(--zd_size468) * -1) 0;
   }
@@ -27,10 +36,19 @@
     background-position: var(--zd_size468) 0;
   }
 }
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 100%;
+  }
+}
 
 .rectangular {
   composes: stencil;
-  --stencil_height: 9px;
+  --stencil_height: var(--zd_size9);
   --stencil_border_radius: 5px;
 }
 .primary {
@@ -47,16 +65,16 @@
 }
 
 .small {
-  --stencil_width: 110px;
+  --stencil_width: var(--zd_size110);
 }
 .default {
   --stencil_width: 100%;
 }
 .medium {
-  --stencil_width: 170px;
+  --stencil_width: var(--zd_size170);
 }
 .large {
-  --stencil_width: 220px;
+  --stencil_width: var(--zd_size220);
 }
 
 .circle {
@@ -64,15 +82,15 @@
   --stencil_border_radius: 50%;
 }
 .clarge {
-  --stencil_width: 42px;
-  --stencil_height: 42px;
+  --stencil_width: var(--zd_size42);
+  --stencil_height: var(--zd_size42);
 }
 .cmedium,
 .cdefault {
-  --stencil_width: 30px;
-  --stencil_height: 30px;
+  --stencil_width: var(--zd_size30);
+  --stencil_height: var(--zd_size30);
 }
 .csmall {
-  --stencil_width: 20px;
-  --stencil_height: 20px;
+  --stencil_width: var(--zd_size20);
+  --stencil_height: var(--zd_size20);
 }

package/lib/Switch/Switch.module.css

@@ -37,13 +37,11 @@
   {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
-
-/*rtl:begin:ignore*/
 .label:after {
   content: '';
   display: block;
   position: absolute;
-  right: 50%;
+  right: 50% ;
   transition: all var(--zd_transition2);
   box-shadow: var(--switch_cricle_box_shadow);
   background-color: var(--switch_circle_bg_color);
@@ -55,59 +53,49 @@
 }
 
 .checked+.label:after {
-  right: -1px;
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
-/*rtl:end:ignore*/
-
 .input {
   display: none;
 }
 
 .small {
-  height: 14px;
-  width: 28px;
+  height: var(--zd_size14) ;
+  width: var(--zd_size28) ;
 }
-
-/*rtl:begin:ignore*/
 .switch_smallLabel {
-  height: 9px;
-  width: 22px;
-  top: -2px;
-  left: 2px;
+  height: var(--zd_size9) ;
+  width: var(--zd_size22) ;
+  top: calc( var(--zd_size2) * -1 ) ;
+  left: var(--zd_size2) ;
 }
-
-/*rtl:end:ignore*/
 .switch_smallLabel:after {
-  width: 12px;
-  height: 12px;
-  top: -2px;
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: calc( var(--zd_size2) * -1 ) ;
 }
 
 .medium {
-  height: 18px;
-  width: 34px;
+  height: var(--zd_size18) ;
+  width: var(--zd_size34) ;
 }
-
-/*rtl:begin:ignore*/
 .switch_mediumLabel {
-  height: 13px;
-  width: 31px;
-  top: 2px;
-  left: 2px;
+  height: var(--zd_size13) ;
+  width: var(--zd_size31) ;
+  top: var(--zd_size2) ;
+  left: var(--zd_size2) ;
 }
-
-/*rtl:end:ignore*/
 .switch_mediumLabel:after {
-  width: 18px;
-  height: 18px;
-  top: -3px;
+  width: var(--zd_size18) ;
+  height: var(--zd_size18) ;
+  top: calc( var(--zd_size3) * -1 ) ;
 }
 
 .input:disabled+.label {
+  opacity: 0.4;
   border-color: var(--zdt_switch_default_off_bg);
   cursor: not-allowed;
-  opacity: 0.4;
 }
 
 .switch {
@@ -128,6 +116,13 @@
 
 .switch+label {
   position: relative;
-  top: -1px;
-  margin-left: 12px;
+  top: calc( var(--zd_size1) * -1 ) ;
+}
+
+[dir=ltr] .switch+label {
+  margin-left: var(--zd_size12) ;
+}
+
+[dir=rtl] .switch+label {
+  margin-right: var(--zd_size12) ;
 }

package/lib/Tab/Tab.module.css

@@ -1,32 +1,26 @@
 .tab {
   text-transform: uppercase;
-  cursor: pointer;
   letter-spacing: 0.6px;
   text-decoration: none;
+  cursor: pointer;
 }
-
 .vertical {
-  height: 100%;
+  height: 100% ;
 }
-
 .horizontal {
-  width: 100%;
-  max-width: 100%;
+  width: 100% ;
+  max-width: 100% ;
 }
-
 .textContainer,
 .tabText {
-  max-width: inherit;
+  max-width: inherit ;
 }
-
 .tabText {
   composes: dotted from '../common/common.module.css';
 }
-
 .disabled {
   cursor: not-allowed;
 }
-
 .border {
   border-bottom: 1px solid var(--zdt_tab_default_border);
 }
@@ -36,76 +30,71 @@
 .delta {
   transition: all var(--zd_transition2);
 }
-
 .alpha {
-  padding: 0 18px;
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
   line-height: 3;
+  padding: 0 var(--zd_size18) ;
 }
-
 .tabAlpha {
   composes: alpha;
   color: var(--zdt_tab_alpha_text);
 }
-
 .alphaHover:hover {
-  color: var(--zdt_base_color);
+  color: var(--zdt_tab_alpha_hover_text);
   background-color: var(--zdt_tab_alpha_hover_bg);
 }
-
 .alphaActive {
   composes: alpha;
   color: var(--zdt_tab_alpha_active_text);
 }
-
-.alphaActive_border,
-.betaActive_border {
+.alphaActive_border, .betaActive_border {
   border-color: var(--zdt_tab_alpha_active_border);
 }
-
 .deltaActive_border {
   border-color: var(--zdt_tab_delta_active_border);
 }
-
 .beta {
-  padding: 0 4px;
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   line-height: 4.2857;
-  margin-right: 40px;
   text-transform: capitalize;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .beta {
+  margin-right: var(--zd_size40) ;
+}
+[dir=rtl] .beta {
+  margin-left: var(--zd_size40) ;
 }
-
 .tabBeta {
   composes: beta;
   color: var(--zdt_tab_alpha_text);
 }
-
 .betaHover:hover {
-  color: var(--zdt_base_color);
+  color: var(--zdt_tab_alpha_hover_text);
 }
-
 .betaActive {
   composes: beta;
-  color: var(--zdt_base_color);
+  color: var(--zdt_tab_alpha_hover_text);
 }
-
 .delta {
-  padding: 0 4px;
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
   line-height: 3;
-  margin-right: 10px;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .delta {
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .delta {
+  margin-left: var(--zd_size10) ;
 }
-
 .tabDelta {
   composes: delta;
   color: var(--zdt_tab_alpha_text);
 }
-
 .deltaHover:hover {
   color: var(--zdt_tab_alpha_active_text);
 }
-
 .deltaActive {
   composes: delta;
   color: var(--zdt_tab_alpha_active_text);
-}
+}

package/lib/Tab/Tabs.module.css

@@ -5,12 +5,16 @@
 }
 
 .alpha {
-  height: 35px;
-  background-color: var(--zdt_base_bg);
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
 }
 
-.alpha_padding {
-  padding-left: 15px;
+[dir=ltr] .alpha_padding {
+  padding-left: var(--zd_size15) ;
+}
+
+[dir=rtl] .alpha_padding {
+  padding-right: var(--zd_size15) ;
 }
 
 .alpha_border {
@@ -23,32 +27,50 @@
   content: '';
   position: absolute;
   z-index: -2;
-  width: 76%;
-  bottom: 0;
-  height: 10px;
-  left: 12%;
+  width: 76% ;
+  bottom: 0 ;
+  height: var(--zd_size10) ;
   border-radius: 100px / 5px;
   box-shadow: var(--zd_bs_tabs_shadow);
 }
 
+[dir=ltr] .alpha::after {
+  left: 12% ;
+}
+
+[dir=rtl] .alpha::after {
+  right: 12% ;
+}
+
 .alpha:before {
   content: '';
   position: absolute;
   z-index: -1;
-  width: 100%;
+  width: 100% ;
+  height: 100% ;
+  top: 0 ;
   background: inherit;
-  height: 100%;
-  left: 0;
-  top: 0;
+}
+
+[dir=ltr] .alpha:before {
+  left: 0 ;
+}
+
+[dir=rtl] .alpha:before {
+  right: 0 ;
 }
 
 .beta {
-  height: 61px;
-  background-color: var(--zdt_base_bg);
+  height: var(--zd_size61) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .beta_padding {
+  padding-left: var(--zd_size13) ;
 }
 
-.beta_padding {
-  padding-left: 13px;
+[dir=rtl] .beta_padding {
+  padding-right: var(--zd_size13) ;
 }
 
 .beta_border {
@@ -56,12 +78,16 @@
 }
 
 .delta {
-  height: 35px;
-  background-color: var(--zdt_base_bg);
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
 }
 
-.delta_padding {
-  padding-left: 10px;
+[dir=ltr] .delta_padding {
+  padding-left: var(--zd_size10) ;
+}
+
+[dir=rtl] .delta_padding {
+  padding-right: var(--zd_size10) ;
 }
 
 .delta_border {
@@ -73,12 +99,12 @@
 }
 
 .maxWidth {
-  max-width: 100%;
+  max-width: 100% ;
 }
 
 .highlight {
   position: absolute;
-  bottom: 0;
+  bottom: 0 ;
   border-bottom: 1px solid var(--zdt_tabs_highlight_border);
 }
 
@@ -92,24 +118,20 @@
 }
 
 .menuBox {
-  max-height: 220px;
+  max-height: var(--zd_size220) ;
 }
-
-/*rtl:begin:ignore*/
 .bottomRightToLeft,
 .topRightToLeft,
 .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1);
+  right: calc(var(--tab_position_gap) * -1); 
 }
 
 .bottomLeftToRight,
 .topLeftToRight,
 .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1);
+  left: calc(var(--tab_position_gap) * -1); 
 }
 
-/*rtl:end:ignore*/
-
 .hidden {
   visibility: hidden;
 }