@canonical/react-components 3.10.0 → 3.11.1

package/dist/components/ConfirmationButton/ConfirmationButton.d.ts

@@ -5,8 +5,9 @@ import { ConfirmationModalProps } from "../ConfirmationModal";
 export type Props = PropsWithSpread<{
     /**
      * Additional props to pass to the confirmation modal.
+     * The `renderInPortal` and `portalRenderer` props are controlled internally by this component.
      */
-    confirmationModalProps: SubComponentProps<ConfirmationModalProps>;
+    confirmationModalProps: SubComponentProps<Omit<ConfirmationModalProps, "renderInPortal" | "portalRenderer">>;
     /**
      * An optional text to be shown when hovering over the button.<br/>
      * Defaults to the label of the confirm button in the modal.

package/dist/components/ConfirmationButton/ConfirmationButton.js

@@ -8,7 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 var _ConfirmationModal = _interopRequireDefault(require("../ConfirmationModal"));
 var _external = require("../../external");
-const _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint", "preModalOpenHook"];
+const _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint", "preModalOpenHook"],
+  _excluded2 = ["renderInPortal", "portalRenderer"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -40,6 +41,12 @@ const ConfirmationButton = _ref => {
     isOpen,
     Portal
   } = (0, _external.usePortal)();
+  const _ref2 = confirmationModalProps,
+    {
+      renderInPortal: _ignoredRenderInPortal,
+      portalRenderer: _ignoredPortalRenderer
+    } = _ref2,
+    safeConfirmationModalProps = _objectWithoutProperties(_ref2, _excluded2);
   const handleCancelModal = () => {
     closePortal();
     if (confirmationModalProps.close) {
@@ -64,13 +71,14 @@ const ConfirmationButton = _ref => {
     }
     shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, _extends({}, confirmationModalProps, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, _extends({}, safeConfirmationModalProps, {
     close: handleCancelModal,
     confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
-    onConfirm: handleConfirmModal
+    onConfirm: handleConfirmModal,
+    portalRenderer: Portal
   }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/_react.default.createElement("p", {
     className: "p-text--small u-text--muted u-hide--small"
-  }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/_react.default.createElement("code", null, "SHIFT"), " and clicking the action."))), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, actionButtonProps, {
+  }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/_react.default.createElement("code", null, "SHIFT"), " and clicking the action.")), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, actionButtonProps, {
     onClick: handleClick,
     title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
   }), actionButtonProps.children));

package/dist/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -45,9 +45,20 @@ export type Props = PropsWithSpread<{
      * Whether the confirm button should be disabled.
      */
     confirmButtonDisabled?: boolean;
+    /**
+     * Whether to render the modal inside a Portal component.
+     */
+    renderInPortal?: boolean;
+    /**
+     * Optional custom portal renderer. If provided, it takes precedence
+     * over `renderInPortal`.
+     */
+    portalRenderer?: React.ComponentType<{
+        children: ReactNode;
+    }>;
 }, Omit<ModalProps, "buttonRow">>;
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, ...props }: Props) => React.JSX.Element;
+export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, renderInPortal, portalRenderer: PortalRenderer, ...props }: Props) => React.JSX.Element;
 export default ConfirmationModal;

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -8,15 +8,26 @@ var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
-const _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps"];
+var _external = require("../../external");
+const _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps", "renderInPortal", "portalRenderer"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
+const InternalPortalRenderer = _ref => {
+  let {
+    children
+  } = _ref;
+  const {
+    Portal
+  } = (0, _external.usePortal)();
+  return /*#__PURE__*/_react.default.createElement(Portal, null, children);
+};
+
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-const ConfirmationModal = _ref => {
+const ConfirmationModal = _ref2 => {
   var _cancelButtonProps$ty;
   let {
       cancelButtonLabel = "Cancel",
@@ -28,9 +39,11 @@ const ConfirmationModal = _ref => {
       onConfirm,
       confirmButtonLoading,
       confirmButtonDisabled,
-      confirmButtonProps
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+      confirmButtonProps,
+      renderInPortal = false,
+      portalRenderer: PortalRenderer
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
   const handleClick = action => event => {
     if (!props.shouldPropagateClickEvent) {
       event.stopPropagation();
@@ -39,7 +52,7 @@ const ConfirmationModal = _ref => {
       action(event);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
+  const ModalElement = /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
     buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, cancelButtonProps, {
       type: (_cancelButtonProps$ty = cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.type) !== null && _cancelButtonProps$ty !== void 0 ? _cancelButtonProps$ty : "button",
       className: "u-no-margin--bottom",
@@ -52,6 +65,13 @@ const ConfirmationModal = _ref => {
       disabled: confirmButtonDisabled
     }), confirmButtonLabel))
   }, props), children);
+  if (PortalRenderer) {
+    return /*#__PURE__*/_react.default.createElement(PortalRenderer, null, ModalElement);
+  } else if (renderInPortal) {
+    return /*#__PURE__*/_react.default.createElement(InternalPortalRenderer, null, ModalElement);
+  } else {
+    return ModalElement;
+  }
 };
 exports.ConfirmationModal = ConfirmationModal;
 var _default = exports.default = ConfirmationModal;

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

@@ -5,8 +5,9 @@ import { ConfirmationModalProps } from "../ConfirmationModal";
 export type Props = PropsWithSpread<{
     /**
      * Additional props to pass to the confirmation modal.
+     * The `renderInPortal` and `portalRenderer` props are controlled internally by this component.
      */
-    confirmationModalProps: SubComponentProps<ConfirmationModalProps>;
+    confirmationModalProps: SubComponentProps<Omit<ConfirmationModalProps, "renderInPortal" | "portalRenderer">>;
     /**
      * An optional text to be shown when hovering over the button.<br/>
      * Defaults to the label of the confirm button in the modal.

package/dist/esm/components/ConfirmationButton/ConfirmationButton.js

@@ -1,4 +1,5 @@
-var _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint", "preModalOpenHook"];
+var _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint", "preModalOpenHook"],
+  _excluded2 = ["renderInPortal", "portalRenderer"];
 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; }
@@ -33,6 +34,12 @@ export var ConfirmationButton = _ref => {
     isOpen,
     Portal
   } = usePortal();
+  var _ref2 = confirmationModalProps,
+    {
+      renderInPortal: _ignoredRenderInPortal,
+      portalRenderer: _ignoredPortalRenderer
+    } = _ref2,
+    safeConfirmationModalProps = _objectWithoutProperties(_ref2, _excluded2);
   var handleCancelModal = () => {
     closePortal();
     if (confirmationModalProps.close) {
@@ -57,13 +64,14 @@ export var ConfirmationButton = _ref => {
     }
     shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ConfirmationModal, _extends({}, confirmationModalProps, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(ConfirmationModal, _extends({}, safeConfirmationModalProps, {
     close: handleCancelModal,
     confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
-    onConfirm: handleConfirmModal
+    onConfirm: handleConfirmModal,
+    portalRenderer: Portal
   }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/React.createElement("p", {
     className: "p-text--small u-text--muted u-hide--small"
-  }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/React.createElement("code", null, "SHIFT"), " and clicking the action."))), /*#__PURE__*/React.createElement(ActionButton, _extends({}, actionButtonProps, {
+  }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/React.createElement("code", null, "SHIFT"), " and clicking the action.")), /*#__PURE__*/React.createElement(ActionButton, _extends({}, actionButtonProps, {
     onClick: handleClick,
     title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
   }), actionButtonProps.children));

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

@@ -45,9 +45,20 @@ export type Props = PropsWithSpread<{
      * Whether the confirm button should be disabled.
      */
     confirmButtonDisabled?: boolean;
+    /**
+     * Whether to render the modal inside a Portal component.
+     */
+    renderInPortal?: boolean;
+    /**
+     * Optional custom portal renderer. If provided, it takes precedence
+     * over `renderInPortal`.
+     */
+    portalRenderer?: React.ComponentType<{
+        children: ReactNode;
+    }>;
 }, Omit<ModalProps, "buttonRow">>;
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, ...props }: Props) => React.JSX.Element;
+export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, renderInPortal, portalRenderer: PortalRenderer, ...props }: Props) => React.JSX.Element;
 export default ConfirmationModal;

