@zohodesk/dot 1.0.0-beta.266 → 1.0.0-beta.268

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -41,25 +41,20 @@ export class StatusDropdown extends React.Component {
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.getAriaId = getUniqueId(this);
   }
-
   emptySearchSVG() {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
   }
-
   inputRef(el) {
     this.hiddenInput = el;
   }
-
   itemRef(ele, index, id) {
     this[`suggestion_${id}`] = ele;
   }
-
   searchInputRef(el) {
     this.searchInput = el;
   }
-
   handleTogglePopup(e) {
     let {
       togglePopup,
@@ -72,17 +67,14 @@ export class StatusDropdown extends React.Component {
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e, boxPosition);
   }
-
   scrollContentRef(el) {
     let {
       isPopupOpen
     } = this.props;
-
     if (isPopupOpen) {
       this.optionsContainer = el;
     }
   }
-
   componentWillReceiveProps(nextProps) {
     if (nextProps.options.length != this.props.options.length) {
       this.setState({
@@ -90,7 +82,6 @@ export class StatusDropdown extends React.Component {
       });
     }
   }
-
   onSelect(element, e) {
     let {
       onClick,
@@ -102,7 +93,6 @@ export class StatusDropdown extends React.Component {
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e);
   }
-
   componentDidUpdate(prevProps) {
     let {
       isPopupOpen,
@@ -113,27 +103,22 @@ export class StatusDropdown extends React.Component {
       selectedIndex,
       options
     } = this.state;
-
     if (prevProps.isPopupOpen != isPopupOpen) {
       setTimeout(() => {
         isPopupOpen && isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus();
       }, 10);
     }
-
     let mergeOptions = options;
     let option = mergeOptions[selectedIndex];
     let id = option && option[idName] || {};
     let selSuggestion = this[`suggestion_${id}`];
-
     if (isPopupOpen) {
       this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
     }
-
     if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
       this.onSearchClear();
     }
   }
-
   handleKeyDown(e) {
     let {
       keyCode
@@ -153,7 +138,6 @@ export class StatusDropdown extends React.Component {
       onTogglePopup,
       isPopupOpen
     } = this.props;
-
     if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
     }
@@ -169,14 +153,11 @@ export class StatusDropdown extends React.Component {
             if (selectedIndex === totalIndex - 3) {
               isNextOptions && getNextOptions && getNextOptions();
             }
-
             this.setState({
               selectedIndex: selectedIndex + 1
             });
           }
-
           break;
-
         case 38:
           if (selectedIndex === 0) {
             this.setState({
@@ -187,15 +168,12 @@ export class StatusDropdown extends React.Component {
               selectedIndex: selectedIndex - 1
             });
           }
-
           break;
-
         case 13:
           onClick && onClick(options[selectedIndex].name, e);
           onTogglePopup && onTogglePopup(isPopupOpen);
           togglePopup(e, boxPosition);
           break;
-
         default:
           break;
       }
@@ -205,7 +183,6 @@ export class StatusDropdown extends React.Component {
       }
     }
   }
-
   searchList(value) {
     let {
       options,
@@ -214,7 +191,6 @@ export class StatusDropdown extends React.Component {
     let foptions = options.filter(dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1);
     return foptions;
   }
-
   handleChange(value, e) {
     let foptions = this.searchList(value);
     this.setState({
@@ -223,7 +199,6 @@ export class StatusDropdown extends React.Component {
       options: foptions
     });
   }
-
   onSearchClear() {
     let foptions = this.searchList('');
     this.setState({
@@ -231,24 +206,20 @@ export class StatusDropdown extends React.Component {
       options: foptions
     });
   }
-
   handleMouseEnter(id, value, index, e) {
     this.setState({
       selectedIndex: index
     });
   }
-
   handleScroll(e) {
     const {
       isNextOptions,
       getNextOptions
     } = this.props;
-
     if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
       isNextOptions && getNextOptions && getNextOptions(e);
     }
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -259,7 +230,6 @@ export class StatusDropdown extends React.Component {
       }])
     };
   }
-
   render() {
     let {
       options,
@@ -443,8 +413,8 @@ export class StatusDropdown extends React.Component {
       }, /*#__PURE__*/React.createElement(Loader, null)))));
     }) : null);
   }
