newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/dist/cjs/grid/index.js

@@ -4,34 +4,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "borders", "columns", "gutter", "noMargin", "rowGap"];
 /**
  * Grid
  */
-
 /**
  * Internal dependencies
  */
-
 /**
  * External dependencies
  */
-
-const Grid = ({
-  className = '',
-  columns = 2,
-  gutter = 32,
-  noMargin = false,
-  rowGap = 0,
-  ...otherProps
-}) => {
-  const classes = (0, _classnames.default)('newspack-grid', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: classes,
-    ...otherProps
-  });
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Grid = function Grid(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$borders = _ref.borders,
+    borders = _ref$borders === void 0 ? false : _ref$borders,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 2 : _ref$columns,
+    _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 32 : _ref$gutter,
+    _ref$noMargin = _ref.noMargin,
+    noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
+    _ref$rowGap = _ref.rowGap,
+    rowGap = _ref$rowGap === void 0 ? 0 : _ref$rowGap,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = (0, _classnames["default"])('newspack-grid', borders && 'newspack-grid__borders', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
+    className: classes
+  }, otherProps));
 };
-var _default = exports.default = Grid;
+var _default = exports["default"] = Grid;

package/dist/cjs/grid/style.scss

@@ -13,7 +13,7 @@
 
 	// No Margin
 	&--no-margin {
-		margin: 0;
+		margin: 0 !important;
 	}
 
 	// Gutter 0
@@ -41,6 +41,11 @@
 		grid-gap: 32px;
 	}
 
+	// Gutter 64
+	&__gutter-64 {
+		grid-gap: 64px;
+	}
+
 	// Row Gap 0
 	&__row-gap-0 {
 		grid-row-gap: 0;
@@ -61,11 +66,6 @@
 		grid-row-gap: 32px;
 	}
 
-	// Gutter 64
-	&__gutter-64 {
-		grid-gap: 64px;
-	}
-
 	// Columns 6
 	&__columns-6 {
 		grid-template-columns: repeat(2, 1fr);
@@ -77,6 +77,14 @@
 		&__columns-3,
 		&__columns-4 {
 			grid-template-columns: repeat(2, 1fr);
+
+			> [start] {
+				grid-column-start: 1;
+			}
+
+			> [end] {
+				grid-column-end: -1;
+			}
 		}
 
 		&__columns-6 {
@@ -84,8 +92,8 @@
 		}
 	}
 
