@canonical/react-components 0.46.0 → 0.47.1

package/dist/components/ContextualMenu/ContextualMenu.d.ts

@@ -13,7 +13,7 @@ export declare enum Label {
  */
 export type Props<L> = PropsWithSpread<{
     /**
-     * Whether the menu should adjust to fit in the screen.
+     * Whether the menu should adjust its horizontal position to fit on the screen.
      */
     autoAdjust?: boolean;
     /**
@@ -57,13 +57,17 @@ export type Props<L> = PropsWithSpread<{
      */
     onToggleMenu?: (isOpen: boolean) => void | null;
     /**
-     * The position of the menu.
+     * The horizontal position of the menu.
      */
     position?: Position | null;
     /**
      * An element to make the menu relative to.
      */
     positionNode?: HTMLElement | null;
+    /**
+     * Whether the dropdown should scroll if it is too long to fit on the screen.
+     */
+    scrollOverflow?: boolean;
     /**
      * The appearance of the toggle button.
      */
@@ -115,5 +119,5 @@ export type Props<L> = PropsWithSpread<{
  * @param [toggleLabelFirst=true] - Whether the toggle lable or icon should appear first.
  * @param [visible=false] - Whether the menu should be visible.
  */
-declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => JSX.Element;
+declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, scrollOverflow, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => JSX.Element;
 export default ContextualMenu;

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -12,7 +12,7 @@ var _hooks = require("../../hooks");
 var _Button = _interopRequireDefault(require("../Button"));
 var _ContextualMenuDropdown = _interopRequireDefault(require("./ContextualMenuDropdown"));
 var _useId = require("../../hooks/useId");
-var _excluded = ["autoAdjust", "children", "className", "closeOnEsc", "closeOnOutsideClick", "constrainPanelWidth", "dropdownClassName", "dropdownProps", "hasToggleIcon", "links", "onToggleMenu", "position", "positionNode", "toggleAppearance", "toggleClassName", "toggleDisabled", "toggleLabel", "toggleLabelFirst", "toggleProps", "visible"];
+var _excluded = ["autoAdjust", "children", "className", "closeOnEsc", "closeOnOutsideClick", "constrainPanelWidth", "dropdownClassName", "dropdownProps", "hasToggleIcon", "links", "onToggleMenu", "position", "positionNode", "scrollOverflow", "toggleAppearance", "toggleClassName", "toggleDisabled", "toggleLabel", "toggleLabelFirst", "toggleProps", "visible"];
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -103,6 +103,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? "right" : _ref$position,
     positionNode = _ref.positionNode,
+    scrollOverflow = _ref.scrollOverflow,
     toggleAppearance = _ref.toggleAppearance,
     toggleClassName = _ref.toggleClassName,
     toggleDisabled = _ref.toggleDisabled,
@@ -238,6 +239,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
     position: position,
     positionCoords: positionCoords,
     positionNode: getPositionNode(wrapper.current, positionNode),
+    scrollOverflow: scrollOverflow,
     setAdjustedPosition: setAdjustedPosition,
     wrapperClass: wrapperClass
   }, dropdownProps))));

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts

@@ -28,6 +28,7 @@ export type Props<L = null> = {
     position?: Position;
     positionCoords?: ClientRect;
     positionNode?: HTMLElement;
+    scrollOverflow?: boolean;
     setAdjustedPosition?: (position: Position) => void;
     wrapperClass?: string;
 } & HTMLProps<HTMLSpanElement>;