-
-} // if (__DOCS__) {
+}
+// if (__DOCS__) {
 //   StatusDropdown.docs = {
 //     componentGroup: 'Molecule'
 //   };

package/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -1,92 +1,92 @@
-.container {
-  max-width: 100% ;
-}
-.posRel {
-  position: relative;
-}
-.maxHgt {
-  max-height: var(--zd_size265) ;
-  padding: var(--zd_size10) 0 ;
-}
-.responsivemaxHgt{
-  padding: var(--zd_size10) 0 0 ;
-}
-.title {
-  padding-top: var(--zd_size6) ;
-}
-[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
-  padding: 0 0 0 var(--zd_size5) ;
-}
-[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
-  padding: 0 var(--zd_size5) 0 0 ;
-}
-.overlay_arrow {
-  position: absolute;
-  top: 50% ;
-  transform: translateY(-50%) perspective(1px);
-}
-[dir=ltr] .overlay_arrow {
-  left: 100% ;
-}
-[dir=rtl] .overlay_arrow {
-  right: 100% ;
-}
-.hoverIcon .arrow {
-  opacity: 0;
-  visibility: hidden;
-}
-.hoverIcon:hover .arrow {
-  opacity: 1;
-  visibility: visible;
-}
-.value {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.search {
-  padding: var(--zd_size6) var(--zd_size20) 0 ;
-}
-.svgWrapper {
-  padding-bottom: var(--zd_size25) ;
-}
-.readOnly {
-  cursor: no-drop;
-}
-.cursorDefault {
-  cursor: default;
-}
-.cursor {
-  cursor: pointer;
-}
-[dir=ltr] .dropBoxContainer {
-  text-align: left;
-}
-[dir=rtl] .dropBoxContainer {
-  text-align: right;
-}
-[dir=ltr] .iconBox {
-  margin-right: var(--zd_size4) ;
-}
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size4) ;
-}
-.iconBox > i {
-  display: block;
-}
-.loader {
-  width: var(--zd_size40) ;
-  margin: 0 auto ;
-}
-.seperatedLine {
-  height: var(--zd_size1) ;
-  border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
-  margin: var(--zd_size9) 0 var(--zd_size10) ;
-}
-.hiddenInput {
-  width: 0 ;
-  height: 0 ;
-  opacity: 0;
-}
-.hiddenInput > input {
-  width: 100% ;
-  padding: 0 ;
-}
+.container {
+  max-width: 100%;
+}
+.posRel {
+  position: relative;
+}
+.maxHgt {
+  max-height: 265px;
+  padding: 10px 0;
+}
+.responsivemaxHgt{
+  padding: 10px 0 0;
+}
+.title {
+  padding-top: 6px;
+}
+[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
+  padding: 0 0 0 5px;
+}
+[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
+  padding: 0 5px 0 0;
+}
+.overlay_arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) perspective(1px);
+}
+[dir=ltr] .overlay_arrow {
+  left: 100%;
+}
+[dir=rtl] .overlay_arrow {
+  right: 100%;
+}
+.hoverIcon .arrow {
+  opacity: 0;
+  visibility: hidden;
+}
+.hoverIcon:hover .arrow {
+  opacity: 1;
+  visibility: visible;
+}
+.value {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+.search {
+  padding: 6px 20px 0;
+}
+.svgWrapper {
+  padding-bottom: 25px;
+}
+.readOnly {
+  cursor: no-drop;
+}
+.cursorDefault {
+  cursor: default;
+}
+.cursor {
+  cursor: pointer;
+}
+[dir=ltr] .dropBoxContainer {
+  text-align: left;
+}
+[dir=rtl] .dropBoxContainer {
+  text-align: right;
+}
+[dir=ltr] .iconBox {
+  margin-right: 4px;
+}
+[dir=rtl] .iconBox {
+  margin-left: 4px;
+}
+.iconBox > i {
+  display: block;
+}
+.loader {
+  width: 40px;
+  margin: 0 auto;
+}
+.seperatedLine {
+  height: 1px;
+  border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
+  margin: 9px 0 10px;
+}
+.hiddenInput {
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.hiddenInput > input {
+  width: 100%;
+  padding: 0;
+}

package/es/list/status/StatusListItem/StatusListItem.js

@@ -1,16 +1,13 @@
 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); }
