@canonical/react-components 0.47.4 → 0.48.0

package/README.md

@@ -1,5 +1,5 @@
 # React components for Vanilla Framework
-![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main) ![Cypress chrome headless](https://github.com/canonical/react-components/workflows/Cypress%20chrome%20headless/badge.svg)
+![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)
 
 This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React.
 

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -30,7 +30,7 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
  * @param positionCoords - The coordinates of the position node.
  * @param constrainPanelWidth - Whether the menu width should be constrained to the position width.
  */
-const getPositionStyle = (position, positionCoords, constrainPanelWidth) => {
+const getPositionStyle = (position, verticalPosition, positionCoords, constrainPanelWidth) => {
   if (!positionCoords) {
     return null;
   }
@@ -40,7 +40,7 @@ const getPositionStyle = (position, positionCoords, constrainPanelWidth) => {
     top,
     width
   } = positionCoords;
-  const topPos = top + height + (window.scrollY || 0);
+  const topPos = verticalPosition === "bottom" ? top + height + (window.scrollY || 0) : top + (window.scrollY || 0);
   let leftPos = left;
   switch (position) {
     case "left":
@@ -120,6 +120,20 @@ const generateLink = (link, key, handleClose) => {
     } : null
   }, props), children);
 };
+const getClosestScrollableParent = node => {
+  let currentNode = node;
+  while (currentNode && currentNode !== document.body) {
+    const {
+      overflowY,
+      overflowX
+    } = window.getComputedStyle(currentNode);
+    if (["auto", "scroll", "overlay"].includes(overflowY) && ["auto", "scroll", "overlay"].includes(overflowX)) {
+      return currentNode;
+    }
+    currentNode = currentNode.parentElement;
+  }
+  return document.body;
+};
 const ContextualMenuDropdown = _ref => {
   let {
     adjustedPosition,
@@ -140,23 +154,46 @@ const ContextualMenuDropdown = _ref => {
     ...props
   } = _ref;
   const dropdown = (0, _react.useRef)();
-  const [positionStyle, setPositionStyle] = (0, _react.useState)(getPositionStyle(adjustedPosition, positionCoords, constrainPanelWidth));
+  const [verticalPosition, setVerticalPosition] = (0, _react.useState)("bottom");
+  const [positionStyle, setPositionStyle] = (0, _react.useState)(getPositionStyle(adjustedPosition, verticalPosition, positionCoords, constrainPanelWidth));
   const [maxHeight, setMaxHeight] = (0, _react.useState)();
-
   // Update the styles to position the menu.
   const updatePositionStyle = (0, _react.useCallback)(() => {
-    setPositionStyle(getPositionStyle(adjustedPosition, positionCoords, constrainPanelWidth));
-  }, [adjustedPosition, positionCoords, constrainPanelWidth]);
+    setPositionStyle(getPositionStyle(adjustedPosition, verticalPosition, positionCoords, constrainPanelWidth));
+  }, [adjustedPosition, positionCoords, verticalPosition, constrainPanelWidth]);
+  const updateVerticalPosition = (0, _react.useCallback)(() => {
+    if (!positionNode) {
+      return null;
+    }
+    const scrollableParent = getClosestScrollableParent(positionNode);
+    if (!scrollableParent) {
+      return null;
+    }
+    const scrollableParentRect = scrollableParent.getBoundingClientRect();
+    const rect = positionNode.getBoundingClientRect();
+
+    // Calculate the rect in relation to the scrollableParent
+    const relativeRect = {
+      top: rect.top - scrollableParentRect.top,
+      bottom: rect.bottom - scrollableParentRect.top,
+      height: rect.height
+    };
+    const spaceBelow = scrollableParentRect.height - relativeRect.bottom;
+    const spaceAbove = relativeRect.top;
+    const dropdownHeight = relativeRect.height;
+    setVerticalPosition(spaceBelow >= dropdownHeight || spaceBelow > spaceAbove ? "bottom" : "top");
+  }, [positionNode]);
 
   // Update the position when the window fitment info changes.
   const onUpdateWindowFitment = (0, _react.useCallback)(fitsWindow => {
     if (autoAdjust) {
       setAdjustedPosition(adjustForWindow(position, fitsWindow));
+      updateVerticalPosition();
     }
     if (scrollOverflow) {
       setMaxHeight(fitsWindow.fromBottom.spaceBelow - 16);
     }
-  }, [autoAdjust, position, scrollOverflow, setAdjustedPosition]);
+  }, [autoAdjust, position, scrollOverflow, setAdjustedPosition, updateVerticalPosition]);
 
   // Handle adjusting the horizontal position and scrolling of the dropdown so that it remains on screen.
   (0, _hooks.useWindowFitment)(dropdown.current, positionNode, onUpdateWindowFitment, 0, isOpen && (autoAdjust || scrollOverflow));
