@canonical/react-components 3.10.0 → 3.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/ConfirmationButton/ConfirmationButton.js +5 -5
  2. package/dist/components/ConfirmationModal/ConfirmationModal.d.ts +5 -1
  3. package/dist/components/ConfirmationModal/ConfirmationModal.js +9 -3
  4. package/dist/esm/components/ConfirmationButton/ConfirmationButton.js +5 -5
  5. package/dist/esm/components/ConfirmationModal/ConfirmationModal.d.ts +5 -1
  6. package/dist/esm/components/ConfirmationModal/ConfirmationModal.js +9 -3
  7. package/package.json +1 -1
package/dist/components/ConfirmationButton/ConfirmationButton.js CHANGED
@@ -37,8 +37,7 @@ const ConfirmationButton = _ref => {
37
37
  const {
38
38
  openPortal,
39
39
  closePortal,
40
- isOpen,
41
- Portal
40
+ isOpen
42
41
  } = (0, _external.usePortal)();
43
42
  const handleCancelModal = () => {
44
43
  closePortal();
@@ -64,13 +63,14 @@ const ConfirmationButton = _ref => {
64
63
  }
65
64
  shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
66
65
  };
67
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, _extends({}, confirmationModalProps, {
66
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, _extends({}, confirmationModalProps, {
68
67
  close: handleCancelModal,
69
68
  confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
70
- onConfirm: handleConfirmModal
69
+ onConfirm: handleConfirmModal,
70
+ renderInPortal: true
71
71
  }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/_react.default.createElement("p", {
72
72
  className: "p-text--small u-text--muted u-hide--small"
73
- }, "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, {
73
+ }, "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, {
74
74
  onClick: handleClick,
75
75
  title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
76
76
  }), actionButtonProps.children));
package/dist/components/ConfirmationModal/ConfirmationModal.d.ts CHANGED
@@ -45,9 +45,13 @@ export type Props = PropsWithSpread<{
45
45
  * Whether the confirm button should be disabled.
46
46
  */
47
47
  confirmButtonDisabled?: boolean;
48
+ /**
49
+ * Whether to render the modal inside a Portal component.
50
+ */
51
+ renderInPortal?: boolean;
48
52
  }, Omit<ModalProps, "buttonRow">>;
49
53
  /**
50
54
  * `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.
51
55
  */
52
- export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, ...props }: Props) => React.JSX.Element;
56
+ export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, renderInPortal, ...props }: Props) => React.JSX.Element;
53
57
  export default ConfirmationModal;
package/dist/components/ConfirmationModal/ConfirmationModal.js CHANGED
@@ -8,7 +8,8 @@ var _react = _interopRequireDefault(require("react"));
8
8
  var _Button = _interopRequireDefault(require("../Button"));
9
9
  var _Modal = _interopRequireDefault(require("../Modal"));
10
10
  var _ActionButton = _interopRequireDefault(require("../ActionButton"));
11
- const _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps"];
11
+ var _external = require("../../external");
12
+ const _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps", "renderInPortal"];
12
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
14
  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); }
14
15
  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; }
@@ -28,9 +29,13 @@ const ConfirmationModal = _ref => {
28
29
  onConfirm,
29
30
  confirmButtonLoading,
30
31
  confirmButtonDisabled,
31
- confirmButtonProps
32
+ confirmButtonProps,
33
+ renderInPortal = false
32
34
  } = _ref,
33
35
  props = _objectWithoutProperties(_ref, _excluded);
36
+ const {
37
+ Portal
38
+ } = (0, _external.usePortal)();
34
39
  const handleClick = action => event => {
35
40
  if (!props.shouldPropagateClickEvent) {
36
41
  event.stopPropagation();
@@ -39,7 +44,7 @@ const ConfirmationModal = _ref => {
39
44
  action(event);
40
45
  }
41
46
  };
42
- return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
47
+ const ModalElement = /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
43
48
  buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, cancelButtonProps, {
44
49
  type: (_cancelButtonProps$ty = cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.type) !== null && _cancelButtonProps$ty !== void 0 ? _cancelButtonProps$ty : "button",
45
50
  className: "u-no-margin--bottom",
@@ -52,6 +57,7 @@ const ConfirmationModal = _ref => {
52
57
  disabled: confirmButtonDisabled
53
58
  }), confirmButtonLabel))
54
59
  }, props), children);
