[Summary view] [Print] [Text view]

   1  /******/ (() => { // webpackBootstrap
   2  /******/     "use strict";
   3  /******/     // The require scope
   4  /******/     var __webpack_require__ = {};
   5  /******/     
   6  /************************************************************************/
   7  /******/     /* webpack/runtime/define property getters */
   8  /******/     (() => {
   9  /******/         // define getter functions for harmony exports
  10  /******/         __webpack_require__.d = (exports, definition) => {
  11  /******/             for(var key in definition) {
  12  /******/                 if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
  13  /******/                     Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
  14  /******/                 }
  15  /******/             }
  16  /******/         };
  17  /******/     })();
  18  /******/     
  19  /******/     /* webpack/runtime/hasOwnProperty shorthand */
  20  /******/     (() => {
  21  /******/         __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
  22  /******/     })();
  23  /******/     
  24  /******/     /* webpack/runtime/make namespace object */
  25  /******/     (() => {
  26  /******/         // define __esModule on exports
  27  /******/         __webpack_require__.r = (exports) => {
  28  /******/             if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  29  /******/                 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  30  /******/             }
  31  /******/             Object.defineProperty(exports, '__esModule', { value: true });
  32  /******/         };
  33  /******/     })();
  34  /******/     
  35  /************************************************************************/
  36  var __webpack_exports__ = {};
  37  // ESM COMPAT FLAG
  38  __webpack_require__.r(__webpack_exports__);
  39  
  40  // EXPORTS
  41  __webpack_require__.d(__webpack_exports__, {
  42    ifViewportMatches: () => (/* reexport */ if_viewport_matches),
  43    store: () => (/* reexport */ store),
  44    withViewportMatch: () => (/* reexport */ with_viewport_match)
  45  });
  46  
  47  // NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/actions.js
  48  var actions_namespaceObject = {};
  49  __webpack_require__.r(actions_namespaceObject);
  50  __webpack_require__.d(actions_namespaceObject, {
  51    setIsMatching: () => (setIsMatching)
  52  });
  53  
  54  // NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/selectors.js
  55  var selectors_namespaceObject = {};
  56  __webpack_require__.r(selectors_namespaceObject);
  57  __webpack_require__.d(selectors_namespaceObject, {
  58    isViewportMatch: () => (isViewportMatch)
  59  });
  60  
  61  ;// CONCATENATED MODULE: external ["wp","compose"]
  62  const external_wp_compose_namespaceObject = window["wp"]["compose"];
  63  ;// CONCATENATED MODULE: external ["wp","data"]
  64  const external_wp_data_namespaceObject = window["wp"]["data"];
  65  ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/reducer.js
  66  /**
  67   * Reducer returning the viewport state, as keys of breakpoint queries with
  68   * boolean value representing whether query is matched.
  69   *
  70   * @param {Object} state  Current state.
  71   * @param {Object} action Dispatched action.
  72   *
  73   * @return {Object} Updated state.
  74   */
  75  function reducer(state = {}, action) {
  76    switch (action.type) {
  77      case 'SET_IS_MATCHING':
  78        return action.values;
  79    }
  80    return state;
  81  }
  82  /* harmony default export */ const store_reducer = (reducer);
  83  
  84  ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/actions.js
  85  /**
  86   * Returns an action object used in signalling that viewport queries have been
  87   * updated. Values are specified as an object of breakpoint query keys where
  88   * value represents whether query matches.
  89   * Ignored from documentation as it is for internal use only.
  90   *
  91   * @ignore
  92   *
  93   * @param {Object} values Breakpoint query matches.
  94   *
  95   * @return {Object} Action object.
  96   */
  97  function setIsMatching(values) {
  98    return {
  99      type: 'SET_IS_MATCHING',
 100      values
 101    };
 102  }
 103  
 104  ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/selectors.js
 105  /**
 106   * Returns true if the viewport matches the given query, or false otherwise.
 107   *
 108   * @param {Object} state Viewport state object.
 109   * @param {string} query Query string. Includes operator and breakpoint name,
 110   *                       space separated. Operator defaults to >=.
 111   *
 112   * @example
 113   *
 114   * ```js
 115   * import { store as viewportStore } from '@wordpress/viewport';
 116   * import { useSelect } from '@wordpress/data';
 117   * import { __ } from '@wordpress/i18n';
 118   * const ExampleComponent = () => {
 119   *     const isMobile = useSelect(
 120   *         ( select ) => select( viewportStore ).isViewportMatch( '< small' ),
 121   *         []
 122   *     );
 123   *
 124   *     return isMobile ? (
 125   *         <div>{ __( 'Mobile' ) }</div>
 126   *     ) : (
 127   *         <div>{ __( 'Not Mobile' ) }</div>
 128   *     );
 129   * };
 130   * ```
 131   *
 132   * @return {boolean} Whether viewport matches query.
 133   */
 134  function isViewportMatch(state, query) {
 135    // Default to `>=` if no operator is present.
 136    if (query.indexOf(' ') === -1) {
 137      query = '>= ' + query;
 138    }
 139    return !!state[query];
 140  }
 141  
 142  ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/index.js
 143  /**
 144   * WordPress dependencies
 145   */
 146  
 147  
 148  /**
 149   * Internal dependencies
 150   */
 151  
 152  
 153  
 154  const STORE_NAME = 'core/viewport';
 155  
 156  /**
 157   * Store definition for the viewport namespace.
 158   *
 159   * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
 160   *
 161   * @type {Object}
 162   */
 163  const store = (0,external_wp_data_namespaceObject.createReduxStore)(STORE_NAME, {
 164    reducer: store_reducer,
 165    actions: actions_namespaceObject,
 166    selectors: selectors_namespaceObject
 167  });
 168  (0,external_wp_data_namespaceObject.register)(store);
 169  
 170  ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/listener.js
 171  /**
 172   * WordPress dependencies
 173   */
 174  
 175  
 176  
 177  /**
 178   * Internal dependencies
 179   */
 180  
 181  const addDimensionsEventListener = (breakpoints, operators) => {
 182    /**
 183     * Callback invoked when media query state should be updated. Is invoked a
 184     * maximum of one time per call stack.
 185     */
 186    const setIsMatching = (0,external_wp_compose_namespaceObject.debounce)(() => {
 187      const values = Object.fromEntries(queries.map(([key, query]) => [key, query.matches]));
 188      (0,external_wp_data_namespaceObject.dispatch)(store).setIsMatching(values);
 189    }, 0, {
 190      leading: true
 191    });
 192  
 193    /**
 194     * Hash of breakpoint names with generated MediaQueryList for corresponding
 195     * media query.
 196     *
 197     * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
 198     * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
 199     *
 200     * @type {Object<string,MediaQueryList>}
 201     */
 202    const operatorEntries = Object.entries(operators);
 203    const queries = Object.entries(breakpoints).flatMap(([name, width]) => {
 204      return operatorEntries.map(([operator, condition]) => {
 205        const list = window.matchMedia(`($condition}: $width}px)`);
 206        list.addEventListener('change', setIsMatching);
 207        return [`$operator} $name}`, list];
 208      });
 209    });
 210    window.addEventListener('orientationchange', setIsMatching);
 211  
 212    // Set initial values.
 213    setIsMatching();
 214    setIsMatching.flush();
 215  };
 216  /* harmony default export */ const listener = (addDimensionsEventListener);
 217  
 218  ;// CONCATENATED MODULE: external "ReactJSXRuntime"
 219  const external_ReactJSXRuntime_namespaceObject = window["ReactJSXRuntime"];
 220  ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/with-viewport-match.js
 221  /**
 222   * WordPress dependencies
 223   */
 224  
 225  
 226  /**
 227   * Higher-order component creator, creating a new component which renders with
 228   * the given prop names, where the value passed to the underlying component is
 229   * the result of the query assigned as the object's value.
 230   *
 231   * @see isViewportMatch
 232   *
 233   * @param {Object} queries Object of prop name to viewport query.
 234   *
 235   * @example
 236   *
 237   * ```jsx
 238   * function MyComponent( { isMobile } ) {
 239   *     return (
 240   *         <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>
 241   *     );
 242   * }
 243   *
 244   * MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent );
 245   * ```
 246   *
 247   * @return {Function} Higher-order component.
 248   */
 249  
 250  const withViewportMatch = queries => {
 251    const queryEntries = Object.entries(queries);
 252    const useViewPortQueriesResult = () => Object.fromEntries(queryEntries.map(([key, query]) => {
 253      let [operator, breakpointName] = query.split(' ');
 254      if (breakpointName === undefined) {
 255        breakpointName = operator;
 256        operator = '>=';
 257      }
 258      // Hooks should unconditionally execute in the same order,
 259      // we are respecting that as from the static query of the HOC we generate
 260      // a hook that calls other hooks always in the same order (because the query never changes).
 261      // eslint-disable-next-line react-hooks/rules-of-hooks
 262      return [key, (0,external_wp_compose_namespaceObject.useViewportMatch)(breakpointName, operator)];
 263    }));
 264    return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => {
 265      return (0,external_wp_compose_namespaceObject.pure)(props => {
 266        const queriesResult = useViewPortQueriesResult();
 267        return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
 268          ...props,
 269          ...queriesResult
 270        });
 271      });
 272    }, 'withViewportMatch');
 273  };
 274  /* harmony default export */ const with_viewport_match = (withViewportMatch);
 275  
 276  ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/if-viewport-matches.js
 277  /**
 278   * WordPress dependencies
 279   */
 280  
 281  
 282  /**
 283   * Internal dependencies
 284   */
 285  
 286  
 287  /**
 288   * Higher-order component creator, creating a new component which renders if
 289   * the viewport query is satisfied.
 290   *
 291   * @see withViewportMatches
 292   *
 293   * @param {string} query Viewport query.
 294   *
 295   * @example
 296   *
 297   * ```jsx
 298   * function MyMobileComponent() {
 299   *     return <div>I'm only rendered on mobile viewports!</div>;
 300   * }
 301   *
 302   * MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent );
 303   * ```
 304   *
 305   * @return {Function} Higher-order component.
 306   */
 307  const ifViewportMatches = query => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)((0,external_wp_compose_namespaceObject.compose)([with_viewport_match({
 308    isViewportMatch: query
 309  }), (0,external_wp_compose_namespaceObject.ifCondition)(props => props.isViewportMatch)]), 'ifViewportMatches');
 310  /* harmony default export */ const if_viewport_matches = (ifViewportMatches);
 311  
 312  ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/index.js
 313  /**
 314   * Internal dependencies
 315   */
 316  
 317  
 318  
 319  
 320  
 321  /**
 322   * Hash of breakpoint names with pixel width at which it becomes effective.
 323   *
 324   * @see _breakpoints.scss
 325   *
 326   * @type {Object}
 327   */
 328  const BREAKPOINTS = {
 329    huge: 1440,
 330    wide: 1280,
 331    large: 960,
 332    medium: 782,
 333    small: 600,
 334    mobile: 480
 335  };
 336  
 337  /**
 338   * Hash of query operators with corresponding condition for media query.
 339   *
 340   * @type {Object}
 341   */
 342  const OPERATORS = {
 343    '<': 'max-width',
 344    '>=': 'min-width'
 345  };
 346  listener(BREAKPOINTS, OPERATORS);
 347  
 348  (window.wp = window.wp || {}).viewport = __webpack_exports__;
 349  /******/ })()
 350  ;