WordPress/wp-includes/js/dist/viewport.js
youknowriad a41c798835 Block Editor: Updated the WordPress packages to include Gutenberg 15.1.0 changes.
In addition to all the packages being updated to the latest versions, 
this commit also includes some mandatory changes to avoid editor breakage:

 - Update React to to 18.2.0.
 - Add the right stylesheets to support iframed block editors.

Props ntsekouras, mamaduka, flixos90, desrosj, peterwilsoncc.
See #57471.

Built from https://develop.svn.wordpress.org/trunk@55246


git-svn-id: http://core.svn.wordpress.org/trunk@54779 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-02-07 07:04:52 +00:00

383 lines
11 KiB
JavaScript

/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"ifViewportMatches": function() { return /* reexport */ if_viewport_matches; },
"store": function() { return /* reexport */ store; },
"withViewportMatch": function() { return /* reexport */ with_viewport_match; }
});
// NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/actions.js
var actions_namespaceObject = {};
__webpack_require__.r(actions_namespaceObject);
__webpack_require__.d(actions_namespaceObject, {
"setIsMatching": function() { return setIsMatching; }
});
// NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/selectors.js
var selectors_namespaceObject = {};
__webpack_require__.r(selectors_namespaceObject);
__webpack_require__.d(selectors_namespaceObject, {
"isViewportMatch": function() { return isViewportMatch; }
});
;// CONCATENATED MODULE: external ["wp","compose"]
var external_wp_compose_namespaceObject = window["wp"]["compose"];
;// CONCATENATED MODULE: external ["wp","data"]
var external_wp_data_namespaceObject = window["wp"]["data"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/reducer.js
/**
* Reducer returning the viewport state, as keys of breakpoint queries with
* boolean value representing whether query is matched.
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object} Updated state.
*/
function reducer() {
let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let action = arguments.length > 1 ? arguments[1] : undefined;
switch (action.type) {
case 'SET_IS_MATCHING':
return action.values;
}
return state;
}
/* harmony default export */ var store_reducer = (reducer);
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/actions.js
/**
* Returns an action object used in signalling that viewport queries have been
* updated. Values are specified as an object of breakpoint query keys where
* value represents whether query matches.
* Ignored from documentation as it is for internal use only.
*
* @ignore
*
* @param {Object} values Breakpoint query matches.
*
* @return {Object} Action object.
*/
function setIsMatching(values) {
return {
type: 'SET_IS_MATCHING',
values
};
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/selectors.js
/**
* Returns true if the viewport matches the given query, or false otherwise.
*
* @param {Object} state Viewport state object.
* @param {string} query Query string. Includes operator and breakpoint name,
* space separated. Operator defaults to >=.
*
* @example
*
* ```js
* import { store as viewportStore } from '@wordpress/viewport';
* import { useSelect } from '@wordpress/data';
* import { __ } from '@wordpress/i18n';
* const ExampleComponent = () => {
* const isMobile = useSelect(
* ( select ) => select( viewportStore ).isViewportMatch( '< small' ),
* []
* );
*
* return isMobile ? (
* <div>{ __( 'Mobile' ) }</div>
* ) : (
* <div>{ __( 'Not Mobile' ) }</div>
* );
* };
* ```
*
* @return {boolean} Whether viewport matches query.
*/
function isViewportMatch(state, query) {
// Default to `>=` if no operator is present.
if (query.indexOf(' ') === -1) {
query = '>= ' + query;
}
return !!state[query];
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const STORE_NAME = 'core/viewport';
/**
* Store definition for the viewport namespace.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
*
* @type {Object}
*/
const store = (0,external_wp_data_namespaceObject.createReduxStore)(STORE_NAME, {
reducer: store_reducer,
actions: actions_namespaceObject,
selectors: selectors_namespaceObject
});
(0,external_wp_data_namespaceObject.register)(store);
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/listener.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const addDimensionsEventListener = (breakpoints, operators) => {
/**
* Callback invoked when media query state should be updated. Is invoked a
* maximum of one time per call stack.
*/
const setIsMatching = (0,external_wp_compose_namespaceObject.debounce)(() => {
const values = Object.fromEntries(queries.map(_ref => {
let [key, query] = _ref;
return [key, query.matches];
}));
(0,external_wp_data_namespaceObject.dispatch)(store).setIsMatching(values);
}, 0, {
leading: true
});
/**
* Hash of breakpoint names with generated MediaQueryList for corresponding
* media query.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
* @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
*
* @type {Object<string,MediaQueryList>}
*/
const operatorEntries = Object.entries(operators);
const queries = Object.entries(breakpoints).flatMap(_ref2 => {
let [name, width] = _ref2;
return operatorEntries.map(_ref3 => {
let [operator, condition] = _ref3;
const list = window.matchMedia(`(${condition}: ${width}px)`);
list.addEventListener('change', setIsMatching);
return [`${operator} ${name}`, list];
});
});
window.addEventListener('orientationchange', setIsMatching); // Set initial values.
setIsMatching();
setIsMatching.flush();
};
/* harmony default export */ var listener = (addDimensionsEventListener);
;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
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);
}
;// CONCATENATED MODULE: external ["wp","element"]
var external_wp_element_namespaceObject = window["wp"]["element"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/with-viewport-match.js
/**
* WordPress dependencies
*/
/**
* Higher-order component creator, creating a new component which renders with
* the given prop names, where the value passed to the underlying component is
* the result of the query assigned as the object's value.
*
* @see isViewportMatch
*
* @param {Object} queries Object of prop name to viewport query.
*
* @example
*
* ```jsx
* function MyComponent( { isMobile } ) {
* return (
* <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>
* );
* }
*
* MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent );
* ```
*
* @return {Function} Higher-order component.
*/
const withViewportMatch = queries => {
const queryEntries = Object.entries(queries);
const useViewPortQueriesResult = () => Object.fromEntries(queryEntries.map(_ref => {
let [key, query] = _ref;
let [operator, breakpointName] = query.split(' ');
if (breakpointName === undefined) {
breakpointName = operator;
operator = '>=';
} // Hooks should unconditionally execute in the same order,
// we are respecting that as from the static query of the HOC we generate
// a hook that calls other hooks always in the same order (because the query never changes).
// eslint-disable-next-line react-hooks/rules-of-hooks
return [key, (0,external_wp_compose_namespaceObject.useViewportMatch)(breakpointName, operator)];
}));
return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => {
return (0,external_wp_compose_namespaceObject.pure)(props => {
const queriesResult = useViewPortQueriesResult();
return (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, _extends({}, props, queriesResult));
});
}, 'withViewportMatch');
};
/* harmony default export */ var with_viewport_match = (withViewportMatch);
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/if-viewport-matches.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Higher-order component creator, creating a new component which renders if
* the viewport query is satisfied.
*
* @see withViewportMatches
*
* @param {string} query Viewport query.
*
* @example
*
* ```jsx
* function MyMobileComponent() {
* return <div>I'm only rendered on mobile viewports!</div>;
* }
*
* MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent );
* ```
*
* @return {Function} Higher-order component.
*/
const ifViewportMatches = query => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)((0,external_wp_compose_namespaceObject.compose)([with_viewport_match({
isViewportMatch: query
}), (0,external_wp_compose_namespaceObject.ifCondition)(props => props.isViewportMatch)]), 'ifViewportMatches');
/* harmony default export */ var if_viewport_matches = (ifViewportMatches);
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/index.js
/**
* Internal dependencies
*/
/**
* Hash of breakpoint names with pixel width at which it becomes effective.
*
* @see _breakpoints.scss
*
* @type {Object}
*/
const BREAKPOINTS = {
huge: 1440,
wide: 1280,
large: 960,
medium: 782,
small: 600,
mobile: 480
};
/**
* Hash of query operators with corresponding condition for media query.
*
* @type {Object}
*/
const OPERATORS = {
'<': 'max-width',
'>=': 'min-width'
};
listener(BREAKPOINTS, OPERATORS);
(window.wp = window.wp || {}).viewport = __webpack_exports__;
/******/ })()
;