@canonical/react-components 0.45.0 → 0.47.0

package/dist/components/CodeSnippet/CodeSnippetBlock.d.ts

@@ -15,7 +15,7 @@ export type Props = {
     /**
      * The code snippet to display.
      */
-    code: string;
+    code: ReactNode;
     /**
      * Content to show below the code snippet.
      */

package/dist/components/CodeSnippet/CodeSnippetBlock.js

@@ -35,7 +35,16 @@ function CodeSnippetBlock(_ref) {
     className += "--numbered";
 
     // wrap code lines in spans (and preserve the whitespace)
-    var lines = code.split(/\r?\n/);
+    var lines;
+    if (Array.isArray(code)) {
+      lines = code;
+    } else if (typeof code === "string") {
+      lines = code.split(/\r?\n/);
+    } else {
+      // If the code is not able to be split over multiple lines, then display
+      // a single line number.
+      lines = [code];
+    }
     numberedCode = lines.map(function (line, i) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
         key: "p-code-snippet__line-".concat(i)

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

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -79,7 +79,7 @@
     "ts-jest": "27.1.5",
     "tsc-alias": "1.8.6",
     "typescript": "4.9.5",
-    "vanilla-framework": "4.0.0",
+    "vanilla-framework": "4.2.0",
     "wait-on": "5.3.0",
     "webpack": "5.88.0"
   },
@@ -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"