60
+ return renderInPortal ? /*#__PURE__*/_react.default.createElement(Portal, null, ModalElement) : ModalElement;
55
61
  };
56
62
  exports.ConfirmationModal = ConfirmationModal;
57
63
  var _default = exports.default = ConfirmationModal;
package/dist/esm/components/ConfirmationButton/ConfirmationButton.js CHANGED
@@ -30,8 +30,7 @@ export var ConfirmationButton = _ref => {
30
30
  var {
31
31
  openPortal,
32
32
  closePortal,
33
- isOpen,
34
- Portal
33
+ isOpen
35
34
  } = usePortal();
36
35
  var handleCancelModal = () => {
37
36
  closePortal();
@@ -57,13 +56,14 @@ export var ConfirmationButton = _ref => {
57
56
  }
58
57
  shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
59
58
  };
60
- return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ConfirmationModal, _extends({}, confirmationModalProps, {
59
+ return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(ConfirmationModal, _extends({}, confirmationModalProps, {
61
60
  close: handleCancelModal,
62
61
  confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
63
- onConfirm: handleConfirmModal
62
+ onConfirm: handleConfirmModal,
63
+ renderInPortal: true
64
64
  }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/React.createElement("p", {
65
65
  className: "p-text--small u-text--muted u-hide--small"
66
- }, "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, {
66
+ }, "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, {
67
67
  onClick: handleClick,
68
68
  title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
69
69
  }), actionButtonProps.children));
package/dist/esm/components/ConfirmationModal/ConfirmationModal.d.ts CHANGED
@@ -45,9 +45,13 @@ export type Props = PropsWithSpread<{
45
45
  * Whether the confirm button should be disabled.
46
46
  */
47
47
  confirmButtonDisabled?: boolean;
48
+ /**
49
+ * Whether to render the modal inside a Portal component.
50
+ */
51
+ renderInPortal?: boolean;
48
52
  }, Omit<ModalProps, "buttonRow">>;
49
53
  /**
50
54
  * `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.
51
55
  */
52
- export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, ...props }: Props) => React.JSX.Element;
56
+ export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, renderInPortal, ...props }: Props) => React.JSX.Element;
53
57
  export default ConfirmationModal;
package/dist/esm/components/ConfirmationModal/ConfirmationModal.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps"];
1
+ var _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps", "renderInPortal"];
2
2
  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); }
3
3
  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; }
4
4
  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,6 +6,7 @@ import React from "react";
6
6
  import Button from "../Button";
7
7
  import Modal from "../Modal";
8
8
  import ActionButton from "../ActionButton";
9
+ import { usePortal } from "../../external";
9
10
  /**
10
11
  * `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.
11
12
  */
@@ -21,9 +22,13 @@ export var ConfirmationModal = _ref => {
21
22
  onConfirm,
22
23
  confirmButtonLoading,
23
24
  confirmButtonDisabled,
24
- confirmButtonProps
25
+ confirmButtonProps,
26
+ renderInPortal = false
25
27
  } = _ref,
26
28
  props = _objectWithoutProperties(_ref, _excluded);
29
+ var {
30
+ Portal
31
+ } = usePortal();
27
32
  var handleClick = action => event => {
28
33
  if (!props.shouldPropagateClickEvent) {
29
34
  event.stopPropagation();
@@ -32,7 +37,7 @@ export var ConfirmationModal = _ref => {
32
37
  action(event);
33
38
  }
34
39
  };
35
- return /*#__PURE__*/React.createElement(Modal, _extends({
40
+ var ModalElement = /*#__PURE__*/React.createElement(Modal, _extends({
36
41
  buttonRow: /*#__PURE__*/React.createElement(React.Fragment, null, confirmExtra, /*#__PURE__*/React.createElement(Button, _extends({}, cancelButtonProps, {
37
42
  type: (_cancelButtonProps$ty = cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.type) !== null && _cancelButtonProps$ty !== void 0 ? _cancelButtonProps$ty : "button",
38
43
  className: "u-no-margin--bottom",
@@ -45,5 +50,6 @@ export var ConfirmationModal = _ref => {
45
50
  disabled: confirmButtonDisabled
46
51
  }), confirmButtonLabel))
47
52
  }, props), children);
53
+ return renderInPortal ? /*#__PURE__*/React.createElement(Portal, null, ModalElement) : ModalElement;
48
54
  };
49
55
  export default ConfirmationModal;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canonical/react-components",
3
- "version": "3.10.0",
3
+ "version": "3.11.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "author": {