newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/grid/index.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var _interopRequireDefault = require( '@babel/runtime/helpers/interopRequireDefault' );
+Object.defineProperty( exports, '__esModule', {
+	value: true,
+} );
+exports.default = void 0;
+require( './style.scss' );
+var _classnames = _interopRequireDefault( require( 'classnames' ) );
+var _jsxRuntime = require( 'react/jsx-runtime' );
+/**
+ * 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,
+	} );
+};
+var _default = ( exports.default = Grid );

package/dist/grid/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * Grid
+ */
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+const Grid = ( {
+	className = '',
+	columns = 2,
+	gutter = 32,
+	noMargin = false,
+	rowGap = 0,
+	...otherProps
+} ) => {
+	const classes = classnames(
+		'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 <div className={ classes } { ...otherProps } />;
+};
+
+export default Grid;

package/dist/{cjs/grid → grid}/style.scss

@@ -2,7 +2,7 @@
  * Grid
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-grid {
 	display: grid;
@@ -68,7 +68,7 @@
 
 	// Columns 6
 	&__columns-6 {
-		grid-template-columns: repeat( 2, 1fr );
+		grid-template-columns: repeat(2, 1fr);
 	}
 
 	// Media Queries - 744px
@@ -76,11 +76,11 @@
 		&__columns-2,
 		&__columns-3,
 		&__columns-4 {
-			grid-template-columns: repeat( 2, 1fr );
+			grid-template-columns: repeat(2, 1fr);
 		}
 
 		&__columns-6 {
-			grid-template-columns: repeat( 3, 1fr );
+			grid-template-columns: repeat(3, 1fr);
 		}
 	}
 
@@ -88,17 +88,17 @@
 	@media screen and ( min-width: 1128px ) {
 		// Columns 3
 		&__columns-3 {
-			grid-template-columns: repeat( 3, 1fr );
+			grid-template-columns: repeat(3, 1fr);
 		}
 
 		// Columns 4
 		&__columns-4 {
-			grid-template-columns: repeat( 4, 1fr );
+			grid-template-columns: repeat(4, 1fr);
 		}
 
 		// Columns 6
 		&__columns-6 {
-			grid-template-columns: repeat( 6, 1fr );
+			grid-template-columns: repeat(6, 1fr);
 		}
 
 		// Gutter 48
@@ -144,12 +144,12 @@
 
 	// Table-like
 	&__thead {
-		background: rgba( black, 0.025 );
+		background: rgba(black, 0.025);
 		border-bottom: 1px solid wp-colors.$gray-300;
 		border-top: 1px solid wp-colors.$gray-300;
 		color: wp-colors.$gray-900;
 
-		> *:not( .screen-reader-text ) {
+		> *:not(.screen-reader-text) {
 			padding: 8px;
 		}
 	}

package/dist/{cjs/handoff → handoff}/index.js

@@ -1,91 +1,94 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-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");
 var _ = require("../");
 var _assign = _interopRequireDefault(require("lodash/assign"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Handoff
  */
+
 /**
  * WordPress dependencies.
  */
+
 /**
  * Internal dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * External dependencies.
  */
+
 class Handoff extends _element.Component {
   constructor() {
     super(...arguments);
-    (0, _defineProperty2.default)(this, "componentDidMount", () => {
-      this._isMounted = true;
-      const {
-        plugin
-      } = this.props;
-      this.retrievePluginInfo(plugin);
-    });
-    (0, _defineProperty2.default)(this, "componentWillUnmount", () => {
-      this._isMounted = false;
-    });
-    (0, _defineProperty2.default)(this, "retrievePluginInfo", plugin => {
-      const {
-        onReady
-      } = this.props;
-      (0, _apiFetch.default)({
-        path: '/newspack/v1/plugins/' + plugin
-      }).then(pluginInfo => {
-        if (this._isMounted) {
-          onReady(pluginInfo);
-          this.setState({
-            pluginInfo
-          });
-        }
-      });
-    });
-    (0, _defineProperty2.default)(this, "textForPlugin", pluginInfo => {
-      const defaults = {
-        modalBody: null,
-        modalTitle: pluginInfo.Name && `${__('Manage', 'newspack')} ${pluginInfo.Name}`,
-        primaryButton: pluginInfo.Name && `${__('Manage', 'newspack')} ${pluginInfo.Name}`,
-        primaryModalButton: __('Manage', 'newspack'),
-        dismissModalButton: __('Dismiss', 'newspack')
-      };
-      return (0, _assign.default)(defaults, this.props);
-    });
-    (0, _defineProperty2.default)(this, "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;
-      });
-    });
     this.state = {
       pluginInfo: [],
       showModal: false
     };
   }
+  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.
    */
@@ -123,8 +126,8 @@ class Handoff extends _element.Component {
       Status
     } = pluginInfo;
     const classes = (0, _classnames.default)(Configured && 'is-configured', className);
-    return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [Name && 'active' === Status && (0, _jsxRuntime.jsx)(_.Button, {
+    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,
@@ -132,39 +135,39 @@ class Handoff extends _element.Component {
           showModal: true
         }) : this.goToPlugin(Slug),
         children: children ? children : primaryButton
-      }), Name && 'active' !== Status && (0, _jsxRuntime.jsx)(_.Button, {
+      }), Name && 'active' !== Status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
         className: classes,
         variant: "secondary",
         disabled: true,
         ...otherProps,
-        children: Name + __(' not installed', 'newspack')
-      }), !Name && (0, _jsxRuntime.jsx)(_.Button, {
+        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: (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [!compact && (0, _jsxRuntime.jsx)(_.Waiting, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+          children: [!compact && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
             isLeft: true
-          }), __('Retrieving Plugin Info', 'newspack')]
+          }), (0, _i18n.__)('Retrieving Plugin Info', 'newspack-plugin')]
         })
