@wordpress/compose 5.0.1 → 5.0.5

package/README.md

@@ -53,7 +53,7 @@ Install the module
 npm install @wordpress/compose --save
 ```
 
-_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
 
 ## API
 
@@ -207,7 +207,16 @@ _Parameters_
 
 _Returns_
 
--   `TFunc & import('lodash').Cancelable`: Debounced function.
+-   `import('lodash').DebouncedFunc<TFunc>`: Debounced function.
+
+### useFocusableIframe
+
+Dispatches a bubbling focus event when the iframe receives focus. Use
+`onFocus` as usual on the iframe or a parent element.
+
+_Returns_
+
+-   `Object`: Ref to pass to the iframe.
 
 ### useFocusOnMount
 
@@ -452,7 +461,7 @@ _Parameters_
 
 _Returns_
 
--   `TFunc & import('lodash').Cancelable`: Throttled function.
+-   `import('lodash').DebouncedFunc<TFunc>`: Throttled function.
 
 ### useViewportMatch
 

package/build/higher-order/if-condition/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/higher-order/if-condition/index.tsx"],"names":["ifCondition","predicate","WrappedComponent","props"],"mappings":";;;;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW,GAChBC,SADmB,IAGnB,yCACGC,gBAAF,IAA0BC,KAAF,IAAqB;AAC5C,MAAK,CAAEF,SAAS,CAAEE,KAAF,CAAhB,EAA4B;AAC3B,WAAO,IAAP;AACA;;AAED,SAAO,4BAAC,gBAAD,EAAuBA,KAAvB,CAAP;AACA,CAPF,EAQC,aARD,CAHD;;eAceH,W","sourcesContent":["/**\n * Internal dependencies\n */\nimport createHigherOrderComponent from '../../utils/create-higher-order-component';\n// eslint-disable-next-line no-duplicate-imports\nimport type { HigherOrderComponent } 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 */\nconst ifCondition = < TProps, >(\n\tpredicate: ( props: TProps ) => boolean\n): HigherOrderComponent< TProps, TProps > =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props: TProps ) => {\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\nexport default ifCondition;\n"]}
+{"version":3,"sources":["@wordpress/compose/src/higher-order/if-condition/index.tsx"],"names":["ifCondition","predicate","WrappedComponent","props"],"mappings":";;;;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW,GAChBC,SADmB,IAGnB,yCACGC,gBAAF,IAA0BC,KAAF,IAAqB;AAC5C,MAAK,CAAEF,SAAS,CAAEE,KAAF,CAAhB,EAA4B;AAC3B,WAAO,IAAP;AACA;;AAED,SAAO,4BAAC,gBAAD,EAAuBA,KAAvB,CAAP;AACA,CAPF,EAQC,aARD,CAHD;;eAceH,W","sourcesContent":["/**\n * Internal dependencies\n */\nimport createHigherOrderComponent from '../../utils/create-higher-order-component';\nimport type { HigherOrderComponent } 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 */\nconst ifCondition = < TProps, >(\n\tpredicate: ( props: TProps ) => boolean\n): HigherOrderComponent< TProps, TProps > =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props: TProps ) => {\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\nexport default ifCondition;\n"]}

package/build/higher-order/pure/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/higher-order/pure/index.tsx"],"names":["pure","Wrapped","prototype","Component","shouldComponentUpdate","nextProps","nextState","props","state","render"],"mappings":";;;;;;;;;AAIA;;AADA;;AAMA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAWA;AACA;AACA;AACA;AACA,MAAMA,IAAgC,GAAG,yCAC3BC,OAAb,IAAmD;AAClD,MAAKA,OAAO,CAACC,SAAR,YAA6BC,kBAAlC,EAA8C;AAC7C,WAAO,cAAgBF,OAAhB,CAAsD;AAC5DG,MAAAA,qBAAqB,CAAEC,SAAF,EAAqBC,SAArB,EAAsC;AAC1D,eACC,CAAE,6BAAgBD,SAAhB,EAA2B,KAAKE,KAAhC,CAAF,IACA,CAAE,6BAAgBD,SAAhB,EAA2B,KAAKE,KAAhC,CAFH;AAIA;;AAN2D,KAA7D;AAQA;;AAED,SAAO,cAAcL,kBAAd,CAAkC;AACxCC,IAAAA,qBAAqB,CAAEC,SAAF,EAAsB;AAC1C,aAAO,CAAE,6BAAgBA,SAAhB,EAA2B,KAAKE,KAAhC,CAAT;AACA;;AAEDE,IAAAA,MAAM,GAAG;AACR,aAAO,4BAAC,OAAD,EAAc,KAAKF,KAAnB,CAAP;AACA;;AAPuC,GAAzC;AASA,CAtBuC,EAuBxC,MAvBwC,CAAzC;eA0BeP,I","sourcesContent":["/**\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// eslint-disable-next-line no-duplicate-imports\nimport type { SimpleHigherOrderComponent } from '../../utils/create-higher-order-component';\n\n/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { ComponentType, ComponentClass } from 'react';\n\n/**\n * Given a component returns the enhanced component augmented with a component\n * only rerendering when its props/state change\n */\nconst pure: SimpleHigherOrderComponent = createHigherOrderComponent(\n\t< TProps, >( Wrapped: ComponentType< TProps > ) => {\n\t\tif ( Wrapped.prototype instanceof Component ) {\n\t\t\treturn class extends ( Wrapped as ComponentClass< TProps > ) {\n\t\t\t\tshouldComponentUpdate( nextProps: TProps, nextState: any ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t! isShallowEqual( nextProps, this.props ) ||\n\t\t\t\t\t\t! isShallowEqual( nextState, this.state )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\n\t\treturn class extends Component< TProps > {\n\t\t\tshouldComponentUpdate( nextProps: TProps ) {\n\t\t\t\treturn ! isShallowEqual( nextProps, this.props );\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn <Wrapped { ...this.props } />;\n\t\t\t}\n\t\t};\n\t},\n\t'pure'\n);\n\nexport default pure;\n"]}
+{"version":3,"sources":["@wordpress/compose/src/higher-order/pure/index.tsx"],"names":["pure","Wrapped","prototype","Component","shouldComponentUpdate","nextProps","nextState","props","state","render"],"mappings":";;;;;;;;;AAIA;;AADA;;AAMA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA,MAAMA,IAAgC,GAAG,yCAC3BC,OAAb,IAAmD;AAClD,MAAKA,OAAO,CAACC,SAAR,YAA6BC,kBAAlC,EAA8C;AAC7C,WAAO,cAAgBF,OAAhB,CAAsD;AAC5DG,MAAAA,qBAAqB,CAAEC,SAAF,EAAqBC,SAArB,EAAsC;AAC1D,eACC,CAAE,6BAAgBD,SAAhB,EAA2B,KAAKE,KAAhC,CAAF,IACA,CAAE,6BAAgBD,SAAhB,EAA2B,KAAKE,KAAhC,CAFH;AAIA;;AAN2D,KAA7D;AAQA;;AAED,SAAO,cAAcL,kBAAd,CAAkC;AACxCC,IAAAA,qBAAqB,CAAEC,SAAF,EAAsB;AAC1C,aAAO,CAAE,6BAAgBA,SAAhB,EAA2B,KAAKE,KAAhC,CAAT;AACA;;AAEDE,IAAAA,MAAM,GAAG;AACR,aAAO,4BAAC,OAAD,EAAc,KAAKF,KAAnB,CAAP;AACA;;AAPuC,GAAzC;AASA,CAtBuC,EAuBxC,MAvBwC,CAAzC;eA0BeP,I","sourcesContent":["/**\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';\nimport type { SimpleHigherOrderComponent } from '../../utils/create-higher-order-component';\n\n/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { ComponentType, ComponentClass } from 'react';\n\n/**\n * Given a component returns the enhanced component augmented with a component\n * only rerendering when its props/state change\n */\nconst pure: SimpleHigherOrderComponent = createHigherOrderComponent(\n\t< TProps, >( Wrapped: ComponentType< TProps > ) => {\n\t\tif ( Wrapped.prototype instanceof Component ) {\n\t\t\treturn class extends ( Wrapped as ComponentClass< TProps > ) {\n\t\t\t\tshouldComponentUpdate( nextProps: TProps, nextState: any ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t! isShallowEqual( nextProps, this.props ) ||\n\t\t\t\t\t\t! isShallowEqual( nextState, this.state )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\n\t\treturn class extends Component< TProps > {\n\t\t\tshouldComponentUpdate( nextProps: TProps ) {\n\t\t\t\treturn ! isShallowEqual( nextProps, this.props );\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn <Wrapped { ...this.props } />;\n\t\t\t}\n\t\t};\n\t},\n\t'pure'\n);\n\nexport default pure;\n"]}

package/build/higher-order/with-instance-id/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/higher-order/with-instance-id/index.tsx"],"names":["withInstanceId","WrappedComponent","props","instanceId"],"mappings":";;;;;;;;;;;;;AASA;;AAGA;;AAZA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA,MAAMA,cAEH,GAAG,yCAEJC,gBADD,IAEK;AACJ,SAASC,KAAF,IAA2C;AACjD,UAAMC,UAAU,GAAG,4BAAeF,gBAAf,CAAnB;AACA,WACC,4BAAC,gBAAD,6BACQC,KADR;AAEC,MAAA,UAAU,EAAGC;AAFd,OADD;AAMA,GARD;AASA,CAbI,EAcL,gBAdK,CAFN;eAmBeH,c","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport createHigherOrderComponent from '../../utils/create-higher-order-component';\n// eslint-disable-next-line no-duplicate-imports\nimport type { PropInjectingHigherOrderComponent } from '../../utils/create-higher-order-component';\nimport useInstanceId from '../../hooks/use-instance-id';\n\n/**\n * A Higher Order Component used to be provide a unique instance ID by\n * component.\n */\nconst withInstanceId: PropInjectingHigherOrderComponent< {\n\tinstanceId: string | number;\n} > = createHigherOrderComponent(\n\t< TProps extends { instanceId: string | number } >(\n\t\tWrappedComponent: ComponentType< TProps >\n\t) => {\n\t\treturn ( props: Omit< TProps, 'instanceId' > ) => {\n\t\t\tconst instanceId = useInstanceId( WrappedComponent );\n\t\t\treturn (\n\t\t\t\t<WrappedComponent\n\t\t\t\t\t{ ...( props as TProps ) }\n\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t/>\n\t\t\t);\n\t\t};\n\t},\n\t'withInstanceId'\n);\n\nexport default withInstanceId;\n"]}
+{"version":3,"sources":["@wordpress/compose/src/higher-order/with-instance-id/index.tsx"],"names":["withInstanceId","WrappedComponent","props","instanceId"],"mappings":";;;;;;;;;;;;;AASA;;AAEA;;AAXA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,MAAMA,cAEH,GAAG,yCAEJC,gBADD,IAEK;AACJ,SAASC,KAAF,IAA2C;AACjD,UAAMC,UAAU,GAAG,4BAAeF,gBAAf,CAAnB;AACA,WACC,4BAAC,gBAAD,6BACQC,KADR;AAEC,MAAA,UAAU,EAAGC;AAFd,OADD;AAMA,GARD;AASA,CAbI,EAcL,gBAdK,CAFN;eAmBeH,c","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport createHigherOrderComponent from '../../utils/create-higher-order-component';\nimport type { PropInjectingHigherOrderComponent } from '../../utils/create-higher-order-component';\nimport useInstanceId from '../../hooks/use-instance-id';\n\n/**\n * A Higher Order Component used to be provide a unique instance ID by\n * component.\n */\nconst withInstanceId: PropInjectingHigherOrderComponent< {\n\tinstanceId: string | number;\n} > = createHigherOrderComponent(\n\t< TProps extends { instanceId: string | number } >(\n\t\tWrappedComponent: ComponentType< TProps >\n\t) => {\n\t\treturn ( props: Omit< TProps, 'instanceId' > ) => {\n\t\t\tconst instanceId = useInstanceId( WrappedComponent );\n\t\t\treturn (\n\t\t\t\t<WrappedComponent\n\t\t\t\t\t{ ...( props as TProps ) }\n\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t/>\n\t\t\t);\n\t\t};\n\t},\n\t'withInstanceId'\n);\n\nexport default withInstanceId;\n"]}

package/build/higher-order/with-safe-timeout/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/higher-order/with-safe-timeout/index.tsx"],"names":["withSafeTimeout","OriginalComponent","WrappedComponent","Component","constructor","props","timeouts","setTimeout","bind","clearTimeout","componentWillUnmount","forEach","fn","delay","id","push","render"],"mappings":";;;;;;;;;AAUA;;AAPA;;AAYA;;AAfA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;;AAkBA;AACA;AACA;AACA;AACA,MAAMA,eAAkE,GAAG,yCAEzEC,iBADD,IAEK;AACJ,SAAO,MAAMC,gBAAN,SAA+BC,kBAA/B,CAEL;AAGDC,IAAAA,WAAW,CAAEC,KAAF,EAAe;AACzB,YAAOA,KAAP;AACA,WAAKC,QAAL,GAAgB,EAAhB;AACA,WAAKC,UAAL,GAAkB,KAAKA,UAAL,CAAgBC,IAAhB,CAAsB,IAAtB,CAAlB;AACA,WAAKC,YAAL,GAAoB,KAAKA,YAAL,CAAkBD,IAAlB,CAAwB,IAAxB,CAApB;AACA;;AAEDE,IAAAA,oBAAoB,GAAG;AACtB,WAAKJ,QAAL,CAAcK,OAAd,CAAuBF,YAAvB;AACA;;AAEDF,IAAAA,UAAU,CAAEK,EAAF,EAAkCC,KAAlC,EAAkD;AAC3D,YAAMC,EAAE,GAAGP,UAAU,CAAE,MAAM;AAC5BK,QAAAA,EAAE;AACF,aAAKH,YAAL,CAAmBK,EAAnB;AACA,OAHoB,EAGlBD,KAHkB,CAArB;AAIA,WAAKP,QAAL,CAAcS,IAAd,CAAoBD,EAApB;AACA,aAAOA,EAAP;AACA;;AAEDL,IAAAA,YAAY,CAAEK,EAAF,EAAe;AAC1BL,MAAAA,YAAY,CAAEK,EAAF,CAAZ;AACA,WAAKR,QAAL,GAAgB,qBAAS,KAAKA,QAAd,EAAwBQ,EAAxB,CAAhB;AACA;;AAEDE,IAAAA,MAAM,GAAG;AACR,YAAMX,KAAK,GAAG,EACb,GAAG,KAAKA,KADK;AAEbE,QAAAA,UAAU,EAAE,KAAKA,UAFJ;AAGbE,QAAAA,YAAY,EAAE,KAAKA;AAHN,OAAd;AAKA,aAAO,4BAAC,iBAAD,EAA0BJ,KAA1B,CAAP;AACA;;AAnCA,GAFF;AAuCA,CA3CyE,EA4C1E,iBA5C0E,CAA3E;eA+CeL,e","sourcesContent":["/**\n * External dependencies\n */\nimport { without } from 'lodash';\n// eslint-disable-next-line no-restricted-imports\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport createHigherOrderComponent from '../../utils/create-higher-order-component';\n// eslint-disable-next-line no-duplicate-imports\nimport type { PropInjectingHigherOrderComponent } 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 */\ntype 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: PropInjectingHigherOrderComponent< TimeoutProps > = createHigherOrderComponent(\n\t< TProps extends TimeoutProps >(\n\t\tOriginalComponent: ComponentType< TProps >\n\t) => {\n\t\treturn class WrappedComponent extends Component<\n\t\t\tOmit< TProps, keyof TimeoutProps >\n\t\t> {\n\t\t\ttimeouts: number[];\n\n\t\t\tconstructor( props: any ) {\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: ( ...args: any[] ) => 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 = without( this.timeouts, id );\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\tconst props = {\n\t\t\t\t\t...this.props,\n\t\t\t\t\tsetTimeout: this.setTimeout,\n\t\t\t\t\tclearTimeout: this.clearTimeout,\n\t\t\t\t};\n\t\t\t\treturn <OriginalComponent { ...( props as TProps ) } />;\n\t\t\t}\n\t\t};\n\t},\n\t'withSafeTimeout'\n);\n\nexport default withSafeTimeout;\n"]}
+{"version":3,"sources":["@wordpress/compose/src/higher-order/with-safe-timeout/index.tsx"],"names":["withSafeTimeout","OriginalComponent","WrappedComponent","Component","constructor","props","timeouts","setTimeout","bind","clearTimeout","componentWillUnmount","forEach","fn","delay","id","push","render"],"mappings":";;;;;;;;;AAUA;;AAPA;;AAYA;;AAfA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;;AAiBA;AACA;AACA;AACA;AACA,MAAMA,eAAkE,GAAG,yCAEzEC,iBADD,IAEK;AACJ,SAAO,MAAMC,gBAAN,SAA+BC,kBAA/B,CAEL;AAGDC,IAAAA,WAAW,CAAEC,KAAF,EAAe;AACzB,YAAOA,KAAP;AACA,WAAKC,QAAL,GAAgB,EAAhB;AACA,WAAKC,UAAL,GAAkB,KAAKA,UAAL,CAAgBC,IAAhB,CAAsB,IAAtB,CAAlB;AACA,WAAKC,YAAL,GAAoB,KAAKA,YAAL,CAAkBD,IAAlB,CAAwB,IAAxB,CAApB;AACA;;AAEDE,IAAAA,oBAAoB,GAAG;AACtB,WAAKJ,QAAL,CAAcK,OAAd,CAAuBF,YAAvB;AACA;;AAEDF,IAAAA,UAAU,CAAEK,EAAF,EAAkCC,KAAlC,EAAkD;AAC3D,YAAMC,EAAE,GAAGP,UAAU,CAAE,MAAM;AAC5BK,QAAAA,EAAE;AACF,aAAKH,YAAL,CAAmBK,EAAnB;AACA,OAHoB,EAGlBD,KAHkB,CAArB;AAIA,WAAKP,QAAL,CAAcS,IAAd,CAAoBD,EAApB;AACA,aAAOA,EAAP;AACA;;AAEDL,IAAAA,YAAY,CAAEK,EAAF,EAAe;AAC1BL,MAAAA,YAAY,CAAEK,EAAF,CAAZ;AACA,WAAKR,QAAL,GAAgB,qBAAS,KAAKA,QAAd,EAAwBQ,EAAxB,CAAhB;AACA;;AAEDE,IAAAA,MAAM,GAAG;AACR,YAAMX,KAAK,GAAG,EACb,GAAG,KAAKA,KADK;AAEbE,QAAAA,UAAU,EAAE,KAAKA,UAFJ;AAGbE,QAAAA,YAAY,EAAE,KAAKA;AAHN,OAAd;AAKA,aAAO,4BAAC,iBAAD,EAA0BJ,KAA1B,CAAP;AACA;;AAnCA,GAFF;AAuCA,CA3CyE,EA4C1E,iBA5C0E,CAA3E;eA+CeL,e","sourcesContent":["/**\n * External dependencies\n */\nimport { without } from 'lodash';\n// eslint-disable-next-line no-restricted-imports\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport createHigherOrderComponent from '../../utils/create-higher-order-component';\nimport type { PropInjectingHigherOrderComponent } 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 */\ntype 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: PropInjectingHigherOrderComponent< TimeoutProps > = createHigherOrderComponent(\n\t< TProps extends TimeoutProps >(\n\t\tOriginalComponent: ComponentType< TProps >\n\t) => {\n\t\treturn class WrappedComponent extends Component<\n\t\t\tOmit< TProps, keyof TimeoutProps >\n\t\t> {\n\t\t\ttimeouts: number[];\n\n\t\t\tconstructor( props: any ) {\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: ( ...args: any[] ) => 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 = without( this.timeouts, id );\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\tconst props = {\n\t\t\t\t\t...this.props,\n\t\t\t\t\tsetTimeout: this.setTimeout,\n\t\t\t\t\tclearTimeout: this.clearTimeout,\n\t\t\t\t};\n\t\t\t\treturn <OriginalComponent { ...( props as TProps ) } />;\n\t\t\t}\n\t\t};\n\t},\n\t'withSafeTimeout'\n);\n\nexport default withSafeTimeout;\n"]}

package/build/hooks/use-constrained-tabbing/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,12 +11,16 @@ var _keycodes = require("@wordpress/keycodes");
 
 var _dom = require("@wordpress/dom");
 
-var _element = require("@wordpress/element");
+var _useRefEffect = _interopRequireDefault(require("../use-ref-effect"));
 
 /**
  * WordPress dependencies
  */
 
+/**
+ * Internal dependencies
+ */
+
 /**
  * In Dialogs/modals, the tabbing must be constrained to the content of
  * the wrapper element. This hook adds the behavior to the returned ref.
@@ -37,58 +43,55 @@ var _element = require("@wordpress/element");
  * ```
  */
 function useConstrainedTabbing() {
-  const ref = (0, _element.useCallback)(
-  /** @type {Element} */
+  return (0, _useRefEffect.default)(
+  /** @type {HTMLElement} */
   node => {
-    if (!node) {
-      return;
-    }
-
-    node.addEventListener('keydown',
-    /** @type {Event} */
-    event => {
-      if (!(event instanceof window.KeyboardEvent)) {
+    /** @type {number|undefined} */
+    let timeoutId;
+
+    function onKeyDown(
+    /** @type {KeyboardEvent} */
+    event) {
+      const {
+        keyCode,
+        shiftKey,
+        target
+      } = event;
+
+      if (keyCode !== _keycodes.TAB) {
         return;
       }
 
-      if (event.keyCode !== _keycodes.TAB) {
+      const action = shiftKey ? 'findPrevious' : 'findNext';
+      const nextElement = _dom.focus.tabbable[action](
+      /** @type {HTMLElement} */
+      target) || null; // If the element that is about to receive focus is outside the
+      // area, move focus to a div and insert it at the start or end of
+      // the area, depending on the direction. Without preventing default
+      // behaviour, the browser will then move focus to the next element.
+
+      if (node.contains(nextElement)) {
         return;
       }
 
-      const tabbables = _dom.focus.tabbable.find(node);
+      const domAction = shiftKey ? 'append' : 'prepend';
+      const {
+        ownerDocument
+      } = node;
+      const trap = ownerDocument.createElement('div');
+      trap.tabIndex = -1;
+      node[domAction](trap);
+      trap.focus(); // Remove after the browser moves focus to the next element.
 
-      if (!tabbables.length) {
-        return;
-      }
+      timeoutId = setTimeout(() => node.removeChild(trap));
+    }
 
-      const firstTabbable = tabbables[0];
-      const lastTabbable = tabbables[tabbables.length - 1];
-
-      if (event.shiftKey && event.target === firstTabbable) {
-        event.preventDefault();
-        /** @type {HTMLElement} */
-
-        lastTabbable.focus();
-      } else if (!event.shiftKey && event.target === lastTabbable) {
-        event.preventDefault();
-        /** @type {HTMLElement} */
-
-        firstTabbable.focus();
-        /*
-         * When pressing Tab and none of the tabbables has focus, the keydown
-         * event happens on the wrapper div: move focus on the first tabbable.
-         */
-      } else if (!tabbables.includes(
-      /** @type {Element} */
-      event.target)) {
-        event.preventDefault();
-        /** @type {HTMLElement} */
-
-        firstTabbable.focus();
-      }
-    });
+    node.addEventListener('keydown', onKeyDown);
+    return () => {
+      node.removeEventListener('keydown', onKeyDown);
+      clearTimeout(timeoutId);
+    };
   }, []);
-  return ref;
 }
 
 var _default = useConstrainedTabbing;

package/build/hooks/use-constrained-tabbing/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-constrained-tabbing/index.js"],"names":["useConstrainedTabbing","ref","node","addEventListener","event","window","KeyboardEvent","keyCode","TAB","tabbables","focus","tabbable","find","length","firstTabbable","lastTabbable","shiftKey","target","preventDefault","includes"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,qBAAT,GAAiC;AAChC,QAAMC,GAAG,GAAG;AAAe;AAAuBC,EAAAA,IAAzB,IAAmC;AAC3D,QAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AACDA,IAAAA,IAAI,CAACC,gBAAL,CAAuB,SAAvB;AAAoC;AAAqBC,IAAAA,KAAvB,IAAkC;AACnE,UAAK,EAAIA,KAAK,YAAYC,MAAM,CAACC,aAA5B,CAAL,EAAmD;AAClD;AACA;;AAED,UAAKF,KAAK,CAACG,OAAN,KAAkBC,aAAvB,EAA6B;AAC5B;AACA;;AAED,YAAMC,SAAS,GAAGC,WAAMC,QAAN,CAAeC,IAAf,CAAqBV,IAArB,CAAlB;;AACA,UAAK,CAAEO,SAAS,CAACI,MAAjB,EAA0B;AACzB;AACA;;AACD,YAAMC,aAAa,GAAGL,SAAS,CAAE,CAAF,CAA/B;AACA,YAAMM,YAAY,GAAGN,SAAS,CAAEA,SAAS,CAACI,MAAV,GAAmB,CAArB,CAA9B;;AAEA,UAAKT,KAAK,CAACY,QAAN,IAAkBZ,KAAK,CAACa,MAAN,KAAiBH,aAAxC,EAAwD;AACvDV,QAAAA,KAAK,CAACc,cAAN;AACA;;AAA6BH,QAAAA,YAAF,CAAiBL,KAAjB;AAC3B,OAHD,MAGO,IAAK,CAAEN,KAAK,CAACY,QAAR,IAAoBZ,KAAK,CAACa,MAAN,KAAiBF,YAA1C,EAAyD;AAC/DX,QAAAA,KAAK,CAACc,cAAN;AACA;;AAA6BJ,QAAAA,aAAF,CAAkBJ,KAAlB;AAC3B;AACJ;AACA;AACA;AACI,OAPM,MAOA,IACN,CAAED,SAAS,CAACU,QAAV;AAAoB;AAAyBf,MAAAA,KAAK,CAACa,MAAnD,CADI,EAEL;AACDb,QAAAA,KAAK,CAACc,cAAN;AACA;;AAA6BJ,QAAAA,aAAF,CAAkBJ,KAAlB;AAC3B;AACD,KAhCD;AAiCA,GArCW,EAqCT,EArCS,CAAZ;AAuCA,SAAOT,GAAP;AACA;;eAEcD,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { TAB } from '@wordpress/keycodes';\nimport { focus } from '@wordpress/dom';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * In Dialogs/modals, the tabbing must be constrained to the content of\n * the wrapper element. This hook adds the behavior to the returned ref.\n *\n * @return {import('react').RefCallback<Element>} Element Ref.\n *\n * @example\n * ```js\n * import { useConstrainedTabbing } from '@wordpress/compose';\n *\n * const ConstrainedTabbingExample = () => {\n *     const constrainedTabbingRef = useConstrainedTabbing()\n *     return (\n *         <div ref={ constrainedTabbingRef }>\n *             <Button />\n *             <Button />\n *         </div>\n *     );\n * }\n * ```\n */\nfunction useConstrainedTabbing() {\n\tconst ref = useCallback( ( /** @type {Element} */ node ) => {\n\t\tif ( ! node ) {\n\t\t\treturn;\n\t\t}\n\t\tnode.addEventListener( 'keydown', ( /** @type {Event} */ event ) => {\n\t\t\tif ( ! ( event instanceof window.KeyboardEvent ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( event.keyCode !== TAB ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst tabbables = focus.tabbable.find( node );\n\t\t\tif ( ! tabbables.length ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst firstTabbable = tabbables[ 0 ];\n\t\t\tconst lastTabbable = tabbables[ tabbables.length - 1 ];\n\n\t\t\tif ( event.shiftKey && event.target === firstTabbable ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\t/** @type {HTMLElement} */ ( lastTabbable ).focus();\n\t\t\t} else if ( ! event.shiftKey && event.target === lastTabbable ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\t/** @type {HTMLElement} */ ( firstTabbable ).focus();\n\t\t\t\t/*\n\t\t\t\t * When pressing Tab and none of the tabbables has focus, the keydown\n\t\t\t\t * event happens on the wrapper div: move focus on the first tabbable.\n\t\t\t\t */\n\t\t\t} else if (\n\t\t\t\t! tabbables.includes( /** @type {Element} */ ( event.target ) )\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\t/** @type {HTMLElement} */ ( firstTabbable ).focus();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn ref;\n}\n\nexport default useConstrainedTabbing;\n"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-constrained-tabbing/index.js"],"names":["useConstrainedTabbing","node","timeoutId","onKeyDown","event","keyCode","shiftKey","target","TAB","action","nextElement","focus","tabbable","contains","domAction","ownerDocument","trap","createElement","tabIndex","setTimeout","removeChild","addEventListener","removeEventListener","clearTimeout"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;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;AACA,SAASA,qBAAT,GAAiC;AAChC,SAAO;AAAgB;AAA2BC,EAAAA,IAA7B,IAAuC;AAC3D;AACA,QAAIC,SAAJ;;AAEA,aAASC,SAAT;AAAoB;AAA6BC,IAAAA,KAAjD,EAAyD;AACxD,YAAM;AAAEC,QAAAA,OAAF;AAAWC,QAAAA,QAAX;AAAqBC,QAAAA;AAArB,UAAgCH,KAAtC;;AAEA,UAAKC,OAAO,KAAKG,aAAjB,EAAuB;AACtB;AACA;;AAED,YAAMC,MAAM,GAAGH,QAAQ,GAAG,cAAH,GAAoB,UAA3C;AACA,YAAMI,WAAW,GAChBC,WAAMC,QAAN,CAAgBH,MAAhB;AACC;AAA6BF,MAAAA,MAD9B,KAEK,IAHN,CARwD,CAaxD;AACA;AACA;AACA;;AACA,UAAKN,IAAI,CAACY,QAAL,CAAeH,WAAf,CAAL,EAAoC;AACnC;AACA;;AAED,YAAMI,SAAS,GAAGR,QAAQ,GAAG,QAAH,GAAc,SAAxC;AACA,YAAM;AAAES,QAAAA;AAAF,UAAoBd,IAA1B;AACA,YAAMe,IAAI,GAAGD,aAAa,CAACE,aAAd,CAA6B,KAA7B,CAAb;AAEAD,MAAAA,IAAI,CAACE,QAAL,GAAgB,CAAC,CAAjB;AACAjB,MAAAA,IAAI,CAAEa,SAAF,CAAJ,CAAmBE,IAAnB;AACAA,MAAAA,IAAI,CAACL,KAAL,GA3BwD,CA4BxD;;AACAT,MAAAA,SAAS,GAAGiB,UAAU,CAAE,MAAMlB,IAAI,CAACmB,WAAL,CAAkBJ,IAAlB,CAAR,CAAtB;AACA;;AAEDf,IAAAA,IAAI,CAACoB,gBAAL,CAAuB,SAAvB,EAAkClB,SAAlC;AACA,WAAO,MAAM;AACZF,MAAAA,IAAI,CAACqB,mBAAL,CAA0B,SAA1B,EAAqCnB,SAArC;AACAoB,MAAAA,YAAY,CAAErB,SAAF,CAAZ;AACA,KAHD;AAIA,GAzCM,EAyCJ,EAzCI,CAAP;AA0CA;;eAEcF,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { TAB } from '@wordpress/keycodes';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * In Dialogs/modals, the tabbing must be constrained to the content of\n * the wrapper element. This hook adds the behavior to the returned ref.\n *\n * @return {import('react').RefCallback<Element>} Element Ref.\n *\n * @example\n * ```js\n * import { useConstrainedTabbing } from '@wordpress/compose';\n *\n * const ConstrainedTabbingExample = () => {\n *     const constrainedTabbingRef = useConstrainedTabbing()\n *     return (\n *         <div ref={ constrainedTabbingRef }>\n *             <Button />\n *             <Button />\n *         </div>\n *     );\n * }\n * ```\n */\nfunction useConstrainedTabbing() {\n\treturn useRefEffect( ( /** @type {HTMLElement} */ node ) => {\n\t\t/** @type {number|undefined} */\n\t\tlet timeoutId;\n\n\t\tfunction onKeyDown( /** @type {KeyboardEvent} */ event ) {\n\t\t\tconst { keyCode, shiftKey, target } = event;\n\n\t\t\tif ( keyCode !== TAB ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst action = shiftKey ? 'findPrevious' : 'findNext';\n\t\t\tconst nextElement =\n\t\t\t\tfocus.tabbable[ action ](\n\t\t\t\t\t/** @type {HTMLElement} */ ( target )\n\t\t\t\t) || null;\n\n\t\t\t// If the element that is about to receive focus is outside the\n\t\t\t// area, move focus to a div and insert it at the start or end of\n\t\t\t// the area, depending on the direction. Without preventing default\n\t\t\t// behaviour, the browser will then move focus to the next element.\n\t\t\tif ( node.contains( nextElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst domAction = shiftKey ? 'append' : 'prepend';\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst trap = ownerDocument.createElement( 'div' );\n\n\t\t\ttrap.tabIndex = -1;\n\t\t\tnode[ domAction ]( trap );\n\t\t\ttrap.focus();\n\t\t\t// Remove after the browser moves focus to the next element.\n\t\t\ttimeoutId = setTimeout( () => node.removeChild( trap ) );\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t\tclearTimeout( timeoutId );\n\t\t};\n\t}, [] );\n}\n\nexport default useConstrainedTabbing;\n"]}

package/build/hooks/use-debounce/index.js

@@ -34,7 +34,7 @@ var _element = require("@wordpress/element");
  * @param {TFunc}                             fn        The function to debounce.
  * @param {number}                            [wait]    The number of milliseconds to delay.
  * @param {import('lodash').DebounceSettings} [options] The options object.
- * @return {TFunc & import('lodash').Cancelable} Debounced function.
+ * @return {import('lodash').DebouncedFunc<TFunc>} Debounced function.
  */
 function useDebounce(fn, wait, options) {
   /* eslint-enable jsdoc/valid-types */

package/build/hooks/use-debounce/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-debounce/index.js"],"names":["useDebounce","fn","wait","options","debounced","cancel"],"mappings":";;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,WAAT,CAAsBC,EAAtB,EAA0BC,IAA1B,EAAgCC,OAAhC,EAA0C;AACxD;AACA,QAAMC,SAAS,GAAG,4BAAY,MAAM,sBAAUH,EAAV,EAAcC,IAAd,EAAoBC,OAApB,CAAlB,EAAiD,CAClEF,EADkE,EAElEC,IAFkE,EAGlEC,OAHkE,CAAjD,CAAlB;AAKA,0BAAW,MAAM,MAAMC,SAAS,CAACC,MAAV,EAAvB,EAA2C,CAAED,SAAF,CAA3C;AACA,SAAOA,SAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { debounce } from 'lodash';\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Debounces a function with Lodash's `debounce`. A new debounced function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to debounce, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://docs-lodash.com/v4/debounce/\n *\n * @template {(...args: any[]) => void} TFunc\n *\n * @param {TFunc}                             fn        The function to debounce.\n * @param {number}                            [wait]    The number of milliseconds to delay.\n * @param {import('lodash').DebounceSettings} [options] The options object.\n * @return {TFunc & import('lodash').Cancelable} Debounced function.\n */\nexport default function useDebounce( fn, wait, options ) {\n\t/* eslint-enable jsdoc/valid-types */\n\tconst debounced = useMemoOne( () => debounce( fn, wait, options ), [\n\t\tfn,\n\t\twait,\n\t\toptions,\n\t] );\n\tuseEffect( () => () => debounced.cancel(), [ debounced ] );\n\treturn debounced;\n}\n"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-debounce/index.js"],"names":["useDebounce","fn","wait","options","debounced","cancel"],"mappings":";;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,WAAT,CAAsBC,EAAtB,EAA0BC,IAA1B,EAAgCC,OAAhC,EAA0C;AACxD;AACA,QAAMC,SAAS,GAAG,4BAAY,MAAM,sBAAUH,EAAV,EAAcC,IAAd,EAAoBC,OAApB,CAAlB,EAAiD,CAClEF,EADkE,EAElEC,IAFkE,EAGlEC,OAHkE,CAAjD,CAAlB;AAKA,0BAAW,MAAM,MAAMC,SAAS,CAACC,MAAV,EAAvB,EAA2C,CAAED,SAAF,CAA3C;AACA,SAAOA,SAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { debounce } from 'lodash';\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Debounces a function with Lodash's `debounce`. A new debounced function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to debounce, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://docs-lodash.com/v4/debounce/\n *\n * @template {(...args: any[]) => void} TFunc\n *\n * @param {TFunc}                             fn        The function to debounce.\n * @param {number}                            [wait]    The number of milliseconds to delay.\n * @param {import('lodash').DebounceSettings} [options] The options object.\n * @return {import('lodash').DebouncedFunc<TFunc>} Debounced function.\n */\nexport default function useDebounce( fn, wait, options ) {\n\t/* eslint-enable jsdoc/valid-types */\n\tconst debounced = useMemoOne( () => debounce( fn, wait, options ), [\n\t\tfn,\n\t\twait,\n\t\toptions,\n\t] );\n\tuseEffect( () => () => debounced.cancel(), [ debounced ] );\n\treturn debounced;\n}\n"]}

package/build/hooks/use-drop-zone/index.js

@@ -87,15 +87,23 @@ function useDropZone({
     /**
      * Checks if an element is in the drop zone.
      *
-     * @param {HTMLElement|null} elementToCheck
+     * @param {EventTarget|null} targetToCheck
      *
      * @return {boolean} True if in drop zone, false if not.
      */
 
-    function isElementInZone(elementToCheck) {
-      if (!elementToCheck || !element.contains(elementToCheck)) {
+    function isElementInZone(targetToCheck) {
+      const {
+        defaultView
+      } = ownerDocument;
+
+      if (!targetToCheck || !defaultView || !(targetToCheck instanceof defaultView.HTMLElement) || !element.contains(targetToCheck)) {
         return false;
       }
+      /** @type {HTMLElement|null} */
+
+
+      let elementToCheck = targetToCheck;
 
       do {
         if (elementToCheck.dataset.isDropZone) {
@@ -167,9 +175,7 @@ function useDropZone({
       // leaving the drop zone, which means the `relatedTarget`
       // (element that has been entered) should be outside the drop
       // zone.
-      if (isElementInZone(
-      /** @type {HTMLElement|null} */
-      event.relatedTarget)) {
+      if (isElementInZone(event.relatedTarget)) {
         return;
       }
 

package/build/hooks/use-drop-zone/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-drop-zone/index.js"],"names":["useFreshRef","value","ref","current","useDropZone","isDisabled","onDrop","_onDrop","onDragStart","_onDragStart","onDragEnter","_onDragEnter","onDragLeave","_onDragLeave","onDragEnd","_onDragEnd","onDragOver","_onDragOver","onDropRef","onDragStartRef","onDragEnterRef","onDragLeaveRef","onDragEndRef","onDragOverRef","element","isDragging","ownerDocument","isElementInZone","elementToCheck","contains","dataset","isDropZone","parentElement","maybeDragStart","event","removeEventListener","addEventListener","maybeDragEnd","preventDefault","relatedTarget","defaultPrevented","dataTransfer","files","length"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @param {T} value\n * @return {import('react').MutableRefObject<T>} A ref with the value.\n */\nfunction useFreshRef( value ) {\n\t/* eslint-enable jsdoc/valid-types */\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<T>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\t// Disable reason: We're doing something pretty JavaScript-y here where the\n\t// ref will always have a current value that is not null or undefined but it\n\t// needs to start as undefined. We don't want to change the return type so\n\t// it's easier to just ts-ignore this specific line that's complaining about\n\t// undefined not being part of T.\n\t// @ts-ignore\n\tconst ref = useRef();\n\tref.current = value;\n\treturn ref;\n}\n\n/**\n * A hook to facilitate drag and drop handling.\n *\n * @param {Object}                  props             Named parameters.\n * @param {boolean}                 props.isDisabled  Whether or not to disable the drop zone.\n * @param {(e: DragEvent) => void}  props.onDragStart Called when dragging has started.\n * @param {(e: DragEvent) => void}  props.onDragEnter Called when the zone is entered.\n * @param {(e: DragEvent) => void}  props.onDragOver  Called when the zone is moved within.\n * @param {(e: DragEvent) => void}  props.onDragLeave Called when the zone is left.\n * @param {(e: MouseEvent) => void} props.onDragEnd   Called when dragging has ended.\n * @param {(e: DragEvent) => void}  props.onDrop      Called when dropping in the zone.\n *\n * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.\n */\nexport default function useDropZone( {\n\tisDisabled,\n\tonDrop: _onDrop,\n\tonDragStart: _onDragStart,\n\tonDragEnter: _onDragEnter,\n\tonDragLeave: _onDragLeave,\n\tonDragEnd: _onDragEnd,\n\tonDragOver: _onDragOver,\n} ) {\n\tconst onDropRef = useFreshRef( _onDrop );\n\tconst onDragStartRef = useFreshRef( _onDragStart );\n\tconst onDragEnterRef = useFreshRef( _onDragEnter );\n\tconst onDragLeaveRef = useFreshRef( _onDragLeave );\n\tconst onDragEndRef = useFreshRef( _onDragEnd );\n\tconst onDragOverRef = useFreshRef( _onDragOver );\n\n\treturn useRefEffect(\n\t\t( element ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet isDragging = false;\n\n\t\t\tconst { ownerDocument } = element;\n\n\t\t\t/**\n\t\t\t * Checks if an element is in the drop zone.\n\t\t\t *\n\t\t\t * @param {HTMLElement|null} elementToCheck\n\t\t\t *\n\t\t\t * @return {boolean} True if in drop zone, false if not.\n\t\t\t */\n\t\t\tfunction isElementInZone( elementToCheck ) {\n\t\t\t\tif (\n\t\t\t\t\t! elementToCheck ||\n\t\t\t\t\t! element.contains( elementToCheck )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tdo {\n\t\t\t\t\tif ( elementToCheck.dataset.isDropZone ) {\n\t\t\t\t\t\treturn elementToCheck === element;\n\t\t\t\t\t}\n\t\t\t\t} while ( ( elementToCheck = elementToCheck.parentElement ) );\n\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tfunction maybeDragStart( /** @type {DragEvent} */ event ) {\n\t\t\t\tif ( isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = true;\n\n\t\t\t\townerDocument.removeEventListener(\n\t\t\t\t\t'dragenter',\n\t\t\t\t\tmaybeDragStart\n\t\t\t\t);\n\n\t\t\t\t// Note that `dragend` doesn't fire consistently for file and\n\t\t\t\t// HTML drag events where the drag origin is outside the browser\n\t\t\t\t// window. In Firefox it may also not fire if the originating\n\t\t\t\t// node is removed.\n\t\t\t\townerDocument.addEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragStartRef.current ) {\n\t\t\t\t\tonDragStartRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragEnter( /** @type {DragEvent} */ event ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// The `dragenter` event will also fire when entering child\n\t\t\t\t// elements, but we only want to call `onDragEnter` when\n\t\t\t\t// entering the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been left) should be outside the drop zone.\n\t\t\t\tif (\n\t\t\t\t\telement.contains(\n\t\t\t\t\t\t/** @type {Node} */ ( event.relatedTarget )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragEnterRef.current ) {\n\t\t\t\t\tonDragEnterRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Only call onDragOver for the innermost hovered drop zones.\n\t\t\t\tif ( ! event.defaultPrevented && onDragOverRef.current ) {\n\t\t\t\t\tonDragOverRef.current( event );\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDragOver` is already handled.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tfunction onDragLeave( /** @type {DragEvent} */ event ) {\n\t\t\t\t// The `dragleave` event will also fire when leaving child\n\t\t\t\t// elements, but we only want to call `onDragLeave` when\n\t\t\t\t// leaving the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been entered) should be outside the drop\n\t\t\t\t// zone.\n\t\t\t\tif (\n\t\t\t\t\tisElementInZone(\n\t\t\t\t\t\t/** @type {HTMLElement|null} */ ( event.relatedTarget )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragLeaveRef.current ) {\n\t\t\t\t\tonDragLeaveRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDrop( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Don't handle drop if an inner drop zone already handled it.\n\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDrop` is already handled.\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// This seemingly useless line has been shown to resolve a\n\t\t\t\t// Safari issue where files dragged directly from the dock are\n\t\t\t\t// not recognized.\n\t\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\t\tevent.dataTransfer && event.dataTransfer.files.length;\n\n\t\t\t\tif ( onDropRef.current ) {\n\t\t\t\t\tonDropRef.current( event );\n\t\t\t\t}\n\n\t\t\t\tmaybeDragEnd( event );\n\t\t\t}\n\n\t\t\tfunction maybeDragEnd( /** @type {MouseEvent} */ event ) {\n\t\t\t\tif ( ! isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = false;\n\n\t\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragEndRef.current ) {\n\t\t\t\t\tonDragEndRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telement.dataset.isDropZone = 'true';\n\t\t\telement.addEventListener( 'drop', onDrop );\n\t\t\telement.addEventListener( 'dragenter', onDragEnter );\n\t\t\telement.addEventListener( 'dragover', onDragOver );\n\t\t\telement.addEventListener( 'dragleave', onDragLeave );\n\t\t\t// The `dragstart` event doesn't fire if the drag started outside\n\t\t\t// the document.\n\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\n\t\t\treturn () => {\n\t\t\t\tdelete element.dataset.isDropZone;\n\t\t\t\telement.removeEventListener( 'drop', onDrop );\n\t\t\t\telement.removeEventListener( 'dragenter', onDragEnter );\n\t\t\t\telement.removeEventListener( 'dragover', onDragOver );\n\t\t\t\telement.removeEventListener( 'dragleave', onDragLeave );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\t\t\t};\n\t\t},\n\t\t[ isDisabled ]\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-drop-zone/index.js"],"names":["useFreshRef","value","ref","current","useDropZone","isDisabled","onDrop","_onDrop","onDragStart","_onDragStart","onDragEnter","_onDragEnter","onDragLeave","_onDragLeave","onDragEnd","_onDragEnd","onDragOver","_onDragOver","onDropRef","onDragStartRef","onDragEnterRef","onDragLeaveRef","onDragEndRef","onDragOverRef","element","isDragging","ownerDocument","isElementInZone","targetToCheck","defaultView","HTMLElement","contains","elementToCheck","dataset","isDropZone","parentElement","maybeDragStart","event","removeEventListener","addEventListener","maybeDragEnd","preventDefault","relatedTarget","defaultPrevented","dataTransfer","files","length"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @param {T} value\n * @return {import('react').MutableRefObject<T>} A ref with the value.\n */\nfunction useFreshRef( value ) {\n\t/* eslint-enable jsdoc/valid-types */\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<T>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\t// Disable reason: We're doing something pretty JavaScript-y here where the\n\t// ref will always have a current value that is not null or undefined but it\n\t// needs to start as undefined. We don't want to change the return type so\n\t// it's easier to just ts-ignore this specific line that's complaining about\n\t// undefined not being part of T.\n\t// @ts-ignore\n\tconst ref = useRef();\n\tref.current = value;\n\treturn ref;\n}\n\n/**\n * A hook to facilitate drag and drop handling.\n *\n * @param {Object}                  props             Named parameters.\n * @param {boolean}                 props.isDisabled  Whether or not to disable the drop zone.\n * @param {(e: DragEvent) => void}  props.onDragStart Called when dragging has started.\n * @param {(e: DragEvent) => void}  props.onDragEnter Called when the zone is entered.\n * @param {(e: DragEvent) => void}  props.onDragOver  Called when the zone is moved within.\n * @param {(e: DragEvent) => void}  props.onDragLeave Called when the zone is left.\n * @param {(e: MouseEvent) => void} props.onDragEnd   Called when dragging has ended.\n * @param {(e: DragEvent) => void}  props.onDrop      Called when dropping in the zone.\n *\n * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.\n */\nexport default function useDropZone( {\n\tisDisabled,\n\tonDrop: _onDrop,\n\tonDragStart: _onDragStart,\n\tonDragEnter: _onDragEnter,\n\tonDragLeave: _onDragLeave,\n\tonDragEnd: _onDragEnd,\n\tonDragOver: _onDragOver,\n} ) {\n\tconst onDropRef = useFreshRef( _onDrop );\n\tconst onDragStartRef = useFreshRef( _onDragStart );\n\tconst onDragEnterRef = useFreshRef( _onDragEnter );\n\tconst onDragLeaveRef = useFreshRef( _onDragLeave );\n\tconst onDragEndRef = useFreshRef( _onDragEnd );\n\tconst onDragOverRef = useFreshRef( _onDragOver );\n\n\treturn useRefEffect(\n\t\t( element ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet isDragging = false;\n\n\t\t\tconst { ownerDocument } = element;\n\n\t\t\t/**\n\t\t\t * Checks if an element is in the drop zone.\n\t\t\t *\n\t\t\t * @param {EventTarget|null} targetToCheck\n\t\t\t *\n\t\t\t * @return {boolean} True if in drop zone, false if not.\n\t\t\t */\n\t\t\tfunction isElementInZone( targetToCheck ) {\n\t\t\t\tconst { defaultView } = ownerDocument;\n\t\t\t\tif (\n\t\t\t\t\t! targetToCheck ||\n\t\t\t\t\t! defaultView ||\n\t\t\t\t\t! ( targetToCheck instanceof defaultView.HTMLElement ) ||\n\t\t\t\t\t! element.contains( targetToCheck )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\t/** @type {HTMLElement|null} */\n\t\t\t\tlet elementToCheck = targetToCheck;\n\n\t\t\t\tdo {\n\t\t\t\t\tif ( elementToCheck.dataset.isDropZone ) {\n\t\t\t\t\t\treturn elementToCheck === element;\n\t\t\t\t\t}\n\t\t\t\t} while ( ( elementToCheck = elementToCheck.parentElement ) );\n\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tfunction maybeDragStart( /** @type {DragEvent} */ event ) {\n\t\t\t\tif ( isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = true;\n\n\t\t\t\townerDocument.removeEventListener(\n\t\t\t\t\t'dragenter',\n\t\t\t\t\tmaybeDragStart\n\t\t\t\t);\n\n\t\t\t\t// Note that `dragend` doesn't fire consistently for file and\n\t\t\t\t// HTML drag events where the drag origin is outside the browser\n\t\t\t\t// window. In Firefox it may also not fire if the originating\n\t\t\t\t// node is removed.\n\t\t\t\townerDocument.addEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragStartRef.current ) {\n\t\t\t\t\tonDragStartRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragEnter( /** @type {DragEvent} */ event ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// The `dragenter` event will also fire when entering child\n\t\t\t\t// elements, but we only want to call `onDragEnter` when\n\t\t\t\t// entering the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been left) should be outside the drop zone.\n\t\t\t\tif (\n\t\t\t\t\telement.contains(\n\t\t\t\t\t\t/** @type {Node} */ ( event.relatedTarget )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragEnterRef.current ) {\n\t\t\t\t\tonDragEnterRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Only call onDragOver for the innermost hovered drop zones.\n\t\t\t\tif ( ! event.defaultPrevented && onDragOverRef.current ) {\n\t\t\t\t\tonDragOverRef.current( event );\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDragOver` is already handled.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tfunction onDragLeave( /** @type {DragEvent} */ event ) {\n\t\t\t\t// The `dragleave` event will also fire when leaving child\n\t\t\t\t// elements, but we only want to call `onDragLeave` when\n\t\t\t\t// leaving the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been entered) should be outside the drop\n\t\t\t\t// zone.\n\t\t\t\tif ( isElementInZone( event.relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragLeaveRef.current ) {\n\t\t\t\t\tonDragLeaveRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDrop( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Don't handle drop if an inner drop zone already handled it.\n\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDrop` is already handled.\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// This seemingly useless line has been shown to resolve a\n\t\t\t\t// Safari issue where files dragged directly from the dock are\n\t\t\t\t// not recognized.\n\t\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\t\tevent.dataTransfer && event.dataTransfer.files.length;\n\n\t\t\t\tif ( onDropRef.current ) {\n\t\t\t\t\tonDropRef.current( event );\n\t\t\t\t}\n\n\t\t\t\tmaybeDragEnd( event );\n\t\t\t}\n\n\t\t\tfunction maybeDragEnd( /** @type {MouseEvent} */ event ) {\n\t\t\t\tif ( ! isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = false;\n\n\t\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragEndRef.current ) {\n\t\t\t\t\tonDragEndRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telement.dataset.isDropZone = 'true';\n\t\t\telement.addEventListener( 'drop', onDrop );\n\t\t\telement.addEventListener( 'dragenter', onDragEnter );\n\t\t\telement.addEventListener( 'dragover', onDragOver );\n\t\t\telement.addEventListener( 'dragleave', onDragLeave );\n\t\t\t// The `dragstart` event doesn't fire if the drag started outside\n\t\t\t// the document.\n\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\n\t\t\treturn () => {\n\t\t\t\tdelete element.dataset.isDropZone;\n\t\t\t\telement.removeEventListener( 'drop', onDrop );\n\t\t\t\telement.removeEventListener( 'dragenter', onDragEnter );\n\t\t\t\telement.removeEventListener( 'dragover', onDragOver );\n\t\t\t\telement.removeEventListener( 'dragleave', onDragLeave );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\t\t\t};\n\t\t},\n\t\t[ isDisabled ]\n\t);\n}\n"]}

package/build/hooks/use-fixed-window-list/index.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFixedWindowList;
+
+var _lodash = require("lodash");
+
+var _element = require("@wordpress/element");
+
+var _dom = require("@wordpress/dom");
+
+var _keycodes = require("@wordpress/keycodes");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+const DEFAULT_INIT_WINDOW_SIZE = 30;
+/**
+ * @typedef {Object} WPFixedWindowList
+ *
+ * @property {number}                  visibleItems Items visible in the current viewport
+ * @property {number}                  start        Start index of the window
+ * @property {number}                  end          End index of the window
+ * @property {(index:number)=>boolean} itemInView   Returns true if item is in the window
+ */
+
+/**
+ * @typedef {Object} WPFixedWindowListOptions
+ *
+ * @property {number}  [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.
+ * @property {boolean} [useWindowing]   When false avoids calculating the window size
+ * @property {number}  [initWindowSize] Initial window size to use on first render before we can calculate the window size.
+ */
+
+/**
+ *
+ * @param {import('react').RefObject<HTMLElement>} elementRef Used to find the closest scroll container that contains element.
+ * @param { number }                               itemHeight Fixed item height in pixels
+ * @param { number }                               totalItems Total items in list
+ * @param { WPFixedWindowListOptions }             [options]  Options object
+ * @return {[ WPFixedWindowList, setFixedListWindow:(nextWindow:WPFixedWindowList)=>void]} Array with the fixed window list and setter
+ */
+
+function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
+  var _options$initWindowSi, _options$useWindowing;
+
+  const initWindowSize = (_options$initWindowSi = options === null || options === void 0 ? void 0 : options.initWindowSize) !== null && _options$initWindowSi !== void 0 ? _options$initWindowSi : DEFAULT_INIT_WINDOW_SIZE;
+  const useWindowing = (_options$useWindowing = options === null || options === void 0 ? void 0 : options.useWindowing) !== null && _options$useWindowing !== void 0 ? _options$useWindowing : true;
+  const [fixedListWindow, setFixedListWindow] = (0, _element.useState)({
+    visibleItems: initWindowSize,
+    start: 0,
+    end: initWindowSize,
+    itemInView:
+    /** @type {number} */
+    index => {
+      return index >= 0 && index <= initWindowSize;
+    }
+  });
+  (0, _element.useLayoutEffect)(() => {
+    var _scrollContainer$owne, _scrollContainer$owne2, _scrollContainer$owne3, _scrollContainer$owne4;
+
+    if (!useWindowing) {
+      return;
+    }
+
+    const scrollContainer = (0, _dom.getScrollContainer)(elementRef.current);
+
+    const measureWindow =
+    /** @type {boolean | undefined} */
+    initRender => {
+      var _options$windowOversc;
+
+      if (!scrollContainer) {
+        return;
+      }
+
+      const visibleItems = Math.ceil(scrollContainer.clientHeight / itemHeight); // Aim to keep opening list view fast, afterward we can optimize for scrolling
+
+      const windowOverscan = initRender ? visibleItems : (_options$windowOversc = options === null || options === void 0 ? void 0 : options.windowOverscan) !== null && _options$windowOversc !== void 0 ? _options$windowOversc : visibleItems;
+      const firstViewableIndex = Math.floor(scrollContainer.scrollTop / itemHeight);
+      const start = Math.max(0, firstViewableIndex - windowOverscan);
+      const end = Math.min(totalItems - 1, firstViewableIndex + visibleItems + windowOverscan);
+      setFixedListWindow(lastWindow => {
+        const nextWindow = {
+          visibleItems,
+          start,
+          end,
+          itemInView:
+          /** @type {number} */
+          index => {
+            return start <= index && index <= end;
+          }
+        };
+
+        if (lastWindow.start !== nextWindow.start || lastWindow.end !== nextWindow.end || lastWindow.visibleItems !== nextWindow.visibleItems) {
+          return nextWindow;
+        }
+
+        return lastWindow;
+      });
+    };
+
+    measureWindow(true);
+    const debounceMeasureList = (0, _lodash.debounce)(() => {
+      measureWindow();
+    }, 16);
+    scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener('scroll', debounceMeasureList);
+    scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne = scrollContainer.ownerDocument) === null || _scrollContainer$owne === void 0 ? void 0 : (_scrollContainer$owne2 = _scrollContainer$owne.defaultView) === null || _scrollContainer$owne2 === void 0 ? void 0 : _scrollContainer$owne2.addEventListener('resize', debounceMeasureList);
+    scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne3 = scrollContainer.ownerDocument) === null || _scrollContainer$owne3 === void 0 ? void 0 : (_scrollContainer$owne4 = _scrollContainer$owne3.defaultView) === null || _scrollContainer$owne4 === void 0 ? void 0 : _scrollContainer$owne4.addEventListener('resize', debounceMeasureList);
+    return () => {
+      var _scrollContainer$owne5, _scrollContainer$owne6;
+
+      scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('scroll', debounceMeasureList);
+      scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne5 = scrollContainer.ownerDocument) === null || _scrollContainer$owne5 === void 0 ? void 0 : (_scrollContainer$owne6 = _scrollContainer$owne5.defaultView) === null || _scrollContainer$owne6 === void 0 ? void 0 : _scrollContainer$owne6.removeEventListener('resize', debounceMeasureList);
+    };
+  }, [itemHeight, elementRef, totalItems]);
+  (0, _element.useLayoutEffect)(() => {
+    var _scrollContainer$owne7, _scrollContainer$owne8;
+
+    if (!useWindowing) {
+      return;
+    }
+
+    const scrollContainer = (0, _dom.getScrollContainer)(elementRef.current);
+
+    const handleKeyDown =
+    /** @type {KeyboardEvent} */
+    event => {
+      switch (event.keyCode) {
+        case _keycodes.HOME:
+          {
+            return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
+              top: 0
+            });
+          }
+
+        case _keycodes.END:
+          {
+            return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
+              top: totalItems * itemHeight
+            });
+          }
+
+        case _keycodes.PAGEUP:
+          {
+            return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
+              top: scrollContainer.scrollTop - fixedListWindow.visibleItems * itemHeight
+            });
+          }
+
+        case _keycodes.PAGEDOWN:
+          {
+            return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
+              top: scrollContainer.scrollTop + fixedListWindow.visibleItems * itemHeight
+            });
+          }
+      }
+    };
+
+    scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne7 = scrollContainer.ownerDocument) === null || _scrollContainer$owne7 === void 0 ? void 0 : (_scrollContainer$owne8 = _scrollContainer$owne7.defaultView) === null || _scrollContainer$owne8 === void 0 ? void 0 : _scrollContainer$owne8.addEventListener('keydown', handleKeyDown);
+    return () => {
+      var _scrollContainer$owne9, _scrollContainer$owne10;
+
+      scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne9 = scrollContainer.ownerDocument) === null || _scrollContainer$owne9 === void 0 ? void 0 : (_scrollContainer$owne10 = _scrollContainer$owne9.defaultView) === null || _scrollContainer$owne10 === void 0 ? void 0 : _scrollContainer$owne10.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [totalItems, itemHeight, elementRef, fixedListWindow.visibleItems]);
+  return [fixedListWindow, setFixedListWindow];
+}
+//# sourceMappingURL=index.js.map

package/build/hooks/use-fixed-window-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-fixed-window-list/index.js"],"names":["DEFAULT_INIT_WINDOW_SIZE","useFixedWindowList","elementRef","itemHeight","totalItems","options","initWindowSize","useWindowing","fixedListWindow","setFixedListWindow","visibleItems","start","end","itemInView","index","scrollContainer","current","measureWindow","initRender","Math","ceil","clientHeight","windowOverscan","firstViewableIndex","floor","scrollTop","max","min","lastWindow","nextWindow","debounceMeasureList","addEventListener","ownerDocument","defaultView","removeEventListener","handleKeyDown","event","keyCode","HOME","scrollTo","top","END","PAGEUP","PAGEDOWN"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { debounce } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\n\nconst DEFAULT_INIT_WINDOW_SIZE = 30;\n\n/**\n * @typedef {Object} WPFixedWindowList\n *\n * @property {number}                  visibleItems Items visible in the current viewport\n * @property {number}                  start        Start index of the window\n * @property {number}                  end          End index of the window\n * @property {(index:number)=>boolean} itemInView   Returns true if item is in the window\n */\n\n/**\n * @typedef {Object} WPFixedWindowListOptions\n *\n * @property {number}  [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.\n * @property {boolean} [useWindowing]   When false avoids calculating the window size\n * @property {number}  [initWindowSize] Initial window size to use on first render before we can calculate the window size.\n */\n\n/**\n *\n * @param {import('react').RefObject<HTMLElement>} elementRef Used to find the closest scroll container that contains element.\n * @param { number }                               itemHeight Fixed item height in pixels\n * @param { number }                               totalItems Total items in list\n * @param { WPFixedWindowListOptions }             [options]  Options object\n * @return {[ WPFixedWindowList, setFixedListWindow:(nextWindow:WPFixedWindowList)=>void]} Array with the fixed window list and setter\n */\nexport default function useFixedWindowList(\n\telementRef,\n\titemHeight,\n\ttotalItems,\n\toptions\n) {\n\tconst initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;\n\tconst useWindowing = options?.useWindowing ?? true;\n\n\tconst [ fixedListWindow, setFixedListWindow ] = useState( {\n\t\tvisibleItems: initWindowSize,\n\t\tstart: 0,\n\t\tend: initWindowSize,\n\t\titemInView: ( /** @type {number} */ index ) => {\n\t\t\treturn index >= 0 && index <= initWindowSize;\n\t\t},\n\t} );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tconst measureWindow = (\n\t\t\t/** @type {boolean | undefined} */ initRender\n\t\t) => {\n\t\t\tif ( ! scrollContainer ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst visibleItems = Math.ceil(\n\t\t\t\tscrollContainer.clientHeight / itemHeight\n\t\t\t);\n\t\t\t// Aim to keep opening list view fast, afterward we can optimize for scrolling\n\t\t\tconst windowOverscan = initRender\n\t\t\t\t? visibleItems\n\t\t\t\t: options?.windowOverscan ?? visibleItems;\n\t\t\tconst firstViewableIndex = Math.floor(\n\t\t\t\tscrollContainer.scrollTop / itemHeight\n\t\t\t);\n\t\t\tconst start = Math.max( 0, firstViewableIndex - windowOverscan );\n\t\t\tconst end = Math.min(\n\t\t\t\ttotalItems - 1,\n\t\t\t\tfirstViewableIndex + visibleItems + windowOverscan\n\t\t\t);\n\t\t\tsetFixedListWindow( ( lastWindow ) => {\n\t\t\t\tconst nextWindow = {\n\t\t\t\t\tvisibleItems,\n\t\t\t\t\tstart,\n\t\t\t\t\tend,\n\t\t\t\t\titemInView: ( /** @type {number} */ index ) => {\n\t\t\t\t\t\treturn start <= index && index <= end;\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\tif (\n\t\t\t\t\tlastWindow.start !== nextWindow.start ||\n\t\t\t\t\tlastWindow.end !== nextWindow.end ||\n\t\t\t\t\tlastWindow.visibleItems !== nextWindow.visibleItems\n\t\t\t\t) {\n\t\t\t\t\treturn nextWindow;\n\t\t\t\t}\n\t\t\t\treturn lastWindow;\n\t\t\t} );\n\t\t};\n\n\t\tmeasureWindow( true );\n\t\tconst debounceMeasureList = debounce( () => {\n\t\t\tmeasureWindow();\n\t\t}, 16 );\n\t\tscrollContainer?.addEventListener( 'scroll', debounceMeasureList );\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'resize',\n\t\t\tdebounceMeasureList\n\t\t);\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'resize',\n\t\t\tdebounceMeasureList\n\t\t);\n\n\t\treturn () => {\n\t\t\tscrollContainer?.removeEventListener(\n\t\t\t\t'scroll',\n\t\t\t\tdebounceMeasureList\n\t\t\t);\n\t\t\tscrollContainer?.ownerDocument?.defaultView?.removeEventListener(\n\t\t\t\t'resize',\n\t\t\t\tdebounceMeasureList\n\t\t\t);\n\t\t};\n\t}, [ itemHeight, elementRef, totalItems ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tconst handleKeyDown = ( /** @type {KeyboardEvent} */ event ) => {\n\t\t\tswitch ( event.keyCode ) {\n\t\t\t\tcase HOME: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( { top: 0 } );\n\t\t\t\t}\n\t\t\t\tcase END: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop: totalItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEUP: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop -\n\t\t\t\t\t\t\tfixedListWindow.visibleItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEDOWN: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop +\n\t\t\t\t\t\t\tfixedListWindow.visibleItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'keydown',\n\t\t\thandleKeyDown\n\t\t);\n\t\treturn () => {\n\t\t\tscrollContainer?.ownerDocument?.defaultView?.removeEventListener(\n\t\t\t\t'keydown',\n\t\t\t\thandleKeyDown\n\t\t\t);\n\t\t};\n\t}, [ totalItems, itemHeight, elementRef, fixedListWindow.visibleItems ] );\n\n\treturn [ fixedListWindow, setFixedListWindow ];\n}\n"]}