@zohodesk/components 1.0.0-temp-79 → 1.0.0-temp-80

package/es/common/reset.module.css

@@ -1,12 +1,12 @@
-*,
-:after,
-:before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-html {
-  font-size: 16px;
-}
+*,
+:after,
+:before {
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+html {
+  font-size: 16px;
+}

package/es/common/transition.module.css

@@ -1,106 +1,146 @@
-.zoomInEnter,
-.zoomInLeave.zoomInLeaveActive {
-  opacity: 0;
-  transform: perspective(1px) scale(1.5) translateZ(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-.zoomInEnter.zoomInEnterActive,
-.zoomInLeave {
-  opacity: 1;
-  transform: perspective(1px) scale(1) translateZ(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.scaleInEnter,
-.scaleInLeave.scaleInLeaveActive {
-  transform: scale(0);
-  opacity: 0;
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-.scaleInEnter.scaleInEnterActive,
-.scaleInLeave {
-  transform: scale(1);
-  opacity: 1;
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.fadeInEnter,
-.fadeInLeave.fadeInLeaveActive {
-  opacity: 0;
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.fadeInEnter.fadeInEnterActive,
-.fadeInLeave {
-  opacity: 1;
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideLeftEnter,
-.slideLeftLeave.slideLeftLeaveActive {
-  opacity: 0;
-  transform: translateX(110%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideLeftEnter.slideLeftEnterActive,
-.slideLeftLeave {
-  opacity: 1;
-  transform: translateX(0%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideDownEnter,
-.slideDownLeave.slideDownLeaveActive {
-  opacity: 0;
-  transform: translateY(-100%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideDownEnter.slideDownEnterActive,
-.slideDownLeave {
-  opacity: 1;
-  transform: translateY(0%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.skewInEnter,
-.skewInLeave.skewInLeaveActive {
-  opacity: 0;
-  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.skewInEnter.skewInEnterActive,
-.skewInLeave {
-  opacity: 1;
-  transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.defaultEnter,
-.defaultLeave.defaultLeaveActive {
-  display: none;
-}
-.defaultEnter.defaultEnterActive,
-.defaultLeave {
-  display: block;
-}
-
-.noneEnter,
-.noneEnter.noneEnterActive,
-.noneLeave,
-.noneLeave.noneLeaveActive {
-}
+.zoomInEnter,
+.zoomInLeave.zoomInLeaveActive {
+  opacity: 0;
+}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
+  transform: perspective(1px) scale(1.5) translateZ(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+.zoomInEnter.zoomInEnterActive,
+.zoomInLeave {
+  opacity: 1;
+}
+.zoomInEnter.zoomInEnterActive, .zoomInLeave {
+  transform: perspective(1px) scale(1) translateZ(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.scaleInEnter,
+.scaleInLeave.scaleInLeaveActive {
+  opacity: 0;
+}
+
+.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
+  transform: scale(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+.scaleInEnter.scaleInEnterActive,
+.scaleInLeave {
+  opacity: 1;
+}
+.scaleInEnter.scaleInEnterActive, .scaleInLeave {
+  transform: scale(1);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.fadeInEnter,
+.fadeInLeave.fadeInLeaveActive {
+  opacity: 0;
+}
+
+.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.fadeInEnter.fadeInEnterActive,
+.fadeInLeave {
+  opacity: 1;
+}
+
+.fadeInEnter.fadeInEnterActive, .fadeInLeave {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideLeftEnter,
+.slideLeftLeave.slideLeftLeaveActive {
+  opacity: 0;
+}
+
+.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
+  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;
+}
+
+.slideDownEnter,
+.slideDownLeave.slideDownLeaveActive {
+  opacity: 0;
+}
+
+.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
+  transform: translateY(-100%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideDownEnter.slideDownEnterActive,
+.slideDownLeave {
+  opacity: 1;
+}
+
+.slideDownEnter.slideDownEnterActive, .slideDownLeave {
+  transform: translateY(0%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.skewInEnter,
+.skewInLeave.skewInLeaveActive {
+  opacity: 0;
+}
+
+.skewInEnter, .skewInLeave.skewInLeaveActive {
+  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;
+}
+
+.defaultEnter,
+.defaultLeave.defaultLeaveActive {
+  display: none;
+}
+.defaultEnter.defaultEnterActive,
+.defaultLeave {
+  display: block;
+}

package/es/deprecated/AdvancedMultiSelect.module.css

@@ -1,113 +1,127 @@
-.wrapper {
-  position: relative;
-}
-.disabled,
-.readOnly {
-  cursor: not-allowed;
-}
-.container {
-  max-height: var(--zd_size120);
-  composes: oflowy from '../common/common.module.css';
-}
-.hasBorder {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
-}
-.borderColor_transparent {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
-}
-.effect .borderColor_transparent:hover {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
-}
-.effect .borderColor_transparent.active {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
-}
-.borderColor_default {
-  border-bottom-color: var(--zdt_advancedmultiselect_default_border);
-}
-.effect .borderColor_default:hover {
-  border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
-}
-.effect .borderColor_default.active {
-  border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
-}
-.borderColor_dark {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
-}
-.effect .borderColor_dark:hover {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
-}
-.effect .borderColor_dark.active {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
-}
-.container.medium {
-  padding: 0 var(--zd_size34) var(--zd_size7) 0;
-}
-.container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
-  min-height: var(--zd_size30);
-}
-
-.delete {
-  position: absolute;
-  bottom: 0;
-  right: var(--zd_size15);
-  padding-bottom: var(--zd_size10);
-  color: var(--zdt_advancedmultiselect_delete_text);
-  cursor: pointer;
-  background-color: var(--zdt_advancedmultiselect_delete_bg);
-  border: 0;
-}
-
-.delete:hover {
-  color: var(--zdt_advancedmultiselect_delete_hover_text);
-}
-.transparentContainer .delete {
-  opacity: 0;
-  visibility: hidden;
-}
-.transparentContainer:hover .delete {
-  opacity: 1;
-  visibility: visible;
-}
-
-.box {
-  background: var(--zdt_advancedmultiselect_box_bg);
-}
-
-.small {
-  max-height: var(--zd_size200);
-}
-
-.medium {
-  max-height: var(--zd_size350);
-}
-
-.large {
-  max-height: var(--zd_size400);
-}
-
-.dropContainer {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: var(--zd_size5);
-}
-
-.dropPopup {
-  font-size: var(--zd_font_size13);
-}
-
-.dropPopup :global .toggleDropIcon {
-  color: var(--zdt_advancedmultiselect_droppopup_text);
-}
-
-.more {
-  font-size: var(--zd_font_size14);
-  color: var(--zdt_advancedmultiselect_more_text);
-  cursor: pointer;
-  margin-top: var(--zd_size5);
-  font-family: inherit;
-  background-color: var(--zdt_advancedmultiselect_delete_bg);
-  border: 0;
+.wrapper {
+  position: relative;
+}
+.disabled, .readOnly {
+  cursor: not-allowed;
+}
+.container {
+  max-height: var(--zd_size120);
+  composes: oflowy from '../common/common.module.css';
+}
+.hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+.borderColor_transparent {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
+}
+.effect .borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
+}
+.effect .borderColor_transparent.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
+}
+.borderColor_default {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_border);
+}
+.effect .borderColor_default:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
+}
+.effect .borderColor_default.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
+}
+.borderColor_dark {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
+}
+.effect .borderColor_dark:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
+}
+.effect .borderColor_dark.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
+}
+[dir=ltr] .container.medium {
+  padding: 0 var(--zd_size34) var(--zd_size7) 0;
+}
+[dir=rtl] .container.medium {
+  padding: 0 0 var(--zd_size7) var(--zd_size34);
+}
+.container.xmedium {
+  min-height: var(--zd_size30);
+}
+[dir=ltr] .container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+}
+[dir=rtl] .container.xmedium {
+  padding: 0 0 var(--zd_size1) var(--zd_size34);
+}
+
+.delete {
+  position: absolute;
+  bottom: 0;
+  color: var(--zdt_advancedmultiselect_delete_text);
+  padding-bottom: var(--zd_size10);
+  cursor: pointer;
+  background-color: var(--zdt_advancedmultiselect_delete_bg);
+  border: 0;
+}
+
+[dir=ltr] .delete {
+  right: var(--zd_size15);
+}
+
+[dir=rtl] .delete {
+  left: var(--zd_size15);
+}
+
+.delete:hover {
+  color: var(--zdt_advancedmultiselect_delete_hover_text);
+}
+.transparentContainer .delete {
+  opacity: 0;
+  visibility: hidden;
+}
+.transparentContainer:hover .delete {
+  opacity: 1;
+  visibility: visible;
+}
+
+.box {
+  background: var(--zdt_advancedmultiselect_box_bg);
+}
+
+.small {
+  max-height: var(--zd_size200);
+}
+
+.medium {
+  max-height: var(--zd_size350);
+}
+
+.large {
+  max-height: var(--zd_size400);
+}
+
+.dropContainer {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: var(--zd_size5);
+}
+
+.dropPopup {
+  font-size: var(--zd_font_size13);
+}
+
+.dropPopup :global .toggleDropIcon {
+  color: var(--zdt_advancedmultiselect_droppopup_text);
+}
+
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_advancedmultiselect_more_text);
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  background-color: var(--zdt_advancedmultiselect_delete_bg);
+  border: 0;
 }

package/es/deprecated/PortalLayer/PortalLayer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { propTypes } from './props/propTypes';
-import { defaultProps } from './props/defaultProps'; //Components
-
+import { defaultProps } from './props/defaultProps';
+//Components
 import Modal from '../../Modal/Modal';
 let RefElement = /*#__PURE__*/React.forwardRef((props, ref) => {
   let {
@@ -28,23 +28,20 @@ export default class PortalLayer extends React.Component {
     this.updateState = this.updateState.bind(this);
     this.getState = this.getState.bind(this);
   }
-
   componentDidUpdate(prevProps) {
     let {
-      isActive
-    } = this.props,
-        {
-      isActive: prevActive
-    } = prevProps;
+        isActive
+      } = this.props,
+      {
+        isActive: prevActive
+      } = prevProps;
     isActive = Boolean(isActive), prevActive = Boolean(prevActive);
-
     if (typeof isActive !== 'undefined' && isActive != prevActive && Boolean(this.state.isOpen) != isActive) {
       this.setState({
         isOpen: isActive
       });
     }
   }
-
   updateState(alertState) {
     if (typeof alertState === 'boolean') {
       this.setState({
@@ -54,11 +51,9 @@ export default class PortalLayer extends React.Component {
       this.setState(alertState);
     }
   }
-
   getState() {
     return Object.keys(this.state).length == 1 ? this.state.isOpen : this.state;
   }
-
   componentDidMount() {
     let {
       saveUpdateFunction,
@@ -68,20 +63,19 @@ export default class PortalLayer extends React.Component {
     saveUpdateFunction && saveUpdateFunction(this.updateState, name);
     saveGetFunction && saveGetFunction(this.getState, name);
   }
-
   render() {
     let {
-      children,
-      renderChildren,
-      portalId,
-      autoZIndexNeeded,
-      isChildrenRestrictionNeeded
-    } = this.props,
-        {
-      isOpen = false
-    } = this.state;
+        children,
+        renderChildren,
+        portalId,
+        autoZIndexNeeded,
+        isChildrenRestrictionNeeded
+      } = this.props,
+      {
+        isOpen = false
+      } = this.state;
     let Element = children && children.type,
-        elementProps = children && children.props;
+      elementProps = children && children.props;
     return /*#__PURE__*/React.createElement(Modal, {
       autoZIndexNeeded: autoZIndexNeeded,
       portalId: portalId,
@@ -94,11 +88,9 @@ export default class PortalLayer extends React.Component {
       isActive: isOpen
     }));
   }
-
 }
 PortalLayer.defaultProps = defaultProps;
 PortalLayer.propTypes = propTypes;
-
 if (false) {
   PortalLayer.docs = {
     componentGroup: 'Atom',

package/es/deprecated/PortalLayer/docs/PortalLayer__default.docs.js

@@ -23,7 +23,6 @@ export class FreezeLayer extends Component {
       ref: forwardRef
     });
   }
-
 }
 FreezeLayer.propTypes = {
   onClick: PropTypes.func,
@@ -36,19 +35,15 @@ export default class PortalLayer__default extends Component {
     this.handlePortalLayer = this.handlePortalLayer.bind(this);
     this.getPortalState = this.getPortalState.bind(this);
   }
-
   handlePortalLayer(func) {
     this.toggle = func;
   }
-
   getPortalState(func) {
     this.portalState = func;
   }
-
   onToggle() {
     this.toggle(!this.portalState());
   }
-
   render() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
       text: "Click me",
@@ -61,9 +56,7 @@ export default class PortalLayer__default extends Component {
       onClick: this.onToggle
     })));
   }
-
 }
-
 if (false) {
   PortalLayer__default.docs = {
     componentGroup: 'Atom',

package/es/index.js

@@ -145,8 +145,9 @@ export { Provider } from './Provider/IdProvider';
 export { default as Provider__Id_For_ClassComponent } from './Provider/docs/Provider_Id__Class.docs';
 export { default as Provider__Id_For_FunctionComponent } from './Provider/docs/Provider_Id__Function.docs';
 export { default as Provider__Zindex_For_ClassComponent } from './Provider/docs/Provider_Zindex__Class.docs';
-export { default as Provider__Zindex_For_FunctionComponent } from './Provider/docs/Provider_Zindex__Function.docs'; //semantic//
+export { default as Provider__Zindex_For_FunctionComponent } from './Provider/docs/Provider_Zindex__Function.docs';
 
+//semantic//
 export { default as SemanticButton } from './semantic/Button/Button';
 export { default as SemanticButton__default } from './semantic/Button/docs/Button__default.docs.js';
 export { default as LightNightMode__AlternativeColors } from './LightNightMode/docs/AlternativeColors.docs';

package/es/semantic/Button/Button.js

@@ -6,7 +6,6 @@ export default class Button extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     const {
       value,
@@ -48,11 +47,9 @@ export default class Button extends React.Component {
       "data-title": title
     }, children ? children : text);
   }
-
 }
 Button.defaultProps = defaultProps;
 Button.propTypes = propTypes;
-
 if (false) {
   Button.docs = {
     componentGroup: 'semantic',