-      }), showModal && (0, _jsxRuntime.jsxs)(_.Modal, {
+      }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, {
         title: modalTitle,
         onRequestClose: () => this.setState({
           showModal: false
         }),
-        children: [(0, _jsxRuntime.jsx)("p", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           children: modalBody
-        }), (0, _jsxRuntime.jsxs)(_.Card, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
           buttonsCard: true,
           noBorder: true,
           className: "justify-end",
-          children: [(0, _jsxRuntime.jsx)(_.Button, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
             variant: "secondary",
             onClick: () => this.setState({
               showModal: false
             }),
             children: dismissModalButton
-          }), (0, _jsxRuntime.jsx)(_.Button, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
             variant: "primary",
             onClick: () => this.goToPlugin(Slug),
             children: primaryModalButton
@@ -177,5 +180,4 @@ class Handoff extends _element.Component {
 Handoff.defaultProps = {
   onReady: () => {}
 };
-var _default = Handoff;
-exports.default = _default;
+var _default = exports.default = Handoff;

package/dist/{cjs/handoff-message → handoff-message}/index.js

@@ -7,7 +7,7 @@ exports.default = HandoffMessage;
 var _element = require("@wordpress/element");
 var _consts = require("../consts");
 var _ = require("../");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
@@ -40,8 +40,10 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
     // Clean up the notification when unmounting.
     return () => window.localStorage.removeItem(_consts.HANDOFF_KEY);
   }, []);
-  if (!handoffMessage) return null;
-  return (0, _jsxRuntime.jsx)(_.Notice, {
+  if (!handoffMessage) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
     isHandoff: true,
     isDismissible: false,
     rawHTML: true,

package/dist/hooks/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var _interopRequireDefault = require( '@babel/runtime/helpers/interopRequireDefault' );
+Object.defineProperty( exports, '__esModule', {
+	value: true,
+} );
+exports.default = void 0;
+var _element = require( '@wordpress/element' );
+var _usePrompt = _interopRequireDefault( require( './usePrompt' ) );
+var _useObjectState = _interopRequireDefault( require( './useObjectState' ) );
+var _useOnClickOutside = _interopRequireDefault(
+	require( './useOnClickOutside' )
+);
+/**
+ * WordPress dependencies
+ */
+
+const useUniqueId = ( prefix ) => {
+	const id = ( 0, _element.useRef )(
+		`${ prefix }-${ Math.round( Math.random() * 99999 ) }`
+	);
+	return id.current;
+};
+var _default = ( exports.default = {
+	usePrompt: _usePrompt.default,
+	useObjectState: _useObjectState.default,
+	useOnClickOutside: _useOnClickOutside.default,
+	useUniqueId,
+} );

package/{src/hooks/index.js → dist/hooks/index.ts}

@@ -7,7 +7,7 @@ import usePrompt from './usePrompt';
 import useObjectState from './useObjectState';
 import useOnClickOutside from './useOnClickOutside';
 
-const useUniqueId = prefix => {
+const useUniqueId = ( prefix: string ) => {
 	const id = useRef( `${ prefix }-${ Math.round( Math.random() * 99999 ) }` );
 	return id.current;
 };

package/dist/{cjs/hooks → hooks}/useObjectState.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,8 +23,7 @@ const mergeCustomizer = (objValue, srcValue) => {
  * A useState for an object.
  * Nested objects will be nested, but arrays replaced.
  */
-var _default = function _default() {
-  let initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+var _default = (initial = {}) => {
   const [stateObject, setStateObject] = (0, _element.useState)(initial);
   const runUpdate = update => setStateObject(_stateObject => (0, _mergeWith.default)({}, _stateObject, update, mergeCustomizer));
   const updateStateObject = keyOrUpdate => {

package/dist/{cjs/hooks → hooks}/useObjectState.test.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _useObjectState = _interopRequireDefault(require("./useObjectState"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 const INIT_STATE = {
   name: 'Foo',
   widgets: [1],
@@ -15,29 +15,29 @@ const INIT_STATE = {
 };
 const TestComponent = () => {
   const [state, updateState] = (0, _useObjectState.default)(INIT_STATE);
-  return (0, _jsxRuntime.jsxs)("div", {
-    children: [(0, _jsxRuntime.jsx)("input", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       placeholder: "state",
       onChange: () => {},
       value: JSON.stringify(state)
-    }), (0, _jsxRuntime.jsx)("button", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       onClick: () => updateState({
         widgets: []
       }),
       children: "Remove widgets"
-    }), (0, _jsxRuntime.jsx)("button", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       onClick: () => updateState({
         widgets: [1]
       }),
       children: "Add widget"
-    }), (0, _jsxRuntime.jsx)("button", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       onClick: () => updateState({
         attributes: {
           bar: 2
         }
       }),
       children: "Nested update"
-    }), (0, _jsxRuntime.jsx)("input", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "text",
       value: state.name,
       onChange: e => updateState({
@@ -50,7 +50,7 @@ const TestComponent = () => {
 describe('useObjectState', () => {
   const getState = () => JSON.parse(_react2.screen.getByPlaceholderText('state').getAttribute('value'));
   beforeEach(() => {
-    (0, _react2.render)((0, _jsxRuntime.jsx)(TestComponent, {}));
+    (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(TestComponent, {}));
   });
   it('updates arrays', () => {
     expect(getState()).toStrictEqual(INIT_STATE);

package/dist/{cjs/hooks → hooks}/useOnClickOutside.js

@@ -35,5 +35,4 @@ const useOnClickOutside = (ref, handler) => {
   // ... passing it into this hook.
   [ref, handler]);
 };
-var _default = useOnClickOutside;
-exports.default = _default;
+var _default = exports.default = useOnClickOutside;

package/dist/hooks/usePrompt.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var _interopRequireDefault = require( '@babel/runtime/helpers/interopRequireDefault' );
+Object.defineProperty( exports, '__esModule', {
+	value: true,
+} );
+exports.default = void 0;
+var _element = require( '@wordpress/element' );
+var _router = _interopRequireDefault( require( '../proxied-imports/router' ) );
+// https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+const { useHistory } = _router.default;
+var _default = ( when, message ) => {
+	const history = useHistory();
+	const self = ( 0, _element.useRef )( null );
+	const onWindowOrTabClose = ( event ) => {
+		if ( ! when ) {
+			return;
+		}
+		if ( typeof event === 'undefined' ) {
+			event = window.event;
+		}
+		return message;
+	};
+	( 0, _element.useEffect )( () => {
+		if ( when ) {
+			self.current = history.block( message );
+			window.addEventListener( 'beforeunload', onWindowOrTabClose );
+		}
+		return () => {
+			if ( self.current ) {
+				self.current();
+			}
+			window.removeEventListener( 'beforeunload', onWindowOrTabClose );
+		};
+	}, [ message, when ] );
+	return self.current || ( () => {} );
+};
+exports.default = _default;

package/{src/hooks/usePrompt.js → dist/hooks/usePrompt.ts}

@@ -12,11 +12,11 @@ import Router from '../proxied-imports/router';
 
 const { useHistory } = Router;
 
-export default ( when, message ) => {
+export default ( when: boolean, message: string ): ( () => void ) => {
 	const history = useHistory();
 	const self = useRef( null );
 
-	const onWindowOrTabClose = event => {
+	const onWindowOrTabClose = ( event: Event | undefined ) => {
 		if ( ! when ) {
 			return;
 		}
@@ -25,10 +25,6 @@ export default ( when, message ) => {
 			event = window.event;
 		}
 
-		if ( event ) {
-			event.returnValue = message;
-		}
-
 		return message;
 	};
 
@@ -40,11 +36,11 @@ export default ( when, message ) => {
 
 		return () => {
 			if ( self.current ) {
-				self.current();
+				( self.current as () => void )();
 			}
 			window.removeEventListener( 'beforeunload', onWindowOrTabClose );
 		};
 	}, [ message, when ] );
 
-	return self.current;
+	return self.current || ( () => {} );
 };