@zohodesk/components 1.0.0-temp-54 → 1.0.0-temp-58

package/README.md

@@ -32,9 +32,17 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-232
+
+- ListContainer => Mobile Responsive Implemented
+# 1.0.0-alpha-231
+
+- DropBox - Position Undefined Issue Solved
+
 # 1.0.0-alpha-230
 
 - Avatar, AdvancedGroupMultiSelect, AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, Select, SelectWithAvatar, SelectWithIcon, TextBoxIcon => Tooltip undefined case solved
+- Select  , MultiSelect => boxSize prop added
 
 # 1.0.0-alpha-229
 

package/es/DropBox/DropBox.js

@@ -117,7 +117,7 @@ export class DropBoxElement extends React.Component {
       } : {};
     }
 
-    boxPosition = boxPosition ? boxPosition : 'bottomCenter';
+    boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
     const boxDirection = positionMapping[boxPosition].direction;
     /*getting box direction*/
 

package/es/ListItem/ListContainer.js

@@ -1,11 +1,12 @@
 function _extends() { _extends = Object.assign || 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 React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Container } from '../Layout';
 import CssProvider from '../Provider/CssProvider';
 import style from './ListItem.module.css';
+import { useResponsiveReceiver } from '../Responsive/CustomResponsive';
 
 const ListContainer = props => {
   const {
@@ -32,6 +33,22 @@ const ListContainer = props => {
     onMouseOver,
     eleRef
   } = props;
+  const responsiveFunc = useCallback(_ref => {
+    let {
+      mediaQueryOR,
+      isTouchDevice
+    } = _ref;
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }]),
+      isTouchDevice: isTouchDevice
+    };
+  }, []);
+  const {
+    mobileToTab,
+    isTouchDevice
+  } = useResponsiveReceiver('Helmet', responsiveFunc);
   const {
     role,
     ariaSelected
@@ -57,7 +74,7 @@ const ListContainer = props => {
     isCover: false,
     align: "vertical",
     alignBox: "row",
-    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
+    className: `${style.list} ${style[size]} ${mobileToTab && isTouchDevice ? style.responsiveHeight : ''} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
     dataId: dataId,
     onClick: !isDisabled && onClick,
     onMouseEnter: onMouseEnter,

package/es/ListItem/ListItem.module.css

@@ -70,7 +70,6 @@
 [dir=rtl] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
@@ -185,10 +184,10 @@
 [dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30)*/;
+    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30);
+  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
@@ -198,3 +197,9 @@
 [dir=rtl] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
+.responsiveHeight {
+  --listitem_height: var(--zd_size45);
+  font-size: var(--zd_font_size15);
+  padding-top: var(--zd_size10);
+  padding-bottom: var(--zd_size10);
+}

package/es/MultiSelect/MultiSelect.js

@@ -422,11 +422,6 @@ export class MultiSelectComponent extends React.Component {
       }
     } else if (keyCode === 27) {// this.handlePopupClose(e);
     } else if (keyCode === 9) {
-      const selectedOption = suggestions[hoverOption] || {};
-      const {
-        id
-      } = selectedOption;
-      isPopupOpen && !getIsEmptyValue(id) && this.handleSelectOption(id, e);
       this.handlePopupClose(e);
     }
   }
@@ -873,7 +868,8 @@ export class MultiSelectComponent extends React.Component {
       customChildrenClass,
       getFooter,
       needEffect,
-      disabledOptions
+      disabledOptions,
+      boxSize
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -996,7 +992,8 @@ export class MultiSelectComponent extends React.Component {
       a11y: {
         role: 'listbox',
         ariaMultiselectable: true
-      }
+      },
+      size: boxSize
     }, /*#__PURE__*/React.createElement(Card, {
       customClass: `${style.box} ${style[`${palette}Box`]}`,
       onScroll: this.handleScroll
@@ -1112,7 +1109,8 @@ MultiSelectComponent.propTypes = {
   customChildrenClass: PropTypes.string,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
   getFooter: PropTypes.func,
-  needEffect: PropTypes.bool
+  needEffect: PropTypes.bool,
+  boxSize: PropTypes.string
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1142,7 +1140,8 @@ MultiSelectComponent.defaultProps = {
   textBoxClass: '',
   palette: 'default',
   isSearchClearOnSelect: true,
-  needEffect: true
+  needEffect: true,
+  boxSize: 'default'
 };
 
 if (false) {

package/es/Responsive/sizeObservers.js

@@ -25,7 +25,14 @@ function rangeCheck(minValue, maxValue, screenValue) {
   return minValue <= screenValue && maxValue >= screenValue;
 }
 
-export const isTouchDevice = 'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+function isTouchDeviceFunc() {
+  // return window.matchMedia("(pointer: coarse)").matches
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+} // export const isTouchDevice =
+//   'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+
+
+export const isTouchDevice = isTouchDeviceFunc();
 export function isBreackPointMatched(object, screen) {
   if (!isValideBreakPoint(object)) {
     // eslint-disable-next-line no-console

package/lib/DropBox/DropBox.js

@@ -171,7 +171,7 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
         } : {};
       }
 
-      boxPosition = boxPosition ? boxPosition : 'bottomCenter';
+      boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
       var boxDirection = _DropBoxPositionMapping.positionMapping[boxPosition].direction;
       /*getting box direction*/
 

package/lib/ListItem/ListContainer.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -15,8 +17,14 @@ var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 || 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); }
 
 var ListContainer = function ListContainer(props) {
@@ -42,6 +50,21 @@ var ListContainer = function ListContainer(props) {
       onMouseEnter = props.onMouseEnter,
       onMouseOver = props.onMouseOver,
       eleRef = props.eleRef;
+  var responsiveFunc = (0, _react.useCallback)(function (_ref) {
+    var mediaQueryOR = _ref.mediaQueryOR,
+        isTouchDevice = _ref.isTouchDevice;
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }]),
+      isTouchDevice: isTouchDevice
+    };
+  }, []);
+
+  var _useResponsiveReceive = (0, _CustomResponsive.useResponsiveReceiver)('Helmet', responsiveFunc),
+      mobileToTab = _useResponsiveReceive.mobileToTab,
+      isTouchDevice = _useResponsiveReceive.isTouchDevice;
+
   var role = a11y.role,
       ariaSelected = a11y.ariaSelected;
   var options = {};
@@ -65,7 +88,7 @@ var ListContainer = function ListContainer(props) {
     isCover: false,
     align: "vertical",
     alignBox: "row",
-    className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
+    className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(mobileToTab && isTouchDevice ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
     dataId: dataId,
     onClick: !isDisabled && onClick,
     onMouseEnter: onMouseEnter,

package/lib/ListItem/ListItem.module.css

@@ -70,7 +70,6 @@
 [dir=rtl] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
@@ -185,10 +184,10 @@
 [dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30)*/;
+    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30);
+  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
@@ -198,3 +197,9 @@
 [dir=rtl] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
+.responsiveHeight {
+  --listitem_height: var(--zd_size45);
+  font-size: var(--zd_font_size15);
+  padding-top: var(--zd_size10);
+  padding-bottom: var(--zd_size10);
+}

package/lib/MultiSelect/MultiSelect.js

@@ -512,10 +512,6 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         }
       } else if (keyCode === 27) {// this.handlePopupClose(e);
       } else if (keyCode === 9) {
-        var _selectedOption = suggestions[hoverOption] || {};
-
-        var _id = _selectedOption.id;
-        isPopupOpen && !(0, _Common.getIsEmptyValue)(_id) && this.handleSelectOption(_id, e);
         this.handlePopupClose(e);
       }
     }
@@ -945,7 +941,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           customChildrenClass = _this$props13.customChildrenClass,
           getFooter = _this$props13.getFooter,
           needEffect = _this$props13.needEffect,
-          disabledOptions = _this$props13.disabledOptions;
+          disabledOptions = _this$props13.disabledOptions,
+          boxSize = _this$props13.boxSize;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText,
@@ -1066,7 +1063,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         a11y: {
           role: 'listbox',
           ariaMultiselectable: true
-        }
+        },
+        size: boxSize
       }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
         customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
         onScroll: this.handleScroll
@@ -1186,7 +1184,8 @@ MultiSelectComponent.propTypes = {
   customChildrenClass: _propTypes["default"].string,
   disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
   getFooter: _propTypes["default"].func,
-  needEffect: _propTypes["default"].bool
+  needEffect: _propTypes["default"].bool,
+  boxSize: _propTypes["default"].string
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1216,7 +1215,8 @@ MultiSelectComponent.defaultProps = {
   textBoxClass: '',
   palette: 'default',
   isSearchClearOnSelect: true,
-  needEffect: true
+  needEffect: true,
+  boxSize: 'default'
 };
 
 if (false) {

package/lib/Responsive/sizeObservers.js

@@ -62,7 +62,14 @@ function rangeCheck(minValue, maxValue, screenValue) {
   return minValue <= screenValue && maxValue >= screenValue;
 }
 
-var isTouchDevice = 'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+function isTouchDeviceFunc() {
+  // return window.matchMedia("(pointer: coarse)").matches
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+} // export const isTouchDevice =
+//   'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+
+
+var isTouchDevice = isTouchDeviceFunc();
 exports.isTouchDevice = isTouchDevice;
 
 function isBreackPointMatched(object, screen) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-54",
+  "version": "1.0.0-temp-58",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",