@wordpress/compose 5.0.4 → 5.0.7
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/build/higher-order/with-global-events/index.js +3 -1
- package/build/higher-order/with-global-events/index.js.map +1 -1
- package/build/higher-order/with-state/index.js +2 -1
- package/build/higher-order/with-state/index.js.map +1 -1
- package/build/hooks/use-async-list/index.js +4 -3
- package/build/hooks/use-async-list/index.js.map +1 -1
- package/build/hooks/use-constrained-tabbing/index.js +2 -2
- package/build/hooks/use-constrained-tabbing/index.js.map +1 -1
- package/build/hooks/use-copy-on-click/index.js +8 -5
- package/build/hooks/use-copy-on-click/index.js.map +1 -1
- package/build/hooks/use-copy-to-clipboard/index.js +4 -3
- package/build/hooks/use-copy-to-clipboard/index.js.map +1 -1
- package/build/hooks/use-dialog/index.js +2 -2
- package/build/hooks/use-dialog/index.js.map +1 -1
- package/build/hooks/use-disabled/index.js +114 -0
- package/build/hooks/use-disabled/index.js.map +1 -0
- package/build/hooks/use-dragging/index.js +12 -11
- package/build/hooks/use-dragging/index.js.map +1 -1
- package/build/hooks/use-drop-zone/index.js +10 -9
- package/build/hooks/use-drop-zone/index.js.map +1 -1
- package/build/hooks/use-fixed-window-list/index.js +175 -0
- package/build/hooks/use-fixed-window-list/index.js.map +1 -0
- package/build/hooks/use-focus-on-mount/index.js +2 -1
- package/build/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build/hooks/use-instance-id/index.js +2 -1
- package/build/hooks/use-instance-id/index.js.map +1 -1
- package/build/hooks/use-keyboard-shortcut/index.js +17 -15
- package/build/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build/hooks/use-preferred-color-scheme/index.android.js +4 -3
- package/build/hooks/use-preferred-color-scheme/index.android.js.map +1 -1
- package/build/hooks/use-resize-observer/index.native.js +4 -3
- package/build/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build/hooks/use-viewport-match/index.js +2 -1
- package/build/hooks/use-viewport-match/index.js.map +1 -1
- package/build/hooks/use-warn-on-change/index.js +5 -2
- package/build/hooks/use-warn-on-change/index.js.map +1 -1
- package/build/index.js +66 -50
- package/build/index.js.map +1 -1
- package/build/index.native.js +46 -46
- package/build-module/higher-order/with-global-events/index.js +3 -1
- package/build-module/higher-order/with-global-events/index.js.map +1 -1
- package/build-module/higher-order/with-state/index.js +2 -1
- package/build-module/higher-order/with-state/index.js.map +1 -1
- package/build-module/hooks/use-async-list/index.js +4 -3
- package/build-module/hooks/use-async-list/index.js.map +1 -1
- package/build-module/hooks/use-constrained-tabbing/index.js +2 -2
- package/build-module/hooks/use-constrained-tabbing/index.js.map +1 -1
- package/build-module/hooks/use-copy-on-click/index.js +8 -5
- package/build-module/hooks/use-copy-on-click/index.js.map +1 -1
- package/build-module/hooks/use-copy-to-clipboard/index.js +4 -3
- package/build-module/hooks/use-copy-to-clipboard/index.js.map +1 -1
- package/build-module/hooks/use-dialog/index.js +2 -2
- package/build-module/hooks/use-dialog/index.js.map +1 -1
- package/build-module/hooks/use-disabled/index.js +104 -0
- package/build-module/hooks/use-disabled/index.js.map +1 -0
- package/build-module/hooks/use-dragging/index.js +12 -11
- package/build-module/hooks/use-dragging/index.js.map +1 -1
- package/build-module/hooks/use-drop-zone/index.js +10 -9
- package/build-module/hooks/use-drop-zone/index.js.map +1 -1
- package/build-module/hooks/use-fixed-window-list/index.js +164 -0
- package/build-module/hooks/use-fixed-window-list/index.js.map +1 -0
- package/build-module/hooks/use-focus-on-mount/index.js +2 -1
- package/build-module/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build-module/hooks/use-instance-id/index.js +2 -1
- package/build-module/hooks/use-instance-id/index.js.map +1 -1
- package/build-module/hooks/use-keyboard-shortcut/index.js +17 -15
- package/build-module/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build-module/hooks/use-preferred-color-scheme/index.android.js +4 -3
- package/build-module/hooks/use-preferred-color-scheme/index.android.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.native.js +4 -3
- package/build-module/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build-module/hooks/use-viewport-match/index.js +2 -1
- package/build-module/hooks/use-viewport-match/index.js.map +1 -1
- package/build-module/hooks/use-warn-on-change/index.js +5 -2
- package/build-module/hooks/use-warn-on-change/index.js.map +1 -1
- package/build-module/index.js +2 -0
- package/build-module/index.js.map +1 -1
- package/build-types/hooks/use-disabled/index.d.ts +23 -0
- package/build-types/hooks/use-disabled/index.d.ts.map +1 -0
- package/build-types/hooks/use-fixed-window-list/index.d.ts +57 -0
- package/build-types/hooks/use-fixed-window-list/index.d.ts.map +1 -0
- package/build-types/index.d.ts +2 -0
- package/package.json +9 -9
- package/src/hooks/use-disabled/index.js +113 -0
- package/src/hooks/use-disabled/test/index.js +90 -0
- package/src/hooks/use-fixed-window-list/index.js +174 -0
- package/src/index.js +2 -0
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -48,9 +48,10 @@ export default function useCopyToClipboard(text, onSuccess) {
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
});
|
|
51
|
-
clipboard.on('success',
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
clipboard.on('success', _ref => {
|
|
52
|
+
let {
|
|
53
|
+
clearSelection
|
|
54
|
+
} = _ref;
|
|
54
55
|
// Clearing selection will move focus back to the triggering
|
|
55
56
|
// button, ensuring that it is not reset to the body, and
|
|
56
57
|
// further that it is kept within the rendered node.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-copy-to-clipboard/index.js"],"names":["Clipboard","useRef","useRefEffect","useUpdatedRef","value","ref","current","useCopyToClipboard","text","onSuccess","textRef","onSuccessRef","node","clipboard","on","clearSelection","focus","destroy"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,WAAtB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,mBAAzB;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAMC,GAAG,GAAGJ,MAAM,CAAEG,KAAF,CAAlB;AACAC,EAAAA,GAAG,CAACC,OAAJ,GAAcF,KAAd;AACA,SAAOC,GAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASE,kBAAT,CAA6BC,IAA7B,EAAmCC,SAAnC,EAA+C;AAC7D;AACA;AACA,QAAMC,OAAO,GAAGP,aAAa,CAAEK,IAAF,CAA7B;AACA,QAAMG,YAAY,GAAGR,aAAa,CAAEM,SAAF,CAAlC;AACA,SAAOP,YAAY,CAAIU,IAAF,IAAY;AAChC;AACA,UAAMC,SAAS,GAAG,IAAIb,SAAJ,CAAeY,IAAf,EAAqB;AACtCJ,MAAAA,IAAI,GAAG;AACN,eAAO,OAAOE,OAAO,CAACJ,OAAf,KAA2B,UAA3B,GACJI,OAAO,CAACJ,OAAR,EADI,GAEJI,OAAO,CAACJ,OAAR,IAAmB,EAFtB;AAGA;;AALqC,KAArB,CAAlB;AAQAO,IAAAA,SAAS,CAACC,EAAV,CAAc,SAAd,EAAyB,
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-copy-to-clipboard/index.js"],"names":["Clipboard","useRef","useRefEffect","useUpdatedRef","value","ref","current","useCopyToClipboard","text","onSuccess","textRef","onSuccessRef","node","clipboard","on","clearSelection","focus","destroy"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,WAAtB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,mBAAzB;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAMC,GAAG,GAAGJ,MAAM,CAAEG,KAAF,CAAlB;AACAC,EAAAA,GAAG,CAACC,OAAJ,GAAcF,KAAd;AACA,SAAOC,GAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASE,kBAAT,CAA6BC,IAA7B,EAAmCC,SAAnC,EAA+C;AAC7D;AACA;AACA,QAAMC,OAAO,GAAGP,aAAa,CAAEK,IAAF,CAA7B;AACA,QAAMG,YAAY,GAAGR,aAAa,CAAEM,SAAF,CAAlC;AACA,SAAOP,YAAY,CAAIU,IAAF,IAAY;AAChC;AACA,UAAMC,SAAS,GAAG,IAAIb,SAAJ,CAAeY,IAAf,EAAqB;AACtCJ,MAAAA,IAAI,GAAG;AACN,eAAO,OAAOE,OAAO,CAACJ,OAAf,KAA2B,UAA3B,GACJI,OAAO,CAACJ,OAAR,EADI,GAEJI,OAAO,CAACJ,OAAR,IAAmB,EAFtB;AAGA;;AALqC,KAArB,CAAlB;AAQAO,IAAAA,SAAS,CAACC,EAAV,CAAc,SAAd,EAAyB,QAA0B;AAAA,UAAxB;AAAEC,QAAAA;AAAF,OAAwB;AAClD;AACA;AACA;AACAA,MAAAA,cAAc,GAJoC,CAKlD;AACA;;AACAH,MAAAA,IAAI,CAACI,KAAL;;AAEA,UAAKL,YAAY,CAACL,OAAlB,EAA4B;AAC3BK,QAAAA,YAAY,CAACL,OAAb;AACA;AACD,KAZD;AAcA,WAAO,MAAM;AACZO,MAAAA,SAAS,CAACI,OAAV;AACA,KAFD;AAGA,GA3BkB,EA2BhB,EA3BgB,CAAnB;AA4BA","sourcesContent":["/**\n * External dependencies\n */\nimport Clipboard from 'clipboard';\n\n/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * @template T\n * @param {T} value\n * @return {import('react').RefObject<T>} The updated ref\n */\nfunction useUpdatedRef( value ) {\n\tconst ref = useRef( value );\n\tref.current = value;\n\treturn ref;\n}\n\n/**\n * Copies the given text to the clipboard when the element is clicked.\n *\n * @template {HTMLElement} TElementType\n * @param {string | (() => string)} text The text to copy. Use a function if not\n * already available and expensive to compute.\n * @param {Function} onSuccess Called when to text is copied.\n *\n * @return {import('react').Ref<TElementType>} A ref to assign to the target element.\n */\nexport default function useCopyToClipboard( text, onSuccess ) {\n\t// Store the dependencies as refs and continuesly update them so they're\n\t// fresh when the callback is called.\n\tconst textRef = useUpdatedRef( text );\n\tconst onSuccessRef = useUpdatedRef( onSuccess );\n\treturn useRefEffect( ( node ) => {\n\t\t// Clipboard listens to click events.\n\t\tconst clipboard = new Clipboard( node, {\n\t\t\ttext() {\n\t\t\t\treturn typeof textRef.current === 'function'\n\t\t\t\t\t? textRef.current()\n\t\t\t\t\t: textRef.current || '';\n\t\t\t},\n\t\t} );\n\n\t\tclipboard.on( 'success', ( { clearSelection } ) => {\n\t\t\t// Clearing selection will move focus back to the triggering\n\t\t\t// button, ensuring that it is not reset to the body, and\n\t\t\t// further that it is kept within the rendered node.\n\t\t\tclearSelection();\n\t\t\t// Handle ClipboardJS focus bug, see\n\t\t\t// https://github.com/zenorocha/clipboard.js/issues/680\n\t\t\tnode.focus();\n\n\t\t\tif ( onSuccessRef.current ) {\n\t\t\t\tonSuccessRef.current();\n\t\t\t}\n\t\t} );\n\n\t\treturn () => {\n\t\t\tclipboard.destroy();\n\t\t};\n\t}, [] );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-dialog/index.js"],"names":["useRef","useEffect","useCallback","ESCAPE","useConstrainedTabbing","useFocusOnMount","useFocusReturn","useFocusOutside","useMergeRefs","useDialog","options","currentOptions","current","Object","values","constrainedTabbingRef","focusOnMountRef","focusOnMount","focusReturnRef","focusOutsideProps","event","__unstableOnClose","onClose","closeOnEscapeRef","node","addEventListener","keyCode","defaultPrevented","preventDefault","tabIndex"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,EAA4BC,WAA5B,QAA+C,oBAA/C;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,qBAAP,MAAkC,4BAAlC;AACA,OAAOC,eAAP,MAA4B,uBAA5B;AACA,OAAOC,cAAP,MAA2B,qBAA3B;AACA,OAAOC,eAAP,MAA4B,sBAA5B;AACA,OAAOC,YAAP,MAAyB,mBAAzB;AAEA;;AACA;AACA;AACA;AACA;AACA;;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,OAApB,EAA8B;AAC7B;AACD;AACA;AACC,QAAMC,cAAc,GAAGX,MAAM,EAA7B;AACAC,EAAAA,SAAS,CAAE,MAAM;AAChBU,IAAAA,cAAc,CAACC,OAAf,GAAyBF,OAAzB;AACA,GAFQ,EAENG,MAAM,CAACC,MAAP,CAAeJ,OAAf,CAFM,CAAT;AAGA,QAAMK,qBAAqB,GAAGX,qBAAqB,EAAnD;AACA,QAAMY,eAAe,GAAGX,eAAe,CAAEK,OAAO,CAACO,YAAV,CAAvC;AACA,QAAMC,cAAc,GAAGZ,cAAc,EAArC;AACA,QAAMa,iBAAiB,GAAGZ,eAAe,CAAIa,KAAF,IAAa;AAAA;;AACvD;AACA;AACA;AACA,iCAAKT,cAAc,CAACC,OAApB,kDAAK,sBAAwBS,iBAA7B,EAAiD;AAChD;AACAV,MAAAA,cAAc,CAACC,OAAf,CAAuBS,iBAAvB,CAA0C,eAA1C,EAA2DD,KAA3D;AACA,KAHD,MAGO,8BAAKT,cAAc,CAACC,OAApB,mDAAK,uBAAwBU,OAA7B,EAAuC;AAC7CX,MAAAA,cAAc,CAACC,OAAf,CAAuBU,OAAvB;AACA;AACD,GAVwC,CAAzC;AAWA,QAAMC,gBAAgB,GAAGrB,WAAW,CAAIsB,IAAF,IAAY;AACjD,QAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AAEDA,IAAAA,IAAI,CAACC,gBAAL,CAAuB,SAAvB;
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-dialog/index.js"],"names":["useRef","useEffect","useCallback","ESCAPE","useConstrainedTabbing","useFocusOnMount","useFocusReturn","useFocusOutside","useMergeRefs","useDialog","options","currentOptions","current","Object","values","constrainedTabbingRef","focusOnMountRef","focusOnMount","focusReturnRef","focusOutsideProps","event","__unstableOnClose","onClose","closeOnEscapeRef","node","addEventListener","keyCode","defaultPrevented","preventDefault","tabIndex"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,EAA4BC,WAA5B,QAA+C,oBAA/C;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,qBAAP,MAAkC,4BAAlC;AACA,OAAOC,eAAP,MAA4B,uBAA5B;AACA,OAAOC,cAAP,MAA2B,qBAA3B;AACA,OAAOC,eAAP,MAA4B,sBAA5B;AACA,OAAOC,YAAP,MAAyB,mBAAzB;AAEA;;AACA;AACA;AACA;AACA;AACA;;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,OAApB,EAA8B;AAC7B;AACD;AACA;AACC,QAAMC,cAAc,GAAGX,MAAM,EAA7B;AACAC,EAAAA,SAAS,CAAE,MAAM;AAChBU,IAAAA,cAAc,CAACC,OAAf,GAAyBF,OAAzB;AACA,GAFQ,EAENG,MAAM,CAACC,MAAP,CAAeJ,OAAf,CAFM,CAAT;AAGA,QAAMK,qBAAqB,GAAGX,qBAAqB,EAAnD;AACA,QAAMY,eAAe,GAAGX,eAAe,CAAEK,OAAO,CAACO,YAAV,CAAvC;AACA,QAAMC,cAAc,GAAGZ,cAAc,EAArC;AACA,QAAMa,iBAAiB,GAAGZ,eAAe,CAAIa,KAAF,IAAa;AAAA;;AACvD;AACA;AACA;AACA,iCAAKT,cAAc,CAACC,OAApB,kDAAK,sBAAwBS,iBAA7B,EAAiD;AAChD;AACAV,MAAAA,cAAc,CAACC,OAAf,CAAuBS,iBAAvB,CAA0C,eAA1C,EAA2DD,KAA3D;AACA,KAHD,MAGO,8BAAKT,cAAc,CAACC,OAApB,mDAAK,uBAAwBU,OAA7B,EAAuC;AAC7CX,MAAAA,cAAc,CAACC,OAAf,CAAuBU,OAAvB;AACA;AACD,GAVwC,CAAzC;AAWA,QAAMC,gBAAgB,GAAGrB,WAAW,CAAIsB,IAAF,IAAY;AACjD,QAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AAEDA,IAAAA,IAAI,CAACC,gBAAL,CAAuB,SAAvB,EAAkC;AACjC;AAA6BL,IAAAA,KADI,KAE7B;AAAA;;AACJ;AACA,UACCA,KAAK,CAACM,OAAN,KAAkBvB,MAAlB,IACA,CAAEiB,KAAK,CAACO,gBADR,8BAEAhB,cAAc,CAACC,OAFf,mDAEA,uBAAwBU,OAHzB,EAIE;AACDF,QAAAA,KAAK,CAACQ,cAAN;AACAjB,QAAAA,cAAc,CAACC,OAAf,CAAuBU,OAAvB;AACA;AACD,KAZD;AAaA,GAlBmC,EAkBjC,EAlBiC,CAApC;AAoBA,SAAO,CACNd,YAAY,CAAE,CACbE,OAAO,CAACO,YAAR,KAAyB,KAAzB,GAAiCF,qBAAjC,GAAyD,IAD5C,EAEbL,OAAO,CAACO,YAAR,KAAyB,KAAzB,GAAiCC,cAAjC,GAAkD,IAFrC,EAGbR,OAAO,CAACO,YAAR,KAAyB,KAAzB,GAAiCD,eAAjC,GAAmD,IAHtC,EAIbO,gBAJa,CAAF,CADN,EAON,EACC,GAAGJ,iBADJ;AAECU,IAAAA,QAAQ,EAAE;AAFX,GAPM,CAAP;AAYA;;AAED,eAAepB,SAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport useConstrainedTabbing from '../use-constrained-tabbing';\nimport useFocusOnMount from '../use-focus-on-mount';\nimport useFocusReturn from '../use-focus-return';\nimport useFocusOutside from '../use-focus-outside';\nimport useMergeRefs from '../use-merge-refs';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @typedef DialogOptions\n * @property {Parameters<useFocusOnMount>[0]} focusOnMount Focus on mount arguments.\n * @property {() => void} onClose Function to call when the dialog is closed.\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:\n * - constrained tabbing.\n * - focus on mount.\n * - return focus on unmount.\n * - focus outside.\n *\n * @param {DialogOptions} options Dialog Options.\n */\nfunction useDialog( options ) {\n\t/**\n\t * @type {import('react').MutableRefObject<DialogOptions | undefined>}\n\t */\n\tconst currentOptions = useRef();\n\tuseEffect( () => {\n\t\tcurrentOptions.current = options;\n\t}, Object.values( options ) );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusOnMountRef = useFocusOnMount( options.focusOnMount );\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( ( event ) => {\n\t\t// This unstable prop is here only to manage backward compatibility\n\t\t// for the Popover component otherwise, the onClose should be enough.\n\t\t// @ts-ignore unstable property\n\t\tif ( currentOptions.current?.__unstableOnClose ) {\n\t\t\t// @ts-ignore unstable property\n\t\t\tcurrentOptions.current.__unstableOnClose( 'focus-outside', event );\n\t\t} else if ( currentOptions.current?.onClose ) {\n\t\t\tcurrentOptions.current.onClose();\n\t\t}\n\t} );\n\tconst closeOnEscapeRef = useCallback( ( node ) => {\n\t\tif ( ! node ) {\n\t\t\treturn;\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', (\n\t\t\t/** @type {KeyboardEvent} */ event\n\t\t) => {\n\t\t\t// Close on escape\n\t\t\tif (\n\t\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t\t! event.defaultPrevented &&\n\t\t\t\tcurrentOptions.current?.onClose\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcurrentOptions.current.onClose();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn [\n\t\tuseMergeRefs( [\n\t\t\toptions.focusOnMount !== false ? constrainedTabbingRef : null,\n\t\t\toptions.focusOnMount !== false ? focusReturnRef : null,\n\t\t\toptions.focusOnMount !== false ? focusOnMountRef : null,\n\t\t\tcloseOnEscapeRef,\n\t\t] ),\n\t\t{\n\t\t\t...focusOutsideProps,\n\t\t\ttabIndex: '-1',\n\t\t},\n\t];\n}\n\nexport default useDialog;\n"]}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { includes, debounce } from 'lodash';
|
|
5
|
+
/**
|
|
6
|
+
* WordPress dependencies
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
import { useCallback, useLayoutEffect, useRef } from '@wordpress/element';
|
|
10
|
+
import { focus } from '@wordpress/dom';
|
|
11
|
+
/**
|
|
12
|
+
* Names of control nodes which qualify for disabled behavior.
|
|
13
|
+
*
|
|
14
|
+
* See WHATWG HTML Standard: 4.10.18.5: "Enabling and disabling form controls: the disabled attribute".
|
|
15
|
+
*
|
|
16
|
+
* @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
|
|
17
|
+
*
|
|
18
|
+
* @type {string[]}
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP', 'OPTION', 'SELECT', 'TEXTAREA'];
|
|
22
|
+
/**
|
|
23
|
+
* In some circumstances, such as block previews, all focusable DOM elements
|
|
24
|
+
* (input fields, links, buttons, etc.) need to be disabled. This hook adds the
|
|
25
|
+
* behavior to disable nested DOM elements to the returned ref.
|
|
26
|
+
*
|
|
27
|
+
* @return {import('react').RefObject<HTMLElement>} Element Ref.
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```js
|
|
31
|
+
* import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
|
|
32
|
+
* const DisabledExample = () => {
|
|
33
|
+
* const disabledRef = useDisabled();
|
|
34
|
+
* return (
|
|
35
|
+
* <div ref={ disabledRef }>
|
|
36
|
+
* <a href="#">This link will have tabindex set to -1</a>
|
|
37
|
+
* <input placeholder="This input will have the disabled attribute added to it." type="text" />
|
|
38
|
+
* </div>
|
|
39
|
+
* );
|
|
40
|
+
* };
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
43
|
+
|
|
44
|
+
export default function useDisabled() {
|
|
45
|
+
/** @type {import('react').RefObject<HTMLElement>} */
|
|
46
|
+
const node = useRef(null);
|
|
47
|
+
|
|
48
|
+
const disable = () => {
|
|
49
|
+
if (!node.current) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
focus.focusable.find(node.current).forEach(focusable => {
|
|
54
|
+
if (includes(DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName)) {
|
|
55
|
+
focusable.setAttribute('disabled', '');
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
if (focusable.nodeName === 'A') {
|
|
59
|
+
focusable.setAttribute('tabindex', '-1');
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
const tabIndex = focusable.getAttribute('tabindex');
|
|
63
|
+
|
|
64
|
+
if (tabIndex !== null && tabIndex !== '-1') {
|
|
65
|
+
focusable.removeAttribute('tabindex');
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
if (focusable.hasAttribute('contenteditable')) {
|
|
69
|
+
focusable.setAttribute('contenteditable', 'false');
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
}; // Debounce re-disable since disabling process itself will incur
|
|
73
|
+
// additional mutations which should be ignored.
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
const debouncedDisable = useCallback(debounce(disable, undefined, {
|
|
77
|
+
leading: true
|
|
78
|
+
}), []);
|
|
79
|
+
useLayoutEffect(() => {
|
|
80
|
+
disable();
|
|
81
|
+
/** @type {MutationObserver | undefined} */
|
|
82
|
+
|
|
83
|
+
let observer;
|
|
84
|
+
|
|
85
|
+
if (node.current) {
|
|
86
|
+
observer = new window.MutationObserver(debouncedDisable);
|
|
87
|
+
observer.observe(node.current, {
|
|
88
|
+
childList: true,
|
|
89
|
+
attributes: true,
|
|
90
|
+
subtree: true
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return () => {
|
|
95
|
+
if (observer) {
|
|
96
|
+
observer.disconnect();
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
debouncedDisable.cancel();
|
|
100
|
+
};
|
|
101
|
+
}, []);
|
|
102
|
+
return node;
|
|
103
|
+
}
|
|
104
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-disabled/index.js"],"names":["includes","debounce","useCallback","useLayoutEffect","useRef","focus","DISABLED_ELIGIBLE_NODE_NAMES","useDisabled","node","disable","current","focusable","find","forEach","nodeName","setAttribute","tabIndex","getAttribute","removeAttribute","hasAttribute","debouncedDisable","undefined","leading","observer","window","MutationObserver","observe","childList","attributes","subtree","disconnect","cancel"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,QAAnB,QAAmC,QAAnC;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,eAAtB,EAAuCC,MAAvC,QAAqD,oBAArD;AACA,SAASC,KAAT,QAAsB,gBAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,4BAA4B,GAAG,CACpC,QADoC,EAEpC,UAFoC,EAGpC,OAHoC,EAIpC,UAJoC,EAKpC,QALoC,EAMpC,QANoC,EAOpC,UAPoC,CAArC;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,WAAT,GAAuB;AACrC;AACA,QAAMC,IAAI,GAAGJ,MAAM,CAAE,IAAF,CAAnB;;AAEA,QAAMK,OAAO,GAAG,MAAM;AACrB,QAAK,CAAED,IAAI,CAACE,OAAZ,EAAsB;AACrB;AACA;;AAEDL,IAAAA,KAAK,CAACM,SAAN,CAAgBC,IAAhB,CAAsBJ,IAAI,CAACE,OAA3B,EAAqCG,OAArC,CAAgDF,SAAF,IAAiB;AAC9D,UACCX,QAAQ,CAAEM,4BAAF,EAAgCK,SAAS,CAACG,QAA1C,CADT,EAEE;AACDH,QAAAA,SAAS,CAACI,YAAV,CAAwB,UAAxB,EAAoC,EAApC;AACA;;AAED,UAAKJ,SAAS,CAACG,QAAV,KAAuB,GAA5B,EAAkC;AACjCH,QAAAA,SAAS,CAACI,YAAV,CAAwB,UAAxB,EAAoC,IAApC;AACA;;AAED,YAAMC,QAAQ,GAAGL,SAAS,CAACM,YAAV,CAAwB,UAAxB,CAAjB;;AACA,UAAKD,QAAQ,KAAK,IAAb,IAAqBA,QAAQ,KAAK,IAAvC,EAA8C;AAC7CL,QAAAA,SAAS,CAACO,eAAV,CAA2B,UAA3B;AACA;;AAED,UAAKP,SAAS,CAACQ,YAAV,CAAwB,iBAAxB,CAAL,EAAmD;AAClDR,QAAAA,SAAS,CAACI,YAAV,CAAwB,iBAAxB,EAA2C,OAA3C;AACA;AACD,KAnBD;AAoBA,GAzBD,CAJqC,CA+BrC;AACA;;;AACA,QAAMK,gBAAgB,GAAGlB,WAAW,CACnCD,QAAQ,CAAEQ,OAAF,EAAWY,SAAX,EAAsB;AAAEC,IAAAA,OAAO,EAAE;AAAX,GAAtB,CAD2B,EAEnC,EAFmC,CAApC;AAKAnB,EAAAA,eAAe,CAAE,MAAM;AACtBM,IAAAA,OAAO;AAEP;;AACA,QAAIc,QAAJ;;AACA,QAAKf,IAAI,CAACE,OAAV,EAAoB;AACnBa,MAAAA,QAAQ,GAAG,IAAIC,MAAM,CAACC,gBAAX,CAA6BL,gBAA7B,CAAX;AACAG,MAAAA,QAAQ,CAACG,OAAT,CAAkBlB,IAAI,CAACE,OAAvB,EAAgC;AAC/BiB,QAAAA,SAAS,EAAE,IADoB;AAE/BC,QAAAA,UAAU,EAAE,IAFmB;AAG/BC,QAAAA,OAAO,EAAE;AAHsB,OAAhC;AAKA;;AAED,WAAO,MAAM;AACZ,UAAKN,QAAL,EAAgB;AACfA,QAAAA,QAAQ,CAACO,UAAT;AACA;;AACDV,MAAAA,gBAAgB,CAACW,MAAjB;AACA,KALD;AAMA,GApBc,EAoBZ,EApBY,CAAf;AAsBA,SAAOvB,IAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { includes, debounce } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useLayoutEffect, useRef } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Names of control nodes which qualify for disabled behavior.\n *\n * See WHATWG HTML Standard: 4.10.18.5: \"Enabling and disabling form controls: the disabled attribute\".\n *\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute\n *\n * @type {string[]}\n */\nconst DISABLED_ELIGIBLE_NODE_NAMES = [\n\t'BUTTON',\n\t'FIELDSET',\n\t'INPUT',\n\t'OPTGROUP',\n\t'OPTION',\n\t'SELECT',\n\t'TEXTAREA',\n];\n\n/**\n * In some circumstances, such as block previews, all focusable DOM elements\n * (input fields, links, buttons, etc.) need to be disabled. This hook adds the\n * behavior to disable nested DOM elements to the returned ref.\n *\n * @return {import('react').RefObject<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';\n * const DisabledExample = () => {\n * \tconst disabledRef = useDisabled();\n *\treturn (\n *\t\t<div ref={ disabledRef }>\n *\t\t\t<a href=\"#\">This link will have tabindex set to -1</a>\n *\t\t\t<input placeholder=\"This input will have the disabled attribute added to it.\" type=\"text\" />\n *\t\t</div>\n *\t);\n * };\n * ```\n */\nexport default function useDisabled() {\n\t/** @type {import('react').RefObject<HTMLElement>} */\n\tconst node = useRef( null );\n\n\tconst disable = () => {\n\t\tif ( ! node.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfocus.focusable.find( node.current ).forEach( ( focusable ) => {\n\t\t\tif (\n\t\t\t\tincludes( DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName )\n\t\t\t) {\n\t\t\t\tfocusable.setAttribute( 'disabled', '' );\n\t\t\t}\n\n\t\t\tif ( focusable.nodeName === 'A' ) {\n\t\t\t\tfocusable.setAttribute( 'tabindex', '-1' );\n\t\t\t}\n\n\t\t\tconst tabIndex = focusable.getAttribute( 'tabindex' );\n\t\t\tif ( tabIndex !== null && tabIndex !== '-1' ) {\n\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t}\n\n\t\t\tif ( focusable.hasAttribute( 'contenteditable' ) ) {\n\t\t\t\tfocusable.setAttribute( 'contenteditable', 'false' );\n\t\t\t}\n\t\t} );\n\t};\n\n\t// Debounce re-disable since disabling process itself will incur\n\t// additional mutations which should be ignored.\n\tconst debouncedDisable = useCallback(\n\t\tdebounce( disable, undefined, { leading: true } ),\n\t\t[]\n\t);\n\n\tuseLayoutEffect( () => {\n\t\tdisable();\n\n\t\t/** @type {MutationObserver | undefined} */\n\t\tlet observer;\n\t\tif ( node.current ) {\n\t\t\tobserver = new window.MutationObserver( debouncedDisable );\n\t\t\tobserver.observe( node.current, {\n\t\t\t\tchildList: true,\n\t\t\t\tattributes: true,\n\t\t\t\tsubtree: true,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( observer ) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t\tdebouncedDisable.cancel();\n\t\t};\n\t}, [] );\n\n\treturn node;\n}\n"]}
|
|
@@ -14,11 +14,12 @@ import useIsomorphicLayoutEffect from '../use-isomorphic-layout-effect';
|
|
|
14
14
|
* @param {(e: MouseEvent) => void} props.onDragEnd
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
|
-
export default function useDragging({
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
export default function useDragging(_ref) {
|
|
18
|
+
let {
|
|
19
|
+
onDragStart,
|
|
20
|
+
onDragMove,
|
|
21
|
+
onDragEnd
|
|
22
|
+
} = _ref;
|
|
22
23
|
const [isDragging, setIsDragging] = useState(false);
|
|
23
24
|
const eventsRef = useRef({
|
|
24
25
|
onDragStart,
|
|
@@ -30,12 +31,12 @@ export default function useDragging({
|
|
|
30
31
|
eventsRef.current.onDragMove = onDragMove;
|
|
31
32
|
eventsRef.current.onDragEnd = onDragEnd;
|
|
32
33
|
}, [onDragStart, onDragMove, onDragEnd]);
|
|
33
|
-
const onMouseMove = useCallback(
|
|
34
|
+
const onMouseMove = useCallback((
|
|
34
35
|
/** @type {MouseEvent} */
|
|
35
|
-
event => eventsRef.current.onDragMove && eventsRef.current.onDragMove(event), []);
|
|
36
|
-
const endDrag = useCallback(
|
|
36
|
+
event) => eventsRef.current.onDragMove && eventsRef.current.onDragMove(event), []);
|
|
37
|
+
const endDrag = useCallback((
|
|
37
38
|
/** @type {MouseEvent} */
|
|
38
|
-
event => {
|
|
39
|
+
event) => {
|
|
39
40
|
if (eventsRef.current.onDragEnd) {
|
|
40
41
|
eventsRef.current.onDragEnd(event);
|
|
41
42
|
}
|
|
@@ -44,9 +45,9 @@ export default function useDragging({
|
|
|
44
45
|
document.removeEventListener('mouseup', endDrag);
|
|
45
46
|
setIsDragging(false);
|
|
46
47
|
}, []);
|
|
47
|
-
const startDrag = useCallback(
|
|
48
|
+
const startDrag = useCallback((
|
|
48
49
|
/** @type {MouseEvent} */
|
|
49
|
-
event => {
|
|
50
|
+
event) => {
|
|
50
51
|
if (eventsRef.current.onDragStart) {
|
|
51
52
|
eventsRef.current.onDragStart(event);
|
|
52
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-dragging/index.js"],"names":["useCallback","useEffect","useRef","useState","useIsomorphicLayoutEffect","useDragging","onDragStart","onDragMove","onDragEnd","isDragging","setIsDragging","eventsRef","current","onMouseMove","event","endDrag","document","removeEventListener","startDrag","addEventListener"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAT,EAAsBC,SAAtB,EAAiCC,MAAjC,EAAyCC,QAAzC,QAAyD,oBAAzD;AAEA;AACA;AACA;;AACA,OAAOC,yBAAP,MAAsC,iCAAtC;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,WAAT,
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-dragging/index.js"],"names":["useCallback","useEffect","useRef","useState","useIsomorphicLayoutEffect","useDragging","onDragStart","onDragMove","onDragEnd","isDragging","setIsDragging","eventsRef","current","onMouseMove","event","endDrag","document","removeEventListener","startDrag","addEventListener"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAT,EAAsBC,SAAtB,EAAiCC,MAAjC,EAAyCC,QAAzC,QAAyD,oBAAzD;AAEA;AACA;AACA;;AACA,OAAOC,yBAAP,MAAsC,iCAAtC;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,WAAT,OAA+D;AAAA,MAAzC;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,UAAf;AAA2BC,IAAAA;AAA3B,GAAyC;AAC7E,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgCP,QAAQ,CAAE,KAAF,CAA9C;AAEA,QAAMQ,SAAS,GAAGT,MAAM,CAAE;AACzBI,IAAAA,WADyB;AAEzBC,IAAAA,UAFyB;AAGzBC,IAAAA;AAHyB,GAAF,CAAxB;AAKAJ,EAAAA,yBAAyB,CAAE,MAAM;AAChCO,IAAAA,SAAS,CAACC,OAAV,CAAkBN,WAAlB,GAAgCA,WAAhC;AACAK,IAAAA,SAAS,CAACC,OAAV,CAAkBL,UAAlB,GAA+BA,UAA/B;AACAI,IAAAA,SAAS,CAACC,OAAV,CAAkBJ,SAAlB,GAA8BA,SAA9B;AACA,GAJwB,EAItB,CAAEF,WAAF,EAAeC,UAAf,EAA2BC,SAA3B,CAJsB,CAAzB;AAMA,QAAMK,WAAW,GAAGb,WAAW,CAC9B;AAAE;AAA0Bc,EAAAA,KAA5B,KACCH,SAAS,CAACC,OAAV,CAAkBL,UAAlB,IACAI,SAAS,CAACC,OAAV,CAAkBL,UAAlB,CAA8BO,KAA9B,CAH6B,EAI9B,EAJ8B,CAA/B;AAMA,QAAMC,OAAO,GAAGf,WAAW,CAAE;AAAE;AAA0Bc,EAAAA,KAA5B,KAAuC;AACnE,QAAKH,SAAS,CAACC,OAAV,CAAkBJ,SAAvB,EAAmC;AAClCG,MAAAA,SAAS,CAACC,OAAV,CAAkBJ,SAAlB,CAA6BM,KAA7B;AACA;;AACDE,IAAAA,QAAQ,CAACC,mBAAT,CAA8B,WAA9B,EAA2CJ,WAA3C;AACAG,IAAAA,QAAQ,CAACC,mBAAT,CAA8B,SAA9B,EAAyCF,OAAzC;AACAL,IAAAA,aAAa,CAAE,KAAF,CAAb;AACA,GAP0B,EAOxB,EAPwB,CAA3B;AAQA,QAAMQ,SAAS,GAAGlB,WAAW,CAAE;AAAE;AAA0Bc,EAAAA,KAA5B,KAAuC;AACrE,QAAKH,SAAS,CAACC,OAAV,CAAkBN,WAAvB,EAAqC;AACpCK,MAAAA,SAAS,CAACC,OAAV,CAAkBN,WAAlB,CAA+BQ,KAA/B;AACA;;AACDE,IAAAA,QAAQ,CAACG,gBAAT,CAA2B,WAA3B,EAAwCN,WAAxC;AACAG,IAAAA,QAAQ,CAACG,gBAAT,CAA2B,SAA3B,EAAsCJ,OAAtC;AACAL,IAAAA,aAAa,CAAE,IAAF,CAAb;AACA,GAP4B,EAO1B,EAP0B,CAA7B,CA5B6E,CAqC7E;;AACAT,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAM;AACZ,UAAKQ,UAAL,EAAkB;AACjBO,QAAAA,QAAQ,CAACC,mBAAT,CAA8B,WAA9B,EAA2CJ,WAA3C;AACAG,QAAAA,QAAQ,CAACC,mBAAT,CAA8B,SAA9B,EAAyCF,OAAzC;AACA;AACD,KALD;AAMA,GAPQ,EAON,CAAEN,UAAF,CAPM,CAAT;AASA,SAAO;AACNS,IAAAA,SADM;AAENH,IAAAA,OAFM;AAGNN,IAAAA;AAHM,GAAP;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useIsomorphicLayoutEffect from '../use-isomorphic-layout-effect';\n\n/**\n * @param {Object} props\n * @param {(e: MouseEvent) => void} props.onDragStart\n * @param {(e: MouseEvent) => void} props.onDragMove\n * @param {(e: MouseEvent) => void} props.onDragEnd\n */\nexport default function useDragging( { onDragStart, onDragMove, onDragEnd } ) {\n\tconst [ isDragging, setIsDragging ] = useState( false );\n\n\tconst eventsRef = useRef( {\n\t\tonDragStart,\n\t\tonDragMove,\n\t\tonDragEnd,\n\t} );\n\tuseIsomorphicLayoutEffect( () => {\n\t\teventsRef.current.onDragStart = onDragStart;\n\t\teventsRef.current.onDragMove = onDragMove;\n\t\teventsRef.current.onDragEnd = onDragEnd;\n\t}, [ onDragStart, onDragMove, onDragEnd ] );\n\n\tconst onMouseMove = useCallback(\n\t\t( /** @type {MouseEvent} */ event ) =>\n\t\t\teventsRef.current.onDragMove &&\n\t\t\teventsRef.current.onDragMove( event ),\n\t\t[]\n\t);\n\tconst endDrag = useCallback( ( /** @type {MouseEvent} */ event ) => {\n\t\tif ( eventsRef.current.onDragEnd ) {\n\t\t\teventsRef.current.onDragEnd( event );\n\t\t}\n\t\tdocument.removeEventListener( 'mousemove', onMouseMove );\n\t\tdocument.removeEventListener( 'mouseup', endDrag );\n\t\tsetIsDragging( false );\n\t}, [] );\n\tconst startDrag = useCallback( ( /** @type {MouseEvent} */ event ) => {\n\t\tif ( eventsRef.current.onDragStart ) {\n\t\t\teventsRef.current.onDragStart( event );\n\t\t}\n\t\tdocument.addEventListener( 'mousemove', onMouseMove );\n\t\tdocument.addEventListener( 'mouseup', endDrag );\n\t\tsetIsDragging( true );\n\t}, [] );\n\n\t// Remove the global events when unmounting if needed.\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( isDragging ) {\n\t\t\t\tdocument.removeEventListener( 'mousemove', onMouseMove );\n\t\t\t\tdocument.removeEventListener( 'mouseup', endDrag );\n\t\t\t}\n\t\t};\n\t}, [ isDragging ] );\n\n\treturn {\n\t\tstartDrag,\n\t\tendDrag,\n\t\tisDragging,\n\t};\n}\n"]}
|
|
@@ -49,15 +49,16 @@ function useFreshRef(value) {
|
|
|
49
49
|
*/
|
|
50
50
|
|
|
51
51
|
|
|
52
|
-
export default function useDropZone({
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
52
|
+
export default function useDropZone(_ref) {
|
|
53
|
+
let {
|
|
54
|
+
isDisabled,
|
|
55
|
+
onDrop: _onDrop,
|
|
56
|
+
onDragStart: _onDragStart,
|
|
57
|
+
onDragEnter: _onDragEnter,
|
|
58
|
+
onDragLeave: _onDragLeave,
|
|
59
|
+
onDragEnd: _onDragEnd,
|
|
60
|
+
onDragOver: _onDragOver
|
|
61
|
+
} = _ref;
|
|
61
62
|
const onDropRef = useFreshRef(_onDrop);
|
|
62
63
|
const onDragStartRef = useFreshRef(_onDragStart);
|
|
63
64
|
const onDragEnterRef = useFreshRef(_onDragEnter);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-drop-zone/index.js"],"names":["useRef","useRefEffect","useFreshRef","value","ref","current","useDropZone","isDisabled","onDrop","_onDrop","onDragStart","_onDragStart","onDragEnter","_onDragEnter","onDragLeave","_onDragLeave","onDragEnd","_onDragEnd","onDragOver","_onDragOver","onDropRef","onDragStartRef","onDragEnterRef","onDragLeaveRef","onDragEndRef","onDragOverRef","element","isDragging","ownerDocument","isElementInZone","targetToCheck","defaultView","HTMLElement","contains","elementToCheck","dataset","isDropZone","parentElement","maybeDragStart","event","removeEventListener","addEventListener","maybeDragEnd","preventDefault","relatedTarget","defaultPrevented","dataTransfer","files","length"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @param {T} value\n * @return {import('react').MutableRefObject<T>} A ref with the value.\n */\nfunction useFreshRef( value ) {\n\t/* eslint-enable jsdoc/valid-types */\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<T>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\t// Disable reason: We're doing something pretty JavaScript-y here where the\n\t// ref will always have a current value that is not null or undefined but it\n\t// needs to start as undefined. We don't want to change the return type so\n\t// it's easier to just ts-ignore this specific line that's complaining about\n\t// undefined not being part of T.\n\t// @ts-ignore\n\tconst ref = useRef();\n\tref.current = value;\n\treturn ref;\n}\n\n/**\n * A hook to facilitate drag and drop handling.\n *\n * @param {Object} props Named parameters.\n * @param {boolean} props.isDisabled Whether or not to disable the drop zone.\n * @param {(e: DragEvent) => void} props.onDragStart Called when dragging has started.\n * @param {(e: DragEvent) => void} props.onDragEnter Called when the zone is entered.\n * @param {(e: DragEvent) => void} props.onDragOver Called when the zone is moved within.\n * @param {(e: DragEvent) => void} props.onDragLeave Called when the zone is left.\n * @param {(e: MouseEvent) => void} props.onDragEnd Called when dragging has ended.\n * @param {(e: DragEvent) => void} props.onDrop Called when dropping in the zone.\n *\n * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.\n */\nexport default function useDropZone( {\n\tisDisabled,\n\tonDrop: _onDrop,\n\tonDragStart: _onDragStart,\n\tonDragEnter: _onDragEnter,\n\tonDragLeave: _onDragLeave,\n\tonDragEnd: _onDragEnd,\n\tonDragOver: _onDragOver,\n} ) {\n\tconst onDropRef = useFreshRef( _onDrop );\n\tconst onDragStartRef = useFreshRef( _onDragStart );\n\tconst onDragEnterRef = useFreshRef( _onDragEnter );\n\tconst onDragLeaveRef = useFreshRef( _onDragLeave );\n\tconst onDragEndRef = useFreshRef( _onDragEnd );\n\tconst onDragOverRef = useFreshRef( _onDragOver );\n\n\treturn useRefEffect(\n\t\t( element ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet isDragging = false;\n\n\t\t\tconst { ownerDocument } = element;\n\n\t\t\t/**\n\t\t\t * Checks if an element is in the drop zone.\n\t\t\t *\n\t\t\t * @param {EventTarget|null} targetToCheck\n\t\t\t *\n\t\t\t * @return {boolean} True if in drop zone, false if not.\n\t\t\t */\n\t\t\tfunction isElementInZone( targetToCheck ) {\n\t\t\t\tconst { defaultView } = ownerDocument;\n\t\t\t\tif (\n\t\t\t\t\t! targetToCheck ||\n\t\t\t\t\t! defaultView ||\n\t\t\t\t\t! ( targetToCheck instanceof defaultView.HTMLElement ) ||\n\t\t\t\t\t! element.contains( targetToCheck )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\t/** @type {HTMLElement|null} */\n\t\t\t\tlet elementToCheck = targetToCheck;\n\n\t\t\t\tdo {\n\t\t\t\t\tif ( elementToCheck.dataset.isDropZone ) {\n\t\t\t\t\t\treturn elementToCheck === element;\n\t\t\t\t\t}\n\t\t\t\t} while ( ( elementToCheck = elementToCheck.parentElement ) );\n\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tfunction maybeDragStart( /** @type {DragEvent} */ event ) {\n\t\t\t\tif ( isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = true;\n\n\t\t\t\townerDocument.removeEventListener(\n\t\t\t\t\t'dragenter',\n\t\t\t\t\tmaybeDragStart\n\t\t\t\t);\n\n\t\t\t\t// Note that `dragend` doesn't fire consistently for file and\n\t\t\t\t// HTML drag events where the drag origin is outside the browser\n\t\t\t\t// window. In Firefox it may also not fire if the originating\n\t\t\t\t// node is removed.\n\t\t\t\townerDocument.addEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragStartRef.current ) {\n\t\t\t\t\tonDragStartRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragEnter( /** @type {DragEvent} */ event ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// The `dragenter` event will also fire when entering child\n\t\t\t\t// elements, but we only want to call `onDragEnter` when\n\t\t\t\t// entering the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been left) should be outside the drop zone.\n\t\t\t\tif (\n\t\t\t\t\telement.contains(\n\t\t\t\t\t\t/** @type {Node} */ ( event.relatedTarget )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragEnterRef.current ) {\n\t\t\t\t\tonDragEnterRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Only call onDragOver for the innermost hovered drop zones.\n\t\t\t\tif ( ! event.defaultPrevented && onDragOverRef.current ) {\n\t\t\t\t\tonDragOverRef.current( event );\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDragOver` is already handled.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tfunction onDragLeave( /** @type {DragEvent} */ event ) {\n\t\t\t\t// The `dragleave` event will also fire when leaving child\n\t\t\t\t// elements, but we only want to call `onDragLeave` when\n\t\t\t\t// leaving the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been entered) should be outside the drop\n\t\t\t\t// zone.\n\t\t\t\tif ( isElementInZone( event.relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragLeaveRef.current ) {\n\t\t\t\t\tonDragLeaveRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDrop( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Don't handle drop if an inner drop zone already handled it.\n\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDrop` is already handled.\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// This seemingly useless line has been shown to resolve a\n\t\t\t\t// Safari issue where files dragged directly from the dock are\n\t\t\t\t// not recognized.\n\t\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\t\tevent.dataTransfer && event.dataTransfer.files.length;\n\n\t\t\t\tif ( onDropRef.current ) {\n\t\t\t\t\tonDropRef.current( event );\n\t\t\t\t}\n\n\t\t\t\tmaybeDragEnd( event );\n\t\t\t}\n\n\t\t\tfunction maybeDragEnd( /** @type {MouseEvent} */ event ) {\n\t\t\t\tif ( ! isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = false;\n\n\t\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragEndRef.current ) {\n\t\t\t\t\tonDragEndRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telement.dataset.isDropZone = 'true';\n\t\t\telement.addEventListener( 'drop', onDrop );\n\t\t\telement.addEventListener( 'dragenter', onDragEnter );\n\t\t\telement.addEventListener( 'dragover', onDragOver );\n\t\t\telement.addEventListener( 'dragleave', onDragLeave );\n\t\t\t// The `dragstart` event doesn't fire if the drag started outside\n\t\t\t// the document.\n\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\n\t\t\treturn () => {\n\t\t\t\tdelete element.dataset.isDropZone;\n\t\t\t\telement.removeEventListener( 'drop', onDrop );\n\t\t\t\telement.removeEventListener( 'dragenter', onDragEnter );\n\t\t\t\telement.removeEventListener( 'dragover', onDragOver );\n\t\t\t\telement.removeEventListener( 'dragleave', onDragLeave );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\t\t\t};\n\t\t},\n\t\t[ isDisabled ]\n\t);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-drop-zone/index.js"],"names":["useRef","useRefEffect","useFreshRef","value","ref","current","useDropZone","isDisabled","onDrop","_onDrop","onDragStart","_onDragStart","onDragEnter","_onDragEnter","onDragLeave","_onDragLeave","onDragEnd","_onDragEnd","onDragOver","_onDragOver","onDropRef","onDragStartRef","onDragEnterRef","onDragLeaveRef","onDragEndRef","onDragOverRef","element","isDragging","ownerDocument","isElementInZone","targetToCheck","defaultView","HTMLElement","contains","elementToCheck","dataset","isDropZone","parentElement","maybeDragStart","event","removeEventListener","addEventListener","maybeDragEnd","preventDefault","relatedTarget","defaultPrevented","dataTransfer","files","length"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @param {T} value\n * @return {import('react').MutableRefObject<T>} A ref with the value.\n */\nfunction useFreshRef( value ) {\n\t/* eslint-enable jsdoc/valid-types */\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<T>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\t// Disable reason: We're doing something pretty JavaScript-y here where the\n\t// ref will always have a current value that is not null or undefined but it\n\t// needs to start as undefined. We don't want to change the return type so\n\t// it's easier to just ts-ignore this specific line that's complaining about\n\t// undefined not being part of T.\n\t// @ts-ignore\n\tconst ref = useRef();\n\tref.current = value;\n\treturn ref;\n}\n\n/**\n * A hook to facilitate drag and drop handling.\n *\n * @param {Object} props Named parameters.\n * @param {boolean} props.isDisabled Whether or not to disable the drop zone.\n * @param {(e: DragEvent) => void} props.onDragStart Called when dragging has started.\n * @param {(e: DragEvent) => void} props.onDragEnter Called when the zone is entered.\n * @param {(e: DragEvent) => void} props.onDragOver Called when the zone is moved within.\n * @param {(e: DragEvent) => void} props.onDragLeave Called when the zone is left.\n * @param {(e: MouseEvent) => void} props.onDragEnd Called when dragging has ended.\n * @param {(e: DragEvent) => void} props.onDrop Called when dropping in the zone.\n *\n * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.\n */\nexport default function useDropZone( {\n\tisDisabled,\n\tonDrop: _onDrop,\n\tonDragStart: _onDragStart,\n\tonDragEnter: _onDragEnter,\n\tonDragLeave: _onDragLeave,\n\tonDragEnd: _onDragEnd,\n\tonDragOver: _onDragOver,\n} ) {\n\tconst onDropRef = useFreshRef( _onDrop );\n\tconst onDragStartRef = useFreshRef( _onDragStart );\n\tconst onDragEnterRef = useFreshRef( _onDragEnter );\n\tconst onDragLeaveRef = useFreshRef( _onDragLeave );\n\tconst onDragEndRef = useFreshRef( _onDragEnd );\n\tconst onDragOverRef = useFreshRef( _onDragOver );\n\n\treturn useRefEffect(\n\t\t( element ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet isDragging = false;\n\n\t\t\tconst { ownerDocument } = element;\n\n\t\t\t/**\n\t\t\t * Checks if an element is in the drop zone.\n\t\t\t *\n\t\t\t * @param {EventTarget|null} targetToCheck\n\t\t\t *\n\t\t\t * @return {boolean} True if in drop zone, false if not.\n\t\t\t */\n\t\t\tfunction isElementInZone( targetToCheck ) {\n\t\t\t\tconst { defaultView } = ownerDocument;\n\t\t\t\tif (\n\t\t\t\t\t! targetToCheck ||\n\t\t\t\t\t! defaultView ||\n\t\t\t\t\t! ( targetToCheck instanceof defaultView.HTMLElement ) ||\n\t\t\t\t\t! element.contains( targetToCheck )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\t/** @type {HTMLElement|null} */\n\t\t\t\tlet elementToCheck = targetToCheck;\n\n\t\t\t\tdo {\n\t\t\t\t\tif ( elementToCheck.dataset.isDropZone ) {\n\t\t\t\t\t\treturn elementToCheck === element;\n\t\t\t\t\t}\n\t\t\t\t} while ( ( elementToCheck = elementToCheck.parentElement ) );\n\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tfunction maybeDragStart( /** @type {DragEvent} */ event ) {\n\t\t\t\tif ( isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = true;\n\n\t\t\t\townerDocument.removeEventListener(\n\t\t\t\t\t'dragenter',\n\t\t\t\t\tmaybeDragStart\n\t\t\t\t);\n\n\t\t\t\t// Note that `dragend` doesn't fire consistently for file and\n\t\t\t\t// HTML drag events where the drag origin is outside the browser\n\t\t\t\t// window. In Firefox it may also not fire if the originating\n\t\t\t\t// node is removed.\n\t\t\t\townerDocument.addEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragStartRef.current ) {\n\t\t\t\t\tonDragStartRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragEnter( /** @type {DragEvent} */ event ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// The `dragenter` event will also fire when entering child\n\t\t\t\t// elements, but we only want to call `onDragEnter` when\n\t\t\t\t// entering the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been left) should be outside the drop zone.\n\t\t\t\tif (\n\t\t\t\t\telement.contains(\n\t\t\t\t\t\t/** @type {Node} */ ( event.relatedTarget )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragEnterRef.current ) {\n\t\t\t\t\tonDragEnterRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Only call onDragOver for the innermost hovered drop zones.\n\t\t\t\tif ( ! event.defaultPrevented && onDragOverRef.current ) {\n\t\t\t\t\tonDragOverRef.current( event );\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDragOver` is already handled.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tfunction onDragLeave( /** @type {DragEvent} */ event ) {\n\t\t\t\t// The `dragleave` event will also fire when leaving child\n\t\t\t\t// elements, but we only want to call `onDragLeave` when\n\t\t\t\t// leaving the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been entered) should be outside the drop\n\t\t\t\t// zone.\n\t\t\t\tif ( isElementInZone( event.relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragLeaveRef.current ) {\n\t\t\t\t\tonDragLeaveRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDrop( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Don't handle drop if an inner drop zone already handled it.\n\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDrop` is already handled.\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// This seemingly useless line has been shown to resolve a\n\t\t\t\t// Safari issue where files dragged directly from the dock are\n\t\t\t\t// not recognized.\n\t\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\t\tevent.dataTransfer && event.dataTransfer.files.length;\n\n\t\t\t\tif ( onDropRef.current ) {\n\t\t\t\t\tonDropRef.current( event );\n\t\t\t\t}\n\n\t\t\t\tmaybeDragEnd( event );\n\t\t\t}\n\n\t\t\tfunction maybeDragEnd( /** @type {MouseEvent} */ event ) {\n\t\t\t\tif ( ! isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = false;\n\n\t\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragEndRef.current ) {\n\t\t\t\t\tonDragEndRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telement.dataset.isDropZone = 'true';\n\t\t\telement.addEventListener( 'drop', onDrop );\n\t\t\telement.addEventListener( 'dragenter', onDragEnter );\n\t\t\telement.addEventListener( 'dragover', onDragOver );\n\t\t\telement.addEventListener( 'dragleave', onDragLeave );\n\t\t\t// The `dragstart` event doesn't fire if the drag started outside\n\t\t\t// the document.\n\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\n\t\t\treturn () => {\n\t\t\t\tdelete element.dataset.isDropZone;\n\t\t\t\telement.removeEventListener( 'drop', onDrop );\n\t\t\t\telement.removeEventListener( 'dragenter', onDragEnter );\n\t\t\t\telement.removeEventListener( 'dragover', onDragOver );\n\t\t\t\telement.removeEventListener( 'dragleave', onDragLeave );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\t\t\t};\n\t\t},\n\t\t[ isDisabled ]\n\t);\n}\n"]}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { debounce } from 'lodash';
|
|
5
|
+
/**
|
|
6
|
+
* WordPress dependencies
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
import { useState, useLayoutEffect } from '@wordpress/element';
|
|
10
|
+
import { getScrollContainer } from '@wordpress/dom';
|
|
11
|
+
import { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';
|
|
12
|
+
const DEFAULT_INIT_WINDOW_SIZE = 30;
|
|
13
|
+
/**
|
|
14
|
+
* @typedef {Object} WPFixedWindowList
|
|
15
|
+
*
|
|
16
|
+
* @property {number} visibleItems Items visible in the current viewport
|
|
17
|
+
* @property {number} start Start index of the window
|
|
18
|
+
* @property {number} end End index of the window
|
|
19
|
+
* @property {(index:number)=>boolean} itemInView Returns true if item is in the window
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* @typedef {Object} WPFixedWindowListOptions
|
|
24
|
+
*
|
|
25
|
+
* @property {number} [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.
|
|
26
|
+
* @property {boolean} [useWindowing] When false avoids calculating the window size
|
|
27
|
+
* @property {number} [initWindowSize] Initial window size to use on first render before we can calculate the window size.
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
*
|
|
32
|
+
* @param {import('react').RefObject<HTMLElement>} elementRef Used to find the closest scroll container that contains element.
|
|
33
|
+
* @param { number } itemHeight Fixed item height in pixels
|
|
34
|
+
* @param { number } totalItems Total items in list
|
|
35
|
+
* @param { WPFixedWindowListOptions } [options] Options object
|
|
36
|
+
* @return {[ WPFixedWindowList, setFixedListWindow:(nextWindow:WPFixedWindowList)=>void]} Array with the fixed window list and setter
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
export default function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
|
|
40
|
+
var _options$initWindowSi, _options$useWindowing;
|
|
41
|
+
|
|
42
|
+
const initWindowSize = (_options$initWindowSi = options === null || options === void 0 ? void 0 : options.initWindowSize) !== null && _options$initWindowSi !== void 0 ? _options$initWindowSi : DEFAULT_INIT_WINDOW_SIZE;
|
|
43
|
+
const useWindowing = (_options$useWindowing = options === null || options === void 0 ? void 0 : options.useWindowing) !== null && _options$useWindowing !== void 0 ? _options$useWindowing : true;
|
|
44
|
+
const [fixedListWindow, setFixedListWindow] = useState({
|
|
45
|
+
visibleItems: initWindowSize,
|
|
46
|
+
start: 0,
|
|
47
|
+
end: initWindowSize,
|
|
48
|
+
itemInView: (
|
|
49
|
+
/** @type {number} */
|
|
50
|
+
index) => {
|
|
51
|
+
return index >= 0 && index <= initWindowSize;
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
useLayoutEffect(() => {
|
|
55
|
+
var _scrollContainer$owne, _scrollContainer$owne2, _scrollContainer$owne3, _scrollContainer$owne4;
|
|
56
|
+
|
|
57
|
+
if (!useWindowing) {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const scrollContainer = getScrollContainer(elementRef.current);
|
|
62
|
+
|
|
63
|
+
const measureWindow = (
|
|
64
|
+
/** @type {boolean | undefined} */
|
|
65
|
+
initRender) => {
|
|
66
|
+
var _options$windowOversc;
|
|
67
|
+
|
|
68
|
+
if (!scrollContainer) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
const visibleItems = Math.ceil(scrollContainer.clientHeight / itemHeight); // Aim to keep opening list view fast, afterward we can optimize for scrolling
|
|
73
|
+
|
|
74
|
+
const windowOverscan = initRender ? visibleItems : (_options$windowOversc = options === null || options === void 0 ? void 0 : options.windowOverscan) !== null && _options$windowOversc !== void 0 ? _options$windowOversc : visibleItems;
|
|
75
|
+
const firstViewableIndex = Math.floor(scrollContainer.scrollTop / itemHeight);
|
|
76
|
+
const start = Math.max(0, firstViewableIndex - windowOverscan);
|
|
77
|
+
const end = Math.min(totalItems - 1, firstViewableIndex + visibleItems + windowOverscan);
|
|
78
|
+
setFixedListWindow(lastWindow => {
|
|
79
|
+
const nextWindow = {
|
|
80
|
+
visibleItems,
|
|
81
|
+
start,
|
|
82
|
+
end,
|
|
83
|
+
itemInView: (
|
|
84
|
+
/** @type {number} */
|
|
85
|
+
index) => {
|
|
86
|
+
return start <= index && index <= end;
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
if (lastWindow.start !== nextWindow.start || lastWindow.end !== nextWindow.end || lastWindow.visibleItems !== nextWindow.visibleItems) {
|
|
91
|
+
return nextWindow;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return lastWindow;
|
|
95
|
+
});
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
measureWindow(true);
|
|
99
|
+
const debounceMeasureList = debounce(() => {
|
|
100
|
+
measureWindow();
|
|
101
|
+
}, 16);
|
|
102
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener('scroll', debounceMeasureList);
|
|
103
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne = scrollContainer.ownerDocument) === null || _scrollContainer$owne === void 0 ? void 0 : (_scrollContainer$owne2 = _scrollContainer$owne.defaultView) === null || _scrollContainer$owne2 === void 0 ? void 0 : _scrollContainer$owne2.addEventListener('resize', debounceMeasureList);
|
|
104
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne3 = scrollContainer.ownerDocument) === null || _scrollContainer$owne3 === void 0 ? void 0 : (_scrollContainer$owne4 = _scrollContainer$owne3.defaultView) === null || _scrollContainer$owne4 === void 0 ? void 0 : _scrollContainer$owne4.addEventListener('resize', debounceMeasureList);
|
|
105
|
+
return () => {
|
|
106
|
+
var _scrollContainer$owne5, _scrollContainer$owne6;
|
|
107
|
+
|
|
108
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('scroll', debounceMeasureList);
|
|
109
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne5 = scrollContainer.ownerDocument) === null || _scrollContainer$owne5 === void 0 ? void 0 : (_scrollContainer$owne6 = _scrollContainer$owne5.defaultView) === null || _scrollContainer$owne6 === void 0 ? void 0 : _scrollContainer$owne6.removeEventListener('resize', debounceMeasureList);
|
|
110
|
+
};
|
|
111
|
+
}, [itemHeight, elementRef, totalItems]);
|
|
112
|
+
useLayoutEffect(() => {
|
|
113
|
+
var _scrollContainer$owne7, _scrollContainer$owne8;
|
|
114
|
+
|
|
115
|
+
if (!useWindowing) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
const scrollContainer = getScrollContainer(elementRef.current);
|
|
120
|
+
|
|
121
|
+
const handleKeyDown = (
|
|
122
|
+
/** @type {KeyboardEvent} */
|
|
123
|
+
event) => {
|
|
124
|
+
switch (event.keyCode) {
|
|
125
|
+
case HOME:
|
|
126
|
+
{
|
|
127
|
+
return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
|
|
128
|
+
top: 0
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
case END:
|
|
133
|
+
{
|
|
134
|
+
return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
|
|
135
|
+
top: totalItems * itemHeight
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
case PAGEUP:
|
|
140
|
+
{
|
|
141
|
+
return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
|
|
142
|
+
top: scrollContainer.scrollTop - fixedListWindow.visibleItems * itemHeight
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
case PAGEDOWN:
|
|
147
|
+
{
|
|
148
|
+
return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
|
|
149
|
+
top: scrollContainer.scrollTop + fixedListWindow.visibleItems * itemHeight
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne7 = scrollContainer.ownerDocument) === null || _scrollContainer$owne7 === void 0 ? void 0 : (_scrollContainer$owne8 = _scrollContainer$owne7.defaultView) === null || _scrollContainer$owne8 === void 0 ? void 0 : _scrollContainer$owne8.addEventListener('keydown', handleKeyDown);
|
|
156
|
+
return () => {
|
|
157
|
+
var _scrollContainer$owne9, _scrollContainer$owne10;
|
|
158
|
+
|
|
159
|
+
scrollContainer === null || scrollContainer === void 0 ? void 0 : (_scrollContainer$owne9 = scrollContainer.ownerDocument) === null || _scrollContainer$owne9 === void 0 ? void 0 : (_scrollContainer$owne10 = _scrollContainer$owne9.defaultView) === null || _scrollContainer$owne10 === void 0 ? void 0 : _scrollContainer$owne10.removeEventListener('keydown', handleKeyDown);
|
|
160
|
+
};
|
|
161
|
+
}, [totalItems, itemHeight, elementRef, fixedListWindow.visibleItems]);
|
|
162
|
+
return [fixedListWindow, setFixedListWindow];
|
|
163
|
+
}
|
|
164
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-fixed-window-list/index.js"],"names":["debounce","useState","useLayoutEffect","getScrollContainer","PAGEUP","PAGEDOWN","HOME","END","DEFAULT_INIT_WINDOW_SIZE","useFixedWindowList","elementRef","itemHeight","totalItems","options","initWindowSize","useWindowing","fixedListWindow","setFixedListWindow","visibleItems","start","end","itemInView","index","scrollContainer","current","measureWindow","initRender","Math","ceil","clientHeight","windowOverscan","firstViewableIndex","floor","scrollTop","max","min","lastWindow","nextWindow","debounceMeasureList","addEventListener","ownerDocument","defaultView","removeEventListener","handleKeyDown","event","keyCode","scrollTo","top"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { debounce } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\n\nconst DEFAULT_INIT_WINDOW_SIZE = 30;\n\n/**\n * @typedef {Object} WPFixedWindowList\n *\n * @property {number} visibleItems Items visible in the current viewport\n * @property {number} start Start index of the window\n * @property {number} end End index of the window\n * @property {(index:number)=>boolean} itemInView Returns true if item is in the window\n */\n\n/**\n * @typedef {Object} WPFixedWindowListOptions\n *\n * @property {number} [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.\n * @property {boolean} [useWindowing] When false avoids calculating the window size\n * @property {number} [initWindowSize] Initial window size to use on first render before we can calculate the window size.\n */\n\n/**\n *\n * @param {import('react').RefObject<HTMLElement>} elementRef Used to find the closest scroll container that contains element.\n * @param { number } itemHeight Fixed item height in pixels\n * @param { number } totalItems Total items in list\n * @param { WPFixedWindowListOptions } [options] Options object\n * @return {[ WPFixedWindowList, setFixedListWindow:(nextWindow:WPFixedWindowList)=>void]} Array with the fixed window list and setter\n */\nexport default function useFixedWindowList(\n\telementRef,\n\titemHeight,\n\ttotalItems,\n\toptions\n) {\n\tconst initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;\n\tconst useWindowing = options?.useWindowing ?? true;\n\n\tconst [ fixedListWindow, setFixedListWindow ] = useState( {\n\t\tvisibleItems: initWindowSize,\n\t\tstart: 0,\n\t\tend: initWindowSize,\n\t\titemInView: ( /** @type {number} */ index ) => {\n\t\t\treturn index >= 0 && index <= initWindowSize;\n\t\t},\n\t} );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tconst measureWindow = (\n\t\t\t/** @type {boolean | undefined} */ initRender\n\t\t) => {\n\t\t\tif ( ! scrollContainer ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst visibleItems = Math.ceil(\n\t\t\t\tscrollContainer.clientHeight / itemHeight\n\t\t\t);\n\t\t\t// Aim to keep opening list view fast, afterward we can optimize for scrolling\n\t\t\tconst windowOverscan = initRender\n\t\t\t\t? visibleItems\n\t\t\t\t: options?.windowOverscan ?? visibleItems;\n\t\t\tconst firstViewableIndex = Math.floor(\n\t\t\t\tscrollContainer.scrollTop / itemHeight\n\t\t\t);\n\t\t\tconst start = Math.max( 0, firstViewableIndex - windowOverscan );\n\t\t\tconst end = Math.min(\n\t\t\t\ttotalItems - 1,\n\t\t\t\tfirstViewableIndex + visibleItems + windowOverscan\n\t\t\t);\n\t\t\tsetFixedListWindow( ( lastWindow ) => {\n\t\t\t\tconst nextWindow = {\n\t\t\t\t\tvisibleItems,\n\t\t\t\t\tstart,\n\t\t\t\t\tend,\n\t\t\t\t\titemInView: ( /** @type {number} */ index ) => {\n\t\t\t\t\t\treturn start <= index && index <= end;\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\tif (\n\t\t\t\t\tlastWindow.start !== nextWindow.start ||\n\t\t\t\t\tlastWindow.end !== nextWindow.end ||\n\t\t\t\t\tlastWindow.visibleItems !== nextWindow.visibleItems\n\t\t\t\t) {\n\t\t\t\t\treturn nextWindow;\n\t\t\t\t}\n\t\t\t\treturn lastWindow;\n\t\t\t} );\n\t\t};\n\n\t\tmeasureWindow( true );\n\t\tconst debounceMeasureList = debounce( () => {\n\t\t\tmeasureWindow();\n\t\t}, 16 );\n\t\tscrollContainer?.addEventListener( 'scroll', debounceMeasureList );\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'resize',\n\t\t\tdebounceMeasureList\n\t\t);\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'resize',\n\t\t\tdebounceMeasureList\n\t\t);\n\n\t\treturn () => {\n\t\t\tscrollContainer?.removeEventListener(\n\t\t\t\t'scroll',\n\t\t\t\tdebounceMeasureList\n\t\t\t);\n\t\t\tscrollContainer?.ownerDocument?.defaultView?.removeEventListener(\n\t\t\t\t'resize',\n\t\t\t\tdebounceMeasureList\n\t\t\t);\n\t\t};\n\t}, [ itemHeight, elementRef, totalItems ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tconst handleKeyDown = ( /** @type {KeyboardEvent} */ event ) => {\n\t\t\tswitch ( event.keyCode ) {\n\t\t\t\tcase HOME: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( { top: 0 } );\n\t\t\t\t}\n\t\t\t\tcase END: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop: totalItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEUP: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop -\n\t\t\t\t\t\t\tfixedListWindow.visibleItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEDOWN: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop +\n\t\t\t\t\t\t\tfixedListWindow.visibleItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'keydown',\n\t\t\thandleKeyDown\n\t\t);\n\t\treturn () => {\n\t\t\tscrollContainer?.ownerDocument?.defaultView?.removeEventListener(\n\t\t\t\t'keydown',\n\t\t\t\thandleKeyDown\n\t\t\t);\n\t\t};\n\t}, [ totalItems, itemHeight, elementRef, fixedListWindow.visibleItems ] );\n\n\treturn [ fixedListWindow, setFixedListWindow ];\n}\n"]}
|
|
@@ -25,7 +25,8 @@ import { focus } from '@wordpress/dom';
|
|
|
25
25
|
* ```
|
|
26
26
|
*/
|
|
27
27
|
|
|
28
|
-
export default function useFocusOnMount(
|
|
28
|
+
export default function useFocusOnMount() {
|
|
29
|
+
let focusOnMount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'firstElement';
|
|
29
30
|
const focusOnMountRef = useRef(focusOnMount);
|
|
30
31
|
useEffect(() => {
|
|
31
32
|
focusOnMountRef.current = focusOnMount;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"names":["useRef","useEffect","useCallback","focus","useFocusOnMount","focusOnMount","focusOnMountRef","current","node","contains","ownerDocument","activeElement","target","firstTabbable","tabbable","find"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,EAA4BC,WAA5B,QAA+C,oBAA/C;AACA,SAASC,KAAT,QAAsB,gBAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,eAAT,
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"names":["useRef","useEffect","useCallback","focus","useFocusOnMount","focusOnMount","focusOnMountRef","current","node","contains","ownerDocument","activeElement","target","firstTabbable","tabbable","find"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,EAA4BC,WAA5B,QAA+C,oBAA/C;AACA,SAASC,KAAT,QAAsB,gBAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,eAAT,GAA0D;AAAA,MAAhCC,YAAgC,uEAAjB,cAAiB;AACxE,QAAMC,eAAe,GAAGN,MAAM,CAAEK,YAAF,CAA9B;AACAJ,EAAAA,SAAS,CAAE,MAAM;AAChBK,IAAAA,eAAe,CAACC,OAAhB,GAA0BF,YAA1B;AACA,GAFQ,EAEN,CAAEA,YAAF,CAFM,CAAT;AAIA,SAAOH,WAAW,CAAIM,IAAF,IAAY;AAAA;;AAC/B,QAAK,CAAEA,IAAF,IAAUF,eAAe,CAACC,OAAhB,KAA4B,KAA3C,EAAmD;AAClD;AACA;;AAED,QAAKC,IAAI,CAACC,QAAL,iDAAeD,IAAI,CAACE,aAApB,wDAAe,oBAAoBC,aAAnC,yEAAoD,IAApD,CAAL,EAAkE;AACjE;AACA;;AAED,QAAIC,MAAM,GAAGJ,IAAb;;AAEA,QAAKF,eAAe,CAACC,OAAhB,KAA4B,cAAjC,EAAkD;AACjD,YAAMM,aAAa,GAAGV,KAAK,CAACW,QAAN,CAAeC,IAAf,CAAqBP,IAArB,EAA6B,CAA7B,CAAtB;;AAEA,UAAKK,aAAL,EAAqB;AACpBD,QAAAA,MAAM;AAAG;AAA6BC,QAAAA,aAAtC;AACA;AACD;;AAEDD,IAAAA,MAAM,CAACT,KAAP;AACA,GApBiB,EAoBf,EApBe,CAAlB;AAqBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Hook used to focus the first tabbable element on mount.\n *\n * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.\n * @return {import('react').RefCallback<HTMLElement>} Ref callback.\n *\n * @example\n * ```js\n * import { useFocusOnMount } from '@wordpress/compose';\n *\n * const WithFocusOnMount = () => {\n * const ref = useFocusOnMount()\n * return (\n * <div ref={ ref }>\n * <Button />\n * <Button />\n * </div>\n * );\n * }\n * ```\n */\nexport default function useFocusOnMount( focusOnMount = 'firstElement' ) {\n\tconst focusOnMountRef = useRef( focusOnMount );\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\treturn useCallback( ( node ) => {\n\t\tif ( ! node || focusOnMountRef.current === false ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( node.contains( node.ownerDocument?.activeElement ?? null ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet target = node;\n\n\t\tif ( focusOnMountRef.current === 'firstElement' ) {\n\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\n\t\t\tif ( firstTabbable ) {\n\t\t\t\ttarget = /** @type {HTMLElement} */ ( firstTabbable );\n\t\t\t}\n\t\t}\n\n\t\ttarget.focus();\n\t}, [] );\n}\n"]}
|
|
@@ -34,7 +34,8 @@ function createId(object) {
|
|
|
34
34
|
*/
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
export default function useInstanceId(object, prefix
|
|
37
|
+
export default function useInstanceId(object, prefix) {
|
|
38
|
+
let preferredId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
|
38
39
|
return useMemo(() => {
|
|
39
40
|
if (preferredId) return preferredId;
|
|
40
41
|
const id = createId(object);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-instance-id/index.js"],"names":["useMemo","instanceMap","WeakMap","createId","object","instances","get","set","useInstanceId","prefix","preferredId","id"],"mappings":"AAAA;AACA;;AACA;;AACA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,MAAMC,WAAW,GAAG,IAAIC,OAAJ,EAApB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,QAAT,CAAmBC,MAAnB,EAA4B;AAC3B,QAAMC,SAAS,GAAGJ,WAAW,CAACK,GAAZ,CAAiBF,MAAjB,KAA6B,CAA/C;AACAH,EAAAA,WAAW,CAACM,GAAZ,CAAiBH,MAAjB,EAAyBC,SAAS,GAAG,CAArC;AACA,SAAOA,SAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASG,aAAT,CAAwBJ,MAAxB,EAAgCK,MAAhC,
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-instance-id/index.js"],"names":["useMemo","instanceMap","WeakMap","createId","object","instances","get","set","useInstanceId","prefix","preferredId","id"],"mappings":"AAAA;AACA;;AACA;;AACA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,MAAMC,WAAW,GAAG,IAAIC,OAAJ,EAApB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,QAAT,CAAmBC,MAAnB,EAA4B;AAC3B,QAAMC,SAAS,GAAGJ,WAAW,CAACK,GAAZ,CAAiBF,MAAjB,KAA6B,CAA/C;AACAH,EAAAA,WAAW,CAACM,GAAZ,CAAiBH,MAAjB,EAAyBC,SAAS,GAAG,CAArC;AACA,SAAOA,SAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASG,aAAT,CAAwBJ,MAAxB,EAAgCK,MAAhC,EAA2D;AAAA,MAAnBC,WAAmB,uEAAL,EAAK;AACzE,SAAOV,OAAO,CAAE,MAAM;AACrB,QAAKU,WAAL,EAAmB,OAAOA,WAAP;AACnB,UAAMC,EAAE,GAAGR,QAAQ,CAAEC,MAAF,CAAnB;AAEA,WAAOK,MAAM,GAAI,GAAGA,MAAQ,IAAIE,EAAI,EAAvB,GAA2BA,EAAxC;AACA,GALa,EAKX,CAAEP,MAAF,CALW,CAAd;AAMA;AACD","sourcesContent":["// 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 * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * @type {WeakMap<object, number>}\n */\nconst instanceMap = new WeakMap();\n\n/**\n * Creates a new id for a given object.\n *\n * @param {object} object Object reference to create an id for.\n * @return {number} The instance id (index).\n */\nfunction createId( object ) {\n\tconst instances = instanceMap.get( object ) || 0;\n\tinstanceMap.set( object, instances + 1 );\n\treturn instances;\n}\n\n/**\n * Provides a unique instance ID.\n *\n * @param {object} object Object reference to create an id for.\n * @param {string} [prefix] Prefix for the unique id.\n * @param {string | number} [preferredId=''] Default ID to use.\n * @return {string | number} The unique instance id.\n */\nexport default function useInstanceId( object, prefix, preferredId = '' ) {\n\treturn useMemo( () => {\n\t\tif ( preferredId ) return preferredId;\n\t\tconst id = createId( object );\n\n\t\treturn prefix ? `${ prefix }-${ id }` : id;\n\t}, [ object ] );\n}\n/* eslint-enable jsdoc/check-types */\n"]}
|