@zohodesk/dot 1.0.0-temp-87 → 1.0.0-temp-88

package/es/list/UserTime/UserTime.module.css

@@ -1,58 +1,58 @@
-.varClass {
-  --text_color: var(--zdt_usertime_timeText);
-  --icon_color: var(--zdt_usertime_icon_gray);
-}
-.container {
-  composes: dInflex alignBaseline from '~@zohodesk/components/lib/common/common.module.css';
-  max-width: 100%;
-  composes: varClass;
-}
-.f8 {
-  font-size: var(--zd_font_size8);
-}
-.f9 {
-  font-size: var(--zd_font_size9);
-}
-.f10 {
-  font-size: var(--zd_font_size10);
-}
-.closedTime span:last-child:before,
-.completedTask span:first-child:before {
-  color: inherit;
-}
-.closedTime span:first-child:before {
-  color: var(--zdt_usertime_icon_green);
-}
-.textStyle {
-  font-size: var(--zd_font_size12);
-  color: var(--text_color);
-  display: block;
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.iconStyle {
-  display: block;
-}
-[dir=ltr] .iconStyle {
-  margin-right: var(--zd_size3);
-  margin-left: var(--zd_size1);
-}
-[dir=rtl] .iconStyle {
-  margin-left: var(--zd_size3);
-  margin-right: var(--zd_size1);
-}
-/* colors */
-.iconColor {
-  color: var(--icon_color)
-}
-.red {
-  --icon_color: var(--zdt_usertime_icon_red);
-}
-.green {
-  --icon_color: var(--zdt_usertime_icon_green);
-}
-.orange {
-  --icon_color: var(--zdt_usertime_icon_orange);
-}
-.gray {
-  --icon_color: var(--zdt_usertime_icon_gray);
-}
+.varClass {
+  --text_color: var(--zdt_usertime_timeText);
+  --icon_color: var(--zdt_usertime_icon_gray);
+}
+.container {
+  composes: dInflex alignBaseline from '~@zohodesk/components/lib/common/common.module.css';
+  max-width: 100%;
+  composes: varClass;
+}
+.f8 {
+  font-size: var(--zd_font_size8);
+}
+.f9 {
+  font-size: var(--zd_font_size9);
+}
+.f10 {
+  font-size: var(--zd_font_size10);
+}
+.closedTime span:last-child:before,
+.completedTask span:first-child:before {
+  color: inherit;
+}
+.closedTime span:first-child:before {
+  color: var(--zdt_usertime_icon_green);
+}
+.textStyle {
+  font-size: var(--zd_font_size12);
+  color: var(--text_color);
+  display: block;
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+.iconStyle {
+  display: block;
+}
+[dir=ltr] .iconStyle {
+  margin-right: var(--zd_size3);
+  margin-left: var(--zd_size1);
+}
+[dir=rtl] .iconStyle {
+  margin-left: var(--zd_size3);
+  margin-right: var(--zd_size1);
+}
+/* colors */
+.iconColor {
+  color: var(--icon_color)
+}
+.red {
+  --icon_color: var(--zdt_usertime_icon_red);
+}
+.green {
+  --icon_color: var(--zdt_usertime_icon_green);
+}
+.orange {
+  --icon_color: var(--zdt_usertime_icon_orange);
+}
+.gray {
+  --icon_color: var(--zdt_usertime_icon_gray);
+}

package/es/list/UserTime/docs/UserTime__default.docs.js

@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import UserTime from '../UserTime';
+export default class UserTime__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "closedTime",
+      format: _ref => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "overdue",
+      iconColor: "red",
+      format: _ref2 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref2;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "createdtime",
+      iconColor: "green",
+      format: _ref3 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref3;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "completedTask",
+      format: _ref4 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref4;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "dueTime",
+      iconColor: "orange",
+      format: _ref5 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref5;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })));
+  }
+
+}
+
+if (false) {
+  UserTime__default.docs = {
+    folderName: 'List',
+    componentGroup: 'UserTime'
+  };
+}

package/es/list/listCommon.module.css

