@zohodesk/components 1.5.7 → 1.5.8

package/README.md

@@ -2,6 +2,10 @@
 
 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.8
+
+- Memoized **Portal** logic to improve performance.
+
 # 1.5.7
 
 - **ListContainer, ListItem, ListItemWithIcon**

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

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -67,20 +67,22 @@
     "css:layer_generate_order": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/generate_layer_order.js  css_layer_config.json ./src/components_layer.module.css",
     "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js  css_layer_config.json ./src/ ./assets",
     "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build && npm run rtl && npm run cssVariableConvert  ",
-    "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es  --rewrite=assets=assets"
+    "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es  --rewrite=assets=assets",
+    "css:audit": " css-audit --report"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
+    "@zohodesk-private/css-audit-tool": "0.0.1",
     "@zohodesk-private/color-variable-preprocessor": "1.2.0",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.6",
+    "@zohodesk/dotkit": "1.0.7",
     "@zohodesk/hooks": "2.0.6",
     "@zohodesk/icons": "1.1.6",
     "@zohodesk/layout": "3.1.0",
@@ -110,7 +112,7 @@
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/dotkit": "1.0.6",
+    "@zohodesk/dotkit": "1.0.7",
     "color": "4.2.3"
   }
 }