@zohodesk/components 1.0.0-temp-242.3 → 1.0.0-temp-242.4

package/README.md

@@ -2,6 +2,17 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.5.6
+
+- **ListItemWithRadio, ListItemWithCheckBox**
+  - `needBorder` prop supported
+
+- **ArrowIcon**
+  - Fixes of visible state and color from the container hover
+
+- **AppContainer**  
+  - The --zd-font-family variable now includes an empty string ('') as its fallback font-family value.
+
 # 1.5.5
 
 - **Popup**

package/es/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/es/ListItem/ListItemWithCheckBox.js

@@ -52,6 +52,7 @@ export default class ListItemWithCheckBox extends React.Component {
       checked,
       autoHover,
       palette,
+      needBorder,
       dataId,
       dataSelectorId,
       title,
@@ -88,6 +89,7 @@ export default class ListItemWithCheckBox extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
+      needBorder: needBorder,
       customClass: customListItem,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
       dataSelectorId: dataSelectorId,

package/es/ListItem/ListItemWithRadio.js

@@ -52,6 +52,7 @@ export default class ListItemWithRadio extends React.Component {
       checked,
       autoHover,
       palette,
+      needBorder,
       id,
       dataId,
       dataSelectorId,
@@ -89,6 +90,7 @@ export default class ListItemWithRadio extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
+      needBorder: needBorder,
       customClass: customListItem,
       dataId: dataId,
       dataSelectorId: dataSelectorId,

package/es/ListItem/props/defaultProps.js

@@ -56,6 +56,7 @@ export const ListItemWithCheckBoxDefaultProps = {
   autoHover: false,
   checked: false,
   highlight: false,
+  needBorder: true,
   palette: 'default',
   size: 'medium',
   value: 'List',
@@ -91,6 +92,7 @@ export const ListItemWithRadioDefaultProps = {
   autoHover: false,
   checked: false,
   highlight: false,
+  needBorder: true,
   palette: 'default',
   size: 'medium',
   value: 'List',

package/es/ListItem/props/propTypes.js

@@ -137,6 +137,7 @@ export const ListItemWithCheckBox_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  needBorder: PropTypes.bool,
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
@@ -213,6 +214,7 @@ export const ListItemWithRadio_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  needBorder: PropTypes.bool,
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),

package/es/Modal/Portal/Portal.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import BasePortal from '@zohodesk/dotkit/es/react/components/Portal/Portal';
 import { getLibraryConfig } from "../../Provider/Config";
 import { defaultProps } from "./props/defaultProps";
@@ -8,13 +8,11 @@ export default function Portal(_ref) {
     children,
     portalId
   } = _ref;
-  const portalPrefix = getLibraryConfig("portalPrefix");
+  const getPortalContainer = useCallback(() => {
+    const getConfigPortalContainer = getLibraryConfig('getPortalContainer');
 
-  const getPortalContainer = () => {
-    const getPortalContainer = getLibraryConfig('getPortalContainer');
-
-    if (getPortalContainer && typeof getPortalContainer === 'function') {
-      const portal = getPortalContainer();
+    if (getConfigPortalContainer && typeof getConfigPortalContainer === 'function') {
+      const portal = getConfigPortalContainer();
 
       if (portal) {
         return portal;
@@ -22,10 +20,13 @@ export default function Portal(_ref) {
     }
 
     return null;
-  };
-
+  }, []);
+  const memoizedPortalId = useMemo(() => {
+    const portalPrefix = getLibraryConfig("portalPrefix");
+    return `${portalPrefix ? `${portalPrefix}` : ''}${portalId}`;
+  }, [portalId]);
   return /*#__PURE__*/React.createElement(BasePortal, {
-    portalId: `${portalPrefix ? `${portalPrefix}` : ''}${portalId}`,
+    portalId: memoizedPortalId,
     getFallbackElement: getPortalContainer
   }, children);
 }

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/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/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']),

package/lib/Modal/Portal/Portal.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"] = Portal;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Portal = _interopRequireDefault(require("@zohodesk/dotkit/es/react/components/Portal/Portal"));
 
@@ -17,16 +19,18 @@ var _propTypes = require("./props/propTypes");
 
 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 Portal(_ref) {
   var children = _ref.children,
       portalId = _ref.portalId;
-  var portalPrefix = (0, _Config.getLibraryConfig)("portalPrefix");
+  var getPortalContainer = (0, _react.useCallback)(function () {
+    var getConfigPortalContainer = (0, _Config.getLibraryConfig)('getPortalContainer');
 
-  var getPortalContainer = function getPortalContainer() {
-    var getPortalContainer = (0, _Config.getLibraryConfig)('getPortalContainer');
-
-    if (getPortalContainer && typeof getPortalContainer === 'function') {
-      var portal = getPortalContainer();
+    if (getConfigPortalContainer && typeof getConfigPortalContainer === 'function') {
+      var portal = getConfigPortalContainer();
 
       if (portal) {
         return portal;
@@ -34,10 +38,13 @@ function Portal(_ref) {
     }
 
     return null;
-  };
-
+  }, []);
+  var memoizedPortalId = (0, _react.useMemo)(function () {
+    var portalPrefix = (0, _Config.getLibraryConfig)("portalPrefix");
+    return "".concat(portalPrefix ? "".concat(portalPrefix) : '').concat(portalId);
+  }, [portalId]);
   return /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
-    portalId: "".concat(portalPrefix ? "".concat(portalPrefix) : '').concat(portalId),
+    portalId: memoizedPortalId,
     getFallbackElement: getPortalContainer
   }, children);
 }

package/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-242.3",
+  "version": "1.0.0-temp-242.4",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -49,7 +49,7 @@
     "sstest": "npm run init && react-cli sstest",
     "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
     "download": "npm run download_only && cd ../ && npm run download",
-    "download_only": "react-cli clean ./node_modules ./package-lock.json && npm install",
+    "download_only": "react-cli clean ./node_modules ./package-lock.json && npm install  --legacy-peer-deps",
     "expublish": "npm publish --tag experimental-version",
     "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
     "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
@@ -80,11 +80,11 @@
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.4",
+    "@zohodesk/dotkit": "1.0.0-temp-2.5",
     "@zohodesk/hooks": "2.0.6",
-    "@zohodesk/icons": "1.1.4",
+    "@zohodesk/icons": "1.1.5",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.2.5",
+    "@zohodesk/svg": "1.2.6",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/virtualizer": "1.0.13",
@@ -100,9 +100,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.1.4",
+    "@zohodesk/icons": "1.1.5",
     "@zohodesk/variables": "1.2.0",
-    "@zohodesk/svg": "1.2.5",
+    "@zohodesk/svg": "1.2.6",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
@@ -110,7 +110,7 @@
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/dotkit": "1.0.4",
+    "@zohodesk/dotkit": "1.0.5",
     "color": "4.2.3"
   }
 }