@@ -1,60 +1,60 @@
-.inlineBlockMiddle {
-  display: inline-block;
-  vertical-align: middle;
-}
-.inlineFlex {
-  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .avatarMargin {
-  margin-right: var(--zd_size25);
-}
-[dir=rtl] .avatarMargin {
-  margin-left: var(--zd_size25);
-}
-.subject {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: var(--zd_font_size16);
-}
-.secondaryPanel {
-  line-height: var(--zd_size18);
-  composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
-}
-.statusColumn {
-  composes: inlineBlockMiddle;
-}
-[dir=ltr] .statusColumn {
-  text-align: right;
-}
-[dir=rtl] .statusColumn {
-  text-align: left;
-}
-.classic .floatingIconContainer {
-  display: none;
-}
-.compact .floatingIconContainer,
-.superCompact .floatingIconContainer,
-.listContainer:hover .classic .floatingIconContainer,
-.hoveredStyle .classic .floatingIconContainer {
-  display: inline-flex;
-  align-items: center;
-}
-.compact .floatingIconContainer,
-.superCompact .floatingIconContainer {
-  opacity: 0;
-  visibility: hidden;
-}
-.floatingIcons {
-  font-size: var(--zd_font_size15);
-}
-.listContainer, .listLayoutContainer {
-  position: relative;
-  transition: var(--zd_transition3) all ease;
-}
-.listContainer:hover .compact .floatingIconContainer,
-.listContainer:hover .superCompact .floatingIconContainer,
-.hoveredStyle .compact .floatingIconContainer,
-.hoveredStyle .superCompact .floatingIconContainer 
- {
-  opacity: 1;
-  visibility: visible;
-}
+.inlineBlockMiddle {
+  display: inline-block;
+  vertical-align: middle;
+}
+.inlineFlex {
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .avatarMargin {
+  margin-right: var(--zd_size25);
+}
+[dir=rtl] .avatarMargin {
+  margin-left: var(--zd_size25);
+}
+.subject {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  font-size: var(--zd_font_size16);
+}
+.secondaryPanel {
+  line-height: var(--zd_size18);
+  composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
+}
+.statusColumn {
+  composes: inlineBlockMiddle;
+}
+[dir=ltr] .statusColumn {
+  text-align: right;
+}
+[dir=rtl] .statusColumn {
+  text-align: left;
+}
+.classic .floatingIconContainer {
+  display: none;
+}
+.compact .floatingIconContainer,
+.superCompact .floatingIconContainer,
+.listContainer:hover .classic .floatingIconContainer,
+.hoveredStyle .classic .floatingIconContainer {
+  display: inline-flex;
+  align-items: center;
+}
+.compact .floatingIconContainer,
+.superCompact .floatingIconContainer {
+  opacity: 0;
+  visibility: hidden;
+}
+.floatingIcons {
+  font-size: var(--zd_font_size15);
+}
+.listContainer, .listLayoutContainer {
+  position: relative;
+  transition: var(--zd_transition3) all ease;
+}
+.listContainer:hover .compact .floatingIconContainer,
+.listContainer:hover .superCompact .floatingIconContainer,
+.hoveredStyle .compact .floatingIconContainer,
+.hoveredStyle .superCompact .floatingIconContainer 
+ {
+  opacity: 1;
+  visibility: visible;
+}

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import { Box, Container } from '@zohodesk/components/lib/Layout';
 import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
@@ -13,6 +12,8 @@ import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import StatusListItem from '../StatusListItem/StatusListItem';
 import commonStyle from '@zohodesk/components/lib/common/common.module.css';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 import style from './StatusDropdown.module.css';
@@ -247,6 +248,17 @@ export class StatusDropdown extends React.Component {
     }
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       options,
@@ -336,85 +348,96 @@ export class StatusDropdown extends React.Component {
       name: "ZD-down",
       iconClass: `${'toggleDropIcon'} ${style.arrow} ${style[`${arrowIconPosition}_arrow`]}`,
       dataId: "statusdownarrow"
-    }) : null), isPopupOpen && isEditable ? /*#__PURE__*/React.createElement(DropBox, {
-      boxPosition: position,
-      isActive: isPopupReady,
-      onClick: removeClose,
-      size: boxSize,
-      right: right,
-      left: left,
-      top: top,
-      bottom: bottom,
-      isArrow: isArrow,
-      isAnimate: true,
-      getRef: getContainerRef,
-      customClass: {
-        customDropBoxWrap: style.dropBoxContainer
-      },
-      needResponsive: needResponsive
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement("div", {
-      className: style.search
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-      placeHolder: placeHolderText,
-      onChange: this.handleChange,
-      value: searchString,
-      onClear: this.onSearchClear,
-      size: searchBoxSize,
-      inputRef: this.searchInputRef,
-      onKeyDown: this.handleKeyDown,
-      a11y: {
-        ariaHaspopup: true,
-        ariaExpanded: true,
-        role: 'combobox',
-        ariaActivedescendant: value,
-        ariaOwns: ariaTitleId
-      }
-    })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement("div", {
-      className: style.title
-    }, /*#__PURE__*/React.createElement(DropDownHeading, {
-      htmlId: ariaTitleId,
-      text: title,
-      a11y: {
-        role: 'heading'
-      }
-    })), /*#__PURE__*/React.createElement(Box, {
-      scroll: "vertical",
-      dataId: `${dataId}_list`,
-      className: style.maxHgt,
-      eleRef: this.scrollContentRef,
-      onScroll: this.handleScroll,
-      role: isSearch ? 'listbox' : 'menu',
-      "aria-labelledby": ariaTitleId,
-      tabindex: "0"
-    }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
-      key: i
-    }, /*#__PURE__*/React.createElement(StatusListItem, {
-      dataId: `dataid_${i}`,
-      value: item[keyName],
-      id: item[idName],
-      active: value === item[keyName],
-      onClick: this.onSelect.bind(this, item),
-      index: i,
-      highlight: selectedIndex === i,
-      needTick: needTick,
-      needBorder: false,
-      onMouseEnter: this.handleMouseEnter,
-      getRef: this.itemRef,
-      bulletColor: item[statusColor],
-      title: item[keyName],
-      a11y: {
-        role: isSearch ? 'option' : 'menuitem',
-        ariaSelected: value === item[keyName]
-      }
-    })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
-      className: style.svgWrapper,
-      title: searchErrorText || 'No results',
-      description: searchEmptyHint,
-      size: "small",
-      getEmptyState: this.emptySearchSVG
-    }) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null))))) : null);
+    }) : null), isPopupOpen && isEditable ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        boxPosition: position,
+        isActive: isPopupReady,
+        onClick: removeClose,
+        size: boxSize,
+        right: right,
+        left: left,
+        top: top,
+        bottom: bottom,
+        isArrow: isArrow,
+        isAnimate: true,
+        getRef: getContainerRef,
+        customClass: {
+          customDropBoxWrap: style.dropBoxContainer
+        },
+        needResponsive: needResponsive,
+        isResponsivePadding: true
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+        className: style.search
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        placeHolder: placeHolderText,
+        onChange: this.handleChange,
+        value: searchString,
+        onClear: this.onSearchClear,
+        size: searchBoxSize,
+        inputRef: this.searchInputRef,
+        onKeyDown: this.handleKeyDown,
+        a11y: {
+          ariaHaspopup: true,
+          ariaExpanded: true,
+          role: 'combobox',
+          ariaActivedescendant: value,
+          ariaOwns: ariaTitleId
+        }
+      })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
+        className: style.title
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        htmlId: ariaTitleId,
+        text: title,
+        a11y: {
+          role: 'heading'
+        }
+      })), /*#__PURE__*/React.createElement(Box, {
+        scroll: "vertical",
+        flexible: true,
+        shrink: true,
+        dataId: `${dataId}_list`,
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+        eleRef: this.scrollContentRef,
+        onScroll: this.handleScroll,
+        role: isSearch ? 'listbox' : 'menu',
+        "aria-labelledby": ariaTitleId,
+        tabindex: "0"
+      }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+        key: i
+      }, /*#__PURE__*/React.createElement(StatusListItem, {
+        dataId: `dataid_${i}`,
+        value: item[keyName],
+        id: item[idName],
+        active: value === item[keyName],
+        onClick: this.onSelect.bind(this, item),
+        index: i,
+        highlight: selectedIndex === i,
+        needTick: needTick,
+        needBorder: false,
+        onMouseEnter: this.handleMouseEnter,
+        getRef: this.itemRef,
+        bulletColor: item[statusColor],
+        title: item[keyName],
+        a11y: {
+          role: isSearch ? 'option' : 'menuitem',
+          ariaSelected: value === item[keyName]
+        }
+      })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+        className: style.svgWrapper,
+        title: searchErrorText || 'No results',
+        description: searchEmptyHint,
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      }) : /*#__PURE__*/React.createElement("div", {
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null)))));
+    }) : null);
   }
 
 }