-	// Media Queries - 1128px
-	@media screen and ( min-width: 1128px ) {
+	// Media Queries - 1054px
+	@media screen and ( min-width: 1054px ) {
 		// Columns 3
 		&__columns-3 {
 			grid-template-columns: repeat(3, 1fr);
@@ -94,6 +102,14 @@
 		// Columns 4
 		&__columns-4 {
 			grid-template-columns: repeat(4, 1fr);
+
+			> [start="2"] {
+				grid-column-start: 2;
+			}
+
+			> [end="4"] {
+				grid-column-end: 4;
+			}
 		}
 
 		// Columns 6
@@ -101,6 +117,11 @@
 			grid-template-columns: repeat(6, 1fr);
 		}
 
+		// Columns 12
+		&__columns-12 {
+			grid-template-columns: repeat(12, 1fr);
+		}
+
 		// Gutter 48
 		&__gutter-48 {
 			grid-gap: 48px;
@@ -116,6 +137,44 @@
 	> * {
 		margin-bottom: 0 !important;
 		margin-top: 0 !important;
+		> h1:first-child,
+		> h2:first-child,
+		> h3:first-child,
+		> h4:first-child,
+		> h5:first-child,
+		> h6:first-child {
+			margin-top: 0;
+		}
+	}
+
+	// Borders
+	&__borders {
+		grid-gap: 0 !important;
+		> * {
+			border-bottom: 1px solid wp-colors.$gray-300;
+			&:last-child {
+				border-bottom: none;
+			}
+			@media screen and ( min-width: 744px ) {
+				border-bottom: none;
+				border-right: 1px solid wp-colors.$gray-300;
+				&:last-child {
+					border-right: none;
+				}
+			}
+		}
+		&.newspack-grid__gutter-8 > * {
+			padding: 8px;
+		}
+		&.newspack-grid__gutter-16 > * {
+			padding: 16px;
+		}
+		&.newspack-grid__gutter-32 > * {
+			padding: 32px;
+		}
+		&.newspack-grid__gutter-64 > * {
+			padding: 64px;
+		}
 	}
 
 	.components-base-control {

package/dist/cjs/handoff/index.js

@@ -4,7 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
@@ -12,172 +19,213 @@ var _ = require("../");
 var _assign = _interopRequireDefault(require("lodash/assign"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+var _excluded = ["className", "children", "compact", "useModal", "modalTitle", "modalBody", "onReady", "editLink", "bannerText", "bannerButtonText", "url"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * Handoff
- */
-
-/**
+ */ /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies.
- */
-
-/**
+ */ /**
  * External dependencies.
  */
-
-class Handoff extends _element.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
+var Handoff = /*#__PURE__*/function (_Component) {
+  function Handoff() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Handoff);
+    _this = _callSuper(this, Handoff, arguments);
+    (0, _defineProperty2["default"])(_this, "componentDidMount", function () {
+      _this._isMounted = true;
+      var _this$props = _this.props,
+        plugin = _this$props.plugin,
+        url = _this$props.url;
+      if (plugin && !url) {
+        _this.retrievePluginInfo(plugin);
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "componentWillUnmount", function () {
+      _this._isMounted = false;
+    });
+    (0, _defineProperty2["default"])(_this, "retrievePluginInfo", function (plugin) {
+      var onReady = _this.props.onReady;
+      (0, _apiFetch["default"])({
+        path: '/newspack/v1/plugins/' + plugin
+      }).then(function (pluginInfo) {
+        if (_this._isMounted) {
+          onReady(pluginInfo);
+          _this.setState({
+            pluginInfo: pluginInfo
+          });
+        }
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "textForPlugin", function (pluginInfo) {
+      var defaults = {
+        modalBody: null,
+        modalTitle: pluginInfo.Name && "".concat((0, _i18n.__)('Manage', 'newspack-plugin'), " ").concat(pluginInfo.Name),
+        primaryButton: pluginInfo.Name && "".concat((0, _i18n.__)('Manage', 'newspack-plugin'), " ").concat(pluginInfo.Name),
+        primaryModalButton: (0, _i18n.__)('Manage', 'newspack-plugin'),
+        dismissModalButton: (0, _i18n.__)('Dismiss', 'newspack-plugin')
+      };
+      return (0, _assign["default"])(defaults, _this.props);
+    });
+    (0, _defineProperty2["default"])(_this, "goToUrl", function () {
+      var _this$props2 = _this.props,
+        url = _this$props2.url,
+        showOnBlockEditor = _this$props2.showOnBlockEditor,
+        bannerText = _this$props2.bannerText,
+        bannerButtonText = _this$props2.bannerButtonText;
+      (0, _apiFetch["default"])({
+        path: '/newspack/v1/handoff',
+        method: 'POST',
+        data: {
+          destinationUrl: url,
+          handoffReturnUrl: window && window.location.href,
+          showOnBlockEditor: showOnBlockEditor ? true : false,
+          bannerText: bannerText,
+          bannerButtonText: bannerButtonText
+        }
+      }).then(function (response) {
+        window.location.href = response.HandoffLink;
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "goToPlugin", function (plugin) {
+      var _this$props3 = _this.props,
+        editLink = _this$props3.editLink,
+        showOnBlockEditor = _this$props3.showOnBlockEditor,
+        bannerText = _this$props3.bannerText,
+        bannerButtonText = _this$props3.bannerButtonText;
+      (0, _apiFetch["default"])({
+        path: '/newspack/v1/plugins/' + plugin + '/handoff',
+        method: 'POST',
+        data: {
+          editLink: editLink,
+          handoffReturnUrl: window && window.location.href,
+          showOnBlockEditor: showOnBlockEditor ? true : false,
+          bannerText: bannerText,
+          bannerButtonText: bannerButtonText
+        }
+      }).then(function (response) {
+        window.location.href = response.HandoffLink;
+      });
+    });
+    _this.state = {
       pluginInfo: [],
       showModal: false
     };
+    return _this;
   }
-  componentDidMount = () => {
-    this._isMounted = true;
-    const {
-      plugin
-    } = this.props;
-    this.retrievePluginInfo(plugin);
-  };
-  componentWillUnmount = () => {
-    this._isMounted = false;
-  };
-  retrievePluginInfo = plugin => {
-    const {
-      onReady
-    } = this.props;
-    (0, _apiFetch.default)({
-      path: '/newspack/v1/plugins/' + plugin
-    }).then(pluginInfo => {
-      if (this._isMounted) {
-        onReady(pluginInfo);
-        this.setState({
-          pluginInfo
-        });
-      }
-    });
-  };
-  textForPlugin = pluginInfo => {
-    const defaults = {
-      modalBody: null,
-      modalTitle: pluginInfo.Name && `${(0, _i18n.__)('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
-      primaryButton: pluginInfo.Name && `${(0, _i18n.__)('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
-      primaryModalButton: (0, _i18n.__)('Manage', 'newspack-plugin'),
-      dismissModalButton: (0, _i18n.__)('Dismiss', 'newspack-plugin')
-    };
-    return (0, _assign.default)(defaults, this.props);
-  };
-  goToPlugin = plugin => {
-    const {
-      editLink,
-      showOnBlockEditor
-    } = this.props;
-    (0, _apiFetch.default)({
-      path: '/newspack/v1/plugins/' + plugin + '/handoff',
-      method: 'POST',
-      data: {
-        editLink,
-        handoffReturnUrl: window && window.location.href,
-        showOnBlockEditor: showOnBlockEditor ? true : false
-      }
-    }).then(response => {
-      window.location.href = response.HandoffLink;
-    });
-  };
-
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      children,
-      compact,
-      useModal,
-      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-      modalTitle: _modalTitle,
-      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-      modalBody: _modalBody,
-      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-      onReady,
-      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-      editLink,
-      ...otherProps
-    } = this.props;
-    const {
-      pluginInfo,
-      showModal
-    } = this.state;
-    const {
-      modalBody,
-      modalTitle,
-      primaryButton,
-      primaryModalButton,
-      dismissModalButton
-    } = this.textForPlugin(pluginInfo);
-    const {
-      Configured,
-      Name,
-      Slug,
-      Status
-    } = pluginInfo;
-    const classes = (0, _classnames.default)(Configured && 'is-configured', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [Name && 'active' === Status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-        className: classes,
-        isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
-        ...otherProps,
-        onClick: () => useModal ? this.setState({
-          showModal: true
-        }) : this.goToPlugin(Slug),
-        children: children ? children : primaryButton
-      }), Name && 'active' !== Status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-        className: classes,
-        variant: "secondary",
-        disabled: true,
-        ...otherProps,
-        children: Name + (0, _i18n.__)(' not installed', 'newspack-plugin')
-      }), !Name && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-        className: classes,
-        isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
-        ...otherProps,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [!compact && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
-            isLeft: true
-          }), (0, _i18n.__)('Retrieving Plugin Info', 'newspack-plugin')]
-        })
-      }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, {
-        title: modalTitle,
-        onRequestClose: () => this.setState({
-          showModal: false
-        }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          children: modalBody
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
-          buttonsCard: true,
-          noBorder: true,
-          className: "justify-end",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-            variant: "secondary",
-            onClick: () => this.setState({
+  (0, _inherits2["default"])(Handoff, _Component);
+  return (0, _createClass2["default"])(Handoff, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this2 = this;
+      var _this$props4 = this.props,
+        className = _this$props4.className,
+        children = _this$props4.children,
+        compact = _this$props4.compact,
+        useModal = _this$props4.useModal,
+        _modalTitle = _this$props4.modalTitle,
+        _modalBody = _this$props4.modalBody,
+        onReady = _this$props4.onReady,
+        editLink = _this$props4.editLink,
+        bannerText = _this$props4.bannerText,
+        bannerButtonText = _this$props4.bannerButtonText,
+        url = _this$props4.url,
+        otherProps = (0, _objectWithoutProperties2["default"])(_this$props4, _excluded);
+      var _this$state = this.state,
+        pluginInfo = _this$state.pluginInfo,
+        showModal = _this$state.showModal;
+      var _this$textForPlugin = this.textForPlugin(pluginInfo),
+        modalBody = _this$textForPlugin.modalBody,
+        modalTitle = _this$textForPlugin.modalTitle,
+        primaryButton = _this$textForPlugin.primaryButton,
+        primaryModalButton = _this$textForPlugin.primaryModalButton,
+        dismissModalButton = _this$textForPlugin.dismissModalButton;
+      var Configured = pluginInfo.Configured,
+        Name = pluginInfo.Name,
+        Slug = pluginInfo.Slug,
+        Status = pluginInfo.Status;
+      var classes = (0, _classnames["default"])(Configured && 'is-configured', className);
+      var goTo = function goTo() {
+        return url ? _this2.goToUrl() : _this2.goToPlugin(Slug);
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [url && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, _objectSpread(_objectSpread({
+          className: classes,
+          isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink
+        }, otherProps), {}, {
+          onClick: function onClick() {
+            return useModal && children ? _this2.setState({
+              showModal: true
+            }) : goTo();
+          },
+          children: children ? children : primaryButton
+        })), !url && Name && 'active' === Status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, _objectSpread(_objectSpread({
+          className: classes,
+          isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink
+        }, otherProps), {}, {
+          onClick: function onClick() {
+            return useModal ? _this2.setState({
+              showModal: true
+            }) : goTo();
+          },
+          children: children ? children : primaryButton
+        })), !url && Name && 'active' !== Status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, _objectSpread(_objectSpread({
+          className: classes,
+          variant: "secondary",
+          disabled: true
+        }, otherProps), {}, {
+          children: Name + (0, _i18n.__)(' not installed', 'newspack-plugin')
+        })), !url && !Name && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, _objectSpread(_objectSpread({
+          className: classes,
+          isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink
+        }, otherProps), {}, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+            children: [!compact && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+              isLeft: true
+            }), (0, _i18n.__)('Retrieving Plugin Info', 'newspack-plugin')]
+          })
+        })), showModal && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, {
+          title: modalTitle,
+          onRequestClose: function onRequestClose() {
+            return _this2.setState({
               showModal: false
-            }),
-            children: dismissModalButton
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-            variant: "primary",
-            onClick: () => this.goToPlugin(Slug),
-            children: primaryModalButton
+            });
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: modalBody
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
+            buttonsCard: true,
+            noBorder: true,
+            className: "justify-end",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+              variant: "secondary",
+              onClick: function onClick() {
+                return _this2.setState({
+                  showModal: false
+                });
+              },
+              children: dismissModalButton
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+              variant: "primary",
+              onClick: goTo,
+              children: primaryModalButton
+            })]
           })]
         })]