@@ -165,6 +202,9 @@ const ContextualMenuDropdown = _ref => {
   (0, _react.useEffect)(() => {
     updatePositionStyle();
   }, [adjustedPosition, updatePositionStyle]);
+  (0, _react.useEffect)(() => {
+    updateVerticalPosition();
+  }, [updateVerticalPosition]);
   return (
     /*#__PURE__*/
     // Vanilla Framework uses .p-contextual-menu parent modifier classnames to determine the correct position of the .p-contextual-menu__dropdown dropdown (left, center, right).
@@ -188,6 +228,9 @@ const ContextualMenuDropdown = _ref => {
           maxHeight,
           minHeight: "2rem",
           overflowX: "auto"
+        } : {}),
+        ...(verticalPosition === "top" ? {
+          bottom: "0"
         } : {})
       }
     }, props), dropdownContent ? typeof dropdownContent === "function" ? dropdownContent(handleClose) : dropdownContent : links.map((item, i) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.47.4",
+  "version": "0.48.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -26,7 +26,7 @@
     "@babel/eslint-parser": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@percy/cli": "1.27.6",
-    "@percy/storybook": "4.3.7",
+    "@percy/storybook": "5.0.1",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@storybook/addon-a11y": "7.6.7",
@@ -38,64 +38,65 @@
     "@storybook/blocks": "7.6.7",
     "@storybook/react": "7.6.7",
     "@storybook/react-webpack5": "7.6.7",
-    "@testing-library/cypress": "9.0.0",
+    "@testing-library/cypress": "10.0.1",
     "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/jest-dom": "6.2.1",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
-    "babel-jest": "27.5.1",
+    "@typescript-eslint/eslint-plugin": "6.19.1",
+    "@typescript-eslint/parser": "6.19.1",
+    "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
     "concurrently": "8.2.2",
     "css-loader": "6.8.1",
-    "cypress": "12.17.4",
+    "cypress": "13.6.3",
     "deepmerge": "4.3.1",
     "eslint": "8.56.0",
-    "eslint-config-prettier": "8.10.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",
-    "eslint-plugin-testing-library": "5.11.1",
-    "jest": "27.5.1",
-    "npm-package-json-lint": "5.4.2",
-    "prettier": "2.8.8",
+    "eslint-plugin-testing-library": "6.2.0",
+    "jest": "29.7.0",
+    "npm-package-json-lint": "7.1.0",
+    "prettier": "3.2.4",
     "react": "18.2.0",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "18.2.0",
     "sass": "1.69.7",
-    "sass-loader": "10.5.1",
+    "sass-loader": "14.0.0",
     "semantic-release": "23.0.0",
     "storybook": "7.6.7",
     "style-loader": "3.3.3",
-    "stylelint": "15.11.0",
+    "stylelint": "16.2.0",
     "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-recommended-scss": "5.0.2",
-    "stylelint-order": "5.0.0",
-    "stylelint-prettier": "2.0.0",
-    "ts-jest": "27.1.5",
+    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-order": "6.0.4",
+    "stylelint-prettier": "5.0.0",
+    "ts-jest": "29.1.2",
     "tsc-alias": "1.8.8",
-    "typescript": "4.9.5",
+    "typescript": "5.3.3",
     "vanilla-framework": "4.6.0",
-    "wait-on": "5.3.0",
+    "wait-on": "7.2.0",
     "webpack": "5.89.0"
   },
   "dependencies": {
-    "@types/jest": "27.5.2",
+    "@types/jest": "29.5.11",
     "@types/node": "18.19.4",
     "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
     "@types/react-table": "7.7.19",
     "classnames": "2.5.1",
-    "nanoid": "3.3.7",
+    "jest-environment-jsdom": "29.7.0",
+    "nanoid": "5.0.4",
     "prop-types": "15.8.1",
     "react-table": "7.8.0",
     "react-useportal": "1.0.19"
@@ -104,10 +105,7 @@
     "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
     "postcss": "^8.3.11",
-    "string-width": "^4",
-    "jackspeak": "^2",
-    "strip-ansi": "^6.0.0",
-    "strip-ansi-cjs": "^8.0.0"
+    "jackspeak": "2.1.1"
   },
   "peerDependencies": {
     "@types/react": "^17.0.2 || ^18.0.0",