newspack-components 4.3.0 → 4.4.0-alpha.1

package/dist/esm/hooks/useObjectState.js

@@ -1,3 +1,5 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * WordPress dependencies
  */
@@ -10,7 +12,7 @@ import mergeWith from 'lodash/mergeWith';
  * @property {Object.<string, any>} [update] The update object with key-value pairs to merge into the state.
  */
 
-const mergeCustomizer = (objValue, srcValue) => {
+var mergeCustomizer = function mergeCustomizer(objValue, srcValue) {
   if (isArray(objValue)) {
     // If it's an array, replace it (instead of concatenating).
     return srcValue;
@@ -25,16 +27,24 @@ const mergeCustomizer = (objValue, srcValue) => {
  * @param {T} initial Initial state object.
  * @return {[T, (keyOrUpdate: string | Partial<T>) => (value?: any) => void]} The state object and a function to update it.
  */
-export default (initial = {}) => {
-  const [stateObject, setStateObject] = useState(initial);
-  const runUpdate = update => setStateObject(_stateObject => mergeWith({}, _stateObject, update, mergeCustomizer));
-  const updateStateObject = keyOrUpdate => {
+export default (function () {
+  var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _useState = useState(initial),
+    _useState2 = _slicedToArray(_useState, 2),
+    stateObject = _useState2[0],
+    setStateObject = _useState2[1];
+  var runUpdate = function runUpdate(update) {
+    return setStateObject(function (_stateObject) {
+      return mergeWith({}, _stateObject, update, mergeCustomizer);
+    });
+  };
+  var updateStateObject = function updateStateObject(keyOrUpdate) {
     if (typeof keyOrUpdate === 'string') {
-      return value => runUpdate({
-        [keyOrUpdate]: value
-      });
+      return function (value) {
+        return runUpdate(_defineProperty({}, keyOrUpdate, value));
+      };
     }
     runUpdate(keyOrUpdate);
   };
   return [stateObject, updateStateObject];
-};
+});

package/dist/esm/hooks/useObjectState.test.js

@@ -1,8 +1,9 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { render, screen, fireEvent, act } from '@testing-library/react';
 import useObjectState from './useObjectState';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const INIT_STATE = {
+var INIT_STATE = {
   name: 'Foo',
   widgets: [1],
   attributes: {
@@ -10,68 +11,89 @@ const INIT_STATE = {
     baz: 1
   }
 };
-const TestComponent = () => {
-  const [state, updateState] = useObjectState(INIT_STATE);
+var TestComponent = function TestComponent() {
+  var _useObjectState = useObjectState(INIT_STATE),
+    _useObjectState2 = _slicedToArray(_useObjectState, 2),
+    state = _useObjectState2[0],
+    updateState = _useObjectState2[1];
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx("input", {
       placeholder: "state",
-      onChange: () => {},
+      onChange: function onChange() {},
       value: JSON.stringify(state)
     }), /*#__PURE__*/_jsx("button", {
-      onClick: () => updateState({
-        widgets: []
-      }),
+      onClick: function onClick() {
+        return updateState({
+          widgets: []
+        });
+      },
       children: "Remove widgets"
     }), /*#__PURE__*/_jsx("button", {
-      onClick: () => updateState({
-        widgets: [1]
-      }),
+      onClick: function onClick() {
+        return updateState({
+          widgets: [1]
+        });
+      },
       children: "Add widget"
     }), /*#__PURE__*/_jsx("button", {
-      onClick: () => updateState({
-        attributes: {
-          bar: 2
-        }
-      }),
+      onClick: function onClick() {
+        return updateState({
+          attributes: {
+            bar: 2
+          }
+        });
+      },
       children: "Nested update"
     }), /*#__PURE__*/_jsx("input", {
       type: "text",
       value: state.name,
-      onChange: e => updateState({
-        name: e.target.value
-      }),
+      onChange: function onChange(e) {
+        return updateState({
+          name: e.target.value
+        });
+      },
       placeholder: "name"
     })]
   });
 };
-describe('useObjectState', () => {
-  const getState = () => JSON.parse(screen.getByPlaceholderText('state').getAttribute('value'));
-  beforeEach(() => {
+describe('useObjectState', function () {
+  var getState = function getState() {
+    return JSON.parse(screen.getByPlaceholderText('state').getAttribute('value'));
+  };
+  beforeEach(function () {
     render(/*#__PURE__*/_jsx(TestComponent, {}));
   });
-  it('updates arrays', () => {
+  it('updates arrays', function () {
     expect(getState()).toStrictEqual(INIT_STATE);
-    act(() => screen.getByText('Remove widgets').click());
+    act(function () {
+      return screen.getByText('Remove widgets').click();
+    });
     expect(getState()).toMatchObject({
       widgets: []
     });
-    act(() => screen.getByText('Add widget').click());
+    act(function () {
+      return screen.getByText('Add widget').click();
+    });
     expect(getState()).toMatchObject({
       widgets: [1]
     });
   });
-  it('updates a simple value', () => {
-    act(() => fireEvent.change(screen.getByPlaceholderText('name'), {
-      target: {
-        value: 'Ramon'
-      }
-    }));
+  it('updates a simple value', function () {
+    act(function () {
+      return fireEvent.change(screen.getByPlaceholderText('name'), {
+        target: {
+          value: 'Ramon'
+        }
+      });
+    });
     expect(getState()).toMatchObject({
       name: 'Ramon'
     });
   });
-  it('updates a nested object', () => {
-    act(() => screen.getByText('Nested update').click());
+  it('updates a nested object', function () {
+    act(function () {
+      return screen.getByText('Nested update').click();
+    });
     expect(getState()).toMatchObject({
       attributes: {
         bar: 2,

package/dist/esm/hooks/useOnClickOutside.js

@@ -4,9 +4,9 @@
  * External dependencies.
  */
 import { useEffect } from '@wordpress/element';
-const useOnClickOutside = (ref, handler) => {
-  useEffect(() => {
-    const listener = event => {
+var useOnClickOutside = function useOnClickOutside(ref, handler) {
+  useEffect(function () {
+    var listener = function listener(event) {
       // Do nothing if clicking ref's element or descendent elements
       if (!ref.current || ref.current.contains(event.target)) {
         return;
@@ -15,7 +15,7 @@ const useOnClickOutside = (ref, handler) => {
     };
     document.addEventListener('mousedown', listener);
     document.addEventListener('touchstart', listener);
-    return () => {
+    return function () {
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };

package/dist/esm/hooks/usePrompt.js

@@ -9,13 +9,11 @@ import { useEffect, useRef } from '@wordpress/element';
  * Internal dependencies.
  */
 import Router from '../proxied-imports/router';
-const {
-  useHistory
-} = Router;
-export default (when, message) => {
-  const history = useHistory();
-  const self = useRef(null);
-  const onWindowOrTabClose = event => {
+var useHistory = Router.useHistory;
+export default (function (when, message) {
+  var history = useHistory();
+  var self = useRef(null);
+  var onWindowOrTabClose = function onWindowOrTabClose(event) {
     if (!when) {
       return;
     }
@@ -24,17 +22,17 @@ export default (when, message) => {
     }
     return message;
   };
-  useEffect(() => {
+  useEffect(function () {
     if (when) {
       self.current = history.block(message);
       window.addEventListener('beforeunload', onWindowOrTabClose);
     }
-    return () => {
+    return function () {
       if (self.current) {
         self.current();
       }
       window.removeEventListener('beforeunload', onWindowOrTabClose);
     };
   }, [message, when]);
-  return self.current || (() => {});
-};
+  return self.current || function () {};
+});

package/dist/esm/image-upload/index.js

@@ -1,3 +1,11 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 /**
  * Image Upload
  */
@@ -7,11 +15,12 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { BaseControl } from '@wordpress/components';
 
 /**
  * Internal dependencies.
  */
-import { Button, InfoButton } from '../';
+import { Button } from '../';
 import './style.scss';
 
 /**
@@ -19,122 +28,112 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-class ImageUpload extends Component {
+var ImageUpload = /*#__PURE__*/function (_Component) {
   /**
    * Constructor.
    */
-  constructor() {
-    super(...arguments);
-    this.state = {
-      frame: false
-    };
-  }
-
-  /**
-   * Open the WP media modal.
-   */
-  openModal = () => {
-    if (this.state.frame) {
-      this.state.frame.open();
-      return;
-    }
-    this.setState({
-      frame: wp.media({
-        title: __('Select or upload image'),
-        button: {
-          text: __('Select')
-        },
-        library: {
-          type: 'image'
-        },
-        multiple: false
-      })
-    }, () => {
-      this.state.frame.on('select', this.handleImageSelect);
-      this.state.frame.open();
+  function ImageUpload() {
+    var _this;
+    _classCallCheck(this, ImageUpload);
+    _this = _callSuper(this, ImageUpload, arguments);
+    /**
+     * Open the WP media modal.
+     */
+    _defineProperty(_this, "openModal", function () {
+      if (_this.state.frame) {
+        _this.state.frame.open();
+        return;
+      }
+      _this.setState({
+        frame: wp.media({
+          title: __('Select or upload image'),
+          button: {
+            text: __('Select')
+          },
+          library: {
+            type: 'image'
+          },
+          multiple: false
+        })
+      }, function () {
+        _this.state.frame.on('select', _this.handleImageSelect);
+        _this.state.frame.open();
+      });
     });
-  };
-
-  /**
-   * Update the state when an image is selected from the media modal.
-   */
-  handleImageSelect = () => {
-    const {
-      onChange
-    } = this.props;
-    const attachment = this.state.frame.state().get('selection').first().toJSON();
-    onChange(attachment);
-  };
-
-  /**
-   * Render.
-   */
-  render = () => {
-    const {
-      buttonLabel,
-      className,
-      disabled,
-      help,
-      image,
-      info,
-      isCovering,
-      label,
-      onChange,
-      style = {}
-    } = this.props;
-    const classes = classnames('newspack-image-upload__image', {
-      'newspack-image-upload__image--has-image': image
-    }, {
-      'newspack-image-upload__image--covering': isCovering
+    /**
+     * Update the state when an image is selected from the media modal.
+     */
+    _defineProperty(_this, "handleImageSelect", function () {
+      var onChange = _this.props.onChange;
+      var attachment = _this.state.frame.state().get('selection').first().toJSON();
+      onChange(attachment);
     });
-    return /*#__PURE__*/_jsxs("div", {
-      className: classnames('newspack-image-upload', className),
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "newspack-image-upload__header",
-        children: [label && /*#__PURE__*/_jsx("label", {
-          className: "newspack-image-upload__label",
+    /**
+     * Render.
+     */
+    _defineProperty(_this, "render", function () {
+      var _this$props = _this.props,
+        buttonLabel = _this$props.buttonLabel,
+        className = _this$props.className,
+        disabled = _this$props.disabled,
+        help = _this$props.help,
+        image = _this$props.image,
+        isCovering = _this$props.isCovering,
+        label = _this$props.label,
+        onChange = _this$props.onChange,
+        _this$props$style = _this$props.style,
+        style = _this$props$style === void 0 ? {} : _this$props$style;
+      var classes = classnames('newspack-image-upload__image', {
+        'newspack-image-upload__image--has-image': image
+      }, {
+        'newspack-image-upload__image--covering': isCovering
+      });
+      return /*#__PURE__*/_jsxs(BaseControl, {
+        __nextHasNoMarginBottom: true,
+        className: classnames('newspack-image-upload', className),
+        help: help,
+        children: [label && /*#__PURE__*/_jsx(BaseControl.VisualLabel, {
           children: label
-        }), info && /*#__PURE__*/_jsx(InfoButton, {
-          text: info
-        })]
-      }), /*#__PURE__*/_jsx("div", {
-        className: classes,
-        style: {
-          ...style
-        },
-        children: image?.url ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("img", {
-            "data-testid": "image-upload",
-            src: image.url,
-            alt: __('Image preview', 'newspack-plugin')
-          }), /*#__PURE__*/_jsxs("div", {
-            className: "newspack-image-upload__controls",
-            children: [/*#__PURE__*/_jsx(Button, {
-              disabled: disabled,
-              onClick: this.openModal,
-              isLink: true,
-              children: __('Replace', 'newspack-plugin')
-            }), /*#__PURE__*/_jsx("span", {
-              className: "sep"
-            }), /*#__PURE__*/_jsx(Button, {
-              disabled: disabled,
-              onClick: () => onChange(null),
-              isLink: true,
-              isDestructive: true,
-              children: __('Remove', 'newspack-plugin')
+        }), /*#__PURE__*/_jsx("div", {
+          className: classes,
+          style: style,
+          children: image !== null && image !== void 0 && image.url ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("img", {
+              "data-testid": "image-upload",
+              src: image.url,
+              alt: __('Image preview', 'newspack-plugin')
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "newspack-image-upload__controls",
+              children: [/*#__PURE__*/_jsx(Button, {
+                disabled: disabled,
+                onClick: _this.openModal,
+                variant: "tertiary",
+                children: __('Replace', 'newspack-plugin')
+              }), /*#__PURE__*/_jsx(Button, {
+                disabled: disabled,
+                onClick: function onClick() {
+                  return onChange(null);
+                },
+                variant: "tertiary",
+                isDestructive: true,
+                children: __('Remove', 'newspack-plugin')
+              })]
             })]
-          })]
-        }) : /*#__PURE__*/_jsx(Button, {
-          disabled: disabled,
-          onClick: this.openModal,
-          isLink: true,
-          children: buttonLabel ? buttonLabel : __('Upload', 'newspack-plugin')
-        })
-      }), help && /*#__PURE__*/_jsx("p", {
-        className: "newspack-image-upload__help",
-        children: help
-      })]
+          }) : /*#__PURE__*/_jsx(Button, {
+            disabled: disabled,
+            onClick: _this.openModal,
+            variant: "tertiary",
+            children: buttonLabel ? buttonLabel : __('Upload', 'newspack-plugin')
+          })
+        })]
+      });
     });
-  };
-}
+    _this.state = {
+      frame: false
+    };
+    return _this;
+  }
+  _inherits(ImageUpload, _Component);
+  return _createClass(ImageUpload);
+}(Component);
 export default ImageUpload;

package/dist/esm/image-upload/index.test.js

@@ -8,24 +8,22 @@ import { render } from '@testing-library/react';
  */
 import ImageUpload from './';
 import { jsx as _jsx } from "react/jsx-runtime";
-describe('ImageUpload', () => {
-  it('should render an add image button', () => {
-    const {
-      getByText
-    } = render(/*#__PURE__*/_jsx(ImageUpload, {}));
+describe('ImageUpload', function () {
+  it('should render an add image button', function () {
+    var _render = render(/*#__PURE__*/_jsx(ImageUpload, {})),
+      getByText = _render.getByText;
     expect(getByText('Upload')).toBeInTheDocument();
   });
-  it('should render replace and remove buttons if there is an image provided', () => {
-    const image = {
+  it('should render replace and remove buttons if there is an image provided', function () {
+    var image = {
       id: 1234,
       url: 'https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg'
     };
-    const {
-      getByText,
-      getByTestId
-    } = render(/*#__PURE__*/_jsx(ImageUpload, {
-      image: image
-    }));
+    var _render2 = render(/*#__PURE__*/_jsx(ImageUpload, {
+        image: image
+      })),
+      getByText = _render2.getByText,
+      getByTestId = _render2.getByTestId;
     expect(getByText('Remove')).toBeInTheDocument();
     expect(getByText('Replace')).toBeInTheDocument();
     expect(getByTestId('image-upload')).toBeInTheDocument();

package/dist/esm/image-upload/style.scss

@@ -3,45 +3,29 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-image-upload {
-	margin: 32px 0;
-	&__header {
-		display: flex;
-	}
-	&__label {
-		margin: 0 0 8px;
-	}
+	margin: wp-vars.$grid-unit-40 0;
 	&__image {
 		align-items: center;
+		background-position: center;
 		background-repeat: no-repeat;
 		background-size: contain;
-		background-position: center;
-		border: 1px dashed wp-colors.$gray-700;
-		border-radius: 2px;
+		border: 1px dashed wp-colors.$gray-600;
+		border-radius: wp-vars.$radius-small;
 		display: flex;
 		justify-content: center;
 		max-width: 100%;
-		min-height: 48px;
+		min-height: wp-vars.$grid-unit-50;
 		position: relative;
 		&--covering {
 			background-size: cover;
 		}
 		&:not(&--has-image) {
-			.newspack-button {
-				background: white !important;
-				border-radius: 2px !important;
-				padding: 4px 16px !important;
-
-				&:active,
-				&:focus,
-				&:hover {
-					background: white !important;
-				}
-
-				&:focus {
-					outline-offset: -3px !important;
-				}
+			.components-button {
+				justify-content: center;
+				width: calc(100% - 2px);
 			}
 		}
 		&--has-image {
@@ -49,8 +33,8 @@
 			overflow: hidden;
 			&::before,
 			&::after {
-				border: 1px solid rgba(black, 0.54);
-				border-radius: 2px;
+				border: 1px solid rgba(wp-colors.$black, 0.54);
+				border-radius: wp-vars.$radius-small;
 				content: "";
 				inset: 0;
 				position: absolute;
@@ -66,7 +50,7 @@
 				position: relative;
 			}
 			&::after {
-				background: rgba(white, 0.9);
+				background: rgba(wp-colors.$white, 0.95);
 				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,
@@ -80,20 +64,8 @@
 				max-height: 100%;
 				max-width: 100%;
 			}
-			.sep {
-				background: transparent;
-				display: block;
-				height: 8px;
-				margin: 0;
-				width: 100%;
-			}
 		}
 	}
-	&__image + &__help {
-		color: wp-colors.$gray-700;
-		font-size: 12px;
-		margin: 1em 0 0;
-	}
 	&__controls {
 		align-items: center;
 		display: flex;

package/dist/esm/index.js

@@ -5,15 +5,17 @@ export { default as AutocompleteWithSuggestions } from './autocomplete-with-sugg
 export { default as AutocompleteWithLatestPosts } from './autocomplete-with-latest-posts';
 export { default as Badge } from './badge';
 export { default as Button } from './button';
-export { default as ButtonCard } from './button-card';
 export { default as BoxContrast } from './box-contrast';
 export { default as Card } from './card';
+export { default as CardFeature } from './card-feature';
+export { default as CardForm } from './card-form';
 export { default as CardSettingsGroup } from './card-settings-group';
 export { default as CardSortableList } from './card-sortable-list';
 export { default as CategoryAutocomplete } from './category-autocomplete';
 export { default as ColorPicker } from './color-picker';
 export { default as ConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
+export { default as DataViews } from './dataviews';
 export { default as Divider } from './divider';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
@@ -47,5 +49,9 @@ export { default as withWizard } from './with-wizard';
 export { default as withWizardScreen } from './with-wizard-screen';
 export { default as Router } from './proxied-imports/router';
 export { default as hooks } from './hooks';
+export { default as useConfirmDialog } from './hooks/use-confirm-dialog';
+export { default as useUnsavedChangesDialog } from './hooks/use-unsaved-changes-dialog';
+import * as integrationIcons from './integration-icons';
+export { integrationIcons };
 export { default as utils } from './utils';
 import './style.scss';