package/dist/esm/components/ConfirmationModal/ConfirmationModal.js

@@ -1,4 +1,4 @@
-var _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps"];
+var _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps", "renderInPortal", "portalRenderer"];
 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; }
@@ -6,10 +6,21 @@ import React from "react";
 import Button from "../Button";
 import Modal from "../Modal";
 import ActionButton from "../ActionButton";
+import { usePortal } from "../../external";
+var InternalPortalRenderer = _ref => {
+  var {
+    children
+  } = _ref;
+  var {
+    Portal
+  } = usePortal();
+  return /*#__PURE__*/React.createElement(Portal, null, children);
+};
+
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-export var ConfirmationModal = _ref => {
+export var ConfirmationModal = _ref2 => {
   var _cancelButtonProps$ty;
   var {
       cancelButtonLabel = "Cancel",
@@ -21,9 +32,11 @@ export var ConfirmationModal = _ref => {
       onConfirm,
       confirmButtonLoading,
       confirmButtonDisabled,
-      confirmButtonProps
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+      confirmButtonProps,
+      renderInPortal = false,
+      portalRenderer: PortalRenderer
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var handleClick = action => event => {
     if (!props.shouldPropagateClickEvent) {
       event.stopPropagation();
@@ -32,7 +45,7 @@ export var ConfirmationModal = _ref => {
       action(event);
     }
   };
-  return /*#__PURE__*/React.createElement(Modal, _extends({
+  var ModalElement = /*#__PURE__*/React.createElement(Modal, _extends({
     buttonRow: /*#__PURE__*/React.createElement(React.Fragment, null, confirmExtra, /*#__PURE__*/React.createElement(Button, _extends({}, cancelButtonProps, {
       type: (_cancelButtonProps$ty = cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.type) !== null && _cancelButtonProps$ty !== void 0 ? _cancelButtonProps$ty : "button",
       className: "u-no-margin--bottom",
@@ -45,5 +58,12 @@ export var ConfirmationModal = _ref => {
       disabled: confirmButtonDisabled
     }), confirmButtonLabel))
   }, props), children);
+  if (PortalRenderer) {
+    return /*#__PURE__*/React.createElement(PortalRenderer, null, ModalElement);
+  } else if (renderInPortal) {
+    return /*#__PURE__*/React.createElement(InternalPortalRenderer, null, ModalElement);
+  } else {
+    return ModalElement;
+  }
 };
 export default ConfirmationModal;

package/package.json

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