@wordpress/compose 7.9.0 → 7.10.0
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 +2 -0
- package/build/higher-order/with-global-events/index.js +4 -4
- package/build/higher-order/with-global-events/index.js.map +1 -1
- package/build/higher-order/with-global-events/listener.js +5 -5
- package/build/higher-order/with-global-events/listener.js.map +1 -1
- package/build/higher-order/with-state/index.js +1 -1
- package/build/higher-order/with-state/index.js.map +1 -1
- package/build/hooks/use-constrained-tabbing/index.js +4 -4
- package/build/hooks/use-constrained-tabbing/index.js.map +1 -1
- package/build/hooks/use-drop-zone/index.js +7 -7
- package/build/hooks/use-drop-zone/index.js.map +1 -1
- package/build/hooks/use-fixed-window-list/index.js +4 -4
- package/build/hooks/use-fixed-window-list/index.js.map +1 -1
- package/build/hooks/use-focus-outside/index.native.js +1 -1
- package/build/hooks/use-focus-outside/index.native.js.map +1 -1
- package/build/hooks/use-instance-id/index.js.map +1 -1
- package/build/hooks/use-keyboard-shortcut/index.js +3 -2
- package/build/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build/hooks/use-viewport-match/index.js +1 -1
- package/build/hooks/use-viewport-match/index.js.map +1 -1
- package/build/hooks/use-warn-on-change/index.js +2 -2
- package/build/hooks/use-warn-on-change/index.js.map +1 -1
- package/build/utils/create-higher-order-component/index.js.map +1 -1
- package/build/utils/observable-map/index.js +1 -0
- package/build/utils/observable-map/index.js.map +1 -1
- package/build-module/higher-order/with-global-events/index.js +4 -4
- package/build-module/higher-order/with-global-events/index.js.map +1 -1
- package/build-module/higher-order/with-global-events/listener.js +5 -5
- package/build-module/higher-order/with-global-events/listener.js.map +1 -1
- package/build-module/higher-order/with-state/index.js +1 -1
- package/build-module/higher-order/with-state/index.js.map +1 -1
- package/build-module/hooks/use-constrained-tabbing/index.js +4 -4
- package/build-module/hooks/use-constrained-tabbing/index.js.map +1 -1
- package/build-module/hooks/use-drop-zone/index.js +7 -7
- package/build-module/hooks/use-drop-zone/index.js.map +1 -1
- package/build-module/hooks/use-fixed-window-list/index.js +4 -4
- package/build-module/hooks/use-fixed-window-list/index.js.map +1 -1
- package/build-module/hooks/use-focus-outside/index.native.js +1 -1
- package/build-module/hooks/use-focus-outside/index.native.js.map +1 -1
- package/build-module/hooks/use-instance-id/index.js.map +1 -1
- package/build-module/hooks/use-keyboard-shortcut/index.js +3 -2
- package/build-module/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build-module/hooks/use-viewport-match/index.js +1 -1
- package/build-module/hooks/use-viewport-match/index.js.map +1 -1
- package/build-module/hooks/use-warn-on-change/index.js +2 -2
- package/build-module/hooks/use-warn-on-change/index.js.map +1 -1
- package/build-module/utils/create-higher-order-component/index.js.map +1 -1
- package/build-module/utils/observable-map/index.js +1 -0
- package/build-module/utils/observable-map/index.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_element","require","_useMediaQuery","_interopRequireDefault","BREAKPOINTS","xhuge","huge","wide","xlarge","large","medium","small","mobile","CONDITIONS","OPERATOR_EVALUATORS",">=","breakpointValue","width","<","ViewportMatchWidthContext","createContext","useViewportMatch","breakpoint","operator","simulatedWidth","useContext","mediaQuery","mediaQueryResult","useMediaQuery","undefined","__experimentalWidthProvider","Provider","_default","exports","default"],"sources":["@wordpress/compose/src/hooks/use-viewport-match/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * @typedef {\"xhuge\" | \"huge\" | \"wide\" | \"xlarge\" | \"large\" | \"medium\" | \"small\" | \"mobile\"} WPBreakpoint\n */\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n *\n * @type {Record<WPBreakpoint, number>}\n */\nconst BREAKPOINTS = {\n\txhuge: 1920,\n\thuge: 1440,\n\twide: 1280,\n\txlarge: 1080,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * @typedef {\">=\" | \"<\"} WPViewportOperator\n */\n\n/**\n * Object mapping media query operators to the condition to be used.\n *\n * @type {Record<WPViewportOperator, string>}\n */\nconst CONDITIONS = {\n\t'>=': 'min-width',\n\t'<': 'max-width',\n};\n\n/**\n * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.\n *\n * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}\n */\nconst OPERATOR_EVALUATORS = {\n\t'>=': ( breakpointValue, width ) => width >= breakpointValue,\n\t'<': ( breakpointValue, width ) => width < breakpointValue,\n};\n\nconst ViewportMatchWidthContext = createContext(\n\t/** @type {null | number} */ ( null )\n);\n\n/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param {WPBreakpoint} breakpoint Breakpoint size name.\n * @param {WPViewportOperator} [operator=\">=\"] Viewport operator.\n *\n * @example\n *\n * ```js\n * useViewportMatch( 'huge', '<' );\n * useViewportMatch( 'medium' );\n * ```\n *\n * @return {boolean} Whether viewport matches query.\n */\nconst useViewportMatch = ( breakpoint, operator = '>=' ) => {\n\tconst simulatedWidth = useContext( ViewportMatchWidthContext );\n\tconst mediaQuery =\n\t\t! simulatedWidth &&\n\t\t`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;\n\tconst mediaQueryResult = useMediaQuery( mediaQuery || undefined );\n\tif ( simulatedWidth ) {\n\t\treturn OPERATOR_EVALUATORS[ operator ](\n\t\t\tBREAKPOINTS[ breakpoint ],\n\t\t\tsimulatedWidth\n\t\t);\n\t}\n\treturn mediaQueryResult;\n};\n\nuseViewportMatch.__experimentalWidthProvider =\n\tViewportMatchWidthContext.Provider;\n\nexport default useViewportMatch;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,cAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,WAAW,GAAG;EACnBC,KAAK,EAAE,IAAI;EACXC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,MAAM,EAAE,IAAI;EACZC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE;AACT,CAAC;;AAED;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG;EAClB,IAAI,EAAE,WAAW;EACjB,GAAG,EAAE;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAG;EAC3B,IAAI,EAAEC,CAAEC,eAAe,EAAEC,KAAK,KAAMA,KAAK,IAAID,eAAe;EAC5D,GAAG,EAAEE,CAAEF,eAAe,EAAEC,KAAK,KAAMA,KAAK,GAAGD;AAC5C,CAAC;AAED,MAAMG,yBAAyB,GAAG,IAAAC,sBAAa,
|
|
1
|
+
{"version":3,"names":["_element","require","_useMediaQuery","_interopRequireDefault","BREAKPOINTS","xhuge","huge","wide","xlarge","large","medium","small","mobile","CONDITIONS","OPERATOR_EVALUATORS",">=","breakpointValue","width","<","ViewportMatchWidthContext","createContext","useViewportMatch","breakpoint","operator","simulatedWidth","useContext","mediaQuery","mediaQueryResult","useMediaQuery","undefined","__experimentalWidthProvider","Provider","_default","exports","default"],"sources":["@wordpress/compose/src/hooks/use-viewport-match/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * @typedef {\"xhuge\" | \"huge\" | \"wide\" | \"xlarge\" | \"large\" | \"medium\" | \"small\" | \"mobile\"} WPBreakpoint\n */\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n *\n * @type {Record<WPBreakpoint, number>}\n */\nconst BREAKPOINTS = {\n\txhuge: 1920,\n\thuge: 1440,\n\twide: 1280,\n\txlarge: 1080,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * @typedef {\">=\" | \"<\"} WPViewportOperator\n */\n\n/**\n * Object mapping media query operators to the condition to be used.\n *\n * @type {Record<WPViewportOperator, string>}\n */\nconst CONDITIONS = {\n\t'>=': 'min-width',\n\t'<': 'max-width',\n};\n\n/**\n * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.\n *\n * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}\n */\nconst OPERATOR_EVALUATORS = {\n\t'>=': ( breakpointValue, width ) => width >= breakpointValue,\n\t'<': ( breakpointValue, width ) => width < breakpointValue,\n};\n\nconst ViewportMatchWidthContext = createContext(\n\t/** @type {null | number} */ ( null )\n);\n\n/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param {WPBreakpoint} breakpoint Breakpoint size name.\n * @param {WPViewportOperator} [operator=\">=\"] Viewport operator.\n *\n * @example\n *\n * ```js\n * useViewportMatch( 'huge', '<' );\n * useViewportMatch( 'medium' );\n * ```\n *\n * @return {boolean} Whether viewport matches query.\n */\nconst useViewportMatch = ( breakpoint, operator = '>=' ) => {\n\tconst simulatedWidth = useContext( ViewportMatchWidthContext );\n\tconst mediaQuery =\n\t\t! simulatedWidth &&\n\t\t`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;\n\tconst mediaQueryResult = useMediaQuery( mediaQuery || undefined );\n\tif ( simulatedWidth ) {\n\t\treturn OPERATOR_EVALUATORS[ operator ](\n\t\t\tBREAKPOINTS[ breakpoint ],\n\t\t\tsimulatedWidth\n\t\t);\n\t}\n\treturn mediaQueryResult;\n};\n\nuseViewportMatch.__experimentalWidthProvider =\n\tViewportMatchWidthContext.Provider;\n\nexport default useViewportMatch;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,cAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,WAAW,GAAG;EACnBC,KAAK,EAAE,IAAI;EACXC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,MAAM,EAAE,IAAI;EACZC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE;AACT,CAAC;;AAED;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG;EAClB,IAAI,EAAE,WAAW;EACjB,GAAG,EAAE;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAG;EAC3B,IAAI,EAAEC,CAAEC,eAAe,EAAEC,KAAK,KAAMA,KAAK,IAAID,eAAe;EAC5D,GAAG,EAAEE,CAAEF,eAAe,EAAEC,KAAK,KAAMA,KAAK,GAAGD;AAC5C,CAAC;AAED,MAAMG,yBAAyB,GAAG,IAAAC,sBAAa,EAC9C,4BAA+B,IAChC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGA,CAAEC,UAAU,EAAEC,QAAQ,GAAG,IAAI,KAAM;EAC3D,MAAMC,cAAc,GAAG,IAAAC,mBAAU,EAAEN,yBAA0B,CAAC;EAC9D,MAAMO,UAAU,GACf,CAAEF,cAAc,IAChB,IAAKX,UAAU,CAAEU,QAAQ,CAAE,KAAOnB,WAAW,CAAEkB,UAAU,CAAE,KAAM;EAClE,MAAMK,gBAAgB,GAAG,IAAAC,sBAAa,EAAEF,UAAU,IAAIG,SAAU,CAAC;EACjE,IAAKL,cAAc,EAAG;IACrB,OAAOV,mBAAmB,CAAES,QAAQ,CAAE,CACrCnB,WAAW,CAAEkB,UAAU,CAAE,EACzBE,cACD,CAAC;EACF;EACA,OAAOG,gBAAgB;AACxB,CAAC;AAEDN,gBAAgB,CAACS,2BAA2B,GAC3CX,yBAAyB,CAACY,QAAQ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAErBb,gBAAgB","ignoreList":[]}
|
|
@@ -34,9 +34,9 @@ var _usePrevious = _interopRequireDefault(require("../use-previous"));
|
|
|
34
34
|
function useWarnOnChange(object, prefix = 'Change detection') {
|
|
35
35
|
const previousValues = (0, _usePrevious.default)(object);
|
|
36
36
|
Object.entries(previousValues !== null && previousValues !== void 0 ? previousValues : []).forEach(([key, value]) => {
|
|
37
|
-
if (value !== object[(
|
|
37
|
+
if (value !== object[(/** @type {keyof typeof object} */key)]) {
|
|
38
38
|
// eslint-disable-next-line no-console
|
|
39
|
-
console.warn(`${prefix}: ${key} key changed:`, value, object[(
|
|
39
|
+
console.warn(`${prefix}: ${key} key changed:`, value, object[(/** @type {keyof typeof object} */key)]
|
|
40
40
|
/* eslint-enable jsdoc/check-types */);
|
|
41
41
|
}
|
|
42
42
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_usePrevious","_interopRequireDefault","require","useWarnOnChange","object","prefix","previousValues","usePrevious","Object","entries","forEach","key","value","console","warn","_default","exports","default"],"sources":["@wordpress/compose/src/hooks/use-warn-on-change/index.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport usePrevious from '../use-previous';\n\n// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case\n// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript\n/* eslint-disable jsdoc/check-types */\n/**\n * Hook that performs a shallow comparison between the preview value of an object\n * and the new one, if there's a difference, it prints it to the console.\n * this is useful in performance related work, to check why a component re-renders.\n *\n * @example\n *\n * ```jsx\n * function MyComponent(props) {\n * useWarnOnChange(props);\n *\n * return \"Something\";\n * }\n * ```\n *\n * @param {object} object Object which changes to compare.\n * @param {string} prefix Just a prefix to show when console logging.\n */\nfunction useWarnOnChange( object, prefix = 'Change detection' ) {\n\tconst previousValues = usePrevious( object );\n\n\tObject.entries( previousValues ?? [] ).forEach( ( [ key, value ] ) => {\n\t\tif ( value !== object[ /** @type {keyof typeof object} */ ( key ) ] ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`${ prefix }: ${ key } key changed:`,\n\t\t\t\tvalue,\n\t\t\t\tobject[ /** @type {keyof typeof object} */ ( key ) ]\n\t\t\t\t/* eslint-enable jsdoc/check-types */\n\t\t\t);\n\t\t}\n\t} );\n}\n\nexport default useWarnOnChange;\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAEC,MAAM,EAAEC,MAAM,GAAG,kBAAkB,EAAG;EAC/D,MAAMC,cAAc,GAAG,IAAAC,oBAAW,EAAEH,MAAO,CAAC;EAE5CI,MAAM,CAACC,OAAO,CAAEH,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,EAAG,CAAC,CAACI,OAAO,CAAE,CAAE,CAAEC,GAAG,EAAEC,KAAK,CAAE,KAAM;IACrE,IAAKA,KAAK,KAAKR,MAAM,
|
|
1
|
+
{"version":3,"names":["_usePrevious","_interopRequireDefault","require","useWarnOnChange","object","prefix","previousValues","usePrevious","Object","entries","forEach","key","value","console","warn","_default","exports","default"],"sources":["@wordpress/compose/src/hooks/use-warn-on-change/index.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport usePrevious from '../use-previous';\n\n// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case\n// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript\n/* eslint-disable jsdoc/check-types */\n/**\n * Hook that performs a shallow comparison between the preview value of an object\n * and the new one, if there's a difference, it prints it to the console.\n * this is useful in performance related work, to check why a component re-renders.\n *\n * @example\n *\n * ```jsx\n * function MyComponent(props) {\n * useWarnOnChange(props);\n *\n * return \"Something\";\n * }\n * ```\n *\n * @param {object} object Object which changes to compare.\n * @param {string} prefix Just a prefix to show when console logging.\n */\nfunction useWarnOnChange( object, prefix = 'Change detection' ) {\n\tconst previousValues = usePrevious( object );\n\n\tObject.entries( previousValues ?? [] ).forEach( ( [ key, value ] ) => {\n\t\tif ( value !== object[ /** @type {keyof typeof object} */ ( key ) ] ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`${ prefix }: ${ key } key changed:`,\n\t\t\t\tvalue,\n\t\t\t\tobject[ /** @type {keyof typeof object} */ ( key ) ]\n\t\t\t\t/* eslint-enable jsdoc/check-types */\n\t\t\t);\n\t\t}\n\t} );\n}\n\nexport default useWarnOnChange;\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAEC,MAAM,EAAEC,MAAM,GAAG,kBAAkB,EAAG;EAC/D,MAAMC,cAAc,GAAG,IAAAC,oBAAW,EAAEH,MAAO,CAAC;EAE5CI,MAAM,CAACC,OAAO,CAAEH,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,EAAG,CAAC,CAACI,OAAO,CAAE,CAAE,CAAEC,GAAG,EAAEC,KAAK,CAAE,KAAM;IACrE,IAAKA,KAAK,KAAKR,MAAM,EAAE,kCAAqCO,GAAG,EAAI,EAAG;MACrE;MACAE,OAAO,CAACC,IAAI,CACX,GAAIT,MAAM,KAAOM,GAAG,eAAgB,EACpCC,KAAK,EACLR,MAAM,EAAE,kCAAqCO,GAAG;MAChD,qCACD,CAAC;IACF;EACD,CAAE,CAAC;AACJ;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcd,eAAe","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_changeCase","require","createHigherOrderComponent","mapComponent","modifierName","Inner","Outer","displayName","hocName","name","inner","outer","pascalCase"],"sources":["@wordpress/compose/src/utils/create-higher-order-component/index.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { pascalCase } from 'change-case';\nimport type { ComponentType } from 'react';\n\ntype GetProps< C > = C extends ComponentType< infer P > ? P : never;\n\nexport type WithoutInjectedProps< C, I > = Omit< GetProps< C >, keyof I >;\n\nexport type WithInjectedProps< C, I > = ComponentType<\n\tWithoutInjectedProps< C, I > & I\n>;\n\n/**\n * Given a function mapping a component to an enhanced component and modifier\n * name, returns the enhanced component augmented with a generated displayName.\n *\n * @param mapComponent Function mapping component to enhanced component.\n * @param modifierName Seed name from which to generated display name.\n *\n * @return Component class with generated display name assigned.\n */\nexport function createHigherOrderComponent<\n\tTInner extends ComponentType< any >,\n\tTOuter extends ComponentType< any >,\n>( mapComponent: ( Inner: TInner ) => TOuter, modifierName: string ) {\n\treturn ( Inner: TInner ) => {\n\t\tconst Outer = mapComponent( Inner );\n\t\tOuter.displayName = hocName( modifierName, Inner );\n\t\treturn Outer;\n\t};\n}\n\n/**\n * Returns a displayName for a higher-order component, given a wrapper name.\n *\n * @example\n * hocName( 'MyMemo', Widget ) === 'MyMemo(Widget)';\n * hocName( 'MyMemo', <div /> ) === 'MyMemo(Component)';\n *\n * @param name Name assigned to higher-order component's wrapper component.\n * @param Inner Wrapped component inside higher-order component.\n * @return Wrapped name of higher-order component.\n */\nconst hocName = ( name: string, Inner: ComponentType< any > ) => {\n\tconst inner = Inner.displayName || Inner.name || 'Component';\n\tconst outer = pascalCase( name ?? '' );\n\n\treturn `${ outer }(${ inner })`;\n};\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,0BAA0BA,CAGvCC,YAAyC,EAAEC,YAAoB,EAAG;EACpE,OAASC,KAAa,IAAM;IAC3B,MAAMC,KAAK,GAAGH,YAAY,CAAEE,KAAM,CAAC;IACnCC,KAAK,CAACC,WAAW,GAAGC,OAAO,CAAEJ,YAAY,EAAEC,KAAM,CAAC;IAClD,OAAOC,KAAK;EACb,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,OAAO,GAAGA,CAAEC,IAAY,EAAEJ,KAA2B,KAAM;EAChE,MAAMK,KAAK,GAAGL,KAAK,CAACE,WAAW,IAAIF,KAAK,CAACI,IAAI,IAAI,WAAW;EAC5D,MAAME,KAAK,GAAG,IAAAC,sBAAU,EAAEH,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,EAAG,CAAC;EAEtC,
|
|
1
|
+
{"version":3,"names":["_changeCase","require","createHigherOrderComponent","mapComponent","modifierName","Inner","Outer","displayName","hocName","name","inner","outer","pascalCase"],"sources":["@wordpress/compose/src/utils/create-higher-order-component/index.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { pascalCase } from 'change-case';\nimport type { ComponentType } from 'react';\n\ntype GetProps< C > = C extends ComponentType< infer P > ? P : never;\n\nexport type WithoutInjectedProps< C, I > = Omit< GetProps< C >, keyof I >;\n\nexport type WithInjectedProps< C, I > = ComponentType<\n\tWithoutInjectedProps< C, I > & I\n>;\n\n/**\n * Given a function mapping a component to an enhanced component and modifier\n * name, returns the enhanced component augmented with a generated displayName.\n *\n * @param mapComponent Function mapping component to enhanced component.\n * @param modifierName Seed name from which to generated display name.\n *\n * @return Component class with generated display name assigned.\n */\nexport function createHigherOrderComponent<\n\tTInner extends ComponentType< any >,\n\tTOuter extends ComponentType< any >,\n>( mapComponent: ( Inner: TInner ) => TOuter, modifierName: string ) {\n\treturn ( Inner: TInner ) => {\n\t\tconst Outer = mapComponent( Inner );\n\t\tOuter.displayName = hocName( modifierName, Inner );\n\t\treturn Outer;\n\t};\n}\n\n/**\n * Returns a displayName for a higher-order component, given a wrapper name.\n *\n * @example\n * hocName( 'MyMemo', Widget ) === 'MyMemo(Widget)';\n * hocName( 'MyMemo', <div /> ) === 'MyMemo(Component)';\n *\n * @param name Name assigned to higher-order component's wrapper component.\n * @param Inner Wrapped component inside higher-order component.\n * @return Wrapped name of higher-order component.\n */\nconst hocName = ( name: string, Inner: ComponentType< any > ) => {\n\tconst inner = Inner.displayName || Inner.name || 'Component';\n\tconst outer = pascalCase( name ?? '' );\n\n\treturn `${ outer }(${ inner })`;\n};\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,0BAA0BA,CAGvCC,YAAyC,EAAEC,YAAoB,EAAG;EACpE,OAASC,KAAa,IAAM;IAC3B,MAAMC,KAAK,GAAGH,YAAY,CAAEE,KAAM,CAAC;IACnCC,KAAK,CAACC,WAAW,GAAGC,OAAO,CAAEJ,YAAY,EAAEC,KAAM,CAAC;IAClD,OAAOC,KAAK;EACb,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,OAAO,GAAGA,CAAEC,IAAY,EAAEJ,KAA2B,KAAM;EAChE,MAAMK,KAAK,GAAGL,KAAK,CAACE,WAAW,IAAIF,KAAK,CAACI,IAAI,IAAI,WAAW;EAC5D,MAAME,KAAK,GAAG,IAAAC,sBAAU,EAAEH,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,EAAG,CAAC;EAEtC,OAAO,GAAIE,KAAK,IAAMD,KAAK,GAAI;AAChC,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["observableMap","map","Map","listeners","callListeners","name","list","get","listener","set","value","delete","subscribe","Set","add","size"],"sources":["@wordpress/compose/src/utils/observable-map/index.ts"],"sourcesContent":["export type ObservableMap< K, V > = {\n\tget: ( name: K ) => V | undefined;\n\tset: ( name: K, value: V ) => void;\n\tdelete: ( name: K ) => void;\n\tsubscribe: ( name: K, listener: () => void ) => () => void;\n};\n\n/**\n * A constructor (factory) for `ObservableMap`, a map-like key/value data structure\n * where the individual entries are observable: using the `subscribe` method, you can\n * subscribe to updates for a particular keys. Each subscriber always observes one\n * specific key and is not notified about any unrelated changes (for different keys)\n * in the `ObservableMap`.\n *\n * @template K The type of the keys in the map.\n * @template V The type of the values in the map.\n * @return A new instance of the `ObservableMap` type.\n */\nexport function observableMap< K, V >(): ObservableMap< K, V > {\n\tconst map = new Map< K, V >();\n\tconst listeners = new Map< K, Set< () => void > >();\n\n\tfunction callListeners( name: K ) {\n\t\tconst list = listeners.get( name );\n\t\tif ( ! list ) {\n\t\t\treturn;\n\t\t}\n\t\tfor ( const listener of list ) {\n\t\t\tlistener();\n\t\t}\n\t}\n\n\treturn {\n\t\tget( name ) {\n\t\t\treturn map.get( name );\n\t\t},\n\t\tset( name, value ) {\n\t\t\tmap.set( name, value );\n\t\t\tcallListeners( name );\n\t\t},\n\t\tdelete( name ) {\n\t\t\tmap.delete( name );\n\t\t\tcallListeners( name );\n\t\t},\n\t\tsubscribe( name, listener ) {\n\t\t\tlet list = listeners.get( name );\n\t\t\tif ( ! list ) {\n\t\t\t\tlist = new Set();\n\t\t\t\tlisteners.set( name, list );\n\t\t\t}\n\t\t\tlist.add( listener );\n\n\t\t\treturn () => {\n\t\t\t\tlist.delete( listener );\n\t\t\t\tif ( list.size === 0 ) {\n\t\t\t\t\tlisteners.delete( name );\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t};\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["observableMap","map","Map","listeners","callListeners","name","list","get","listener","set","value","delete","subscribe","Set","add","size"],"sources":["@wordpress/compose/src/utils/observable-map/index.ts"],"sourcesContent":["export type ObservableMap< K, V > = {\n\tget: ( name: K ) => V | undefined;\n\tset: ( name: K, value: V ) => void;\n\tdelete: ( name: K ) => void;\n\tsubscribe: ( name: K, listener: () => void ) => () => void;\n};\n\n/**\n * A constructor (factory) for `ObservableMap`, a map-like key/value data structure\n * where the individual entries are observable: using the `subscribe` method, you can\n * subscribe to updates for a particular keys. Each subscriber always observes one\n * specific key and is not notified about any unrelated changes (for different keys)\n * in the `ObservableMap`.\n *\n * @template K The type of the keys in the map.\n * @template V The type of the values in the map.\n * @return A new instance of the `ObservableMap` type.\n */\nexport function observableMap< K, V >(): ObservableMap< K, V > {\n\tconst map = new Map< K, V >();\n\tconst listeners = new Map< K, Set< () => void > >();\n\n\tfunction callListeners( name: K ) {\n\t\tconst list = listeners.get( name );\n\t\tif ( ! list ) {\n\t\t\treturn;\n\t\t}\n\t\tfor ( const listener of list ) {\n\t\t\tlistener();\n\t\t}\n\t}\n\n\treturn {\n\t\tget( name ) {\n\t\t\treturn map.get( name );\n\t\t},\n\t\tset( name, value ) {\n\t\t\tmap.set( name, value );\n\t\t\tcallListeners( name );\n\t\t},\n\t\tdelete( name ) {\n\t\t\tmap.delete( name );\n\t\t\tcallListeners( name );\n\t\t},\n\t\tsubscribe( name, listener ) {\n\t\t\tlet list = listeners.get( name );\n\t\t\tif ( ! list ) {\n\t\t\t\tlist = new Set();\n\t\t\t\tlisteners.set( name, list );\n\t\t\t}\n\t\t\tlist.add( listener );\n\n\t\t\treturn () => {\n\t\t\t\tlist.delete( listener );\n\t\t\t\tif ( list.size === 0 ) {\n\t\t\t\t\tlisteners.delete( name );\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAaA,CAAA,EAAkC;EAC9D,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAAS,CAAC;EAC7B,MAAMC,SAAS,GAAG,IAAID,GAAG,CAAyB,CAAC;EAEnD,SAASE,aAAaA,CAAEC,IAAO,EAAG;IACjC,MAAMC,IAAI,GAAGH,SAAS,CAACI,GAAG,CAAEF,IAAK,CAAC;IAClC,IAAK,CAAEC,IAAI,EAAG;MACb;IACD;IACA,KAAM,MAAME,QAAQ,IAAIF,IAAI,EAAG;MAC9BE,QAAQ,CAAC,CAAC;IACX;EACD;EAEA,OAAO;IACND,GAAGA,CAAEF,IAAI,EAAG;MACX,OAAOJ,GAAG,CAACM,GAAG,CAAEF,IAAK,CAAC;IACvB,CAAC;IACDI,GAAGA,CAAEJ,IAAI,EAAEK,KAAK,EAAG;MAClBT,GAAG,CAACQ,GAAG,CAAEJ,IAAI,EAAEK,KAAM,CAAC;MACtBN,aAAa,CAAEC,IAAK,CAAC;IACtB,CAAC;IACDM,MAAMA,CAAEN,IAAI,EAAG;MACdJ,GAAG,CAACU,MAAM,CAAEN,IAAK,CAAC;MAClBD,aAAa,CAAEC,IAAK,CAAC;IACtB,CAAC;IACDO,SAASA,CAAEP,IAAI,EAAEG,QAAQ,EAAG;MAC3B,IAAIF,IAAI,GAAGH,SAAS,CAACI,GAAG,CAAEF,IAAK,CAAC;MAChC,IAAK,CAAEC,IAAI,EAAG;QACbA,IAAI,GAAG,IAAIO,GAAG,CAAC,CAAC;QAChBV,SAAS,CAACM,GAAG,CAAEJ,IAAI,EAAEC,IAAK,CAAC;MAC5B;MACAA,IAAI,CAACQ,GAAG,CAAEN,QAAS,CAAC;MAEpB,OAAO,MAAM;QACZF,IAAI,CAACK,MAAM,CAAEH,QAAS,CAAC;QACvB,IAAKF,IAAI,CAACS,IAAI,KAAK,CAAC,EAAG;UACtBZ,SAAS,CAACQ,MAAM,CAAEN,IAAK,CAAC;QACzB;MACD,CAAC;IACF;EACD,CAAC;AACF","ignoreList":[]}
|
|
@@ -45,7 +45,7 @@ export default function withGlobalEvents(eventTypesToHandlers) {
|
|
|
45
45
|
// @ts-ignore We don't need to fix the type-related issues because this is deprecated.
|
|
46
46
|
return createHigherOrderComponent(WrappedComponent => {
|
|
47
47
|
class Wrapper extends Component {
|
|
48
|
-
constructor(
|
|
48
|
+
constructor(/** @type {any} */props) {
|
|
49
49
|
super(props);
|
|
50
50
|
this.handleEvent = this.handleEvent.bind(this);
|
|
51
51
|
this.handleRef = this.handleRef.bind(this);
|
|
@@ -60,8 +60,8 @@ export default function withGlobalEvents(eventTypesToHandlers) {
|
|
|
60
60
|
listener.remove(eventType, this);
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
|
-
handleEvent(
|
|
64
|
-
const handler = eventTypesToHandlers[(
|
|
63
|
+
handleEvent(/** @type {any} */event) {
|
|
64
|
+
const handler = eventTypesToHandlers[(/** @type {keyof GlobalEventHandlersEventMap} */
|
|
65
65
|
event.type
|
|
66
66
|
|
|
67
67
|
/* eslint-enable jsdoc/no-undefined-types */)];
|
|
@@ -69,7 +69,7 @@ export default function withGlobalEvents(eventTypesToHandlers) {
|
|
|
69
69
|
this.wrappedRef[handler](event);
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
|
-
handleRef(
|
|
72
|
+
handleRef(/** @type {any} */el) {
|
|
73
73
|
this.wrappedRef = el;
|
|
74
74
|
// Any component using `withGlobalEvents` that is not setting a `ref`
|
|
75
75
|
// will cause `this.props.forwardedRef` to be `null`, so we need this
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,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,CAAE,kBAAmBW,KAAK,EAAG;QACvC,MAAMC,OAAO,GACZnB,oBAAoB,EACnB;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,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":[]}
|
|
@@ -9,7 +9,7 @@ class Listener {
|
|
|
9
9
|
this.listeners = {};
|
|
10
10
|
this.handleEvent = this.handleEvent.bind(this);
|
|
11
11
|
}
|
|
12
|
-
add(
|
|
12
|
+
add(/** @type {any} */eventType, /** @type {any} */instance) {
|
|
13
13
|
if (!this.listeners[eventType]) {
|
|
14
14
|
// Adding first listener for this type, so bind event.
|
|
15
15
|
window.addEventListener(eventType, this.handleEvent);
|
|
@@ -17,19 +17,19 @@ class Listener {
|
|
|
17
17
|
}
|
|
18
18
|
this.listeners[eventType].push(instance);
|
|
19
19
|
}
|
|
20
|
-
remove(
|
|
20
|
+
remove(/** @type {any} */eventType, /** @type {any} */instance) {
|
|
21
21
|
if (!this.listeners[eventType]) {
|
|
22
22
|
return;
|
|
23
23
|
}
|
|
24
|
-
this.listeners[eventType] = this.listeners[eventType].filter((
|
|
24
|
+
this.listeners[eventType] = this.listeners[eventType].filter((/** @type {any} */listener) => listener !== instance);
|
|
25
25
|
if (!this.listeners[eventType].length) {
|
|
26
26
|
// Removing last listener for this type, so unbind event.
|
|
27
27
|
window.removeEventListener(eventType, this.handleEvent);
|
|
28
28
|
delete this.listeners[eventType];
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
handleEvent(
|
|
32
|
-
this.listeners[event.type]?.forEach((
|
|
31
|
+
handleEvent(/** @type {any} */event) {
|
|
32
|
+
this.listeners[event.type]?.forEach((/** @type {any} */instance) => {
|
|
33
33
|
instance.handleEvent(event);
|
|
34
34
|
});
|
|
35
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Listener","constructor","listeners","handleEvent","bind","add","eventType","instance","window","addEventListener","push","remove","filter","listener","length","removeEventListener","event","type","forEach"],"sources":["@wordpress/compose/src/higher-order/with-global-events/listener.js"],"sourcesContent":["/**\n * Class responsible for orchestrating event handling on the global window,\n * binding a single event to be shared across all handling instances, and\n * removing the handler when no instances are listening for the event.\n */\nclass Listener {\n\tconstructor() {\n\t\t/** @type {any} */\n\t\tthis.listeners = {};\n\n\t\tthis.handleEvent = this.handleEvent.bind( this );\n\t}\n\n\tadd( /** @type {any} */ eventType, /** @type {any} */ instance ) {\n\t\tif ( ! this.listeners[ eventType ] ) {\n\t\t\t// Adding first listener for this type, so bind event.\n\t\t\twindow.addEventListener( eventType, this.handleEvent );\n\t\t\tthis.listeners[ eventType ] = [];\n\t\t}\n\n\t\tthis.listeners[ eventType ].push( instance );\n\t}\n\n\tremove( /** @type {any} */ eventType, /** @type {any} */ instance ) {\n\t\tif ( ! this.listeners[ eventType ] ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.listeners[ eventType ] = this.listeners[ eventType ].filter(\n\t\t\t( /** @type {any} */ listener ) => listener !== instance\n\t\t);\n\n\t\tif ( ! this.listeners[ eventType ].length ) {\n\t\t\t// Removing last listener for this type, so unbind event.\n\t\t\twindow.removeEventListener( eventType, this.handleEvent );\n\t\t\tdelete this.listeners[ eventType ];\n\t\t}\n\t}\n\n\thandleEvent( /** @type {any} */ event ) {\n\t\tthis.listeners[ event.type ]?.forEach(\n\t\t\t( /** @type {any} */ instance ) => {\n\t\t\t\tinstance.handleEvent( event );\n\t\t\t}\n\t\t);\n\t}\n}\n\nexport default Listener;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,MAAMA,QAAQ,CAAC;EACdC,WAAWA,CAAA,EAAG;IACb;IACA,IAAI,CAACC,SAAS,GAAG,CAAC,CAAC;IAEnB,IAAI,CAACC,WAAW,GAAG,IAAI,CAACA,WAAW,CAACC,IAAI,CAAE,IAAK,CAAC;EACjD;EAEAC,GAAGA,
|
|
1
|
+
{"version":3,"names":["Listener","constructor","listeners","handleEvent","bind","add","eventType","instance","window","addEventListener","push","remove","filter","listener","length","removeEventListener","event","type","forEach"],"sources":["@wordpress/compose/src/higher-order/with-global-events/listener.js"],"sourcesContent":["/**\n * Class responsible for orchestrating event handling on the global window,\n * binding a single event to be shared across all handling instances, and\n * removing the handler when no instances are listening for the event.\n */\nclass Listener {\n\tconstructor() {\n\t\t/** @type {any} */\n\t\tthis.listeners = {};\n\n\t\tthis.handleEvent = this.handleEvent.bind( this );\n\t}\n\n\tadd( /** @type {any} */ eventType, /** @type {any} */ instance ) {\n\t\tif ( ! this.listeners[ eventType ] ) {\n\t\t\t// Adding first listener for this type, so bind event.\n\t\t\twindow.addEventListener( eventType, this.handleEvent );\n\t\t\tthis.listeners[ eventType ] = [];\n\t\t}\n\n\t\tthis.listeners[ eventType ].push( instance );\n\t}\n\n\tremove( /** @type {any} */ eventType, /** @type {any} */ instance ) {\n\t\tif ( ! this.listeners[ eventType ] ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.listeners[ eventType ] = this.listeners[ eventType ].filter(\n\t\t\t( /** @type {any} */ listener ) => listener !== instance\n\t\t);\n\n\t\tif ( ! this.listeners[ eventType ].length ) {\n\t\t\t// Removing last listener for this type, so unbind event.\n\t\t\twindow.removeEventListener( eventType, this.handleEvent );\n\t\t\tdelete this.listeners[ eventType ];\n\t\t}\n\t}\n\n\thandleEvent( /** @type {any} */ event ) {\n\t\tthis.listeners[ event.type ]?.forEach(\n\t\t\t( /** @type {any} */ instance ) => {\n\t\t\t\tinstance.handleEvent( event );\n\t\t\t}\n\t\t);\n\t}\n}\n\nexport default Listener;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,MAAMA,QAAQ,CAAC;EACdC,WAAWA,CAAA,EAAG;IACb;IACA,IAAI,CAACC,SAAS,GAAG,CAAC,CAAC;IAEnB,IAAI,CAACC,WAAW,GAAG,IAAI,CAACA,WAAW,CAACC,IAAI,CAAE,IAAK,CAAC;EACjD;EAEAC,GAAGA,CAAE,kBAAmBC,SAAS,EAAE,kBAAmBC,QAAQ,EAAG;IAChE,IAAK,CAAE,IAAI,CAACL,SAAS,CAAEI,SAAS,CAAE,EAAG;MACpC;MACAE,MAAM,CAACC,gBAAgB,CAAEH,SAAS,EAAE,IAAI,CAACH,WAAY,CAAC;MACtD,IAAI,CAACD,SAAS,CAAEI,SAAS,CAAE,GAAG,EAAE;IACjC;IAEA,IAAI,CAACJ,SAAS,CAAEI,SAAS,CAAE,CAACI,IAAI,CAAEH,QAAS,CAAC;EAC7C;EAEAI,MAAMA,CAAE,kBAAmBL,SAAS,EAAE,kBAAmBC,QAAQ,EAAG;IACnE,IAAK,CAAE,IAAI,CAACL,SAAS,CAAEI,SAAS,CAAE,EAAG;MACpC;IACD;IAEA,IAAI,CAACJ,SAAS,CAAEI,SAAS,CAAE,GAAG,IAAI,CAACJ,SAAS,CAAEI,SAAS,CAAE,CAACM,MAAM,CAC/D,CAAE,kBAAmBC,QAAQ,KAAMA,QAAQ,KAAKN,QACjD,CAAC;IAED,IAAK,CAAE,IAAI,CAACL,SAAS,CAAEI,SAAS,CAAE,CAACQ,MAAM,EAAG;MAC3C;MACAN,MAAM,CAACO,mBAAmB,CAAET,SAAS,EAAE,IAAI,CAACH,WAAY,CAAC;MACzD,OAAO,IAAI,CAACD,SAAS,CAAEI,SAAS,CAAE;IACnC;EACD;EAEAH,WAAWA,CAAE,kBAAmBa,KAAK,EAAG;IACvC,IAAI,CAACd,SAAS,CAAEc,KAAK,CAACC,IAAI,CAAE,EAAEC,OAAO,CACpC,CAAE,kBAAmBX,QAAQ,KAAM;MAClCA,QAAQ,CAACJ,WAAW,CAAEa,KAAM,CAAC;IAC9B,CACD,CAAC;EACF;AACD;AAEA,eAAehB,QAAQ","ignoreList":[]}
|
|
@@ -27,7 +27,7 @@ export default function withState(initialState = {}) {
|
|
|
27
27
|
});
|
|
28
28
|
return createHigherOrderComponent(OriginalComponent => {
|
|
29
29
|
return class WrappedComponent extends Component {
|
|
30
|
-
constructor(
|
|
30
|
+
constructor(/** @type {any} */props) {
|
|
31
31
|
super(props);
|
|
32
32
|
this.setState = this.setState.bind(this);
|
|
33
33
|
this.state = initialState;
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,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":[]}
|
|
@@ -30,8 +30,8 @@ import useRefEffect from '../use-ref-effect';
|
|
|
30
30
|
* ```
|
|
31
31
|
*/
|
|
32
32
|
function useConstrainedTabbing() {
|
|
33
|
-
return useRefEffect((
|
|
34
|
-
function onKeyDown(
|
|
33
|
+
return useRefEffect((/** @type {HTMLElement} */node) => {
|
|
34
|
+
function onKeyDown(/** @type {KeyboardEvent} */event) {
|
|
35
35
|
const {
|
|
36
36
|
key,
|
|
37
37
|
shiftKey,
|
|
@@ -41,7 +41,7 @@ function useConstrainedTabbing() {
|
|
|
41
41
|
return;
|
|
42
42
|
}
|
|
43
43
|
const action = shiftKey ? 'findPrevious' : 'findNext';
|
|
44
|
-
const nextElement = focus.tabbable[action](
|
|
44
|
+
const nextElement = focus.tabbable[action](/** @type {HTMLElement} */target) || null;
|
|
45
45
|
|
|
46
46
|
// When the target element contains the element that is about to
|
|
47
47
|
// receive focus, for example when the target is a tabbable
|
|
@@ -49,7 +49,7 @@ function useConstrainedTabbing() {
|
|
|
49
49
|
// In this case we can't rely on native browsers behavior. We need
|
|
50
50
|
// to manage focus instead.
|
|
51
51
|
// See https://github.com/WordPress/gutenberg/issues/46041.
|
|
52
|
-
if (
|
|
52
|
+
if (/** @type {HTMLElement} */target.contains(nextElement)) {
|
|
53
53
|
event.preventDefault();
|
|
54
54
|
nextElement?.focus();
|
|
55
55
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["focus","useRefEffect","useConstrainedTabbing","node","onKeyDown","event","key","shiftKey","target","action","nextElement","tabbable","contains","preventDefault","domAction","ownerDocument","trap","createElement","tabIndex","addEventListener","removeChild","removeEventListener"],"sources":["@wordpress/compose/src/hooks/use-constrained-tabbing/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\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\tfunction onKeyDown( /** @type {KeyboardEvent} */ event ) {\n\t\t\tconst { key, shiftKey, target } = event;\n\n\t\t\tif ( key !== '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// When the target element contains the element that is about to\n\t\t\t// receive focus, for example when the target is a tabbable\n\t\t\t// container, browsers may disagree on where to move focus next.\n\t\t\t// In this case we can't rely on native browsers behavior. We need\n\t\t\t// to manage focus instead.\n\t\t\t// See https://github.com/WordPress/gutenberg/issues/46041.\n\t\t\tif (\n\t\t\t\t/** @type {HTMLElement} */ ( target ).contains( nextElement )\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tnextElement?.focus();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If the element that is about to receive focus is inside the\n\t\t\t// area, rely on native browsers behavior and let tabbing follow\n\t\t\t// the native tab sequence.\n\t\t\tif ( node.contains( nextElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\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\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\n\t\t\t// Remove itself when the trap loses focus.\n\t\t\ttrap.addEventListener( 'blur', () => node.removeChild( trap ) );\n\n\t\t\ttrap.focus();\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [] );\n}\n\nexport default useConstrainedTabbing;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,KAAK,QAAQ,gBAAgB;;AAEtC;AACA;AACA;AACA,OAAOC,YAAY,MAAM,mBAAmB;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,qBAAqBA,CAAA,EAAG;EAChC,OAAOD,YAAY,CAAE,
|
|
1
|
+
{"version":3,"names":["focus","useRefEffect","useConstrainedTabbing","node","onKeyDown","event","key","shiftKey","target","action","nextElement","tabbable","contains","preventDefault","domAction","ownerDocument","trap","createElement","tabIndex","addEventListener","removeChild","removeEventListener"],"sources":["@wordpress/compose/src/hooks/use-constrained-tabbing/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\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\tfunction onKeyDown( /** @type {KeyboardEvent} */ event ) {\n\t\t\tconst { key, shiftKey, target } = event;\n\n\t\t\tif ( key !== '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// When the target element contains the element that is about to\n\t\t\t// receive focus, for example when the target is a tabbable\n\t\t\t// container, browsers may disagree on where to move focus next.\n\t\t\t// In this case we can't rely on native browsers behavior. We need\n\t\t\t// to manage focus instead.\n\t\t\t// See https://github.com/WordPress/gutenberg/issues/46041.\n\t\t\tif (\n\t\t\t\t/** @type {HTMLElement} */ ( target ).contains( nextElement )\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tnextElement?.focus();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If the element that is about to receive focus is inside the\n\t\t\t// area, rely on native browsers behavior and let tabbing follow\n\t\t\t// the native tab sequence.\n\t\t\tif ( node.contains( nextElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\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\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\n\t\t\t// Remove itself when the trap loses focus.\n\t\t\ttrap.addEventListener( 'blur', () => node.removeChild( trap ) );\n\n\t\t\ttrap.focus();\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [] );\n}\n\nexport default useConstrainedTabbing;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,KAAK,QAAQ,gBAAgB;;AAEtC;AACA;AACA;AACA,OAAOC,YAAY,MAAM,mBAAmB;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,qBAAqBA,CAAA,EAAG;EAChC,OAAOD,YAAY,CAAE,CAAE,0BAA2BE,IAAI,KAAM;IAC3D,SAASC,SAASA,CAAE,4BAA6BC,KAAK,EAAG;MACxD,MAAM;QAAEC,GAAG;QAAEC,QAAQ;QAAEC;MAAO,CAAC,GAAGH,KAAK;MAEvC,IAAKC,GAAG,KAAK,KAAK,EAAG;QACpB;MACD;MAEA,MAAMG,MAAM,GAAGF,QAAQ,GAAG,cAAc,GAAG,UAAU;MACrD,MAAMG,WAAW,GAChBV,KAAK,CAACW,QAAQ,CAAEF,MAAM,CAAE,CACvB,0BAA6BD,MAC9B,CAAC,IAAI,IAAI;;MAEV;MACA;MACA;MACA;MACA;MACA;MACA,IACC,0BAA6BA,MAAM,CAAGI,QAAQ,CAAEF,WAAY,CAAC,EAC5D;QACDL,KAAK,CAACQ,cAAc,CAAC,CAAC;QACtBH,WAAW,EAAEV,KAAK,CAAC,CAAC;QACpB;MACD;;MAEA;MACA;MACA;MACA,IAAKG,IAAI,CAACS,QAAQ,CAAEF,WAAY,CAAC,EAAG;QACnC;MACD;;MAEA;MACA;MACA;MACA;MACA,MAAMI,SAAS,GAAGP,QAAQ,GAAG,QAAQ,GAAG,SAAS;MACjD,MAAM;QAAEQ;MAAc,CAAC,GAAGZ,IAAI;MAC9B,MAAMa,IAAI,GAAGD,aAAa,CAACE,aAAa,CAAE,KAAM,CAAC;MAEjDD,IAAI,CAACE,QAAQ,GAAG,CAAC,CAAC;MAClBf,IAAI,CAAEW,SAAS,CAAE,CAAEE,IAAK,CAAC;;MAEzB;MACAA,IAAI,CAACG,gBAAgB,CAAE,MAAM,EAAE,MAAMhB,IAAI,CAACiB,WAAW,CAAEJ,IAAK,CAAE,CAAC;MAE/DA,IAAI,CAAChB,KAAK,CAAC,CAAC;IACb;IAEAG,IAAI,CAACgB,gBAAgB,CAAE,SAAS,EAAEf,SAAU,CAAC;IAC7C,OAAO,MAAM;MACZD,IAAI,CAACkB,mBAAmB,CAAE,SAAS,EAAEjB,SAAU,CAAC;IACjD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;AACR;AAEA,eAAeF,qBAAqB","ignoreList":[]}
|
|
@@ -99,7 +99,7 @@ export default function useDropZone({
|
|
|
99
99
|
} while (elementToCheck = elementToCheck.parentElement);
|
|
100
100
|
return false;
|
|
101
101
|
}
|
|
102
|
-
function maybeDragStart(
|
|
102
|
+
function maybeDragStart(/** @type {DragEvent} */event) {
|
|
103
103
|
if (isDragging) {
|
|
104
104
|
return;
|
|
105
105
|
}
|
|
@@ -115,21 +115,21 @@ export default function useDropZone({
|
|
|
115
115
|
onDragStartRef.current(event);
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
|
-
function onDragEnter(
|
|
118
|
+
function onDragEnter(/** @type {DragEvent} */event) {
|
|
119
119
|
event.preventDefault();
|
|
120
120
|
|
|
121
121
|
// The `dragenter` event will also fire when entering child
|
|
122
122
|
// elements, but we only want to call `onDragEnter` when
|
|
123
123
|
// entering the drop zone, which means the `relatedTarget`
|
|
124
124
|
// (element that has been left) should be outside the drop zone.
|
|
125
|
-
if (element.contains(
|
|
125
|
+
if (element.contains(/** @type {Node} */event.relatedTarget)) {
|
|
126
126
|
return;
|
|
127
127
|
}
|
|
128
128
|
if (onDragEnterRef.current) {
|
|
129
129
|
onDragEnterRef.current(event);
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
|
-
function onDragOver(
|
|
132
|
+
function onDragOver(/** @type {DragEvent} */event) {
|
|
133
133
|
// Only call onDragOver for the innermost hovered drop zones.
|
|
134
134
|
if (!event.defaultPrevented && onDragOverRef.current) {
|
|
135
135
|
onDragOverRef.current(event);
|
|
@@ -139,7 +139,7 @@ export default function useDropZone({
|
|
|
139
139
|
// drop zones that `onDragOver` is already handled.
|
|
140
140
|
event.preventDefault();
|
|
141
141
|
}
|
|
142
|
-
function onDragLeave(
|
|
142
|
+
function onDragLeave(/** @type {DragEvent} */event) {
|
|
143
143
|
// The `dragleave` event will also fire when leaving child
|
|
144
144
|
// elements, but we only want to call `onDragLeave` when
|
|
145
145
|
// leaving the drop zone, which means the `relatedTarget`
|
|
@@ -155,7 +155,7 @@ export default function useDropZone({
|
|
|
155
155
|
onDragLeaveRef.current(event);
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
|
-
function onDrop(
|
|
158
|
+
function onDrop(/** @type {DragEvent} */event) {
|
|
159
159
|
// Don't handle drop if an inner drop zone already handled it.
|
|
160
160
|
if (event.defaultPrevented) {
|
|
161
161
|
return;
|
|
@@ -175,7 +175,7 @@ export default function useDropZone({
|
|
|
175
175
|
}
|
|
176
176
|
maybeDragEnd(event);
|
|
177
177
|
}
|
|
178
|
-
function maybeDragEnd(
|
|
178
|
+
function maybeDragEnd(/** @type {MouseEvent} */event) {
|
|
179
179
|
if (!isDragging) {
|
|
180
180
|
return;
|
|
181
181
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useRef","useRefEffect","useFreshRef","value","ref","current","useDropZone","dropZoneElement","isDisabled","onDrop","_onDrop","onDragStart","_onDragStart","onDragEnter","_onDragEnter","onDragLeave","_onDragLeave","onDragEnd","_onDragEnd","onDragOver","_onDragOver","onDropRef","onDragStartRef","onDragEnterRef","onDragLeaveRef","onDragEndRef","onDragOverRef","elem","element","isDragging","ownerDocument","isElementInZone","targetToCheck","defaultView","HTMLElement","contains","elementToCheck","dataset","isDropZone","parentElement","maybeDragStart","event","addEventListener","maybeDragEnd","preventDefault","relatedTarget","defaultPrevented","dataTransfer","files","length","removeEventListener"],"sources":["@wordpress/compose/src/hooks/use-drop-zone/index.js"],"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|null>} 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 {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.\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\tdropZoneElement,\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( elem ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If a custom dropZoneRef is passed, use that instead of the element.\n\t\t\t// This allows the dropzone to cover an expanded area, rather than\n\t\t\t// be restricted to the area of the ref returned by this hook.\n\t\t\tconst element = dropZoneElement ?? elem;\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\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\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\t// Note: This is not entirely reliable in Safari due to this bug\n\t\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=66547\n\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.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.removeEventListener(\n\t\t\t\t\t'dragenter',\n\t\t\t\t\tmaybeDragStart\n\t\t\t\t);\n\t\t\t};\n\t\t},\n\t\t[ isDisabled, dropZoneElement ] // Refresh when the passed in dropZoneElement changes.\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["useRef","useRefEffect","useFreshRef","value","ref","current","useDropZone","dropZoneElement","isDisabled","onDrop","_onDrop","onDragStart","_onDragStart","onDragEnter","_onDragEnter","onDragLeave","_onDragLeave","onDragEnd","_onDragEnd","onDragOver","_onDragOver","onDropRef","onDragStartRef","onDragEnterRef","onDragLeaveRef","onDragEndRef","onDragOverRef","elem","element","isDragging","ownerDocument","isElementInZone","targetToCheck","defaultView","HTMLElement","contains","elementToCheck","dataset","isDropZone","parentElement","maybeDragStart","event","addEventListener","maybeDragEnd","preventDefault","relatedTarget","defaultPrevented","dataTransfer","files","length","removeEventListener"],"sources":["@wordpress/compose/src/hooks/use-drop-zone/index.js"],"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|null>} 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 {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.\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\tdropZoneElement,\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( elem ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If a custom dropZoneRef is passed, use that instead of the element.\n\t\t\t// This allows the dropzone to cover an expanded area, rather than\n\t\t\t// be restricted to the area of the ref returned by this hook.\n\t\t\tconst element = dropZoneElement ?? elem;\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\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\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\t// Note: This is not entirely reliable in Safari due to this bug\n\t\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=66547\n\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.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.removeEventListener(\n\t\t\t\t\t'dragenter',\n\t\t\t\t\tmaybeDragStart\n\t\t\t\t);\n\t\t\t};\n\t\t},\n\t\t[ isDisabled, dropZoneElement ] // Refresh when the passed in dropZoneElement changes.\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -45,7 +45,7 @@ export default function useFixedWindowList(elementRef, itemHeight, totalItems, o
|
|
|
45
45
|
visibleItems: initWindowSize,
|
|
46
46
|
start: 0,
|
|
47
47
|
end: initWindowSize,
|
|
48
|
-
itemInView: (
|
|
48
|
+
itemInView: (/** @type {number} */index) => {
|
|
49
49
|
return index >= 0 && index <= initWindowSize;
|
|
50
50
|
}
|
|
51
51
|
});
|
|
@@ -54,7 +54,7 @@ export default function useFixedWindowList(elementRef, itemHeight, totalItems, o
|
|
|
54
54
|
return;
|
|
55
55
|
}
|
|
56
56
|
const scrollContainer = getScrollContainer(elementRef.current);
|
|
57
|
-
const measureWindow = (
|
|
57
|
+
const measureWindow = (/** @type {boolean | undefined} */initRender) => {
|
|
58
58
|
var _options$windowOversc;
|
|
59
59
|
if (!scrollContainer) {
|
|
60
60
|
return;
|
|
@@ -70,7 +70,7 @@ export default function useFixedWindowList(elementRef, itemHeight, totalItems, o
|
|
|
70
70
|
visibleItems,
|
|
71
71
|
start,
|
|
72
72
|
end,
|
|
73
|
-
itemInView: (
|
|
73
|
+
itemInView: (/** @type {number} */index) => {
|
|
74
74
|
return start <= index && index <= end;
|
|
75
75
|
}
|
|
76
76
|
};
|
|
@@ -97,7 +97,7 @@ export default function useFixedWindowList(elementRef, itemHeight, totalItems, o
|
|
|
97
97
|
return;
|
|
98
98
|
}
|
|
99
99
|
const scrollContainer = getScrollContainer(elementRef.current);
|
|
100
|
-
const handleKeyDown = (
|
|
100
|
+
const handleKeyDown = (/** @type {KeyboardEvent} */event) => {
|
|
101
101
|
switch (event.keyCode) {
|
|
102
102
|
case HOME:
|
|
103
103
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","useLayoutEffect","getScrollContainer","PAGEUP","PAGEDOWN","HOME","END","debounce","DEFAULT_INIT_WINDOW_SIZE","useFixedWindowList","elementRef","itemHeight","totalItems","options","_options$initWindowSi","_options$useWindowing","initWindowSize","useWindowing","fixedListWindow","setFixedListWindow","visibleItems","start","end","itemInView","index","scrollContainer","current","measureWindow","initRender","_options$windowOversc","Math","ceil","clientHeight","windowOverscan","firstViewableIndex","floor","scrollTop","max","min","lastWindow","nextWindow","debounceMeasureList","addEventListener","ownerDocument","defaultView","removeEventListener","expandedState","handleKeyDown","event","keyCode","scrollTo","top"],"sources":["@wordpress/compose/src/hooks/use-fixed-window-list/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\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 * @property {any} [expandedState] Used to recalculate the window size when the expanded state of a list changes.\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}, [\n\t\titemHeight,\n\t\telementRef,\n\t\ttotalItems,\n\t\toptions?.expandedState,\n\t\toptions?.windowOverscan,\n\t\tuseWindowing,\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 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}, [\n\t\ttotalItems,\n\t\titemHeight,\n\t\telementRef,\n\t\tfixedListWindow.visibleItems,\n\t\tuseWindowing,\n\t\toptions?.expandedState,\n\t] );\n\n\treturn [ fixedListWindow, setFixedListWindow ];\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["useState","useLayoutEffect","getScrollContainer","PAGEUP","PAGEDOWN","HOME","END","debounce","DEFAULT_INIT_WINDOW_SIZE","useFixedWindowList","elementRef","itemHeight","totalItems","options","_options$initWindowSi","_options$useWindowing","initWindowSize","useWindowing","fixedListWindow","setFixedListWindow","visibleItems","start","end","itemInView","index","scrollContainer","current","measureWindow","initRender","_options$windowOversc","Math","ceil","clientHeight","windowOverscan","firstViewableIndex","floor","scrollTop","max","min","lastWindow","nextWindow","debounceMeasureList","addEventListener","ownerDocument","defaultView","removeEventListener","expandedState","handleKeyDown","event","keyCode","scrollTo","top"],"sources":["@wordpress/compose/src/hooks/use-fixed-window-list/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\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 * @property {any} [expandedState] Used to recalculate the window size when the expanded state of a list changes.\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}, [\n\t\titemHeight,\n\t\telementRef,\n\t\ttotalItems,\n\t\toptions?.expandedState,\n\t\toptions?.windowOverscan,\n\t\tuseWindowing,\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 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}, [\n\t\ttotalItems,\n\t\titemHeight,\n\t\telementRef,\n\t\tfixedListWindow.visibleItems,\n\t\tuseWindowing,\n\t\toptions?.expandedState,\n\t] );\n\n\treturn [ fixedListWindow, setFixedListWindow ];\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -33,7 +33,7 @@ function isFocusNormalizedButton(eventTarget) {
|
|
|
33
33
|
case 'BUTTON':
|
|
34
34
|
return true;
|
|
35
35
|
case 'INPUT':
|
|
36
|
-
return INPUT_BUTTON_TYPES.includes(
|
|
36
|
+
return INPUT_BUTTON_TYPES.includes(/** @type {HTMLInputElement} */eventTarget.type);
|
|
37
37
|
}
|
|
38
38
|
return false;
|
|
39
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useEffect","useRef","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n *\n * @type {string[]}\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton\n */\n\n// Disable reason: Rule doesn't support predicate return types.\n/* eslint-disable jsdoc/valid-types */\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param {EventTarget} eventTarget The target from a mouse or touch event.\n *\n * @return {eventTarget is FocusNormalizedButton} Whether element is a button.\n */\nfunction isFocusNormalizedButton( eventTarget ) {\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t/** @type {HTMLInputElement} */ ( eventTarget ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @typedef {import('react').SyntheticEvent} SyntheticEvent\n */\n\n/**\n * @callback EventCallback\n * @param {SyntheticEvent} event input related event.\n */\n\n/**\n * @typedef FocusOutsideReactElement\n * @property {EventCallback} handleFocusOutside callback for a focus outside event.\n */\n\n/**\n * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef\n */\n\n/**\n * @typedef {Object} FocusOutsideReturnValue\n * @property {EventCallback} onFocus An event handler for focus events.\n * @property {EventCallback} onBlur An event handler for blur events.\n * @property {EventCallback} onMouseDown An event handler for mouse down events.\n * @property {EventCallback} onMouseUp An event handler for mouse up events.\n * @property {EventCallback} onTouchStart An event handler for touch start events.\n * @property {EventCallback} onTouchEnd An event handler for touch end events.\n */\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers\n * to a wrapping element element to capture when focus moves\n * outside that element.\n */\nexport default function useFocusOutside( onFocusOutside ) {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\t/**\n\t * @type {import('react').MutableRefObject<number | undefined>}\n\t */\n\tconst blurCheckTimeoutId = useRef();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t *\n\t * @param {SyntheticEvent} event Event for mousedown or mouseup.\n\t */\n\tconst normalizeButtonFocus = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t *\n\t * @param {SyntheticEvent} event Blur event.\n\t */\n\tconst queueBlurCheck = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG,CAAE,QAAQ,EAAE,QAAQ,CAAE;;AAEjD;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAEC,WAAW,EAAG;EAC/C,QAASA,WAAW,CAACC,QAAQ;IAC5B,KAAK,GAAG;IACR,KAAK,QAAQ;MACZ,OAAO,IAAI;IAEZ,KAAK,OAAO;MACX,OAAOH,kBAAkB,CAACI,QAAQ,
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useRef","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n *\n * @type {string[]}\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton\n */\n\n// Disable reason: Rule doesn't support predicate return types.\n/* eslint-disable jsdoc/valid-types */\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param {EventTarget} eventTarget The target from a mouse or touch event.\n *\n * @return {eventTarget is FocusNormalizedButton} Whether element is a button.\n */\nfunction isFocusNormalizedButton( eventTarget ) {\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t/** @type {HTMLInputElement} */ ( eventTarget ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @typedef {import('react').SyntheticEvent} SyntheticEvent\n */\n\n/**\n * @callback EventCallback\n * @param {SyntheticEvent} event input related event.\n */\n\n/**\n * @typedef FocusOutsideReactElement\n * @property {EventCallback} handleFocusOutside callback for a focus outside event.\n */\n\n/**\n * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef\n */\n\n/**\n * @typedef {Object} FocusOutsideReturnValue\n * @property {EventCallback} onFocus An event handler for focus events.\n * @property {EventCallback} onBlur An event handler for blur events.\n * @property {EventCallback} onMouseDown An event handler for mouse down events.\n * @property {EventCallback} onMouseUp An event handler for mouse up events.\n * @property {EventCallback} onTouchStart An event handler for touch start events.\n * @property {EventCallback} onTouchEnd An event handler for touch end events.\n */\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers\n * to a wrapping element element to capture when focus moves\n * outside that element.\n */\nexport default function useFocusOutside( onFocusOutside ) {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\t/**\n\t * @type {import('react').MutableRefObject<number | undefined>}\n\t */\n\tconst blurCheckTimeoutId = useRef();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t *\n\t * @param {SyntheticEvent} event Event for mousedown or mouseup.\n\t */\n\tconst normalizeButtonFocus = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t *\n\t * @param {SyntheticEvent} event Blur event.\n\t */\n\tconst queueBlurCheck = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","instanceMap","WeakMap","createId","object","instances","get","set","useInstanceId","prefix","preferredId","id"],"sources":["@wordpress/compose/src/hooks/use-instance-id/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\nconst instanceMap = new WeakMap< object, number >();\n\n/**\n * Creates a new id for a given object.\n *\n * @param object Object reference to create an id for.\n * @return The instance id (index).\n */\nfunction createId( object: object ): number {\n\tconst instances = instanceMap.get( object ) || 0;\n\tinstanceMap.set( object, instances + 1 );\n\treturn instances;\n}\n\n/**\n * Specify the useInstanceId *function* signatures.\n *\n * More accurately, useInstanceId distinguishes between three different\n * signatures:\n *\n * 1. When only object is given, the returned value is a number\n * 2. When object and prefix is given, the returned value is a string\n * 3. When preferredId is given, the returned value is the type of preferredId\n *\n * @param object Object reference to create an id for.\n */\nfunction useInstanceId( object: object ): number;\nfunction useInstanceId( object: object, prefix: string ): string;\nfunction useInstanceId< T extends string | number >(\n\tobject: object,\n\tprefix: string,\n\tpreferredId?: T\n): T;\n\n/**\n * Provides a unique instance ID.\n *\n * @param object Object reference to create an id for.\n * @param [prefix] Prefix for the unique id.\n * @param [preferredId] Default ID to use.\n * @return The unique instance id.\n */\nfunction useInstanceId(\n\tobject: object,\n\tprefix?: string,\n\tpreferredId?: string | number\n): string | number {\n\treturn useMemo( () => {\n\t\tif ( preferredId ) {\n\t\t\treturn preferredId;\n\t\t}\n\t\tconst id = createId( object );\n\n\t\treturn prefix ? `${ prefix }-${ id }` : id;\n\t}, [ object, preferredId, prefix ] );\n}\n\nexport default useInstanceId;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;AAE5C,MAAMC,WAAW,GAAG,IAAIC,OAAO,CAAmB,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,QAAQA,CAAEC,MAAc,EAAW;EAC3C,MAAMC,SAAS,GAAGJ,WAAW,CAACK,GAAG,CAAEF,MAAO,CAAC,IAAI,CAAC;EAChDH,WAAW,CAACM,GAAG,CAAEH,MAAM,EAAEC,SAAS,GAAG,CAAE,CAAC;EACxC,OAAOA,SAAS;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,aAAaA,CACrBJ,MAAc,EACdK,MAAe,EACfC,WAA6B,EACX;EAClB,OAAOV,OAAO,CAAE,MAAM;IACrB,IAAKU,WAAW,EAAG;MAClB,OAAOA,WAAW;IACnB;IACA,MAAMC,EAAE,GAAGR,QAAQ,CAAEC,MAAO,CAAC;IAE7B,OAAOK,MAAM,
|
|
1
|
+
{"version":3,"names":["useMemo","instanceMap","WeakMap","createId","object","instances","get","set","useInstanceId","prefix","preferredId","id"],"sources":["@wordpress/compose/src/hooks/use-instance-id/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\nconst instanceMap = new WeakMap< object, number >();\n\n/**\n * Creates a new id for a given object.\n *\n * @param object Object reference to create an id for.\n * @return The instance id (index).\n */\nfunction createId( object: object ): number {\n\tconst instances = instanceMap.get( object ) || 0;\n\tinstanceMap.set( object, instances + 1 );\n\treturn instances;\n}\n\n/**\n * Specify the useInstanceId *function* signatures.\n *\n * More accurately, useInstanceId distinguishes between three different\n * signatures:\n *\n * 1. When only object is given, the returned value is a number\n * 2. When object and prefix is given, the returned value is a string\n * 3. When preferredId is given, the returned value is the type of preferredId\n *\n * @param object Object reference to create an id for.\n */\nfunction useInstanceId( object: object ): number;\nfunction useInstanceId( object: object, prefix: string ): string;\nfunction useInstanceId< T extends string | number >(\n\tobject: object,\n\tprefix: string,\n\tpreferredId?: T\n): T;\n\n/**\n * Provides a unique instance ID.\n *\n * @param object Object reference to create an id for.\n * @param [prefix] Prefix for the unique id.\n * @param [preferredId] Default ID to use.\n * @return The unique instance id.\n */\nfunction useInstanceId(\n\tobject: object,\n\tprefix?: string,\n\tpreferredId?: string | number\n): string | number {\n\treturn useMemo( () => {\n\t\tif ( preferredId ) {\n\t\t\treturn preferredId;\n\t\t}\n\t\tconst id = createId( object );\n\n\t\treturn prefix ? `${ prefix }-${ id }` : id;\n\t}, [ object, preferredId, prefix ] );\n}\n\nexport default useInstanceId;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;AAE5C,MAAMC,WAAW,GAAG,IAAIC,OAAO,CAAmB,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,QAAQA,CAAEC,MAAc,EAAW;EAC3C,MAAMC,SAAS,GAAGJ,WAAW,CAACK,GAAG,CAAEF,MAAO,CAAC,IAAI,CAAC;EAChDH,WAAW,CAACM,GAAG,CAAEH,MAAM,EAAEC,SAAS,GAAG,CAAE,CAAC;EACxC,OAAOA,SAAS;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,aAAaA,CACrBJ,MAAc,EACdK,MAAe,EACfC,WAA6B,EACX;EAClB,OAAOV,OAAO,CAAE,MAAM;IACrB,IAAKU,WAAW,EAAG;MAClB,OAAOA,WAAW;IACnB;IACA,MAAMC,EAAE,GAAGR,QAAQ,CAAEC,MAAO,CAAC;IAE7B,OAAOK,MAAM,GAAG,GAAIA,MAAM,IAAME,EAAE,EAAG,GAAGA,EAAE;EAC3C,CAAC,EAAE,CAAEP,MAAM,EAAEM,WAAW,EAAED,MAAM,CAAG,CAAC;AACrC;AAEA,eAAeD,aAAa","ignoreList":[]}
|