-      })]
-    });
-  }
-}
+      });
+    }
+  }]);
+}(_element.Component);
 Handoff.defaultProps = {
-  onReady: () => {}
+  onReady: function onReady() {}
 };
-var _default = exports.default = Handoff;
+var _default = exports["default"] = Handoff;

package/dist/cjs/handoff-message/index.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = HandoffMessage;
+exports["default"] = HandoffMessage;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _element = require("@wordpress/element");
 var _consts = require("../consts");
 var _ = require("../");
@@ -19,19 +21,22 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Handoff Message Component.
  */function HandoffMessage() {
-  const [handoffMessage, setHandoffMessage] = (0, _element.useState)(false);
-  (0, _element.useEffect)(() => {
+  var _useState = (0, _element.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    handoffMessage = _useState2[0],
+    setHandoffMessage = _useState2[1];
+  (0, _element.useEffect)(function () {
     // Slight delay to allow for localStorage to be updated by RAS component.
-    setTimeout(() => {
-      const handoff = JSON.parse(localStorage.getItem(_consts.HANDOFF_KEY));
-      if (handoff?.message) {
+    setTimeout(function () {
+      var handoff = JSON.parse(localStorage.getItem(_consts.HANDOFF_KEY));
+      if (handoff !== null && handoff !== void 0 && handoff.message) {
         setHandoffMessage(handoff.message);
       } else {
         setHandoffMessage(false);
       }
 
       // Clean up the notification if navigating away from the relevant page.
-      if (handoff?.url && -1 === window.location.href.indexOf(handoff.url)) {
+      if (handoff !== null && handoff !== void 0 && handoff.url && -1 === window.location.href.indexOf(handoff.url)) {
         window.localStorage.removeItem(_consts.HANDOFF_KEY);
         setHandoffMessage(false);
       }

package/dist/cjs/hooks/index.js

@@ -4,22 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _element = require("@wordpress/element");
 var _usePrompt = _interopRequireDefault(require("./usePrompt"));
 var _useObjectState = _interopRequireDefault(require("./useObjectState"));
 var _useOnClickOutside = _interopRequireDefault(require("./useOnClickOutside"));
+var _useConfirmDialog = _interopRequireDefault(require("./use-confirm-dialog"));
 /**
  * WordPress dependencies
  */
 
-const useUniqueId = prefix => {
-  const id = (0, _element.useRef)(`${prefix}-${Math.round(Math.random() * 99999)}`);
+var useUniqueId = function useUniqueId(prefix) {
+  var id = (0, _element.useRef)("".concat(prefix, "-").concat(Math.round(Math.random() * 99999)));
   return id.current;
 };
-var _default = exports.default = {
-  usePrompt: _usePrompt.default,
-  useObjectState: _useObjectState.default,
-  useOnClickOutside: _useOnClickOutside.default,
-  useUniqueId
+var _default = exports["default"] = {
+  usePrompt: _usePrompt["default"],
+  useObjectState: _useObjectState["default"],
+  useOnClickOutside: _useOnClickOutside["default"],
+  useUniqueId: useUniqueId,
+  useConfirmDialog: _useConfirmDialog["default"]
 };