@@ -38,5 +39,5 @@ export type Props<L = null> = {
  * @return The new position.
  */
 export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
-declare const ContextualMenuDropdown: <L>({ adjustedPosition, autoAdjust, closePortal, constrainPanelWidth, dropdownClassName, dropdownContent, id, isOpen, links, position, positionCoords, positionNode, setAdjustedPosition, wrapperClass, ...props }: Props<L>) => JSX.Element;
+declare const ContextualMenuDropdown: <L>({ adjustedPosition, autoAdjust, closePortal, constrainPanelWidth, dropdownClassName, dropdownContent, id, isOpen, links, position, positionCoords, positionNode, scrollOverflow, setAdjustedPosition, wrapperClass, ...props }: Props<L>) => JSX.Element;
 export default ContextualMenuDropdown;

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

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../../hooks");
 var _Button = _interopRequireDefault(require("../../Button"));
 var _excluded = ["children", "className", "onClick"],
-  _excluded2 = ["adjustedPosition", "autoAdjust", "closePortal", "constrainPanelWidth", "dropdownClassName", "dropdownContent", "id", "isOpen", "links", "position", "positionCoords", "positionNode", "setAdjustedPosition", "wrapperClass"];
+  _excluded2 = ["adjustedPosition", "autoAdjust", "closePortal", "constrainPanelWidth", "dropdownClassName", "dropdownContent", "id", "isOpen", "links", "position", "positionCoords", "positionNode", "scrollOverflow", "setAdjustedPosition", "wrapperClass"];
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -144,6 +144,7 @@ var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
     position = _ref.position,
     positionCoords = _ref.positionCoords,
     positionNode = _ref.positionNode,
+    scrollOverflow = _ref.scrollOverflow,
     setAdjustedPosition = _ref.setAdjustedPosition,
     wrapperClass = _ref.wrapperClass,
     props = _objectWithoutProperties(_ref, _excluded2);
@@ -152,6 +153,10 @@ var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     positionStyle = _useState2[0],
     setPositionStyle = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    maxHeight = _useState4[0],
+    setMaxHeight = _useState4[1];
 
   // Update the styles to position the menu.
   var updatePositionStyle = (0, _react.useCallback)(function () {
@@ -160,11 +165,16 @@ var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
 
   // Update the position when the window fitment info changes.
   var onUpdateWindowFitment = (0, _react.useCallback)(function (fitsWindow) {
-    setAdjustedPosition(adjustForWindow(position, fitsWindow));
-  }, [position, setAdjustedPosition]);
+    if (autoAdjust) {
+      setAdjustedPosition(adjustForWindow(position, fitsWindow));
+    }
+    if (scrollOverflow) {
+      setMaxHeight(fitsWindow.fromBottom.spaceBelow - 16);
+    }
+  }, [autoAdjust, position, scrollOverflow, setAdjustedPosition]);
 
-  // Handle adjusting the position of the dropdown so that it remains on screen.
-  (0, _hooks.useWindowFitment)(dropdown.current, positionNode, onUpdateWindowFitment, 0, isOpen && autoAdjust);
+  // 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));
 
   // Update the styles when the position changes.
   (0, _react.useEffect)(function () {
@@ -179,11 +189,15 @@ var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
     "aria-hidden": isOpen ? "false" : "true",
     "aria-label": Label.Dropdown,
     ref: dropdown,
-    style: constrainPanelWidth && positionStyle !== null && positionStyle !== void 0 && positionStyle.width ? {
+    style: _objectSpread(_objectSpread({}, constrainPanelWidth && positionStyle !== null && positionStyle !== void 0 && positionStyle.width ? {
       width: positionStyle.width,
       minWidth: 0,
       maxWidth: "none"
-    } : null
+    } : {}), scrollOverflow ? {
+      maxHeight: maxHeight,
+      minHeight: "2rem",
+      overflowX: "auto"
+    } : {})
   }, dropdownContent ? typeof dropdownContent === "function" ? dropdownContent(closePortal) : dropdownContent : links.map(function (item, i) {
     if (Array.isArray(item)) {
       return /*#__PURE__*/_react.default.createElement("span", {

package/dist/components/Modal/Modal.js

@@ -45,7 +45,13 @@ var Modal = function Modal(_ref) {
     }
   };
   var handleEscKey = function handleEscKey(e) {
-    e.nativeEvent.stopImmediatePropagation();
+    if ("nativeEvent" in e && e.nativeEvent.stopImmediatePropagation) {
+      e.nativeEvent.stopImmediatePropagation();
+    } else if ("stopImmediatePropagation" in e) {
+      e.stopImmediatePropagation();
+    } else if (e.stopPropagation) {
+      e.stopPropagation();
+    }
     close();
   };
   var keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);
@@ -61,7 +67,7 @@ var Modal = function Modal(_ref) {
       focusIndex = 1;
     }
     (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 ? void 0 : _focusableModalElemen.focus();
-  }, []);
+  }, [close]);
   (0, _react.useEffect)(function () {
     var keyDown = function keyDown(e) {
       var listener = keyListenersMap.get(e.code);

package/dist/components/Pagination/Pagination.js

@@ -27,16 +27,16 @@ var generatePaginationItems = function generatePaginationItems(pageNumbers, curr
     // on page 1, also show pages 2, 3 and 4
     if (currentPage === 1) {
       start = 1;
-      end = currentPage + 3;
+      end = Math.min(lastPage - 1, currentPage + 3);
     }
     // on page 2, show page 1, and also pages 3, and 4
     if (currentPage === 2) {
       start = 1;
-      end = currentPage + 2;
+      end = Math.min(lastPage - 1, currentPage + 3);
     }
     // on the last page and page before last, also show the 3 previous pages
     if (currentPage === lastPage || currentPage === lastPage - 1) {
-      start = lastPage - 4;
+      start = Math.max(1, lastPage - 4);
       end = lastPage - 1;
     }
     visiblePages = pageNumbers.slice(start, end);
@@ -54,7 +54,7 @@ var generatePaginationItems = function generatePaginationItems(pageNumbers, curr
         return changePage(1);
       }
     }));
-    if (![1, 2, 3].includes(currentPage)) {
+    if (!visiblePages.includes(2)) {
       items.push( /*#__PURE__*/_react.default.createElement(PaginationItemSeparator, {
         key: "sep1"
       }));
@@ -72,7 +72,7 @@ var generatePaginationItems = function generatePaginationItems(pageNumbers, curr
   }));
   if (truncated) {
     // render last in sequence
-    if (![lastPage, lastPage - 1, lastPage - 2].includes(currentPage)) {
+    if (!visiblePages.includes(lastPage - 1)) {
       items.push( /*#__PURE__*/_react.default.createElement(PaginationItemSeparator, {
         key: "sep2"
       }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.46.0",
+  "version": "0.47.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,11 +22,11 @@
   },
   "homepage": "https://canonical.github.io/react-components",
   "devDependencies": {
-    "@babel/cli": "7.22.5",
-    "@babel/eslint-parser": "7.22.5",
-    "@babel/preset-typescript": "7.22.5",
-    "@percy/cli": "1.26.1",
-    "@percy/storybook": "4.3.6",
+    "@babel/cli": "7.23.0",
+    "@babel/eslint-parser": "7.22.15",
+    "@babel/preset-typescript": "7.23.2",
+    "@percy/cli": "1.27.3",
+    "@percy/storybook": "4.3.7",
     "@storybook/addon-a11y": "6.5.16",
     "@storybook/addon-controls": "6.5.16",
     "@storybook/addon-docs": "6.5.16",
@@ -36,69 +36,69 @@
     "@storybook/react": "6.5.16",
     "@storybook/theming": "6.5.16",
     "@testing-library/cypress": "9.0.0",
-    "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/dom": "9.3.3",
+    "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
+    "@testing-library/user-event": "14.5.1",
     "@types/react-router-dom": "5.3.3",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "5.60.1",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
     "babel-jest": "27.5.1",
-    "babel-loader": "9.1.2",
+    "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
-    "concurrently": "8.2.0",
+    "concurrently": "8.2.1",
     "css-loader": "6.8.1",
-    "cypress": "12.16.0",
+    "cypress": "12.17.4",
     "deepmerge": "4.3.1",
-    "eslint": "8.43.0",
-    "eslint-config-prettier": "8.8.0",
+    "eslint": "8.51.0",
+    "eslint-config-prettier": "8.10.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-cypress": "2.13.3",
+    "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-testing-library": "5.11.0",
+    "eslint-plugin-testing-library": "5.11.1",
     "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "18.2.0",
-    "sass": "1.63.6",
+    "sass": "1.69.3",
     "sass-loader": "10.4.1",
     "style-loader": "3.3.3",
-    "stylelint": "15.10.1",
+    "stylelint": "15.11.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",
-    "tsc-alias": "1.8.6",
+    "tsc-alias": "1.8.8",
     "typescript": "4.9.5",
-    "vanilla-framework": "4.2.0",
+    "vanilla-framework": "4.5.0",
     "wait-on": "5.3.0",
-    "webpack": "5.88.0"
+    "webpack": "5.89.0"
   },
   "dependencies": {
     "@types/jest": "27.5.2",
-    "@types/node": "18.16.18",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
-    "@types/react-table": "7.7.14",
+    "@types/node": "18.18.5",
+    "@types/react": "18.2.28",
+    "@types/react-dom": "18.2.13",
+    "@types/react-table": "7.7.16",
     "classnames": "2.3.2",
     "nanoid": "3.3.6",
     "prop-types": "15.8.1",
-    "react-router-dom": "6.6.1",
+    "react-router-dom": "6.17.0",
     "react-table": "7.8.0",
     "react-useportal": "1.0.18"
   },
   "resolutions": {
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
+    "@types/react": "18.2.28",
+    "@types/react-dom": "18.2.13",
     "postcss": "^8.3.11"
   },
   "peerDependencies": {
@@ -130,11 +130,7 @@
     "unlink-packages": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink",
     "cypress:test": "wait-on http://localhost:${PORT:-9009} && cypress run --env port=${PORT:-9009}",
     "cypress:run": "cypress run --env port=${PORT:-9009}",
-    "cypress:open": "cypress open --env port=${PORT:-9009}",
-    "prepare-release:major": "./prepare-release major",
-    "prepare-release:minor": "./prepare-release minor",
-    "prepare-release:patch": "./prepare-release patch",
-    "prepare-release": "yarn run prepare-release:minor"
+    "cypress:open": "cypress open --env port=${PORT:-9009}"
   },
   "eslintConfig": {
     "extends": "react-app"