@zohodesk/components 1.5.4 → 1.5.6

package/es/shared/ArrowIcon/ArrowIcon.module.css

@@ -13,7 +13,7 @@
   visibility: hidden;
 }
 
-.transparentContainer .rotated,
+.transparentContainer .active,
 .transparentContainer:hover .arrowIcon {
   opacity: 1;
   visibility: visible;
@@ -29,8 +29,7 @@
 
 .rotated,
 .active,
-.arrowContainer:hover .arrowIcon,
-.transparentContainer:hover .arrowIcon {
+.arrowContainer:hover .arrowIcon {
   --local-arrowIcon-color: var(--zdt_arrowicon_hover_icon);
 }
 

package/es/utils/Common.js

@@ -1,5 +1,5 @@
 //$Id$//
-import viewPort from "../Popup/viewPort";
+import viewPort from '@zohodesk/dotkit/es/react/components/Popup/utils/viewPort.js';
 const {
   frameRelativeRects
 } = viewPort;

package/es/v1/Popup/Popup.js

@@ -5,8 +5,8 @@ import hoistStatics from 'hoist-non-react-statics';
 /**** Methods ****/
 
 import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from "../../utils/Common.js";
-import viewPort from "../../Popup/viewPort";
-import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "../../Popup/PositionMapping.js";
+import viewPort from '@zohodesk/dotkit/es/react/components/Popup/utils/viewPort.js';
+import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from '@zohodesk/dotkit/es/react/components/Popup/utils/positioning.js';
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
 let lastOpenedGroup = [];
 let popups = {};

package/lib/AppContainer/AppContainer.module.css

@@ -10,7 +10,7 @@
 }
 .container, .container button, .container input, .container textarea ,.container select {
   /* font-family: var(--zd_regular); */
-  font-family: var(--zd-font-family), var(--zd_fallback_font, ZDLato);
+  font-family: var(--zd-font-family, ''), var(--zd_fallback_font, ZDLato);
 }
 .tooltip {
   height: 0 ;

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -11,7 +11,7 @@ var _useDropboxPosCalc2 = _interopRequireDefault(require("./useDropboxPosCalc"))
 
 var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _DropBoxPositionMapping = require("../DropBoxPositionMapping.js");
+var _positioning = require("@zohodesk/dotkit/es/react/components/Popup/utils/positioning");
 
 var _defaultProps = require("./props/defaultProps");
 
@@ -75,13 +75,13 @@ function DropBoxElement(props) {
       ariaMultiselectable = a11y.ariaMultiselectable,
       ariaLabelledby = a11y.ariaLabelledby;
   boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
-  var boxDirection = _DropBoxPositionMapping.positionMapping[boxPosition].direction;
+  var boxDirection = _positioning.positionMapping[boxPosition].direction;
 
   if (isAbsolute) {
-    arrowPosition = arrowPosition ? arrowPosition : _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
-    boxPosition = _DropBoxPositionMapping.positionMapping[boxPosition].positionStyle;
+    arrowPosition = arrowPosition ? arrowPosition : _positioning.positionMapping[boxPosition].arrowPosition;
+    boxPosition = _positioning.positionMapping[boxPosition].positionStyle;
   } else {
-    arrowPosition = _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
+    arrowPosition = _positioning.positionMapping[boxPosition].arrowPosition;
   }
 
   var _useDropboxPosCalc = (0, _useDropboxPosCalc2["default"])(props),

package/lib/DropBox/utils/isMobilePopover.js

@@ -7,19 +7,9 @@ exports["default"] = isMobilePopover;
 
 var _Config = require("../../Provider/Config");
 
-function isMobilePopover(needResponsive) {
-  //   let { needResponsive } = props;
-  var windowWidth,
-      mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth'),
-      isModel = false;
-
-  if (needResponsive) {
-    windowWidth = window.innerWidth;
+var _device = require("@zohodesk/dotkit/es/utils/device.js");
 
-    if (windowWidth <= mobileWidth) {
-      isModel = true;
-    }
-  }
-
-  return isModel ? true : false;
+function isMobilePopover(needResponsive) {
+  var mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth');
+  return (0, _device.isMobilePopover)(needResponsive, mobileWidth);
 }

package/lib/ListItem/ListItemWithCheckBox.js

@@ -110,6 +110,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           checked = _this$props4.checked,
           autoHover = _this$props4.autoHover,
           palette = _this$props4.palette,
+          needBorder = _this$props4.needBorder,
           dataId = _this$props4.dataId,
           dataSelectorId = _this$props4.dataSelectorId,
           title = _this$props4.title,
@@ -148,6 +149,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
+        needBorder: needBorder,
         customClass: customListItem,
         dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
         dataSelectorId: dataSelectorId,

package/lib/ListItem/ListItemWithRadio.js

@@ -110,6 +110,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           checked = _this$props4.checked,
           autoHover = _this$props4.autoHover,
           palette = _this$props4.palette,
+          needBorder = _this$props4.needBorder,
           id = _this$props4.id,
           dataId = _this$props4.dataId,
           dataSelectorId = _this$props4.dataSelectorId,
@@ -149,6 +150,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
+        needBorder: needBorder,
         customClass: customListItem,
         dataId: dataId,
         dataSelectorId: dataSelectorId,

package/lib/ListItem/props/defaultProps.js

@@ -65,6 +65,7 @@ var ListItemWithCheckBoxDefaultProps = {
   autoHover: false,
   checked: false,
   highlight: false,
+  needBorder: true,
   palette: 'default',
   size: 'medium',
   value: 'List',
@@ -102,6 +103,7 @@ var ListItemWithRadioDefaultProps = {
   autoHover: false,
   checked: false,
   highlight: false,
+  needBorder: true,
   palette: 'default',
   size: 'medium',
   value: 'List',

package/lib/ListItem/props/propTypes.js

@@ -127,6 +127,7 @@ var ListItemWithCheckBox_Props = {
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
   secondaryValue: _propTypes["default"].string,
+  needBorder: _propTypes["default"].bool,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
@@ -205,6 +206,7 @@ var ListItemWithRadio_Props = {
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
   secondaryValue: _propTypes["default"].string,
+  needBorder: _propTypes["default"].bool,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),