@zohodesk/components 1.5.6 → 1.5.8

package/README.md

@@ -2,6 +2,15 @@
 
 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**
+  - `danger` value supported for the **palette** prop.
+
 # 1.5.6
 
 - **ListItemWithRadio, ListItemWithCheckBox**

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgba(255, 107, 107, 0.05);
+	--zdt_listitem_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgb(253,243,243);
+	--zdt_listitem_danger_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgba(255, 107, 107, 0.05);
+	--zdt_listitem_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

package/es/ListItem/ListItem.module.css

@@ -136,7 +136,7 @@
 .lhsBox_large {
   max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
 }
-.defaultHover, .primaryHover, .secondaryHover, .darkHover {
+.defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
@@ -155,6 +155,13 @@
 {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
+.activedanger,
+.dangerHover,
+.dangerEffect:hover {
+  --listitem_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_text_color: var(--zdt_listitem_danger_text)
+}
 .primaryHover,
 .primaryEffect:hover
 /* .primaryEffect:focus */
@@ -177,7 +184,7 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault, .activeprimary, .activesecondary, .activedark {
+.activedefault, .activeprimary, .activedanger, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
 .activedefault,
@@ -186,6 +193,10 @@
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
+.activedanger,
+.activedanger:hover {
+  --listitem_active_bg_color: var(--zdt_listitem_danger_bg);
+}
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);

package/es/ListItem/props/propTypes.js

@@ -17,7 +17,7 @@ export const ListContainer_Props = {
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseOver: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   target: PropTypes.oneOf(['blank', 'self']),
   title: PropTypes.string,
@@ -48,7 +48,7 @@ export const ListItem_Props = {
   needTick: PropTypes.bool,
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   target: PropTypes.oneOf(['blank', 'self']),
   title: PropTypes.string,
@@ -172,7 +172,7 @@ export const ListItemWithIcon_Props = {
   needTick: PropTypes.bool,
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  palette: PropTypes.string,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,

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/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useDropboxPosCalc from "../../../DropBox/DropBoxElement/useDropboxPosCalc";
 import cssJSLogic from "../../../DropBox/DropBoxElement/css/cssJSLogic";
-import { positionMapping } from "../../../DropBox/DropBoxPositionMapping.js";
+import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/utils/positioning';
 import { DropBoxElementDefaultProps } from "./props/defaultProps";
 import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';

package/lib/ListItem/ListItem.module.css

@@ -136,7 +136,7 @@
 .lhsBox_large {
   max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
 }
-.defaultHover, .primaryHover, .secondaryHover, .darkHover {
+.defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
@@ -155,6 +155,13 @@
 {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
+.activedanger,
+.dangerHover,
+.dangerEffect:hover {
+  --listitem_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_text_color: var(--zdt_listitem_danger_text)
+}
 .primaryHover,
 .primaryEffect:hover
 /* .primaryEffect:focus */
@@ -177,7 +184,7 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault, .activeprimary, .activesecondary, .activedark {
+.activedefault, .activeprimary, .activedanger, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
 .activedefault,
@@ -186,6 +193,10 @@
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
+.activedanger,
+.activedanger:hover {
+  --listitem_active_bg_color: var(--zdt_listitem_danger_bg);
+}
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);

package/lib/ListItem/props/propTypes.js

@@ -33,7 +33,7 @@ var ListContainer_Props = {
   onClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
   onMouseOver: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   target: _propTypes["default"].oneOf(['blank', 'self']),
   title: _propTypes["default"].string,
@@ -65,7 +65,7 @@ var ListItem_Props = {
   needTick: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   target: _propTypes["default"].oneOf(['blank', 'self']),
   title: _propTypes["default"].string,
@@ -163,7 +163,7 @@ var ListItemWithIcon_Props = {
   needTick: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
-  palette: _propTypes["default"].string,
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: _propTypes["default"].string,
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,

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/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -11,7 +11,7 @@ var _useDropboxPosCalc2 = _interopRequireDefault(require("../../../DropBox/DropB
 
 var _cssJSLogic2 = _interopRequireDefault(require("../../../DropBox/DropBoxElement/css/cssJSLogic"));
 
-var _DropBoxPositionMapping = require("../../../DropBox/DropBoxPositionMapping.js");
+var _positioning = require("@zohodesk/dotkit/es/react/components/Popup/utils/positioning");
 
 var _defaultProps = require("./props/defaultProps");
 
@@ -74,13 +74,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.5.6",
+  "version": "1.5.8",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -67,22 +67,24 @@
     "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.5",
+    "@zohodesk/dotkit": "1.0.7",
     "@zohodesk/hooks": "2.0.6",
-    "@zohodesk/icons": "1.1.5",
+    "@zohodesk/icons": "1.1.6",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.2.6",
     "@zohodesk/utils": "1.3.16",
@@ -100,7 +102,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.1.5",
+    "@zohodesk/icons": "1.1.6",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/svg": "1.2.6",
     "@zohodesk/virtualizer": "1.0.13",
@@ -110,7 +112,7 @@
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/dotkit": "1.0.5",
+    "@zohodesk/dotkit": "1.0.7",
     "color": "4.2.3"
   }
 }