{"version":3,"file":"./build/viewport/index.min.js","mappings":"mBACA,IAAIA,EAAsB,CCA1BA,EAAwB,CAACC,EAASC,KACjC,IAAI,IAAIC,KAAOD,EACXF,EAAoBI,EAAEF,EAAYC,KAASH,EAAoBI,EAAEH,EAASE,IAC5EE,OAAOC,eAAeL,EAASE,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDH,EAAwB,CAACS,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFV,EAAyBC,IACH,oBAAXa,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeL,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeL,EAAS,aAAc,CAAEe,OAAO,GAAO,G,6KCL9D,MAAM,EAA+BC,OAAW,GAAW,QCArD,EAA+BA,OAAW,GAAQ,KCYjD,SAASC,EAAeC,GAC9B,MAAO,CACNC,KAAM,kBACND,SAEF,CCYO,SAASE,EAAiBC,EAAOC,GAMvC,OAJ+B,IAA1BA,EAAMC,QAAS,OACnBD,EAAQ,MAAQA,KAGPD,EAAOC,EAClB,CCxBA,MASaE,GAAQC,EAAAA,EAAAA,kBATF,gBASgC,CAClDC,QCbD,SAAkBL,EAAQ,CAAC,EAAGM,GAC7B,MACM,oBADGA,EAAOR,KAEPQ,EAAOT,OAGTG,CACR,EDOCO,QAAO,EACPC,UAASA,KAGVC,EAAAA,EAAAA,UAAUN,GEhBV,MCXM,EAA+BR,OAAwB,gBCyD7D,EAzB4Be,IAC3B,MAAMC,EAAe5B,OAAO6B,QAASF,GAgBrC,OAAOG,EAAAA,EAAAA,6BAA8BC,IAC7BC,EAAAA,EAAAA,OAAQC,IACd,MAAMC,EAhBPlC,OAAOmC,YACNP,EAAaQ,KAAK,EAAItC,EAAKoB,MAC1B,IAAMmB,EAAUC,GAAmBpB,EAAMqB,MAAO,KAShD,YARwBC,IAAnBF,IACJA,EAAiBD,EACjBA,EAAW,MAML,CAAEvC,GAAK2C,EAAAA,EAAAA,kBAAkBH,EAAgBD,GAAY,KAM7D,OAAOK,EAAAA,EAAAA,KAACX,EAAgB,IAAME,KAAaC,GAAkB,KAE5D,oBAAqB,ECTzB,EAX4BhB,IAC3BY,EAAAA,EAAAA,6BACCa,EAAAA,EAAAA,SAAS,CACRC,EAAmB,CAClB5B,gBAAiBE,KAElB2B,EAAAA,EAAAA,cAAeZ,GAAWA,EAAMjB,oBAEjC,qBH/BiC8B,EAAEC,EAAaC,KAKjD,MAAMnC,GAAgBoC,EAAAA,EAAAA,WACrB,KACC,MAAMnC,EAASd,OAAOmC,YACrBR,EAAQS,KAAK,EAAItC,EAAKoB,KAAa,CAAEpB,EAAKoB,EAAMgC,aAEjDC,EAAAA,EAAAA,UAAU/B,GAAQP,cAAeC,EAAQ,GAE1C,EACA,CAAEsC,SAAS,IAYNC,EAAkBrD,OAAO6B,QAASmB,GAClCrB,EAAU3B,OAAO6B,QAASkB,GAAcO,SAC7C,EAAIC,EAAMC,KACFH,EAAgBjB,KAAK,EAAIC,EAAUoB,MACzC,MAAMC,EAAO9C,OAAO+C,WACnB,IAAKF,MAAgBD,QAGtB,OADAE,EAAKE,iBAAkB,SAAU/C,GAC1B,CAAE,GAAIwB,KAAckB,IAASG,EAAM,MAK7C9C,OAAOgD,iBAAkB,oBAAqB/C,GAG9CA,IACAA,EAAcgD,OAAO,EIlBtBf,CAnBoB,CACnBgB,KAAM,KACNC,KAAM,KACNC,MAAO,IACPC,OAAQ,IACRC,MAAO,IACPC,OAAQ,KAQS,CACjB,IAAK,YACL,KAAM,e","sources":["webpack://wp/webpack/bootstrap","webpack://wp/webpack/runtime/define property getters","webpack://wp/webpack/runtime/hasOwnProperty shorthand","webpack://wp/webpack/runtime/make namespace object","webpack://wp/external window [\"wp\",\"compose\"]","webpack://wp/external window [\"wp\",\"data\"]","../../packages/viewport/src/store/actions.js","../../packages/viewport/src/store/selectors.js","../../packages/viewport/src/store/index.js","../../packages/viewport/src/store/reducer.js","../../packages/viewport/src/listener.js","webpack://wp/external window \"ReactJSXRuntime\"","../../packages/viewport/src/with-viewport-match.js","../../packages/viewport/src/if-viewport-matches.js","../../packages/viewport/src/index.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = window[\"wp\"][\"compose\"];","const __WEBPACK_NAMESPACE_OBJECT__ = window[\"wp\"][\"data\"];","/**\n * Returns an action object used in signalling that viewport queries have been\n * updated. Values are specified as an object of breakpoint query keys where\n * value represents whether query matches.\n * Ignored from documentation as it is for internal use only.\n *\n * @ignore\n *\n * @param {Object} values Breakpoint query matches.\n *\n * @return {Object} Action object.\n */\nexport function setIsMatching( values ) {\n\treturn {\n\t\ttype: 'SET_IS_MATCHING',\n\t\tvalues,\n\t};\n}\n","/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param {Object} state Viewport state object.\n * @param {string} query Query string. Includes operator and breakpoint name,\n *                       space separated. Operator defaults to >=.\n *\n * @example\n *\n * ```js\n * import { store as viewportStore } from '@wordpress/viewport';\n * import { useSelect } from '@wordpress/data';\n * import { __ } from '@wordpress/i18n';\n * const ExampleComponent = () => {\n *     const isMobile = useSelect(\n *         ( select ) => select( viewportStore ).isViewportMatch( '< small' ),\n *         []\n *     );\n *\n *     return isMobile ? (\n *         <div>{ __( 'Mobile' ) }</div>\n *     ) : (\n *         <div>{ __( 'Not Mobile' ) }</div>\n *     );\n * };\n * ```\n *\n * @return {boolean} Whether viewport matches query.\n */\nexport function isViewportMatch( state, query ) {\n\t// Default to `>=` if no operator is present.\n\tif ( query.indexOf( ' ' ) === -1 ) {\n\t\tquery = '>= ' + query;\n\t}\n\n\treturn !! state[ query ];\n}\n","/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\n\nconst STORE_NAME = 'core/viewport';\n\n/**\n * Store definition for the viewport namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n} );\n\nregister( store );\n","/**\n * Reducer returning the viewport state, as keys of breakpoint queries with\n * boolean value representing whether query is matched.\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction reducer( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_IS_MATCHING':\n\t\t\treturn action.values;\n\t}\n\n\treturn state;\n}\n\nexport default reducer;\n","/**\n * WordPress dependencies\n */\nimport { debounce } from '@wordpress/compose';\nimport { dispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store } from './store';\n\nconst addDimensionsEventListener = ( breakpoints, operators ) => {\n\t/**\n\t * Callback invoked when media query state should be updated. Is invoked a\n\t * maximum of one time per call stack.\n\t */\n\tconst setIsMatching = debounce(\n\t\t() => {\n\t\t\tconst values = Object.fromEntries(\n\t\t\t\tqueries.map( ( [ key, query ] ) => [ key, query.matches ] )\n\t\t\t);\n\t\t\tdispatch( store ).setIsMatching( values );\n\t\t},\n\t\t0,\n\t\t{ leading: true }\n\t);\n\n\t/**\n\t * Hash of breakpoint names with generated MediaQueryList for corresponding\n\t * media query.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList\n\t *\n\t * @type {Object<string,MediaQueryList>}\n\t */\n\tconst operatorEntries = Object.entries( operators );\n\tconst queries = Object.entries( breakpoints ).flatMap(\n\t\t( [ name, width ] ) => {\n\t\t\treturn operatorEntries.map( ( [ operator, condition ] ) => {\n\t\t\t\tconst list = window.matchMedia(\n\t\t\t\t\t`(${ condition }: ${ width }px)`\n\t\t\t\t);\n\t\t\t\tlist.addEventListener( 'change', setIsMatching );\n\t\t\t\treturn [ `${ operator } ${ name }`, list ];\n\t\t\t} );\n\t\t}\n\t);\n\n\twindow.addEventListener( 'orientationchange', setIsMatching );\n\n\t// Set initial values.\n\tsetIsMatching();\n\tsetIsMatching.flush();\n};\n\nexport default addDimensionsEventListener;\n","const __WEBPACK_NAMESPACE_OBJECT__ = window[\"ReactJSXRuntime\"];","/**\n * WordPress dependencies\n */\nimport {\n\tcreateHigherOrderComponent,\n\tpure,\n\tuseViewportMatch,\n} from '@wordpress/compose';\n\n/**\n * Higher-order component creator, creating a new component which renders with\n * the given prop names, where the value passed to the underlying component is\n * the result of the query assigned as the object's value.\n *\n * @see isViewportMatch\n *\n * @param {Object} queries Object of prop name to viewport query.\n *\n * @example\n *\n * ```jsx\n * function MyComponent( { isMobile } ) {\n * \treturn (\n * \t\t<div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>\n * \t);\n * }\n *\n * MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent );\n * ```\n *\n * @return {Function} Higher-order component.\n */\nconst withViewportMatch = ( queries ) => {\n\tconst queryEntries = Object.entries( queries );\n\tconst useViewPortQueriesResult = () =>\n\t\tObject.fromEntries(\n\t\t\tqueryEntries.map( ( [ key, query ] ) => {\n\t\t\t\tlet [ operator, breakpointName ] = query.split( ' ' );\n\t\t\t\tif ( breakpointName === undefined ) {\n\t\t\t\t\tbreakpointName = operator;\n\t\t\t\t\toperator = '>=';\n\t\t\t\t}\n\t\t\t\t// Hooks should unconditionally execute in the same order,\n\t\t\t\t// we are respecting that as from the static query of the HOC we generate\n\t\t\t\t// a hook that calls other hooks always in the same order (because the query never changes).\n\t\t\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\t\t\treturn [ key, useViewportMatch( breakpointName, operator ) ];\n\t\t\t} )\n\t\t);\n\treturn createHigherOrderComponent( ( WrappedComponent ) => {\n\t\treturn pure( ( props ) => {\n\t\t\tconst queriesResult = useViewPortQueriesResult();\n\t\t\treturn <WrappedComponent { ...props } { ...queriesResult } />;\n\t\t} );\n\t}, 'withViewportMatch' );\n};\n\nexport default withViewportMatch;\n","/**\n * WordPress dependencies\n */\nimport {\n\tifCondition,\n\tcompose,\n\tcreateHigherOrderComponent,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport withViewportMatch from './with-viewport-match';\n\n/**\n * Higher-order component creator, creating a new component which renders if\n * the viewport query is satisfied.\n *\n * @see withViewportMatches\n *\n * @param {string} query Viewport query.\n *\n * @example\n *\n * ```jsx\n * function MyMobileComponent() {\n * \treturn <div>I'm only rendered on mobile viewports!</div>;\n * }\n *\n * MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent );\n * ```\n *\n * @return {Function} Higher-order component.\n */\nconst ifViewportMatches = ( query ) =>\n\tcreateHigherOrderComponent(\n\t\tcompose( [\n\t\t\twithViewportMatch( {\n\t\t\t\tisViewportMatch: query,\n\t\t\t} ),\n\t\t\tifCondition( ( props ) => props.isViewportMatch ),\n\t\t] ),\n\t\t'ifViewportMatches'\n\t);\n\nexport default ifViewportMatches;\n","/**\n * Internal dependencies\n */\nimport addDimensionsEventListener from './listener';\n\nexport { store } from './store';\nexport { default as ifViewportMatches } from './if-viewport-matches';\nexport { default as withViewportMatch } from './with-viewport-match';\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n *\n * @type {Object}\n */\nconst BREAKPOINTS = {\n\thuge: 1440,\n\twide: 1280,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * Hash of query operators with corresponding condition for media query.\n *\n * @type {Object}\n */\nconst OPERATORS = {\n\t'<': 'max-width',\n\t'>=': 'min-width',\n};\n\naddDimensionsEventListener( BREAKPOINTS, OPERATORS );\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","window","setIsMatching","values","type","isViewportMatch","state","query","indexOf","store","createReduxStore","reducer","action","actions","selectors","register","queries","queryEntries","entries","createHigherOrderComponent","WrappedComponent","pure","props","queriesResult","fromEntries","map","operator","breakpointName","split","undefined","useViewportMatch","_jsx","compose","withViewportMatch","ifCondition","addDimensionsEventListener","breakpoints","operators","debounce","matches","dispatch","leading","operatorEntries","flatMap","name","width","condition","list","matchMedia","addEventListener","flush","huge","wide","large","medium","small","mobile"],"sourceRoot":""}