@canonical/react-components 3.5.1 → 3.6.0

package/dist/components/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { HTMLProps, ReactNode } from "react";
+import type { HTMLProps, ReactNode, RefObject } from "react";
 import { ClassName, PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
     /**
@@ -18,6 +18,10 @@ export type Props = PropsWithSpread<{
      * Function to handle closing the modal.
      */
     close?: () => void | null;
+    /**
+     * The element that will be focused upon opening the modal.
+     */
+    focusRef?: RefObject<HTMLElement | null>;
     /**
      * The title of the modal.
      */
@@ -36,5 +40,5 @@ export type Props = PropsWithSpread<{
  *
  * The modal component can be used to overlay an area of the screen which can contain a prompt, dialog or interaction.
  */
-export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, closeOnOutsideClick, ...wrapperProps }: Props) => React.JSX.Element;
+export declare const Modal: ({ buttonRow, children, className, close, focusRef, title, shouldPropagateClickEvent, closeOnOutsideClick, ...wrapperProps }: Props) => React.JSX.Element;
 export default Modal;

package/dist/components/Modal/Modal.js

@@ -21,6 +21,7 @@ const Modal = _ref => {
     children,
     className,
     close,
+    focusRef,
     title,
     shouldPropagateClickEvent = false,
     closeOnOutsideClick = true,
@@ -33,6 +34,7 @@ const Modal = _ref => {
   const titleId = (0, _react.useId)();
   const shouldClose = (0, _react.useRef)(false);
   const modalRef = (0, _react.useRef)(null);
+  const closeButtonRef = (0, _react.useRef)(null);
   const focusableModalElements = (0, _react.useRef)(null);
   const handleTabKey = event => {
     if (focusableModalElements.current.length > 0) {
@@ -60,24 +62,18 @@ const Modal = _ref => {
       close();
     }
   };
-  const keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);
   (0, _react.useEffect)(() => {
-    modalRef.current.focus();
-  }, [modalRef]);
-  const hasCloseButton = !!close;
-  (0, _react.useEffect)(() => {
-    var _focusableModalElemen;
-    focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
-    let focusIndex = 0;
-    // when the close button is rendered, focus on the 2nd content element and not the close btn.
-    if (hasCloseButton && focusableModalElements.current.length > 1) {
-      focusIndex = 1;
+    if (focusRef !== null && focusRef !== void 0 && focusRef.current) {
+      focusRef.current.focus();
+    } else if (closeButtonRef.current) {
+      closeButtonRef.current.focus();
+    } else {
+      modalRef.current.focus();
     }
-    (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 || _focusableModalElemen.focus({
-      preventScroll: true
-    });
-  }, [hasCloseButton]);
+    focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
+  }, [focusRef]);
   (0, _react.useEffect)(() => {
+    const keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);
     const keyDown = event => {
       const listener = keyListenersMap.get(event.code);
       return listener && listener(event);
@@ -130,11 +126,12 @@ const Modal = _ref => {
   }, /*#__PURE__*/_react.default.createElement("h2", {
     className: "p-modal__title",
     id: titleId
-  }, title), hasCloseButton && /*#__PURE__*/_react.default.createElement("button", {
+  }, title), close && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "p-modal__close",
     "aria-label": "Close active modal",
-    onClick: handleClose
+    onClick: handleClose,
+    ref: closeButtonRef
   }, "Close")), /*#__PURE__*/_react.default.createElement("div", {
     id: descriptionId
   }, children), !!buttonRow && /*#__PURE__*/_react.default.createElement("footer", {

package/dist/components/Modal/Modal.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Modal>;
 export default meta;
 type Story = StoryObj<typeof Modal>;
 export declare const Default: Story;
+export declare const Focus: Story;

package/dist/components/Modal/Modal.stories.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.Focus = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
 var _Modal = _interopRequireDefault(require("./Modal"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -61,4 +62,35 @@ const Default = exports.Default = {
     }, /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")) : null);
   },
   name: "Default"
+};
+const Focus = exports.Focus = {
+  render: _ref2 => {
+    let {
+      closeOnOutsideClick
+    } = _ref2;
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const [modalOpen, setModalOpen] = (0, _react.useState)(true);
+    const buttonRef = (0, _react.useRef)(null);
+    /* eslint-enable react-hooks/rules-of-hooks */
+
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Open modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_Modal.default, {
+      close: closeHandler,
+      title: "Confirm delete",
+      closeOnOutsideClick: closeOnOutsideClick,
+      buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+        className: "u-no-margin--bottom",
+        onClick: closeHandler
+      }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
+        className: "p-button--negative u-no-margin--bottom"
+      }, "Delete")),
+      focusRef: buttonRef
+    }, /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action."), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      appearance: "link",
+      ref: buttonRef
+    }, "More information"))) : null);
+  },
+  name: "Focus"
 };