-
 /**** Libraries ****/
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 /**** Components ****/
-
 import { Icon } from '@zohodesk/icons';
 import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
 /**** CSS ****/
-
 import style from './StatusListItem.module.css';
 export default class StatusListItem extends React.Component {
   constructor(props) {
@@ -19,7 +16,6 @@ export default class StatusListItem extends React.Component {
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
   }
-
   getRef(ele) {
     this.ele = ele;
     let {
@@ -29,7 +25,6 @@ export default class StatusListItem extends React.Component {
     } = this.props;
     getRef && getRef(ele, index, id);
   }
-
   handleClick(e) {
     let {
       onClick,
@@ -39,7 +34,6 @@ export default class StatusListItem extends React.Component {
     } = this.props;
     onClick && onClick(id, value, index, e);
   }
-
   handleMouseEnter(e) {
     let {
       onMouseEnter,
@@ -49,7 +43,6 @@ export default class StatusListItem extends React.Component {
     } = this.props;
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
-
   render() {
     let {
       size,
@@ -76,12 +69,10 @@ export default class StatusListItem extends React.Component {
       ariaSelected,
       ariaHidden = true
     } = a11y;
-
     if (isLink) {
       options.href = href;
       options.target = `_${target}`;
     }
-
     return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
@@ -111,10 +102,11 @@ export default class StatusListItem extends React.Component {
       size: "8"
     })) : null);
   }
-
 }
 StatusListItem.defaultProps = defaultProps;
-StatusListItem.propTypes = propTypes; // if (__DOCS__) {
+StatusListItem.propTypes = propTypes;
+
+// if (__DOCS__) {
 //   StatusListItem.docs = {
 //     componentGroup: 'StatusListItem',
 //     folderName: 'List'

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -1,109 +1,109 @@
-.list {
-  color: var(--zdt_statuslistitem_list_text);
-  font-size: var(--zd_font_size13) ;
-  position: relative;
-  list-style: none;
-  min-height: var(--zd_size35) ;
-  cursor: pointer;
-}
-[dir=ltr] .withBorder {
-  border-left: 1px solid var(--zdt_statuslistitem_default_border);
-}
-[dir=rtl] .withBorder {
-  border-right: 1px solid var(--zdt_statuslistitem_default_border);
-}
-[dir=ltr] .small {
-  padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5) ;
-}
-[dir=rtl] .small {
-  padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3) ;
-}
-.medium {
-  padding: var(--zd_size7) var(--zd_size20) ;
-}
-.large {
-  height: var(--zd_size48) ;
-}
-[dir=ltr] .large {
-  padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
-}
-[dir=rtl] .large {
-  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
-}
-.value,.multiLineValue {
-  line-height: var(--zd_size20);
-}
-.value {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.multiLineValue{
-  word-break: break-word;
-  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .withBorder.active {
-  border-left-color: var(--zdt_statuslistitem_default_active_border);
-}
-[dir=rtl] .withBorder.active {
-  border-right-color: var(--zdt_statuslistitem_default_active_border);
-}
-
-.default.hover, .default.effect:hover {
-  background-color: var(--zdt_statuslistitem_default_effect_bg);
-}
-.primary.hover, .primary.effect:hover, .selected {
-  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
-}
-.secondary.hover, .secondary.effect:hover {
-  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
-}
-.list.active.default, .list.active.primary {
-  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
-}
-.list.active.secondary {
-  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
-}
-.secondary.hover,
-.secondary.effect:hover,
-.list.active.secondary {
-  color: var(--zdt_statuslistitem_secondary_effect_text);
-}
-.tickIcon {
-  color: var(--zdt_statuslistitem_tickicon);
-  position: absolute;
-}
-[dir=ltr] .tickIcon {
-  right: var(--zd_size20) ;
-}
-[dir=rtl] .tickIcon {
-  left: var(--zd_size20) ;
-}
-.tickIcon > i {
-  display: block;
-}
-[dir=ltr] .active.withTick {
-  padding-right: var(--zd_size39) ;
-}
-[dir=rtl] .active.withTick {
-  padding-left: var(--zd_size39) ;
-}
-/* Status Type */
-.statusType {
-  width: var(--zd_size8) ;
-  height: var(--zd_size8) ;
-  border-radius: 50%;
-}
-[dir=ltr] .statusType {
-  margin-right: var(--zd_size13) ;
-}
-[dir=rtl] .statusType {
-  margin-left: var(--zd_size13) ;
-}
-.black {
-  background-color: var(--zdt_statuslistitem_black_bg);
-}
-.orange {
-  background-color: var(--zdt_statuslistitem_orange_bg);
-}
-.green {
-  background-color: var(--zdt_statuslistitem_green_bg);
-}
+.list {
+  color: var(--zdt_statuslistitem_list_text);
+  font-size: 13px;
+  position: relative;
+  list-style: none;
+  min-height: 35px;
+  cursor: pointer;
+}
+[dir=ltr] .withBorder {
+  border-left: 1px solid var(--zdt_statuslistitem_default_border);
+}
+[dir=rtl] .withBorder {
+  border-right: 1px solid var(--zdt_statuslistitem_default_border);
+}
+[dir=ltr] .small {
+  padding: 7px 3px 7px 5px;
+}
+[dir=rtl] .small {
+  padding: 7px 5px 7px 3px;
+}
+.medium {
+  padding: 7px 20px;
+}
+.large {
+  height: 48px;
+}
+[dir=ltr] .large {
+  padding: 10px 3px 10px 25px;
+}
+[dir=rtl] .large {
+  padding: 10px 25px 10px 3px;
+}
+.value,.multiLineValue {
+  line-height: var(--zd_size20);
+}
+.value {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .withBorder.active {
+  border-left-color: var(--zdt_statuslistitem_default_active_border);
+}
+[dir=rtl] .withBorder.active {
+  border-right-color: var(--zdt_statuslistitem_default_active_border);
+}
+
+.default.hover, .default.effect:hover {
+  background-color: var(--zdt_statuslistitem_default_effect_bg);
+}
+.primary.hover, .primary.effect:hover, .selected {
+  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
+}
+.secondary.hover, .secondary.effect:hover {
+  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
+}
+.list.active.default, .list.active.primary {
+  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
+}
+.list.active.secondary {
+  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
+}
+.secondary.hover,
+.secondary.effect:hover,
+.list.active.secondary {
+  color: var(--zdt_statuslistitem_secondary_effect_text);
+}
+.tickIcon {
+  color: var(--zdt_statuslistitem_tickicon);
+  position: absolute;
+}
+[dir=ltr] .tickIcon {
+  right: 20px;
+}
+[dir=rtl] .tickIcon {
+  left: 20px;
+}
+.tickIcon > i {
+  display: block;
+}
+[dir=ltr] .active.withTick {
+  padding-right: 39px;
+}
+[dir=rtl] .active.withTick {
+  padding-left: 39px;
+}
+/* Status Type */
+.statusType {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+[dir=ltr] .statusType {
+  margin-right: 13px;
+}
+[dir=rtl] .statusType {
+  margin-left: 13px;
+}
+.black {
+  background-color: var(--zdt_statuslistitem_black_bg);
+}
+.orange {
+  background-color: var(--zdt_statuslistitem_orange_bg);
+}
+.green {
+  background-color: var(--zdt_statuslistitem_green_bg);
+}