@canonical/react-components 3.11.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; }
@@ -37,8 +38,15 @@ const ConfirmationButton = _ref => {
   const {
     openPortal,
     closePortal,
-    isOpen
+    isOpen,
+    Portal
   } = (0, _external.usePortal)();
+  const _ref2 = confirmationModalProps,
+    {
+      renderInPortal: _ignoredRenderInPortal,
+      portalRenderer: _ignoredPortalRenderer
+    } = _ref2,
+    safeConfirmationModalProps = _objectWithoutProperties(_ref2, _excluded2);
   const handleCancelModal = () => {
     closePortal();
     if (confirmationModalProps.close) {
@@ -63,11 +71,11 @@ const ConfirmationButton = _ref => {
     }
     shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__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,
-    renderInPortal: true
+    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, {

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

@@ -49,9 +49,16 @@ export type Props = PropsWithSpread<{
      * 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, renderInPortal, ...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

@@ -9,15 +9,25 @@ var _Button = _interopRequireDefault(require("../Button"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 var _external = require("../../external");
-const _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps", "renderInPortal"];
+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",
@@ -30,12 +40,10 @@ const ConfirmationModal = _ref => {
       confirmButtonLoading,
       confirmButtonDisabled,
       confirmButtonProps,
-      renderInPortal = false
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const {
-    Portal
-  } = (0, _external.usePortal)();
+      renderInPortal = false,
+      portalRenderer: PortalRenderer
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
   const handleClick = action => event => {
     if (!props.shouldPropagateClickEvent) {
       event.stopPropagation();
@@ -57,7 +65,13 @@ const ConfirmationModal = _ref => {
       disabled: confirmButtonDisabled
     }), confirmButtonLabel))
   }, props), children);
-  return renderInPortal ? /*#__PURE__*/_react.default.createElement(Portal, null, ModalElement) : ModalElement;
+  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; }
@@ -30,8 +31,15 @@ export var ConfirmationButton = _ref => {
   var {
     openPortal,
     closePortal,
-    isOpen
+    isOpen,
+    Portal
   } = usePortal();
+  var _ref2 = confirmationModalProps,
+    {
+      renderInPortal: _ignoredRenderInPortal,
+      portalRenderer: _ignoredPortalRenderer
+    } = _ref2,
+    safeConfirmationModalProps = _objectWithoutProperties(_ref2, _excluded2);
   var handleCancelModal = () => {
     closePortal();
     if (confirmationModalProps.close) {
@@ -56,11 +64,11 @@ export var ConfirmationButton = _ref => {
     }
     shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__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,
-    renderInPortal: true
+    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, {

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

@@ -49,9 +49,16 @@ export type Props = PropsWithSpread<{
      * 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, renderInPortal, ...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", "renderInPortal"];
+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; }
@@ -7,10 +7,20 @@ 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",
@@ -23,12 +33,10 @@ export var ConfirmationModal = _ref => {
       confirmButtonLoading,
       confirmButtonDisabled,
       confirmButtonProps,
-      renderInPortal = false
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var {
-    Portal
-  } = usePortal();
+      renderInPortal = false,
+      portalRenderer: PortalRenderer
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var handleClick = action => event => {
     if (!props.shouldPropagateClickEvent) {
       event.stopPropagation();
@@ -50,6 +58,12 @@ export var ConfirmationModal = _ref => {
       disabled: confirmButtonDisabled
     }), confirmButtonLabel))
   }, props), children);
-  return renderInPortal ? /*#__PURE__*/React.createElement(Portal, null, ModalElement) : ModalElement;
+  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.11.0",
+  "version": "3.11.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {