@wordpress/compose 6.35.0 → 7.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +6 -6
- package/build/higher-order/compose.js +1 -1
- package/build/higher-order/compose.js.map +1 -1
- package/build/higher-order/if-condition/index.js +3 -4
- package/build/higher-order/if-condition/index.js.map +1 -1
- package/build/higher-order/pipe.js +2 -2
- package/build/higher-order/pipe.js.map +1 -1
- package/build/higher-order/pure/index.js +3 -4
- package/build/higher-order/pure/index.js.map +1 -1
- package/build/higher-order/with-global-events/index.js +4 -5
- package/build/higher-order/with-global-events/index.js.map +1 -1
- package/build/higher-order/with-instance-id/index.js +2 -2
- package/build/higher-order/with-instance-id/index.js.map +1 -1
- package/build/higher-order/with-network-connectivity/index.native.js +2 -2
- package/build/higher-order/with-network-connectivity/index.native.js.map +1 -1
- package/build/higher-order/with-preferred-color-scheme/index.native.js +2 -2
- package/build/higher-order/with-preferred-color-scheme/index.native.js.map +1 -1
- package/build/higher-order/with-safe-timeout/index.js +3 -2
- package/build/higher-order/with-safe-timeout/index.js.map +1 -1
- package/build/higher-order/with-state/index.js +3 -4
- package/build/higher-order/with-state/index.js.map +1 -1
- package/build/hooks/use-debounce/index.js +1 -1
- package/build/hooks/use-debounce/index.js.map +1 -1
- package/build/hooks/use-debounced-input/index.js +3 -3
- package/build/hooks/use-debounced-input/index.js.map +1 -1
- package/build/hooks/use-focus-on-mount/index.js +12 -8
- package/build/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build/hooks/use-resize-observer/index.js +2 -2
- package/build/hooks/use-resize-observer/index.js.map +1 -1
- package/build/hooks/use-resize-observer/index.native.js +3 -4
- package/build/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build/hooks/use-throttle/index.js +1 -1
- package/build/hooks/use-throttle/index.js.map +1 -1
- package/build-module/higher-order/compose.js +1 -1
- package/build-module/higher-order/compose.js.map +1 -1
- package/build-module/higher-order/if-condition/index.js +2 -2
- package/build-module/higher-order/if-condition/index.js.map +1 -1
- package/build-module/higher-order/pipe.js +2 -2
- package/build-module/higher-order/pipe.js.map +1 -1
- package/build-module/higher-order/pure/index.js +2 -2
- package/build-module/higher-order/pure/index.js.map +1 -1
- package/build-module/higher-order/with-global-events/index.js +3 -3
- package/build-module/higher-order/with-global-events/index.js.map +1 -1
- package/build-module/higher-order/with-instance-id/index.js +2 -2
- package/build-module/higher-order/with-instance-id/index.js.map +1 -1
- package/build-module/higher-order/with-network-connectivity/index.native.js +2 -2
- package/build-module/higher-order/with-network-connectivity/index.native.js.map +1 -1
- package/build-module/higher-order/with-preferred-color-scheme/index.native.js +2 -2
- package/build-module/higher-order/with-preferred-color-scheme/index.native.js.map +1 -1
- package/build-module/higher-order/with-safe-timeout/index.js +3 -3
- package/build-module/higher-order/with-safe-timeout/index.js.map +1 -1
- package/build-module/higher-order/with-state/index.js +2 -2
- package/build-module/higher-order/with-state/index.js.map +1 -1
- package/build-module/hooks/use-debounce/index.js +1 -1
- package/build-module/hooks/use-debounce/index.js.map +1 -1
- package/build-module/hooks/use-debounced-input/index.js +3 -3
- package/build-module/hooks/use-debounced-input/index.js.map +1 -1
- package/build-module/hooks/use-focus-on-mount/index.js +12 -9
- package/build-module/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.js +2 -2
- package/build-module/hooks/use-resize-observer/index.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.native.js +2 -2
- package/build-module/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build-module/hooks/use-throttle/index.js +1 -1
- package/build-module/hooks/use-throttle/index.js.map +1 -1
- package/build-types/higher-order/compose.d.ts +1 -1
- package/build-types/higher-order/pipe.d.ts +2 -2
- package/build-types/hooks/use-debounce/index.d.ts +1 -1
- package/build-types/hooks/use-debounced-input/index.d.ts +3 -3
- package/build-types/hooks/use-debounced-input/index.d.ts.map +1 -1
- package/build-types/hooks/use-focus-on-mount/index.d.ts.map +1 -1
- package/build-types/hooks/use-throttle/index.d.ts +1 -1
- package/package.json +11 -10
- package/src/higher-order/compose.ts +1 -1
- package/src/higher-order/pipe.ts +2 -2
- package/src/hooks/use-debounce/index.js +1 -1
- package/src/hooks/use-debounced-input/{index.js → index.ts} +7 -5
- package/src/hooks/use-focus-on-mount/index.js +13 -10
- package/src/hooks/use-throttle/index.js +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_element","require","_dom","useFocusOnMount","focusOnMount","focusOnMountRef","useRef","setFocus","target","focus","preventScroll","timerId","useEffect","current","
|
|
1
|
+
{"version":3,"names":["_element","require","_dom","_useRefEffect","_interopRequireDefault","useFocusOnMount","focusOnMount","focusOnMountRef","useRef","setFocus","target","focus","preventScroll","timerId","useEffect","current","useRefEffect","node","_node$ownerDocument$a","contains","ownerDocument","activeElement","setTimeout","firstTabbable","tabbable","find","clearTimeout"],"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Hook used to focus the first tabbable element on mount.\n *\n * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.\n * @return {import('react').RefCallback<HTMLElement>} Ref callback.\n *\n * @example\n * ```js\n * import { useFocusOnMount } from '@wordpress/compose';\n *\n * const WithFocusOnMount = () => {\n * const ref = useFocusOnMount()\n * return (\n * <div ref={ ref }>\n * <Button />\n * <Button />\n * </div>\n * );\n * }\n * ```\n */\nexport default function useFocusOnMount( focusOnMount = 'firstElement' ) {\n\tconst focusOnMountRef = useRef( focusOnMount );\n\n\t/**\n\t * Sets focus on a DOM element.\n\t *\n\t * @param {HTMLElement} target The DOM element to set focus to.\n\t * @return {void}\n\t */\n\tconst setFocus = ( target ) => {\n\t\ttarget.focus( {\n\t\t\t// When focusing newly mounted dialogs,\n\t\t\t// the position of the popover is often not right on the first render\n\t\t\t// This prevents the layout shifts when focusing the dialogs.\n\t\t\tpreventScroll: true,\n\t\t} );\n\t};\n\n\t/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */\n\tconst timerId = useRef();\n\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\treturn useRefEffect( ( node ) => {\n\t\tif ( ! node || focusOnMountRef.current === false ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( node.contains( node.ownerDocument?.activeElement ?? null ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( focusOnMountRef.current === 'firstElement' ) {\n\t\t\ttimerId.current = setTimeout( () => {\n\t\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\n\t\t\t\tif ( firstTabbable ) {\n\t\t\t\t\tsetFocus( firstTabbable );\n\t\t\t\t}\n\t\t\t}, 0 );\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetFocus( node );\n\n\t\treturn () => {\n\t\t\tif ( timerId.current ) {\n\t\t\t\tclearTimeout( timerId.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAC,sBAAA,CAAAH,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASI,eAAeA,CAAEC,YAAY,GAAG,cAAc,EAAG;EACxE,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAEF,YAAa,CAAC;;EAE9C;AACD;AACA;AACA;AACA;AACA;EACC,MAAMG,QAAQ,GAAKC,MAAM,IAAM;IAC9BA,MAAM,CAACC,KAAK,CAAE;MACb;MACA;MACA;MACAC,aAAa,EAAE;IAChB,CAAE,CAAC;EACJ,CAAC;;EAED;EACA,MAAMC,OAAO,GAAG,IAAAL,eAAM,EAAC,CAAC;EAExB,IAAAM,kBAAS,EAAE,MAAM;IAChBP,eAAe,CAACQ,OAAO,GAAGT,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,OAAO,IAAAU,qBAAY,EAAIC,IAAI,IAAM;IAAA,IAAAC,qBAAA;IAChC,IAAK,CAAED,IAAI,IAAIV,eAAe,CAACQ,OAAO,KAAK,KAAK,EAAG;MAClD;IACD;IAEA,IAAKE,IAAI,CAACE,QAAQ,EAAAD,qBAAA,GAAED,IAAI,CAACG,aAAa,EAAEC,aAAa,cAAAH,qBAAA,cAAAA,qBAAA,GAAI,IAAK,CAAC,EAAG;MACjE;IACD;IAEA,IAAKX,eAAe,CAACQ,OAAO,KAAK,cAAc,EAAG;MACjDF,OAAO,CAACE,OAAO,GAAGO,UAAU,CAAE,MAAM;QACnC,MAAMC,aAAa,GAAGZ,UAAK,CAACa,QAAQ,CAACC,IAAI,CAAER,IAAK,CAAC,CAAE,CAAC,CAAE;QAEtD,IAAKM,aAAa,EAAG;UACpBd,QAAQ,CAAEc,aAAc,CAAC;QAC1B;MACD,CAAC,EAAE,CAAE,CAAC;MAEN;IACD;IAEAd,QAAQ,CAAEQ,IAAK,CAAC;IAEhB,OAAO,MAAM;MACZ,IAAKJ,OAAO,CAACE,OAAO,EAAG;QACtBW,YAAY,CAAEb,OAAO,CAACE,OAAQ,CAAC;MAChC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = useResizeAware;
|
|
7
|
-
var _react = require("react");
|
|
8
7
|
var _element = require("@wordpress/element");
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
9
|
/**
|
|
10
10
|
* External dependencies
|
|
11
11
|
*/
|
|
@@ -232,7 +232,7 @@ function useResizeAware() {
|
|
|
232
232
|
height: height !== null && height !== void 0 ? height : null
|
|
233
233
|
};
|
|
234
234
|
}, [width, height]);
|
|
235
|
-
const resizeListener = (0,
|
|
235
|
+
const resizeListener = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
236
236
|
style: {
|
|
237
237
|
position: 'absolute',
|
|
238
238
|
top: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_element","require","useResolvedElement","subscriber","refOrElement","callbackRefElement","useRef","lastReportRef","cleanupRef","callSubscriber","useCallback","element","current","HTMLElement","reporter","useEffect","extractSize","entry","boxProp","sizeType","contentRect","undefined","useResizeObserver","opts","onResize","onResizeRef","round","Math","resizeObserverRef","size","setSize","useState","width","height","didUnmount","previous","refCallback","box","instance","ResizeObserver","entries","reportedWidth","reportedHeight","newWidth","newHeight","newSize","observe","unobserve","ref","useMemo","useResizeAware","sizes","resizeListener","_react","createElement","style","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement, RefCallback, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMemo,\n\tuseRef,\n\tuseCallback,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\ntype SubscriberCleanup = () => void;\ntype SubscriberResponse = SubscriberCleanup | void;\n\n// This of course could've been more streamlined with internal state instead of\n// refs, but then host hooks / components could not opt out of renders.\n// This could've been exported to its own module, but the current build doesn't\n// seem to work with module imports and I had no more time to spend on this...\nfunction useResolvedElement< T extends HTMLElement >(\n\tsubscriber: ( element: T ) => SubscriberResponse,\n\trefOrElement?: T | RefObject< T > | null\n): RefCallback< T > {\n\tconst callbackRefElement = useRef< T | null >( null );\n\tconst lastReportRef = useRef< {\n\t\treporter: () => void;\n\t\telement: T | null;\n\t} | null >( null );\n\tconst cleanupRef = useRef< SubscriberResponse | null >();\n\n\tconst callSubscriber = useCallback( () => {\n\t\tlet element = null;\n\t\tif ( callbackRefElement.current ) {\n\t\t\telement = callbackRefElement.current;\n\t\t} else if ( refOrElement ) {\n\t\t\tif ( refOrElement instanceof HTMLElement ) {\n\t\t\t\telement = refOrElement;\n\t\t\t} else {\n\t\t\t\telement = refOrElement.current;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tlastReportRef.current &&\n\t\t\tlastReportRef.current.element === element &&\n\t\t\tlastReportRef.current.reporter === callSubscriber\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t\t// Making sure the cleanup is not called accidentally multiple times.\n\t\t\tcleanupRef.current = null;\n\t\t}\n\t\tlastReportRef.current = {\n\t\t\treporter: callSubscriber,\n\t\t\telement,\n\t\t};\n\n\t\t// Only calling the subscriber, if there's an actual element to report.\n\t\tif ( element ) {\n\t\t\tcleanupRef.current = subscriber( element );\n\t\t}\n\t}, [ refOrElement, subscriber ] );\n\n\t// On each render, we check whether a ref changed, or if we got a new raw\n\t// element.\n\tuseEffect( () => {\n\t\t// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a\n\t\t// render accompanying that change as well.\n\t\t// To guarantee we always have the right element, one must use the ref callback provided instead, but we support\n\t\t// RefObjects to make the hook API more convenient in certain cases.\n\t\tcallSubscriber();\n\t}, [ callSubscriber ] );\n\n\treturn useCallback< RefCallback< T > >(\n\t\t( element ) => {\n\t\t\tcallbackRefElement.current = element;\n\t\t\tcallSubscriber();\n\t\t},\n\t\t[ callSubscriber ]\n\t);\n}\n\ntype ObservedSize = {\n\twidth: number | undefined;\n\theight: number | undefined;\n};\n\ntype ResizeHandler = ( size: ObservedSize ) => void;\n\ntype HookResponse< T extends HTMLElement > = {\n\tref: RefCallback< T >;\n} & ObservedSize;\n\n// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not\n// forcing consumers to use a specific TS version.\ntype ResizeObserverBoxOptions =\n\t| 'border-box'\n\t| 'content-box'\n\t| 'device-pixel-content-box';\n\ndeclare global {\n\tinterface ResizeObserverEntry {\n\t\treadonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;\n\t}\n}\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nconst extractSize = (\n\tentry: ResizeObserverEntry,\n\tboxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',\n\tsizeType: keyof ResizeObserverSize\n): number | undefined => {\n\tif ( ! entry[ boxProp ] ) {\n\t\tif ( boxProp === 'contentBoxSize' ) {\n\t\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t\t// See the 6th step in the description for the RO algorithm:\n\t\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\t\treturn entry.contentRect[\n\t\t\t\tsizeType === 'inlineSize' ? 'width' : 'height'\n\t\t\t];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t// A couple bytes smaller than calling Array.isArray() and just as effective here.\n\treturn entry[ boxProp ][ 0 ]\n\t\t? entry[ boxProp ][ 0 ][ sizeType ]\n\t\t: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current\n\t\t // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\t // @ts-ignore\n\t\t entry[ boxProp ][ sizeType ];\n};\n\ntype RoundingFunction = ( n: number ) => number;\n\nfunction useResizeObserver< T extends HTMLElement >(\n\topts: {\n\t\tref?: RefObject< T > | T | null | undefined;\n\t\tonResize?: ResizeHandler;\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t} = {}\n): HookResponse< T > {\n\t// Saving the callback as a ref. With this, I don't need to put onResize in the\n\t// effect dep array, and just passing in an anonymous function without memoising\n\t// will not reinstantiate the hook's ResizeObserver.\n\tconst onResize = opts.onResize;\n\tconst onResizeRef = useRef< ResizeHandler | undefined >( undefined );\n\tonResizeRef.current = onResize;\n\tconst round = opts.round || Math.round;\n\n\t// Using a single instance throughout the hook's lifetime\n\tconst resizeObserverRef = useRef< {\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t\tinstance: ResizeObserver;\n\t} >();\n\n\tconst [ size, setSize ] = useState< {\n\t\twidth?: number;\n\t\theight?: number;\n\t} >( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// In certain edge cases the RO might want to report a size change just after\n\t// the component unmounted.\n\tconst didUnmount = useRef( false );\n\tuseEffect( () => {\n\t\tdidUnmount.current = false;\n\t\treturn () => {\n\t\t\tdidUnmount.current = true;\n\t\t};\n\t}, [] );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previous: {\n\t\tcurrent: {\n\t\t\twidth?: number;\n\t\t\theight?: number;\n\t\t};\n\t} = useRef( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// This block is kinda like a useEffect, only it's called whenever a new\n\t// element could be resolved based on the ref option. It also has a cleanup\n\t// function.\n\tconst refCallback = useResolvedElement< T >(\n\t\tuseCallback(\n\t\t\t( element ) => {\n\t\t\t\t// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.\n\t\t\t\t// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.\n\t\t\t\tif (\n\t\t\t\t\t! resizeObserverRef.current ||\n\t\t\t\t\tresizeObserverRef.current.box !== opts.box ||\n\t\t\t\t\tresizeObserverRef.current.round !== round\n\t\t\t\t) {\n\t\t\t\t\tresizeObserverRef.current = {\n\t\t\t\t\t\tbox: opts.box,\n\t\t\t\t\t\tround,\n\t\t\t\t\t\tinstance: new ResizeObserver( ( entries ) => {\n\t\t\t\t\t\t\tconst entry = entries[ 0 ];\n\n\t\t\t\t\t\t\tlet boxProp:\n\t\t\t\t\t\t\t\t| 'borderBoxSize'\n\t\t\t\t\t\t\t\t| 'contentBoxSize'\n\t\t\t\t\t\t\t\t| 'devicePixelContentBoxSize' = 'borderBoxSize';\n\t\t\t\t\t\t\tif ( opts.box === 'border-box' ) {\n\t\t\t\t\t\t\t\tboxProp = 'borderBoxSize';\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tboxProp =\n\t\t\t\t\t\t\t\t\topts.box === 'device-pixel-content-box'\n\t\t\t\t\t\t\t\t\t\t? 'devicePixelContentBoxSize'\n\t\t\t\t\t\t\t\t\t\t: 'contentBoxSize';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst reportedWidth = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'inlineSize'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst reportedHeight = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'blockSize'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst newWidth = reportedWidth\n\t\t\t\t\t\t\t\t? round( reportedWidth )\n\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\tconst newHeight = reportedHeight\n\t\t\t\t\t\t\t\t? round( reportedHeight )\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprevious.current.width !== newWidth ||\n\t\t\t\t\t\t\t\tprevious.current.height !== newHeight\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tconst newSize = {\n\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\theight: newHeight,\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tprevious.current.width = newWidth;\n\t\t\t\t\t\t\t\tprevious.current.height = newHeight;\n\t\t\t\t\t\t\t\tif ( onResizeRef.current ) {\n\t\t\t\t\t\t\t\t\tonResizeRef.current( newSize );\n\t\t\t\t\t\t\t\t} else if ( ! didUnmount.current ) {\n\t\t\t\t\t\t\t\t\tsetSize( newSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} ),\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tresizeObserverRef.current.instance.observe( element, {\n\t\t\t\t\tbox: opts.box,\n\t\t\t\t} );\n\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserverRef.current ) {\n\t\t\t\t\t\tresizeObserverRef.current.instance.unobserve( element );\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ opts.box, round ]\n\t\t),\n\t\topts.ref\n\t);\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tref: refCallback,\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t} ),\n\t\t[ refCallback, size ? size.width : null, size ? size.height : null ]\n\t);\n}\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeAware(): [\n\tReactElement,\n\t{ width: number | null; height: number | null },\n] {\n\tconst { ref, width, height } = useResizeObserver();\n\tconst sizes = useMemo( () => {\n\t\treturn { width: width ?? null, height: height ?? null };\n\t}, [ width, height ] );\n\tconst resizeListener = (\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: 0,\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tzIndex: -1,\n\t\t\t} }\n\t\t\taria-hidden=\"true\"\n\t\t\tref={ ref }\n\t\t/>\n\t);\n\treturn [ resizeListener, sizes ];\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_element","require","_jsxRuntime","useResolvedElement","subscriber","refOrElement","callbackRefElement","useRef","lastReportRef","cleanupRef","callSubscriber","useCallback","element","current","HTMLElement","reporter","useEffect","extractSize","entry","boxProp","sizeType","contentRect","undefined","useResizeObserver","opts","onResize","onResizeRef","round","Math","resizeObserverRef","size","setSize","useState","width","height","didUnmount","previous","refCallback","box","instance","ResizeObserver","entries","reportedWidth","reportedHeight","newWidth","newHeight","newSize","observe","unobserve","ref","useMemo","useResizeAware","sizes","resizeListener","jsx","style","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement, RefCallback, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMemo,\n\tuseRef,\n\tuseCallback,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\ntype SubscriberCleanup = () => void;\ntype SubscriberResponse = SubscriberCleanup | void;\n\n// This of course could've been more streamlined with internal state instead of\n// refs, but then host hooks / components could not opt out of renders.\n// This could've been exported to its own module, but the current build doesn't\n// seem to work with module imports and I had no more time to spend on this...\nfunction useResolvedElement< T extends HTMLElement >(\n\tsubscriber: ( element: T ) => SubscriberResponse,\n\trefOrElement?: T | RefObject< T > | null\n): RefCallback< T > {\n\tconst callbackRefElement = useRef< T | null >( null );\n\tconst lastReportRef = useRef< {\n\t\treporter: () => void;\n\t\telement: T | null;\n\t} | null >( null );\n\tconst cleanupRef = useRef< SubscriberResponse | null >();\n\n\tconst callSubscriber = useCallback( () => {\n\t\tlet element = null;\n\t\tif ( callbackRefElement.current ) {\n\t\t\telement = callbackRefElement.current;\n\t\t} else if ( refOrElement ) {\n\t\t\tif ( refOrElement instanceof HTMLElement ) {\n\t\t\t\telement = refOrElement;\n\t\t\t} else {\n\t\t\t\telement = refOrElement.current;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tlastReportRef.current &&\n\t\t\tlastReportRef.current.element === element &&\n\t\t\tlastReportRef.current.reporter === callSubscriber\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t\t// Making sure the cleanup is not called accidentally multiple times.\n\t\t\tcleanupRef.current = null;\n\t\t}\n\t\tlastReportRef.current = {\n\t\t\treporter: callSubscriber,\n\t\t\telement,\n\t\t};\n\n\t\t// Only calling the subscriber, if there's an actual element to report.\n\t\tif ( element ) {\n\t\t\tcleanupRef.current = subscriber( element );\n\t\t}\n\t}, [ refOrElement, subscriber ] );\n\n\t// On each render, we check whether a ref changed, or if we got a new raw\n\t// element.\n\tuseEffect( () => {\n\t\t// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a\n\t\t// render accompanying that change as well.\n\t\t// To guarantee we always have the right element, one must use the ref callback provided instead, but we support\n\t\t// RefObjects to make the hook API more convenient in certain cases.\n\t\tcallSubscriber();\n\t}, [ callSubscriber ] );\n\n\treturn useCallback< RefCallback< T > >(\n\t\t( element ) => {\n\t\t\tcallbackRefElement.current = element;\n\t\t\tcallSubscriber();\n\t\t},\n\t\t[ callSubscriber ]\n\t);\n}\n\ntype ObservedSize = {\n\twidth: number | undefined;\n\theight: number | undefined;\n};\n\ntype ResizeHandler = ( size: ObservedSize ) => void;\n\ntype HookResponse< T extends HTMLElement > = {\n\tref: RefCallback< T >;\n} & ObservedSize;\n\n// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not\n// forcing consumers to use a specific TS version.\ntype ResizeObserverBoxOptions =\n\t| 'border-box'\n\t| 'content-box'\n\t| 'device-pixel-content-box';\n\ndeclare global {\n\tinterface ResizeObserverEntry {\n\t\treadonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;\n\t}\n}\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nconst extractSize = (\n\tentry: ResizeObserverEntry,\n\tboxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',\n\tsizeType: keyof ResizeObserverSize\n): number | undefined => {\n\tif ( ! entry[ boxProp ] ) {\n\t\tif ( boxProp === 'contentBoxSize' ) {\n\t\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t\t// See the 6th step in the description for the RO algorithm:\n\t\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\t\treturn entry.contentRect[\n\t\t\t\tsizeType === 'inlineSize' ? 'width' : 'height'\n\t\t\t];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t// A couple bytes smaller than calling Array.isArray() and just as effective here.\n\treturn entry[ boxProp ][ 0 ]\n\t\t? entry[ boxProp ][ 0 ][ sizeType ]\n\t\t: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current\n\t\t // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\t // @ts-ignore\n\t\t entry[ boxProp ][ sizeType ];\n};\n\ntype RoundingFunction = ( n: number ) => number;\n\nfunction useResizeObserver< T extends HTMLElement >(\n\topts: {\n\t\tref?: RefObject< T > | T | null | undefined;\n\t\tonResize?: ResizeHandler;\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t} = {}\n): HookResponse< T > {\n\t// Saving the callback as a ref. With this, I don't need to put onResize in the\n\t// effect dep array, and just passing in an anonymous function without memoising\n\t// will not reinstantiate the hook's ResizeObserver.\n\tconst onResize = opts.onResize;\n\tconst onResizeRef = useRef< ResizeHandler | undefined >( undefined );\n\tonResizeRef.current = onResize;\n\tconst round = opts.round || Math.round;\n\n\t// Using a single instance throughout the hook's lifetime\n\tconst resizeObserverRef = useRef< {\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t\tinstance: ResizeObserver;\n\t} >();\n\n\tconst [ size, setSize ] = useState< {\n\t\twidth?: number;\n\t\theight?: number;\n\t} >( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// In certain edge cases the RO might want to report a size change just after\n\t// the component unmounted.\n\tconst didUnmount = useRef( false );\n\tuseEffect( () => {\n\t\tdidUnmount.current = false;\n\t\treturn () => {\n\t\t\tdidUnmount.current = true;\n\t\t};\n\t}, [] );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previous: {\n\t\tcurrent: {\n\t\t\twidth?: number;\n\t\t\theight?: number;\n\t\t};\n\t} = useRef( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// This block is kinda like a useEffect, only it's called whenever a new\n\t// element could be resolved based on the ref option. It also has a cleanup\n\t// function.\n\tconst refCallback = useResolvedElement< T >(\n\t\tuseCallback(\n\t\t\t( element ) => {\n\t\t\t\t// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.\n\t\t\t\t// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.\n\t\t\t\tif (\n\t\t\t\t\t! resizeObserverRef.current ||\n\t\t\t\t\tresizeObserverRef.current.box !== opts.box ||\n\t\t\t\t\tresizeObserverRef.current.round !== round\n\t\t\t\t) {\n\t\t\t\t\tresizeObserverRef.current = {\n\t\t\t\t\t\tbox: opts.box,\n\t\t\t\t\t\tround,\n\t\t\t\t\t\tinstance: new ResizeObserver( ( entries ) => {\n\t\t\t\t\t\t\tconst entry = entries[ 0 ];\n\n\t\t\t\t\t\t\tlet boxProp:\n\t\t\t\t\t\t\t\t| 'borderBoxSize'\n\t\t\t\t\t\t\t\t| 'contentBoxSize'\n\t\t\t\t\t\t\t\t| 'devicePixelContentBoxSize' = 'borderBoxSize';\n\t\t\t\t\t\t\tif ( opts.box === 'border-box' ) {\n\t\t\t\t\t\t\t\tboxProp = 'borderBoxSize';\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tboxProp =\n\t\t\t\t\t\t\t\t\topts.box === 'device-pixel-content-box'\n\t\t\t\t\t\t\t\t\t\t? 'devicePixelContentBoxSize'\n\t\t\t\t\t\t\t\t\t\t: 'contentBoxSize';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst reportedWidth = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'inlineSize'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst reportedHeight = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'blockSize'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst newWidth = reportedWidth\n\t\t\t\t\t\t\t\t? round( reportedWidth )\n\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\tconst newHeight = reportedHeight\n\t\t\t\t\t\t\t\t? round( reportedHeight )\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprevious.current.width !== newWidth ||\n\t\t\t\t\t\t\t\tprevious.current.height !== newHeight\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tconst newSize = {\n\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\theight: newHeight,\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tprevious.current.width = newWidth;\n\t\t\t\t\t\t\t\tprevious.current.height = newHeight;\n\t\t\t\t\t\t\t\tif ( onResizeRef.current ) {\n\t\t\t\t\t\t\t\t\tonResizeRef.current( newSize );\n\t\t\t\t\t\t\t\t} else if ( ! didUnmount.current ) {\n\t\t\t\t\t\t\t\t\tsetSize( newSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} ),\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tresizeObserverRef.current.instance.observe( element, {\n\t\t\t\t\tbox: opts.box,\n\t\t\t\t} );\n\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserverRef.current ) {\n\t\t\t\t\t\tresizeObserverRef.current.instance.unobserve( element );\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ opts.box, round ]\n\t\t),\n\t\topts.ref\n\t);\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tref: refCallback,\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t} ),\n\t\t[ refCallback, size ? size.width : null, size ? size.height : null ]\n\t);\n}\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeAware(): [\n\tReactElement,\n\t{ width: number | null; height: number | null },\n] {\n\tconst { ref, width, height } = useResizeObserver();\n\tconst sizes = useMemo( () => {\n\t\treturn { width: width ?? null, height: height ?? null };\n\t}, [ width, height ] );\n\tconst resizeListener = (\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: 0,\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tzIndex: -1,\n\t\t\t} }\n\t\t\taria-hidden=\"true\"\n\t\t\tref={ ref }\n\t\t/>\n\t);\n\treturn [ resizeListener, sizes ];\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
7
|
var _reactNative = require("react-native");
|
|
9
8
|
var _element = require("@wordpress/element");
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
10
|
/**
|
|
11
11
|
* External dependencies
|
|
12
12
|
*/
|
|
@@ -32,8 +32,7 @@ var _element = require("@wordpress/element");
|
|
|
32
32
|
* );
|
|
33
33
|
* };
|
|
34
34
|
* ```
|
|
35
|
-
*/
|
|
36
|
-
const useResizeObserver = () => {
|
|
35
|
+
*/const useResizeObserver = () => {
|
|
37
36
|
const [measurements, setMeasurements] = (0, _element.useState)(null);
|
|
38
37
|
const onLayout = (0, _element.useCallback)(({
|
|
39
38
|
nativeEvent
|
|
@@ -52,7 +51,7 @@ const useResizeObserver = () => {
|
|
|
52
51
|
return prevState;
|
|
53
52
|
});
|
|
54
53
|
}, []);
|
|
55
|
-
const observer = (0,
|
|
54
|
+
const observer = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
56
55
|
testID: "resize-observer",
|
|
57
56
|
style: _reactNative.StyleSheet.absoluteFill,
|
|
58
57
|
onLayout: onLayout
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_element","useResizeObserver","measurements","setMeasurements","useState","onLayout","useCallback","nativeEvent","width","height","layout","prevState","Math","floor","observer","
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_element","_jsxRuntime","useResizeObserver","measurements","setMeasurements","useState","onLayout","useCallback","nativeEvent","width","height","layout","prevState","Math","floor","observer","jsx","View","testID","style","StyleSheet","absoluteFill","_default","exports","default"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, StyleSheet } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<View>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</View>\n * \t);\n * };\n * ```\n */\nconst useResizeObserver = () => {\n\tconst [ measurements, setMeasurements ] = useState( null );\n\n\tconst onLayout = useCallback( ( { nativeEvent } ) => {\n\t\tconst { width, height } = nativeEvent.layout;\n\t\tsetMeasurements( ( prevState ) => {\n\t\t\tif (\n\t\t\t\t! prevState ||\n\t\t\t\tprevState.width !== width ||\n\t\t\t\tprevState.height !== height\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\twidth: Math.floor( width ),\n\t\t\t\t\theight: Math.floor( height ),\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn prevState;\n\t\t} );\n\t}, [] );\n\n\tconst observer = (\n\t\t<View\n\t\t\ttestID=\"resize-observer\"\n\t\t\tstyle={ StyleSheet.absoluteFill }\n\t\t\tonLayout={ onLayout }\n\t\t/>\n\t);\n\n\treturn [ observer, measurements ];\n};\n\nexport default useResizeObserver;\n"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AAA2D,IAAAE,WAAA,GAAAF,OAAA;AAP3D;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,MAAMG,iBAAiB,GAAGA,CAAA,KAAM;EAC/B,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAE1D,MAAMC,QAAQ,GAAG,IAAAC,oBAAW,EAAE,CAAE;IAAEC;EAAY,CAAC,KAAM;IACpD,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,WAAW,CAACG,MAAM;IAC5CP,eAAe,CAAIQ,SAAS,IAAM;MACjC,IACC,CAAEA,SAAS,IACXA,SAAS,CAACH,KAAK,KAAKA,KAAK,IACzBG,SAAS,CAACF,MAAM,KAAKA,MAAM,EAC1B;QACD,OAAO;UACND,KAAK,EAAEI,IAAI,CAACC,KAAK,CAAEL,KAAM,CAAC;UAC1BC,MAAM,EAAEG,IAAI,CAACC,KAAK,CAAEJ,MAAO;QAC5B,CAAC;MACF;MACA,OAAOE,SAAS;IACjB,CAAE,CAAC;EACJ,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMG,QAAQ,gBACb,IAAAd,WAAA,CAAAe,GAAA,EAAClB,YAAA,CAAAmB,IAAI;IACJC,MAAM,EAAC,iBAAiB;IACxBC,KAAK,EAAGC,uBAAU,CAACC,YAAc;IACjCf,QAAQ,EAAGA;EAAU,CACrB,CACD;EAED,OAAO,CAAES,QAAQ,EAAEZ,YAAY,CAAE;AAClC,CAAC;AAAC,IAAAmB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEatB,iBAAiB","ignoreList":[]}
|
|
@@ -25,7 +25,7 @@ var _throttle = require("../../utils/throttle");
|
|
|
25
25
|
* including the function to throttle, so please wrap functions created on
|
|
26
26
|
* render in components in `useCallback`.
|
|
27
27
|
*
|
|
28
|
-
* @see https://
|
|
28
|
+
* @see https://lodash.com/docs/4#throttle
|
|
29
29
|
*
|
|
30
30
|
* @template {(...args: any[]) => void} TFunc
|
|
31
31
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_useMemoOne","require","_element","_throttle","useThrottle","fn","wait","options","throttled","useMemoOne","throttle","useEffect","cancel"],"sources":["@wordpress/compose/src/hooks/use-throttle/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { throttle } from '../../utils/throttle';\n\n/**\n * Throttles a function similar to Lodash's `throttle`. A new throttled function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to throttle, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://
|
|
1
|
+
{"version":3,"names":["_useMemoOne","require","_element","_throttle","useThrottle","fn","wait","options","throttled","useMemoOne","throttle","useEffect","cancel"],"sources":["@wordpress/compose/src/hooks/use-throttle/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { throttle } from '../../utils/throttle';\n\n/**\n * Throttles a function similar to Lodash's `throttle`. A new throttled function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to throttle, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://lodash.com/docs/4#throttle\n *\n * @template {(...args: any[]) => void} TFunc\n *\n * @param {TFunc} fn The function to throttle.\n * @param {number} [wait] The number of milliseconds to throttle invocations to.\n * @param {import('../../utils/throttle').ThrottleOptions} [options] The options object. See linked documentation for details.\n * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Throttled function.\n */\nexport default function useThrottle( fn, wait, options ) {\n\tconst throttled = useMemoOne(\n\t\t() => throttle( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options ]\n\t);\n\tuseEffect( () => () => throttled.cancel(), [ throttled ] );\n\treturn throttled;\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,SAAA,GAAAF,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASG,WAAWA,CAAEC,EAAE,EAAEC,IAAI,EAAEC,OAAO,EAAG;EACxD,MAAMC,SAAS,GAAG,IAAAC,sBAAU,EAC3B,MAAM,IAAAC,kBAAQ,EAAEL,EAAE,EAAEC,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,CAAC,EAAEC,OAAQ,CAAC,EACxC,CAAEF,EAAE,EAAEC,IAAI,EAAEC,OAAO,CACpB,CAAC;EACD,IAAAI,kBAAS,EAAE,MAAM,MAAMH,SAAS,CAACI,MAAM,CAAC,CAAC,EAAE,CAAEJ,SAAS,CAAG,CAAC;EAC1D,OAAOA,SAAS;AACjB","ignoreList":[]}
|
|
@@ -9,7 +9,7 @@ import { basePipe } from './pipe';
|
|
|
9
9
|
*
|
|
10
10
|
* This is inspired by `lodash`'s `flowRight` function.
|
|
11
11
|
*
|
|
12
|
-
* @see https://
|
|
12
|
+
* @see https://lodash.com/docs/4#flow-right
|
|
13
13
|
*/
|
|
14
14
|
const compose = basePipe(true);
|
|
15
15
|
export default compose;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["basePipe","compose"],"sources":["@wordpress/compose/src/higher-order/compose.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { basePipe } from './pipe';\n\n/**\n * Composes multiple higher-order components into a single higher-order component. Performs right-to-left function\n * composition, where each successive invocation is supplied the return value of the previous.\n *\n * This is inspired by `lodash`'s `flowRight` function.\n *\n * @see https://
|
|
1
|
+
{"version":3,"names":["basePipe","compose"],"sources":["@wordpress/compose/src/higher-order/compose.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { basePipe } from './pipe';\n\n/**\n * Composes multiple higher-order components into a single higher-order component. Performs right-to-left function\n * composition, where each successive invocation is supplied the return value of the previous.\n *\n * This is inspired by `lodash`'s `flowRight` function.\n *\n * @see https://lodash.com/docs/4#flow-right\n */\nconst compose = basePipe( true );\n\nexport default compose;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,QAAQ;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,OAAO,GAAGD,QAAQ,CAAE,IAAK,CAAC;AAEhC,eAAeC,OAAO","ignoreList":[]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { createElement } from "react";
|
|
2
1
|
/**
|
|
3
2
|
* External dependencies
|
|
4
3
|
*/
|
|
@@ -25,12 +24,13 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
|
|
|
25
24
|
*
|
|
26
25
|
* @return Higher-order component.
|
|
27
26
|
*/
|
|
27
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
28
28
|
function ifCondition(predicate) {
|
|
29
29
|
return createHigherOrderComponent(WrappedComponent => props => {
|
|
30
30
|
if (!predicate(props)) {
|
|
31
31
|
return null;
|
|
32
32
|
}
|
|
33
|
-
return
|
|
33
|
+
return /*#__PURE__*/_jsx(WrappedComponent, {
|
|
34
34
|
...props
|
|
35
35
|
});
|
|
36
36
|
}, 'ifCondition');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createHigherOrderComponent","ifCondition","predicate","WrappedComponent","props"
|
|
1
|
+
{"version":3,"names":["createHigherOrderComponent","jsx","_jsx","ifCondition","predicate","WrappedComponent","props"],"sources":["@wordpress/compose/src/higher-order/if-condition/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\n\n/**\n * Higher-order component creator, creating a new component which renders if\n * the given condition is satisfied or with the given optional prop name.\n *\n * @example\n * ```ts\n * type Props = { foo: string };\n * const Component = ( props: Props ) => <div>{ props.foo }</div>;\n * const ConditionalComponent = ifCondition( ( props: Props ) => props.foo.length !== 0 )( Component );\n * <ConditionalComponent foo=\"\" />; // => null\n * <ConditionalComponent foo=\"bar\" />; // => <div>bar</div>;\n * ```\n *\n * @param predicate Function to test condition.\n *\n * @return Higher-order component.\n */\nfunction ifCondition< Props extends {} >(\n\tpredicate: ( props: Props ) => boolean\n) {\n\treturn createHigherOrderComponent(\n\t\t( WrappedComponent: ComponentType< Props > ) => ( props: Props ) => {\n\t\t\tif ( ! predicate( props ) ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn <WrappedComponent { ...props } />;\n\t\t},\n\t\t'ifCondition'\n\t);\n}\n\nexport default ifCondition;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,0BAA0B,QAAQ,2CAA2C;;AAEtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhBA,SAAAC,GAAA,IAAAC,IAAA;AAiBA,SAASC,WAAWA,CACnBC,SAAsC,EACrC;EACD,OAAOJ,0BAA0B,CAC9BK,gBAAwC,IAAQC,KAAY,IAAM;IACnE,IAAK,CAAEF,SAAS,CAAEE,KAAM,CAAC,EAAG;MAC3B,OAAO,IAAI;IACZ;IAEA,oBAAOJ,IAAA,CAACG,gBAAgB;MAAA,GAAMC;IAAK,CAAI,CAAC;EACzC,CAAC,EACD,aACD,CAAC;AACF;AAEA,eAAeH,WAAW","ignoreList":[]}
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
*
|
|
44
44
|
* Allows to choose whether to perform left-to-right or right-to-left composition.
|
|
45
45
|
*
|
|
46
|
-
* @see https://
|
|
46
|
+
* @see https://lodash.com/docs/4#flow
|
|
47
47
|
*
|
|
48
48
|
* @param {boolean} reverse True if right-to-left, false for left-to-right composition.
|
|
49
49
|
*/
|
|
@@ -61,7 +61,7 @@ const basePipe = (reverse = false) => (...funcs) => (...args) => {
|
|
|
61
61
|
*
|
|
62
62
|
* This is inspired by `lodash`'s `flow` function.
|
|
63
63
|
*
|
|
64
|
-
* @see https://
|
|
64
|
+
* @see https://lodash.com/docs/4#flow
|
|
65
65
|
*/
|
|
66
66
|
const pipe = basePipe();
|
|
67
67
|
export { basePipe };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["basePipe","reverse","funcs","args","functions","flat","reduce","prev","func","pipe"],"sources":["@wordpress/compose/src/higher-order/pipe.ts"],"sourcesContent":["/**\n * Parts of this source were derived and modified from lodash,\n * released under the MIT license.\n *\n * https://github.com/lodash/lodash\n *\n * Copyright JS Foundation and other contributors <https://js.foundation/>\n *\n * Based on Underscore.js, copyright Jeremy Ashkenas,\n * DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n *\n * This software consists of voluntary contributions made by many\n * individuals. For exact contribution history, see the revision history\n * available at https://github.com/lodash/lodash\n *\n * The following license applies to all parts of this software except as\n * documented below:\n *\n * ====\n *\n * Permission is hereby granted, free of charge, to any person obtaining\n * a copy of this software and associated documentation files (the\n * \"Software\"), to deal in the Software without restriction, including\n * without limitation the rights to use, copy, modify, merge, publish,\n * distribute, sublicense, and/or sell copies of the Software, and to\n * permit persons to whom the Software is furnished to do so, subject to\n * the following conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\n * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\n * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\n * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Creates a pipe function.\n *\n * Allows to choose whether to perform left-to-right or right-to-left composition.\n *\n * @see https://
|
|
1
|
+
{"version":3,"names":["basePipe","reverse","funcs","args","functions","flat","reduce","prev","func","pipe"],"sources":["@wordpress/compose/src/higher-order/pipe.ts"],"sourcesContent":["/**\n * Parts of this source were derived and modified from lodash,\n * released under the MIT license.\n *\n * https://github.com/lodash/lodash\n *\n * Copyright JS Foundation and other contributors <https://js.foundation/>\n *\n * Based on Underscore.js, copyright Jeremy Ashkenas,\n * DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n *\n * This software consists of voluntary contributions made by many\n * individuals. For exact contribution history, see the revision history\n * available at https://github.com/lodash/lodash\n *\n * The following license applies to all parts of this software except as\n * documented below:\n *\n * ====\n *\n * Permission is hereby granted, free of charge, to any person obtaining\n * a copy of this software and associated documentation files (the\n * \"Software\"), to deal in the Software without restriction, including\n * without limitation the rights to use, copy, modify, merge, publish,\n * distribute, sublicense, and/or sell copies of the Software, and to\n * permit persons to whom the Software is furnished to do so, subject to\n * the following conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\n * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\n * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\n * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Creates a pipe function.\n *\n * Allows to choose whether to perform left-to-right or right-to-left composition.\n *\n * @see https://lodash.com/docs/4#flow\n *\n * @param {boolean} reverse True if right-to-left, false for left-to-right composition.\n */\nconst basePipe =\n\t( reverse: boolean = false ) =>\n\t( ...funcs: Function[] ) =>\n\t( ...args: unknown[] ) => {\n\t\tconst functions = funcs.flat();\n\t\tif ( reverse ) {\n\t\t\tfunctions.reverse();\n\t\t}\n\t\treturn functions.reduce(\n\t\t\t( prev, func ) => [ func( ...prev ) ],\n\t\t\targs\n\t\t)[ 0 ];\n\t};\n\n/**\n * Composes multiple higher-order components into a single higher-order component. Performs left-to-right function\n * composition, where each successive invocation is supplied the return value of the previous.\n *\n * This is inspired by `lodash`'s `flow` function.\n *\n * @see https://lodash.com/docs/4#flow\n */\nconst pipe = basePipe();\n\nexport { basePipe };\n\nexport default pipe;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,QAAQ,GACbA,CAAEC,OAAgB,GAAG,KAAK,KAC1B,CAAE,GAAGC,KAAiB,KACtB,CAAE,GAAGC,IAAe,KAAM;EACzB,MAAMC,SAAS,GAAGF,KAAK,CAACG,IAAI,CAAC,CAAC;EAC9B,IAAKJ,OAAO,EAAG;IACdG,SAAS,CAACH,OAAO,CAAC,CAAC;EACpB;EACA,OAAOG,SAAS,CAACE,MAAM,CACtB,CAAEC,IAAI,EAAEC,IAAI,KAAM,CAAEA,IAAI,CAAE,GAAGD,IAAK,CAAC,CAAE,EACrCJ,IACD,CAAC,CAAE,CAAC,CAAE;AACP,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMM,IAAI,GAAGT,QAAQ,CAAC,CAAC;AAEvB,SAASA,QAAQ;AAEjB,eAAeS,IAAI","ignoreList":[]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { createElement } from "react";
|
|
2
1
|
/**
|
|
3
2
|
* External dependencies
|
|
4
3
|
*/
|
|
@@ -20,6 +19,7 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
|
|
|
20
19
|
*
|
|
21
20
|
* @deprecated Use `memo` or `PureComponent` instead.
|
|
22
21
|
*/
|
|
22
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
23
|
const pure = createHigherOrderComponent(function (WrappedComponent) {
|
|
24
24
|
if (WrappedComponent.prototype instanceof Component) {
|
|
25
25
|
return class extends WrappedComponent {
|
|
@@ -33,7 +33,7 @@ const pure = createHigherOrderComponent(function (WrappedComponent) {
|
|
|
33
33
|
return !isShallowEqual(nextProps, this.props);
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return
|
|
36
|
+
return /*#__PURE__*/_jsx(WrappedComponent, {
|
|
37
37
|
...this.props
|
|
38
38
|
});
|
|
39
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["isShallowEqual","Component","createHigherOrderComponent","pure","WrappedComponent","prototype","shouldComponentUpdate","nextProps","nextState","props","state","render"
|
|
1
|
+
{"version":3,"names":["isShallowEqual","Component","createHigherOrderComponent","jsx","_jsx","pure","WrappedComponent","prototype","shouldComponentUpdate","nextProps","nextState","props","state","render"],"sources":["@wordpress/compose/src/higher-order/pure/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType, ComponentClass } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport isShallowEqual from '@wordpress/is-shallow-equal';\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\n\n/**\n * Given a component returns the enhanced component augmented with a component\n * only re-rendering when its props/state change\n *\n * @deprecated Use `memo` or `PureComponent` instead.\n */\nconst pure = createHigherOrderComponent( function < Props extends {} >(\n\tWrappedComponent: ComponentType< Props >\n): ComponentType< Props > {\n\tif ( WrappedComponent.prototype instanceof Component ) {\n\t\treturn class extends ( WrappedComponent as ComponentClass< Props > ) {\n\t\t\tshouldComponentUpdate( nextProps: Props, nextState: any ) {\n\t\t\t\treturn (\n\t\t\t\t\t! isShallowEqual( nextProps, this.props ) ||\n\t\t\t\t\t! isShallowEqual( nextState, this.state )\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t}\n\n\treturn class extends Component< Props > {\n\t\tshouldComponentUpdate( nextProps: Props ) {\n\t\t\treturn ! isShallowEqual( nextProps, this.props );\n\t\t}\n\n\t\trender() {\n\t\t\treturn <WrappedComponent { ...this.props } />;\n\t\t}\n\t};\n}, 'pure' );\n\nexport default pure;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,cAAc,MAAM,6BAA6B;AACxD,SAASC,SAAS,QAAQ,oBAAoB;;AAE9C;AACA;AACA;AACA,SAASC,0BAA0B,QAAQ,2CAA2C;;AAEtF;AACA;AACA;AACA;AACA;AACA;AALA,SAAAC,GAAA,IAAAC,IAAA;AAMA,MAAMC,IAAI,GAAGH,0BAA0B,CAAE,UACxCI,gBAAwC,EACf;EACzB,IAAKA,gBAAgB,CAACC,SAAS,YAAYN,SAAS,EAAG;IACtD,OAAO,cAAgBK,gBAAgB,CAA8B;MACpEE,qBAAqBA,CAAEC,SAAgB,EAAEC,SAAc,EAAG;QACzD,OACC,CAAEV,cAAc,CAAES,SAAS,EAAE,IAAI,CAACE,KAAM,CAAC,IACzC,CAAEX,cAAc,CAAEU,SAAS,EAAE,IAAI,CAACE,KAAM,CAAC;MAE3C;IACD,CAAC;EACF;EAEA,OAAO,cAAcX,SAAS,CAAU;IACvCO,qBAAqBA,CAAEC,SAAgB,EAAG;MACzC,OAAO,CAAET,cAAc,CAAES,SAAS,EAAE,IAAI,CAACE,KAAM,CAAC;IACjD;IAEAE,MAAMA,CAAA,EAAG;MACR,oBAAOT,IAAA,CAACE,gBAAgB;QAAA,GAAM,IAAI,CAACK;MAAK,CAAI,CAAC;IAC9C;EACD,CAAC;AACF,CAAC,EAAE,MAAO,CAAC;AAEX,eAAeN,IAAI","ignoreList":[]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { createElement } from "react";
|
|
2
1
|
/**
|
|
3
2
|
* WordPress dependencies
|
|
4
3
|
*/
|
|
@@ -14,6 +13,7 @@ import Listener from './listener';
|
|
|
14
13
|
/**
|
|
15
14
|
* Listener instance responsible for managing document event handling.
|
|
16
15
|
*/
|
|
16
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
17
|
const listener = new Listener();
|
|
18
18
|
|
|
19
19
|
/* eslint-disable jsdoc/no-undefined-types */
|
|
@@ -79,14 +79,14 @@ export default function withGlobalEvents(eventTypesToHandlers) {
|
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
render() {
|
|
82
|
-
return
|
|
82
|
+
return /*#__PURE__*/_jsx(WrappedComponent, {
|
|
83
83
|
...this.props.ownProps,
|
|
84
84
|
ref: this.handleRef
|
|
85
85
|
});
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
return forwardRef((props, ref) => {
|
|
89
|
-
return
|
|
89
|
+
return /*#__PURE__*/_jsx(Wrapper, {
|
|
90
90
|
ownProps: props,
|
|
91
91
|
forwardedRef: ref
|
|
92
92
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Component","forwardRef","deprecated","createHigherOrderComponent","Listener","listener","withGlobalEvents","eventTypesToHandlers","since","alternative","WrappedComponent","Wrapper","constructor","props","handleEvent","bind","handleRef","componentDidMount","Object","keys","forEach","eventType","add","componentWillUnmount","remove","event","handler","type","wrappedRef","el","forwardedRef","render","
|
|
1
|
+
{"version":3,"names":["Component","forwardRef","deprecated","createHigherOrderComponent","Listener","jsx","_jsx","listener","withGlobalEvents","eventTypesToHandlers","since","alternative","WrappedComponent","Wrapper","constructor","props","handleEvent","bind","handleRef","componentDidMount","Object","keys","forEach","eventType","add","componentWillUnmount","remove","event","handler","type","wrappedRef","el","forwardedRef","render","ownProps","ref"],"sources":["@wordpress/compose/src/higher-order/with-global-events/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component, forwardRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\nimport Listener from './listener';\n\n/**\n * Listener instance responsible for managing document event handling.\n */\nconst listener = new Listener();\n\n/* eslint-disable jsdoc/no-undefined-types */\n/**\n * Higher-order component creator which, given an object of DOM event types and\n * values corresponding to a callback function name on the component, will\n * create or update a window event handler to invoke the callback when an event\n * occurs. On behalf of the consuming developer, the higher-order component\n * manages unbinding when the component unmounts, and binding at most a single\n * event handler for the entire application.\n *\n * @deprecated\n *\n * @param {Record<keyof GlobalEventHandlersEventMap, string>} eventTypesToHandlers Object with keys of DOM\n * event type, the value a\n * name of the function on\n * the original component's\n * instance which handles\n * the event.\n *\n * @return {any} Higher-order component.\n */\nexport default function withGlobalEvents( eventTypesToHandlers ) {\n\tdeprecated( 'wp.compose.withGlobalEvents', {\n\t\tsince: '5.7',\n\t\talternative: 'useEffect',\n\t} );\n\n\t// @ts-ignore We don't need to fix the type-related issues because this is deprecated.\n\treturn createHigherOrderComponent( ( WrappedComponent ) => {\n\t\tclass Wrapper extends Component {\n\t\t\tconstructor( /** @type {any} */ props ) {\n\t\t\t\tsuper( props );\n\n\t\t\t\tthis.handleEvent = this.handleEvent.bind( this );\n\t\t\t\tthis.handleRef = this.handleRef.bind( this );\n\t\t\t}\n\n\t\t\tcomponentDidMount() {\n\t\t\t\tObject.keys( eventTypesToHandlers ).forEach( ( eventType ) => {\n\t\t\t\t\tlistener.add( eventType, this );\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\tcomponentWillUnmount() {\n\t\t\t\tObject.keys( eventTypesToHandlers ).forEach( ( eventType ) => {\n\t\t\t\t\tlistener.remove( eventType, this );\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\thandleEvent( /** @type {any} */ event ) {\n\t\t\t\tconst handler =\n\t\t\t\t\teventTypesToHandlers[\n\t\t\t\t\t\t/** @type {keyof GlobalEventHandlersEventMap} */ (\n\t\t\t\t\t\t\tevent.type\n\t\t\t\t\t\t)\n\t\t\t\t\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\t\t\t\t];\n\t\t\t\tif ( typeof this.wrappedRef[ handler ] === 'function' ) {\n\t\t\t\t\tthis.wrappedRef[ handler ]( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\thandleRef( /** @type {any} */ el ) {\n\t\t\t\tthis.wrappedRef = el;\n\t\t\t\t// Any component using `withGlobalEvents` that is not setting a `ref`\n\t\t\t\t// will cause `this.props.forwardedRef` to be `null`, so we need this\n\t\t\t\t// check.\n\t\t\t\tif ( this.props.forwardedRef ) {\n\t\t\t\t\tthis.props.forwardedRef( el );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn (\n\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t{ ...this.props.ownProps }\n\t\t\t\t\t\tref={ this.handleRef }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\treturn forwardRef( ( props, ref ) => {\n\t\t\treturn <Wrapper ownProps={ props } forwardedRef={ ref } />;\n\t\t} );\n\t}, 'withGlobalEvents' );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,UAAU,QAAQ,oBAAoB;AAC1D,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,SAASC,0BAA0B,QAAQ,2CAA2C;AACtF,OAAOC,QAAQ,MAAM,YAAY;;AAEjC;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAGA,MAAMC,QAAQ,GAAG,IAAIH,QAAQ,CAAC,CAAC;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASI,gBAAgBA,CAAEC,oBAAoB,EAAG;EAChEP,UAAU,CAAE,6BAA6B,EAAE;IAC1CQ,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;;EAEH;EACA,OAAOR,0BAA0B,CAAIS,gBAAgB,IAAM;IAC1D,MAAMC,OAAO,SAASb,SAAS,CAAC;MAC/Bc,WAAWA,CAAA,CAAE,kBAAmBC,KAAK,EAAG;QACvC,KAAK,CAAEA,KAAM,CAAC;QAEd,IAAI,CAACC,WAAW,GAAG,IAAI,CAACA,WAAW,CAACC,IAAI,CAAE,IAAK,CAAC;QAChD,IAAI,CAACC,SAAS,GAAG,IAAI,CAACA,SAAS,CAACD,IAAI,CAAE,IAAK,CAAC;MAC7C;MAEAE,iBAAiBA,CAAA,EAAG;QACnBC,MAAM,CAACC,IAAI,CAAEZ,oBAAqB,CAAC,CAACa,OAAO,CAAIC,SAAS,IAAM;UAC7DhB,QAAQ,CAACiB,GAAG,CAAED,SAAS,EAAE,IAAK,CAAC;QAChC,CAAE,CAAC;MACJ;MAEAE,oBAAoBA,CAAA,EAAG;QACtBL,MAAM,CAACC,IAAI,CAAEZ,oBAAqB,CAAC,CAACa,OAAO,CAAIC,SAAS,IAAM;UAC7DhB,QAAQ,CAACmB,MAAM,CAAEH,SAAS,EAAE,IAAK,CAAC;QACnC,CAAE,CAAC;MACJ;MAEAP,WAAWA,CAAA,CAAE,kBAAmBW,KAAK,EAAG;QACvC,MAAMC,OAAO,GACZnB,oBAAoB,GACnB;QACCkB,KAAK,CAACE;;QAEP,8CACA;QACF,IAAK,OAAO,IAAI,CAACC,UAAU,CAAEF,OAAO,CAAE,KAAK,UAAU,EAAG;UACvD,IAAI,CAACE,UAAU,CAAEF,OAAO,CAAE,CAAED,KAAM,CAAC;QACpC;MACD;MAEAT,SAASA,CAAA,CAAE,kBAAmBa,EAAE,EAAG;QAClC,IAAI,CAACD,UAAU,GAAGC,EAAE;QACpB;QACA;QACA;QACA,IAAK,IAAI,CAAChB,KAAK,CAACiB,YAAY,EAAG;UAC9B,IAAI,CAACjB,KAAK,CAACiB,YAAY,CAAED,EAAG,CAAC;QAC9B;MACD;MAEAE,MAAMA,CAAA,EAAG;QACR,oBACC3B,IAAA,CAACM,gBAAgB;UAAA,GACX,IAAI,CAACG,KAAK,CAACmB,QAAQ;UACxBC,GAAG,EAAG,IAAI,CAACjB;QAAW,CACtB,CAAC;MAEJ;IACD;IAEA,OAAOjB,UAAU,CAAE,CAAEc,KAAK,EAAEoB,GAAG,KAAM;MACpC,oBAAO7B,IAAA,CAACO,OAAO;QAACqB,QAAQ,EAAGnB,KAAO;QAACiB,YAAY,EAAGG;MAAK,CAAE,CAAC;IAC3D,CAAE,CAAC;EACJ,CAAC,EAAE,kBAAmB,CAAC;AACxB","ignoreList":[]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { createElement } from "react";
|
|
2
1
|
/**
|
|
3
2
|
* Internal dependencies
|
|
4
3
|
*/
|
|
5
4
|
|
|
6
5
|
import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
|
|
7
6
|
import useInstanceId from '../../hooks/use-instance-id';
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
8
|
/**
|
|
9
9
|
* A Higher Order Component used to be provide a unique instance ID by
|
|
10
10
|
* component.
|
|
@@ -13,7 +13,7 @@ const withInstanceId = createHigherOrderComponent(WrappedComponent => {
|
|
|
13
13
|
return props => {
|
|
14
14
|
const instanceId = useInstanceId(WrappedComponent);
|
|
15
15
|
// @ts-ignore
|
|
16
|
-
return
|
|
16
|
+
return /*#__PURE__*/_jsx(WrappedComponent, {
|
|
17
17
|
...props,
|
|
18
18
|
instanceId: instanceId
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createHigherOrderComponent","useInstanceId","withInstanceId","WrappedComponent","props","instanceId"
|
|
1
|
+
{"version":3,"names":["createHigherOrderComponent","useInstanceId","jsx","_jsx","withInstanceId","WrappedComponent","props","instanceId"],"sources":["@wordpress/compose/src/higher-order/with-instance-id/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type {\n\tWithInjectedProps,\n\tWithoutInjectedProps,\n} from '../../utils/create-higher-order-component';\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\nimport useInstanceId from '../../hooks/use-instance-id';\n\ntype InstanceIdProps = { instanceId: string | number };\n\n/**\n * A Higher Order Component used to be provide a unique instance ID by\n * component.\n */\nconst withInstanceId = createHigherOrderComponent(\n\t< C extends WithInjectedProps< C, InstanceIdProps > >(\n\t\tWrappedComponent: C\n\t) => {\n\t\treturn ( props: WithoutInjectedProps< C, InstanceIdProps > ) => {\n\t\t\tconst instanceId = useInstanceId( WrappedComponent );\n\t\t\t// @ts-ignore\n\t\t\treturn <WrappedComponent { ...props } instanceId={ instanceId } />;\n\t\t};\n\t},\n\t'instanceId'\n);\n\nexport default withInstanceId;\n"],"mappings":"AAAA;AACA;AACA;;AAKA,SAASA,0BAA0B,QAAQ,2CAA2C;AACtF,OAAOC,aAAa,MAAM,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIxD;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAGJ,0BAA0B,CAE/CK,gBAAmB,IACf;EACJ,OAASC,KAAiD,IAAM;IAC/D,MAAMC,UAAU,GAAGN,aAAa,CAAEI,gBAAiB,CAAC;IACpD;IACA,oBAAOF,IAAA,CAACE,gBAAgB;MAAA,GAAMC,KAAK;MAAGC,UAAU,EAAGA;IAAY,CAAE,CAAC;EACnE,CAAC;AACF,CAAC,EACD,YACD,CAAC;AAED,eAAeH,cAAc","ignoreList":[]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { createElement } from "react";
|
|
2
1
|
/**
|
|
3
2
|
* Internal dependencies
|
|
4
3
|
*/
|
|
5
4
|
import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
|
|
6
5
|
import useNetworkConnectivity from '../../hooks/use-network-connectivity';
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
7
|
const withNetworkConnectivity = createHigherOrderComponent(WrappedComponent => {
|
|
8
8
|
return props => {
|
|
9
9
|
const {
|
|
10
10
|
isConnected
|
|
11
11
|
} = useNetworkConnectivity();
|
|
12
|
-
return
|
|
12
|
+
return /*#__PURE__*/_jsx(WrappedComponent, {
|
|
13
13
|
...props,
|
|
14
14
|
isConnected: isConnected
|
|
15
15
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createHigherOrderComponent","useNetworkConnectivity","withNetworkConnectivity","WrappedComponent","props","isConnected"
|
|
1
|
+
{"version":3,"names":["createHigherOrderComponent","useNetworkConnectivity","jsx","_jsx","withNetworkConnectivity","WrappedComponent","props","isConnected"],"sources":["@wordpress/compose/src/higher-order/with-network-connectivity/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\nimport useNetworkConnectivity from '../../hooks/use-network-connectivity';\n\nconst withNetworkConnectivity = createHigherOrderComponent(\n\t( WrappedComponent ) => {\n\t\treturn ( props ) => {\n\t\t\tconst { isConnected } = useNetworkConnectivity();\n\t\t\treturn (\n\t\t\t\t<WrappedComponent { ...props } isConnected={ isConnected } />\n\t\t\t);\n\t\t};\n\t},\n\t'withNetworkConnectivity'\n);\n\nexport default withNetworkConnectivity;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,0BAA0B,QAAQ,2CAA2C;AACtF,OAAOC,sBAAsB,MAAM,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1E,MAAMC,uBAAuB,GAAGJ,0BAA0B,CACvDK,gBAAgB,IAAM;EACvB,OAASC,KAAK,IAAM;IACnB,MAAM;MAAEC;IAAY,CAAC,GAAGN,sBAAsB,CAAC,CAAC;IAChD,oBACCE,IAAA,CAACE,gBAAgB;MAAA,GAAMC,KAAK;MAAGC,WAAW,EAAGA;IAAa,CAAE,CAAC;EAE/D,CAAC;AACF,CAAC,EACD,yBACD,CAAC;AAED,eAAeH,uBAAuB","ignoreList":[]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { createElement } from "react";
|
|
2
1
|
/**
|
|
3
2
|
* Internal dependencies
|
|
4
3
|
*/
|
|
@@ -9,6 +8,7 @@ import usePreferredColorScheme from '../../hooks/use-preferred-color-scheme';
|
|
|
9
8
|
* WordPress dependencies
|
|
10
9
|
*/
|
|
11
10
|
import { useCallback } from '@wordpress/element';
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
12
|
const withPreferredColorScheme = createHigherOrderComponent(WrappedComponent => props => {
|
|
13
13
|
const colorScheme = usePreferredColorScheme();
|
|
14
14
|
const isDarkMode = colorScheme === 'dark';
|
|
@@ -19,7 +19,7 @@ const withPreferredColorScheme = createHigherOrderComponent(WrappedComponent =>
|
|
|
19
19
|
};
|
|
20
20
|
return isDarkMode ? finalDarkStyles : lightStyles;
|
|
21
21
|
}, [isDarkMode]);
|
|
22
|
-
return
|
|
22
|
+
return /*#__PURE__*/_jsx(WrappedComponent, {
|
|
23
23
|
preferredColorScheme: colorScheme,
|
|
24
24
|
getStylesFromColorScheme: getStyles,
|
|
25
25
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createHigherOrderComponent","usePreferredColorScheme","useCallback","withPreferredColorScheme","WrappedComponent","props","colorScheme","isDarkMode","getStyles","lightStyles","darkStyles","finalDarkStyles","
|
|
1
|
+
{"version":3,"names":["createHigherOrderComponent","usePreferredColorScheme","useCallback","jsx","_jsx","withPreferredColorScheme","WrappedComponent","props","colorScheme","isDarkMode","getStyles","lightStyles","darkStyles","finalDarkStyles","preferredColorScheme","getStylesFromColorScheme"],"sources":["@wordpress/compose/src/higher-order/with-preferred-color-scheme/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\nimport usePreferredColorScheme from '../../hooks/use-preferred-color-scheme';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\nconst withPreferredColorScheme = createHigherOrderComponent(\n\t( WrappedComponent ) => ( props ) => {\n\t\tconst colorScheme = usePreferredColorScheme();\n\t\tconst isDarkMode = colorScheme === 'dark';\n\n\t\tconst getStyles = useCallback(\n\t\t\t( lightStyles, darkStyles ) => {\n\t\t\t\tconst finalDarkStyles = {\n\t\t\t\t\t...lightStyles,\n\t\t\t\t\t...darkStyles,\n\t\t\t\t};\n\n\t\t\t\treturn isDarkMode ? finalDarkStyles : lightStyles;\n\t\t\t},\n\t\t\t[ isDarkMode ]\n\t\t);\n\n\t\treturn (\n\t\t\t<WrappedComponent\n\t\t\t\tpreferredColorScheme={ colorScheme }\n\t\t\t\tgetStylesFromColorScheme={ getStyles }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t},\n\t'withPreferredColorScheme'\n);\n\nexport default withPreferredColorScheme;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,0BAA0B,QAAQ,2CAA2C;AACtF,OAAOC,uBAAuB,MAAM,wCAAwC;;AAE5E;AACA;AACA;AACA,SAASC,WAAW,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjD,MAAMC,wBAAwB,GAAGL,0BAA0B,CACxDM,gBAAgB,IAAQC,KAAK,IAAM;EACpC,MAAMC,WAAW,GAAGP,uBAAuB,CAAC,CAAC;EAC7C,MAAMQ,UAAU,GAAGD,WAAW,KAAK,MAAM;EAEzC,MAAME,SAAS,GAAGR,WAAW,CAC5B,CAAES,WAAW,EAAEC,UAAU,KAAM;IAC9B,MAAMC,eAAe,GAAG;MACvB,GAAGF,WAAW;MACd,GAAGC;IACJ,CAAC;IAED,OAAOH,UAAU,GAAGI,eAAe,GAAGF,WAAW;EAClD,CAAC,EACD,CAAEF,UAAU,CACb,CAAC;EAED,oBACCL,IAAA,CAACE,gBAAgB;IAChBQ,oBAAoB,EAAGN,WAAa;IACpCO,wBAAwB,EAAGL,SAAW;IAAA,GACjCH;EAAK,CACV,CAAC;AAEJ,CAAC,EACD,0BACD,CAAC;AAED,eAAeF,wBAAwB","ignoreList":[]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { createElement } from "react";
|
|
2
1
|
/**
|
|
3
2
|
* WordPress dependencies
|
|
4
3
|
*/
|
|
@@ -18,7 +17,7 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
|
|
|
18
17
|
* In the case of this component, we only handle the simplest case where
|
|
19
18
|
* `setTimeout` only accepts a function (not a string) and an optional delay.
|
|
20
19
|
*/
|
|
21
|
-
|
|
20
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
22
21
|
/**
|
|
23
22
|
* A higher-order component used to provide and manage delayed function calls
|
|
24
23
|
* that ought to be bound to a component's lifecycle.
|
|
@@ -48,8 +47,9 @@ const withSafeTimeout = createHigherOrderComponent(OriginalComponent => {
|
|
|
48
47
|
}
|
|
49
48
|
render() {
|
|
50
49
|
return (
|
|
50
|
+
/*#__PURE__*/
|
|
51
51
|
// @ts-ignore
|
|
52
|
-
|
|
52
|
+
_jsx(OriginalComponent, {
|
|
53
53
|
...this.props,
|
|
54
54
|
setTimeout: this.setTimeout,
|
|
55
55
|
clearTimeout: this.clearTimeout
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Component","createHigherOrderComponent","withSafeTimeout","OriginalComponent","WrappedComponent","constructor","props","timeouts","setTimeout","bind","clearTimeout","componentWillUnmount","forEach","fn","delay","id","push","filter","timeoutId","render"
|
|
1
|
+
{"version":3,"names":["Component","createHigherOrderComponent","jsx","_jsx","withSafeTimeout","OriginalComponent","WrappedComponent","constructor","props","timeouts","setTimeout","bind","clearTimeout","componentWillUnmount","forEach","fn","delay","id","push","filter","timeoutId","render"],"sources":["@wordpress/compose/src/higher-order/with-safe-timeout/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tWithInjectedProps,\n\tWithoutInjectedProps,\n} from '../../utils/create-higher-order-component';\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\n\n/**\n * We cannot use the `Window['setTimeout']` and `Window['clearTimeout']`\n * types here because those functions include functionality that is not handled\n * by this component, like the ability to pass extra arguments.\n *\n * In the case of this component, we only handle the simplest case where\n * `setTimeout` only accepts a function (not a string) and an optional delay.\n */\ninterface TimeoutProps {\n\tsetTimeout: ( fn: () => void, delay: number ) => number;\n\tclearTimeout: ( id: number ) => void;\n}\n\n/**\n * A higher-order component used to provide and manage delayed function calls\n * that ought to be bound to a component's lifecycle.\n */\nconst withSafeTimeout = createHigherOrderComponent(\n\t< C extends WithInjectedProps< C, TimeoutProps > >(\n\t\tOriginalComponent: C\n\t) => {\n\t\ttype WrappedProps = WithoutInjectedProps< C, TimeoutProps >;\n\t\treturn class WrappedComponent extends Component< WrappedProps > {\n\t\t\ttimeouts: number[];\n\n\t\t\tconstructor( props: WrappedProps ) {\n\t\t\t\tsuper( props );\n\t\t\t\tthis.timeouts = [];\n\t\t\t\tthis.setTimeout = this.setTimeout.bind( this );\n\t\t\t\tthis.clearTimeout = this.clearTimeout.bind( this );\n\t\t\t}\n\n\t\t\tcomponentWillUnmount() {\n\t\t\t\tthis.timeouts.forEach( clearTimeout );\n\t\t\t}\n\n\t\t\tsetTimeout( fn: () => void, delay: number ) {\n\t\t\t\tconst id = setTimeout( () => {\n\t\t\t\t\tfn();\n\t\t\t\t\tthis.clearTimeout( id );\n\t\t\t\t}, delay );\n\t\t\t\tthis.timeouts.push( id );\n\t\t\t\treturn id;\n\t\t\t}\n\n\t\t\tclearTimeout( id: number ) {\n\t\t\t\tclearTimeout( id );\n\t\t\t\tthis.timeouts = this.timeouts.filter(\n\t\t\t\t\t( timeoutId ) => timeoutId !== id\n\t\t\t\t);\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn (\n\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t<OriginalComponent\n\t\t\t\t\t\t{ ...this.props }\n\t\t\t\t\t\tsetTimeout={ this.setTimeout }\n\t\t\t\t\t\tclearTimeout={ this.clearTimeout }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t},\n\t'withSafeTimeout'\n);\n\nexport default withSafeTimeout;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;;AAE9C;AACA;AACA;;AAKA,SAASC,0BAA0B,QAAQ,2CAA2C;;AAEtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,SAAAC,GAAA,IAAAC,IAAA;AAaA;AACA;AACA;AACA;AACA,MAAMC,eAAe,GAAGH,0BAA0B,CAEhDI,iBAAoB,IAChB;EAEJ,OAAO,MAAMC,gBAAgB,SAASN,SAAS,CAAiB;IAG/DO,WAAWA,CAAEC,KAAmB,EAAG;MAClC,KAAK,CAAEA,KAAM,CAAC;MACd,IAAI,CAACC,QAAQ,GAAG,EAAE;MAClB,IAAI,CAACC,UAAU,GAAG,IAAI,CAACA,UAAU,CAACC,IAAI,CAAE,IAAK,CAAC;MAC9C,IAAI,CAACC,YAAY,GAAG,IAAI,CAACA,YAAY,CAACD,IAAI,CAAE,IAAK,CAAC;IACnD;IAEAE,oBAAoBA,CAAA,EAAG;MACtB,IAAI,CAACJ,QAAQ,CAACK,OAAO,CAAEF,YAAa,CAAC;IACtC;IAEAF,UAAUA,CAAEK,EAAc,EAAEC,KAAa,EAAG;MAC3C,MAAMC,EAAE,GAAGP,UAAU,CAAE,MAAM;QAC5BK,EAAE,CAAC,CAAC;QACJ,IAAI,CAACH,YAAY,CAAEK,EAAG,CAAC;MACxB,CAAC,EAAED,KAAM,CAAC;MACV,IAAI,CAACP,QAAQ,CAACS,IAAI,CAAED,EAAG,CAAC;MACxB,OAAOA,EAAE;IACV;IAEAL,YAAYA,CAAEK,EAAU,EAAG;MAC1BL,YAAY,CAAEK,EAAG,CAAC;MAClB,IAAI,CAACR,QAAQ,GAAG,IAAI,CAACA,QAAQ,CAACU,MAAM,CACjCC,SAAS,IAAMA,SAAS,KAAKH,EAChC,CAAC;IACF;IAEAI,MAAMA,CAAA,EAAG;MACR;QAAA;QACC;QACAlB,IAAA,CAACE,iBAAiB;UAAA,GACZ,IAAI,CAACG,KAAK;UACfE,UAAU,EAAG,IAAI,CAACA,UAAY;UAC9BE,YAAY,EAAG,IAAI,CAACA;QAAc,CAClC;MAAC;IAEJ;EACD,CAAC;AACF,CAAC,EACD,iBACD,CAAC;AAED,eAAeR,eAAe","ignoreList":[]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { createElement } from "react";
|
|
2
1
|
/**
|
|
3
2
|
* WordPress dependencies
|
|
4
3
|
*/
|
|
@@ -20,6 +19,7 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
|
|
|
20
19
|
*
|
|
21
20
|
* @return {any} A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
|
|
22
21
|
*/
|
|
22
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
23
|
export default function withState(initialState = {}) {
|
|
24
24
|
deprecated('wp.compose.withState', {
|
|
25
25
|
since: '5.8',
|
|
@@ -33,7 +33,7 @@ export default function withState(initialState = {}) {
|
|
|
33
33
|
this.state = initialState;
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return
|
|
36
|
+
return /*#__PURE__*/_jsx(OriginalComponent, {
|
|
37
37
|
...this.props,
|
|
38
38
|
...this.state,
|
|
39
39
|
setState: this.setState
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Component","deprecated","createHigherOrderComponent","withState","initialState","since","alternative","OriginalComponent","WrappedComponent","constructor","props","setState","bind","state","render"
|
|
1
|
+
{"version":3,"names":["Component","deprecated","createHigherOrderComponent","jsx","_jsx","withState","initialState","since","alternative","OriginalComponent","WrappedComponent","constructor","props","setState","bind","state","render"],"sources":["@wordpress/compose/src/higher-order/with-state/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\n\n/**\n * A Higher Order Component used to provide and manage internal component state\n * via props.\n *\n * @deprecated Use `useState` instead.\n *\n * @param {any} initialState Optional initial state of the component.\n *\n * @return {any} A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.\n */\nexport default function withState( initialState = {} ) {\n\tdeprecated( 'wp.compose.withState', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.element.useState',\n\t} );\n\n\treturn createHigherOrderComponent( ( OriginalComponent ) => {\n\t\treturn class WrappedComponent extends Component {\n\t\t\tconstructor( /** @type {any} */ props ) {\n\t\t\t\tsuper( props );\n\n\t\t\t\tthis.setState = this.setState.bind( this );\n\n\t\t\t\tthis.state = initialState;\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn (\n\t\t\t\t\t<OriginalComponent\n\t\t\t\t\t\t{ ...this.props }\n\t\t\t\t\t\t{ ...this.state }\n\t\t\t\t\t\tsetState={ this.setState }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t}, 'withState' );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;AAC9C,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,SAASC,0BAA0B,QAAQ,2CAA2C;;AAEtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AATA,SAAAC,GAAA,IAAAC,IAAA;AAUA,eAAe,SAASC,SAASA,CAAEC,YAAY,GAAG,CAAC,CAAC,EAAG;EACtDL,UAAU,CAAE,sBAAsB,EAAE;IACnCM,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,OAAON,0BAA0B,CAAIO,iBAAiB,IAAM;IAC3D,OAAO,MAAMC,gBAAgB,SAASV,SAAS,CAAC;MAC/CW,WAAWA,CAAA,CAAE,kBAAmBC,KAAK,EAAG;QACvC,KAAK,CAAEA,KAAM,CAAC;QAEd,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACA,QAAQ,CAACC,IAAI,CAAE,IAAK,CAAC;QAE1C,IAAI,CAACC,KAAK,GAAGT,YAAY;MAC1B;MAEAU,MAAMA,CAAA,EAAG;QACR,oBACCZ,IAAA,CAACK,iBAAiB;UAAA,GACZ,IAAI,CAACG,KAAK;UAAA,GACV,IAAI,CAACG,KAAK;UACfF,QAAQ,EAAG,IAAI,CAACA;QAAU,CAC1B,CAAC;MAEJ;IACD,CAAC;EACF,CAAC,EAAE,WAAY,CAAC;AACjB","ignoreList":[]}
|