package/dist/esm/components/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { HTMLProps, ReactNode } from "react";
+import type { HTMLProps, ReactNode, RefObject } from "react";
 import { ClassName, PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
     /**
@@ -18,6 +18,10 @@ export type Props = PropsWithSpread<{
      * Function to handle closing the modal.
      */
     close?: () => void | null;
+    /**
+     * The element that will be focused upon opening the modal.
+     */
+    focusRef?: RefObject<HTMLElement | null>;
     /**
      * The title of the modal.
      */
@@ -36,5 +40,5 @@ export type Props = PropsWithSpread<{
  *
  * The modal component can be used to overlay an area of the screen which can contain a prompt, dialog or interaction.
  */
-export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, closeOnOutsideClick, ...wrapperProps }: Props) => React.JSX.Element;
+export declare const Modal: ({ buttonRow, children, className, close, focusRef, title, shouldPropagateClickEvent, closeOnOutsideClick, ...wrapperProps }: Props) => React.JSX.Element;
 export default Modal;

package/dist/esm/components/Modal/Modal.js

@@ -1,4 +1,4 @@
-var _excluded = ["buttonRow", "children", "className", "close", "title", "shouldPropagateClickEvent", "closeOnOutsideClick"];
+var _excluded = ["buttonRow", "children", "className", "close", "focusRef", "title", "shouldPropagateClickEvent", "closeOnOutsideClick"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -15,6 +15,7 @@ export var Modal = _ref => {
       children,
       className,
       close,
+      focusRef,
       title,
       shouldPropagateClickEvent = false,
       closeOnOutsideClick = true
@@ -27,6 +28,7 @@ export var Modal = _ref => {
   var titleId = useId();
   var shouldClose = useRef(false);
   var modalRef = useRef(null);
+  var closeButtonRef = useRef(null);
   var focusableModalElements = useRef(null);
   var handleTabKey = event => {
     if (focusableModalElements.current.length > 0) {
@@ -54,24 +56,18 @@ export var Modal = _ref => {
       close();
     }
   };
-  var keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);
   useEffect(() => {
-    modalRef.current.focus();
-  }, [modalRef]);
-  var hasCloseButton = !!close;
-  useEffect(() => {
-    var _focusableModalElemen;
-    focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
-    var focusIndex = 0;
-    // when the close button is rendered, focus on the 2nd content element and not the close btn.
-    if (hasCloseButton && focusableModalElements.current.length > 1) {
-      focusIndex = 1;
+    if (focusRef !== null && focusRef !== void 0 && focusRef.current) {
+      focusRef.current.focus();
+    } else if (closeButtonRef.current) {
+      closeButtonRef.current.focus();
+    } else {
+      modalRef.current.focus();
     }
-    (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 || _focusableModalElemen.focus({
-      preventScroll: true
-    });
-  }, [hasCloseButton]);
+    focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
+  }, [focusRef]);
   useEffect(() => {
+    var keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);
     var keyDown = event => {
       var listener = keyListenersMap.get(event.code);
       return listener && listener(event);
@@ -124,11 +120,12 @@ export var Modal = _ref => {
   }, /*#__PURE__*/React.createElement("h2", {
     className: "p-modal__title",
     id: titleId
-  }, title), hasCloseButton && /*#__PURE__*/React.createElement("button", {
+  }, title), close && /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "p-modal__close",
     "aria-label": "Close active modal",
-    onClick: handleClose
+    onClick: handleClose,
+    ref: closeButtonRef
   }, "Close")), /*#__PURE__*/React.createElement("div", {
     id: descriptionId
   }, children), !!buttonRow && /*#__PURE__*/React.createElement("footer", {

package/dist/esm/components/Modal/Modal.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Modal>;
 export default meta;
 type Story = StoryObj<typeof Modal>;
 export declare const Default: Story;
+export declare const Focus: Story;

package/dist/esm/components/Modal/Modal.stories.js

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import React from "react";
+import Button from "../Button";
 import Modal from "./Modal";
 var Template = args => {
   return /*#__PURE__*/React.createElement("div", {
@@ -53,4 +54,35 @@ export var Default = {
     }, /*#__PURE__*/React.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/React.createElement("br", null), "You cannot undo this action.")) : null);
   },
   name: "Default"
+};
+export var Focus = {
+  render: _ref2 => {
+    var {
+      closeOnOutsideClick
+    } = _ref2;
+    /* eslint-disable react-hooks/rules-of-hooks */
+    var [modalOpen, setModalOpen] = useState(true);
+    var buttonRef = useRef(null);
+    /* eslint-enable react-hooks/rules-of-hooks */
+
+    var closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Open modal"), modalOpen ? /*#__PURE__*/React.createElement(Modal, {
+      close: closeHandler,
+      title: "Confirm delete",
+      closeOnOutsideClick: closeOnOutsideClick,
+      buttonRow: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+        className: "u-no-margin--bottom",
+        onClick: closeHandler
+      }, "Cancel"), /*#__PURE__*/React.createElement("button", {
+        className: "p-button--negative u-no-margin--bottom"
+      }, "Delete")),
+      focusRef: buttonRef
+    }, /*#__PURE__*/React.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/React.createElement("br", null), "You cannot undo this action."), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Button, {
+      appearance: "link",
+      ref: buttonRef
+    }, "More information"))) : null);
+  },
+  name: "Focus"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {