@wordpress/compose 5.16.1-next.4d3b314fd5.0 → 5.17.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.
Files changed (45) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/higher-order/with-global-events/listener.js +7 -7
  3. package/build/higher-order/with-global-events/listener.js.map +1 -1
  4. package/build/higher-order/with-safe-timeout/index.js +1 -7
  5. package/build/higher-order/with-safe-timeout/index.js.map +1 -1
  6. package/build/hooks/use-disabled/index.js +1 -7
  7. package/build/hooks/use-disabled/index.js.map +1 -1
  8. package/build/hooks/use-focus-outside/index.js +2 -8
  9. package/build/hooks/use-focus-outside/index.js.map +1 -1
  10. package/build/hooks/use-focus-outside/index.native.js +2 -8
  11. package/build/hooks/use-focus-outside/index.native.js.map +1 -1
  12. package/build/hooks/use-keyboard-shortcut/index.js +2 -3
  13. package/build/hooks/use-keyboard-shortcut/index.js.map +1 -1
  14. package/build/hooks/use-merge-refs/index.js +4 -2
  15. package/build/hooks/use-merge-refs/index.js.map +1 -1
  16. package/build-module/higher-order/with-global-events/listener.js +7 -6
  17. package/build-module/higher-order/with-global-events/listener.js.map +1 -1
  18. package/build-module/higher-order/with-safe-timeout/index.js +1 -6
  19. package/build-module/higher-order/with-safe-timeout/index.js.map +1 -1
  20. package/build-module/hooks/use-disabled/index.js +1 -6
  21. package/build-module/hooks/use-disabled/index.js.map +1 -1
  22. package/build-module/hooks/use-focus-outside/index.js +2 -7
  23. package/build-module/hooks/use-focus-outside/index.js.map +1 -1
  24. package/build-module/hooks/use-focus-outside/index.native.js +2 -7
  25. package/build-module/hooks/use-focus-outside/index.native.js.map +1 -1
  26. package/build-module/hooks/use-keyboard-shortcut/index.js +2 -2
  27. package/build-module/hooks/use-keyboard-shortcut/index.js.map +1 -1
  28. package/build-module/hooks/use-merge-refs/index.js +4 -2
  29. package/build-module/hooks/use-merge-refs/index.js.map +1 -1
  30. package/build-types/higher-order/with-global-events/listener.d.ts.map +1 -1
  31. package/build-types/higher-order/with-safe-timeout/index.d.ts.map +1 -1
  32. package/build-types/hooks/use-disabled/index.d.ts.map +1 -1
  33. package/build-types/hooks/use-focus-outside/index.d.ts.map +1 -1
  34. package/build-types/hooks/use-keyboard-shortcut/index.d.ts.map +1 -1
  35. package/build-types/hooks/use-merge-refs/index.d.ts.map +1 -1
  36. package/package.json +8 -10
  37. package/src/higher-order/with-global-events/listener.js +6 -8
  38. package/src/higher-order/with-safe-timeout/index.tsx +1 -6
  39. package/src/hooks/use-disabled/index.js +1 -7
  40. package/src/hooks/use-focus-outside/index.js +2 -8
  41. package/src/hooks/use-focus-outside/index.native.js +2 -8
  42. package/src/hooks/use-keyboard-shortcut/index.js +4 -2
  43. package/src/hooks/use-merge-refs/index.js +6 -1
  44. package/src/hooks/use-merge-refs/test/index.js +44 -0
  45. package/tsconfig.tsbuildinfo +1 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/compose/src/hooks/use-disabled/index.js"],"names":["includes","focus","debounce","useRefEffect","DISABLED_ELIGIBLE_NODE_NAMES","useDisabled","isDisabled","isDisabledProp","node","updates","disable","style","getPropertyValue","previousValue","setProperty","push","isConnected","focusable","find","forEach","nodeName","disabled","setAttribute","getAttribute","removeAttribute","tabIndex","hasAttribute","ownerDocument","defaultView","HTMLElement","debouncedDisable","leading","observer","window","MutationObserver","observe","childList","attributes","subtree","disconnect","cancel","update"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,QAAzB;AAEA;AACA;AACA;;AACA,SAASC,KAAT,QAAsB,gBAAtB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,sBAAzB;AACA,OAAOC,YAAP,MAAyB,mBAAzB;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;AACA;;AACA,eAAe,SAASC,WAAT,GAEN;AAAA,MAF4B;AACpCC,IAAAA,UAAU,EAAEC,cAAc,GAAG;AADO,GAE5B,uEAAL,EAAK;AACR,SAAOJ,YAAY,CAChBK,IAAF,IAAY;AACX,QAAKD,cAAL,EAAsB;AACrB;AACA;AAED;;AACA;;;AACA,UAAME,OAAO,GAAG,EAAhB;;AAEA,UAAMC,OAAO,GAAG,MAAM;AACrB,UAAKF,IAAI,CAACG,KAAL,CAAWC,gBAAX,CAA6B,aAA7B,MAAiD,MAAtD,EAA+D;AAC9D,cAAMC,aAAa,GAClBL,IAAI,CAACG,KAAL,CAAWC,gBAAX,CAA6B,aAA7B,CADD;AAEAJ,QAAAA,IAAI,CAACG,KAAL,CAAWG,WAAX,CAAwB,aAAxB,EAAuC,MAAvC;AACAN,QAAAA,IAAI,CAACG,KAAL,CAAWG,WAAX,CAAwB,qBAAxB,EAA+C,MAA/C;AACAL,QAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,cAAK,CAAEP,IAAI,CAACQ,WAAZ,EAA0B;AACzB;AACA;;AACDR,UAAAA,IAAI,CAACG,KAAL,CAAWG,WAAX,CAAwB,aAAxB,EAAuCD,aAAvC;AACAL,UAAAA,IAAI,CAACG,KAAL,CAAWG,WAAX,CACC,qBADD,EAECD,aAFD;AAIA,SATD;AAUA;;AAEDZ,MAAAA,KAAK,CAACgB,SAAN,CAAgBC,IAAhB,CAAsBV,IAAtB,EAA6BW,OAA7B,CAAwCF,SAAF,IAAiB;AAAA;;AACtD,YACCjB,QAAQ,CACPI,4BADO,EAEPa,SAAS,CAACG,QAFH,CAAR,IAIA;AACA,SAAEH,SAAS,CAACI,QANb,EAOE;AACDJ,UAAAA,SAAS,CAACK,YAAV,CAAwB,UAAxB,EAAoC,EAApC;AACAb,UAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,gBAAK,CAAEE,SAAS,CAACD,WAAjB,EAA+B;AAC9B;AACA,aAHkB,CAInB;;;AACAC,YAAAA,SAAS,CAACI,QAAV,GAAqB,KAArB;AACA,WAND;AAOA;;AAED,YACCJ,SAAS,CAACG,QAAV,KAAuB,GAAvB,IACAH,SAAS,CAACM,YAAV,CAAwB,UAAxB,MAAyC,IAF1C,EAGE;AACD,gBAAMV,aAAa,GAClBI,SAAS,CAACM,YAAV,CAAwB,UAAxB,CADD;AAEAN,UAAAA,SAAS,CAACK,YAAV,CAAwB,UAAxB,EAAoC,IAApC;AACAb,UAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,gBAAK,CAAEE,SAAS,CAACD,WAAjB,EAA+B;AAC9B;AACA;;AACD,gBAAK,CAAEH,aAAP,EAAuB;AACtBI,cAAAA,SAAS,CAACO,eAAV,CAA2B,UAA3B;AACA,aAFD,MAEO;AACNP,cAAAA,SAAS,CAACK,YAAV,CACC,UADD,EAECT,aAFD;AAIA;AACD,WAZD;AAaA;;AAED,cAAMY,QAAQ,GAAGR,SAAS,CAACM,YAAV,CAAwB,UAAxB,CAAjB;;AACA,YAAKE,QAAQ,KAAK,IAAb,IAAqBA,QAAQ,KAAK,IAAvC,EAA8C;AAC7CR,UAAAA,SAAS,CAACO,eAAV,CAA2B,UAA3B;AACAf,UAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,gBAAK,CAAEE,SAAS,CAACD,WAAjB,EAA+B;AAC9B;AACA;;AACDC,YAAAA,SAAS,CAACK,YAAV,CAAwB,UAAxB,EAAoCG,QAApC;AACA,WALD;AAMA;;AAED,YACCR,SAAS,CAACS,YAAV,CAAwB,iBAAxB,KACAT,SAAS,CAACM,YAAV,CAAwB,iBAAxB,MAAgD,OAFjD,EAGE;AACDN,UAAAA,SAAS,CAACK,YAAV,CAAwB,iBAAxB,EAA2C,OAA3C;AACAb,UAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,gBAAK,CAAEE,SAAS,CAACD,WAAjB,EAA+B;AAC9B;AACA;;AACDC,YAAAA,SAAS,CAACK,YAAV,CAAwB,iBAAxB,EAA2C,MAA3C;AACA,WALD;AAMA;;AAED,YACC,yBAAAd,IAAI,CAACmB,aAAL,CAAmBC,WAAnB,wEAAgCC,WAAhC,IACAZ,SAAS,YACRT,IAAI,CAACmB,aAAL,CAAmBC,WAAnB,CAA+BC,WAHjC,EAIE;AACD,gBAAMhB,aAAa,GAClBI,SAAS,CAACN,KAAV,CAAgBC,gBAAhB,CACC,gBADD,CADD;AAIAK,UAAAA,SAAS,CAACN,KAAV,CAAgBG,WAAhB,CAA6B,gBAA7B,EAA+C,MAA/C;AACAL,UAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,gBAAK,CAAEE,SAAS,CAACD,WAAjB,EAA+B;AAC9B;AACA;;AACDC,YAAAA,SAAS,CAACN,KAAV,CAAgBG,WAAhB,CACC,gBADD,EAECD,aAFD;AAIA,WARD;AASA;AACD,OArFD;AAsFA,KAxGD,CATW,CAmHX;AACA;;;AACA,UAAMiB,gBAAgB,GAAG5B,QAAQ,CAAEQ,OAAF,EAAW,CAAX,EAAc;AAC9CqB,MAAAA,OAAO,EAAE;AADqC,KAAd,CAAjC;AAGArB,IAAAA,OAAO;AAEP;;AACA,UAAMsB,QAAQ,GAAG,IAAIC,MAAM,CAACC,gBAAX,CAA6BJ,gBAA7B,CAAjB;AACAE,IAAAA,QAAQ,CAACG,OAAT,CAAkB3B,IAAlB,EAAwB;AACvB4B,MAAAA,SAAS,EAAE,IADY;AAEvBC,MAAAA,UAAU,EAAE,IAFW;AAGvBC,MAAAA,OAAO,EAAE;AAHc,KAAxB;AAMA,WAAO,MAAM;AACZ,UAAKN,QAAL,EAAgB;AACfA,QAAAA,QAAQ,CAACO,UAAT;AACA;;AACDT,MAAAA,gBAAgB,CAACU,MAAjB;AACA/B,MAAAA,OAAO,CAACU,OAAR,CAAmBsB,MAAF,IAAcA,MAAM,EAArC;AACA,KAND;AAOA,GA1IiB,EA2IlB,CAAElC,cAAF,CA3IkB,CAAnB;AA6IA","sourcesContent":["/**\n * External dependencies\n */\nimport { includes } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\nimport useRefEffect from '../use-ref-effect';\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 * @param {Object} config Configuration object.\n * @param {boolean=} config.isDisabled Whether the element should be disabled.\n * @return {import('react').RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { 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\tisDisabled: isDisabledProp = false,\n} = {} ) {\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( isDisabledProp ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t/** A variable keeping track of the previous updates in order to restore them. */\n\t\t\t/** @type {Function[]} */\n\t\t\tconst updates = [];\n\n\t\t\tconst disable = () => {\n\t\t\t\tif ( node.style.getPropertyValue( 'user-select' ) !== 'none' ) {\n\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\tnode.style.getPropertyValue( 'user-select' );\n\t\t\t\t\tnode.style.setProperty( 'user-select', 'none' );\n\t\t\t\t\tnode.style.setProperty( '-webkit-user-select', 'none' );\n\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\tif ( ! node.isConnected ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tnode.style.setProperty( 'user-select', previousValue );\n\t\t\t\t\t\tnode.style.setProperty(\n\t\t\t\t\t\t\t'-webkit-user-select',\n\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t);\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tfocus.focusable.find( node ).forEach( ( focusable ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tincludes(\n\t\t\t\t\t\t\tDISABLED_ELIGIBLE_NODE_NAMES,\n\t\t\t\t\t\t\tfocusable.nodeName\n\t\t\t\t\t\t) &&\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\t! focusable.disabled\n\t\t\t\t\t) {\n\t\t\t\t\t\tfocusable.setAttribute( 'disabled', '' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\t\tfocusable.disabled = false;\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tfocusable.nodeName === 'A' &&\n\t\t\t\t\t\tfocusable.getAttribute( 'tabindex' ) !== '-1'\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\t\tfocusable.getAttribute( 'tabindex' );\n\t\t\t\t\t\tfocusable.setAttribute( 'tabindex', '-1' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( ! previousValue ) {\n\t\t\t\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfocusable.setAttribute(\n\t\t\t\t\t\t\t\t\t'tabindex',\n\t\t\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tconst tabIndex = focusable.getAttribute( 'tabindex' );\n\t\t\t\t\tif ( tabIndex !== null && tabIndex !== '-1' ) {\n\t\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.setAttribute( 'tabindex', tabIndex );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tfocusable.hasAttribute( 'contenteditable' ) &&\n\t\t\t\t\t\tfocusable.getAttribute( 'contenteditable' ) !== 'false'\n\t\t\t\t\t) {\n\t\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'false' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'true' );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.ownerDocument.defaultView?.HTMLElement &&\n\t\t\t\t\t\tfocusable instanceof\n\t\t\t\t\t\t\tnode.ownerDocument.defaultView.HTMLElement\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\t\tfocusable.style.getPropertyValue(\n\t\t\t\t\t\t\t\t'pointer-events'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\tfocusable.style.setProperty( 'pointer-events', 'none' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.style.setProperty(\n\t\t\t\t\t\t\t\t'pointer-events',\n\t\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\t// Debounce re-disable since disabling process itself will incur\n\t\t\t// additional mutations which should be ignored.\n\t\t\tconst debouncedDisable = debounce( disable, 0, {\n\t\t\t\tleading: true,\n\t\t\t} );\n\t\t\tdisable();\n\n\t\t\t/** @type {MutationObserver | undefined} */\n\t\t\tconst observer = new window.MutationObserver( debouncedDisable );\n\t\t\tobserver.observe( node, {\n\t\t\t\tchildList: true,\n\t\t\t\tattributes: true,\n\t\t\t\tsubtree: true,\n\t\t\t} );\n\n\t\t\treturn () => {\n\t\t\t\tif ( observer ) {\n\t\t\t\t\tobserver.disconnect();\n\t\t\t\t}\n\t\t\t\tdebouncedDisable.cancel();\n\t\t\t\tupdates.forEach( ( update ) => update() );\n\t\t\t};\n\t\t},\n\t\t[ isDisabledProp ]\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/compose/src/hooks/use-disabled/index.js"],"names":["focus","debounce","useRefEffect","DISABLED_ELIGIBLE_NODE_NAMES","useDisabled","isDisabled","isDisabledProp","node","updates","disable","style","getPropertyValue","previousValue","setProperty","push","isConnected","focusable","find","forEach","includes","nodeName","disabled","setAttribute","getAttribute","removeAttribute","tabIndex","hasAttribute","ownerDocument","defaultView","HTMLElement","debouncedDisable","leading","observer","window","MutationObserver","observe","childList","attributes","subtree","disconnect","cancel","update"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\nimport useRefEffect from '../use-ref-effect';\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 * @param {Object} config Configuration object.\n * @param {boolean=} config.isDisabled Whether the element should be disabled.\n * @return {import('react').RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { 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\tisDisabled: isDisabledProp = false,\n} = {} ) {\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( isDisabledProp ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t/** A variable keeping track of the previous updates in order to restore them. */\n\t\t\t/** @type {Function[]} */\n\t\t\tconst updates = [];\n\n\t\t\tconst disable = () => {\n\t\t\t\tif ( node.style.getPropertyValue( 'user-select' ) !== 'none' ) {\n\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\tnode.style.getPropertyValue( 'user-select' );\n\t\t\t\t\tnode.style.setProperty( 'user-select', 'none' );\n\t\t\t\t\tnode.style.setProperty( '-webkit-user-select', 'none' );\n\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\tif ( ! node.isConnected ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tnode.style.setProperty( 'user-select', previousValue );\n\t\t\t\t\t\tnode.style.setProperty(\n\t\t\t\t\t\t\t'-webkit-user-select',\n\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t);\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tfocus.focusable.find( node ).forEach( ( focusable ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tDISABLED_ELIGIBLE_NODE_NAMES.includes(\n\t\t\t\t\t\t\tfocusable.nodeName\n\t\t\t\t\t\t) &&\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\t! focusable.disabled\n\t\t\t\t\t) {\n\t\t\t\t\t\tfocusable.setAttribute( 'disabled', '' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\t\tfocusable.disabled = false;\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tfocusable.nodeName === 'A' &&\n\t\t\t\t\t\tfocusable.getAttribute( 'tabindex' ) !== '-1'\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\t\tfocusable.getAttribute( 'tabindex' );\n\t\t\t\t\t\tfocusable.setAttribute( 'tabindex', '-1' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( ! previousValue ) {\n\t\t\t\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfocusable.setAttribute(\n\t\t\t\t\t\t\t\t\t'tabindex',\n\t\t\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tconst tabIndex = focusable.getAttribute( 'tabindex' );\n\t\t\t\t\tif ( tabIndex !== null && tabIndex !== '-1' ) {\n\t\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.setAttribute( 'tabindex', tabIndex );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tfocusable.hasAttribute( 'contenteditable' ) &&\n\t\t\t\t\t\tfocusable.getAttribute( 'contenteditable' ) !== 'false'\n\t\t\t\t\t) {\n\t\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'false' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'true' );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.ownerDocument.defaultView?.HTMLElement &&\n\t\t\t\t\t\tfocusable instanceof\n\t\t\t\t\t\t\tnode.ownerDocument.defaultView.HTMLElement\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\t\tfocusable.style.getPropertyValue(\n\t\t\t\t\t\t\t\t'pointer-events'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\tfocusable.style.setProperty( 'pointer-events', 'none' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.style.setProperty(\n\t\t\t\t\t\t\t\t'pointer-events',\n\t\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\t// Debounce re-disable since disabling process itself will incur\n\t\t\t// additional mutations which should be ignored.\n\t\t\tconst debouncedDisable = debounce( disable, 0, {\n\t\t\t\tleading: true,\n\t\t\t} );\n\t\t\tdisable();\n\n\t\t\t/** @type {MutationObserver | undefined} */\n\t\t\tconst observer = new window.MutationObserver( debouncedDisable );\n\t\t\tobserver.observe( node, {\n\t\t\t\tchildList: true,\n\t\t\t\tattributes: true,\n\t\t\t\tsubtree: true,\n\t\t\t} );\n\n\t\t\treturn () => {\n\t\t\t\tif ( observer ) {\n\t\t\t\t\tobserver.disconnect();\n\t\t\t\t}\n\t\t\t\tdebouncedDisable.cancel();\n\t\t\t\tupdates.forEach( ( update ) => update() );\n\t\t\t};\n\t\t},\n\t\t[ isDisabledProp ]\n\t);\n}\n"]}
@@ -1,11 +1,6 @@
1
- /**
2
- * External dependencies
3
- */
4
- import { includes } from 'lodash';
5
1
  /**
6
2
  * WordPress dependencies
7
3
  */
8
-
9
4
  import { useCallback, useEffect, useRef } from '@wordpress/element';
10
5
  /**
11
6
  * Input types which are classified as button types, for use in considering
@@ -44,7 +39,7 @@ function isFocusNormalizedButton(eventTarget) {
44
39
  return true;
45
40
 
46
41
  case 'INPUT':
47
- return includes(INPUT_BUTTON_TYPES,
42
+ return INPUT_BUTTON_TYPES.includes(
48
43
  /** @type {HTMLInputElement} */
49
44
  eventTarget.type);
50
45
  }
@@ -139,7 +134,7 @@ export default function useFocusOutside(onFocusOutside) {
139
134
  type,
140
135
  target
141
136
  } = event;
142
- const isInteractionEnd = includes(['mouseup', 'touchend'], type);
137
+ const isInteractionEnd = ['mouseup', 'touchend'].includes(type);
143
138
 
144
139
  if (isInteractionEnd) {
145
140
  preventBlurCheck.current = false;
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.js"],"names":["includes","useCallback","useEffect","useRef","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { includes } from 'lodash';\n\n/**\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\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\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 includes(\n\t\t\t\tINPUT_BUTTON_TYPES,\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 = includes( [ 'mouseup', 'touchend' ], 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\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\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"]}
1
+ {"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.js"],"names":["useCallback","useEffect","useRef","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":"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","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\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\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\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\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"]}
@@ -1,11 +1,6 @@
1
- /**
2
- * External dependencies
3
- */
4
- import { includes } from 'lodash';
5
1
  /**
6
2
  * WordPress dependencies
7
3
  */
8
-
9
4
  import { useCallback, useEffect, useRef } from '@wordpress/element';
10
5
  /**
11
6
  * Input types which are classified as button types, for use in considering
@@ -40,7 +35,7 @@ function isFocusNormalizedButton(eventTarget) {
40
35
  return true;
41
36
 
42
37
  case 'INPUT':
43
- return includes(INPUT_BUTTON_TYPES,
38
+ return INPUT_BUTTON_TYPES.includes(
44
39
  /** @type {HTMLInputElement} */
45
40
  eventTarget.type);
46
41
  }
@@ -135,7 +130,7 @@ export default function useFocusOutside(onFocusOutside) {
135
130
  type,
136
131
  target
137
132
  } = event;
138
- const isInteractionEnd = includes(['mouseup', 'touchend'], type);
133
+ const isInteractionEnd = ['mouseup', 'touchend'].includes(type);
139
134
 
140
135
  if (isInteractionEnd) {
141
136
  preventBlurCheck.current = false;
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.native.js"],"names":["includes","useCallback","useEffect","useRef","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","nodeName","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { includes } from 'lodash';\n\n/**\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 includes(\n\t\t\t\tINPUT_BUTTON_TYPES,\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 = includes( [ 'mouseup', 'touchend' ], 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"]}
1
+ {"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.native.js"],"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"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAT,EAAsBC,SAAtB,EAAiCC,MAAjC,QAA+C,oBAA/C;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,kBAAkB,GAAG,CAAE,QAAF,EAAY,QAAZ,CAA3B;AAEA;AACA;AACA;AAEA;;AACA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,uBAAT,CAAkCC,WAAlC,EAAgD;AAC/C,UAASA,WAAW,CAACC,QAArB;AACC,SAAK,GAAL;AACA,SAAK,QAAL;AACC,aAAO,IAAP;;AAED,SAAK,OAAL;AACC,aAAOH,kBAAkB,CAACI,QAAnB;AACN;AAAkCF,MAAAA,WAAF,CAAgBG,IAD1C,CAAP;AANF;;AAWA,SAAO,KAAP;AACA;AACD;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASC,eAAT,CAA0BC,cAA1B,EAA2C;AACzD,QAAMC,qBAAqB,GAAGT,MAAM,CAAEQ,cAAF,CAApC;AACAT,EAAAA,SAAS,CAAE,MAAM;AAChBU,IAAAA,qBAAqB,CAACC,OAAtB,GAAgCF,cAAhC;AACA,GAFQ,EAEN,CAAEA,cAAF,CAFM,CAAT;AAIA,QAAMG,gBAAgB,GAAGX,MAAM,CAAE,KAAF,CAA/B;AAEA;AACD;AACA;;AACC,QAAMY,kBAAkB,GAAGZ,MAAM,EAAjC;AAEA;AACD;AACA;;AACC,QAAMa,eAAe,GAAGf,WAAW,CAAE,MAAM;AAC1CgB,IAAAA,YAAY,CAAEF,kBAAkB,CAACF,OAArB,CAAZ;AACA,GAFkC,EAEhC,EAFgC,CAAnC,CAhByD,CAoBzD;;AACAX,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAMc,eAAe,EAA5B;AACA,GAFQ,EAEN,EAFM,CAAT,CArByD,CAyBzD;;AACAd,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,CAAES,cAAP,EAAwB;AACvBK,MAAAA,eAAe;AACf;AACD,GAJQ,EAIN,CAAEL,cAAF,EAAkBK,eAAlB,CAJM,CAAT;AAMA;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACC,QAAME,oBAAoB,GAAGjB,WAAW,CAAIkB,KAAF,IAAa;AACtD,UAAM;AAAEV,MAAAA,IAAF;AAAQW,MAAAA;AAAR,QAAmBD,KAAzB;AACA,UAAME,gBAAgB,GAAG,CAAE,SAAF,EAAa,UAAb,EAA0Bb,QAA1B,CAAoCC,IAApC,CAAzB;;AAEA,QAAKY,gBAAL,EAAwB;AACvBP,MAAAA,gBAAgB,CAACD,OAAjB,GAA2B,KAA3B;AACA,KAFD,MAEO,IAAKR,uBAAuB,CAAEe,MAAF,CAA5B,EAAyC;AAC/CN,MAAAA,gBAAgB,CAACD,OAAjB,GAA2B,IAA3B;AACA;AACD,GATuC,EASrC,EATqC,CAAxC;AAWA;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACC,QAAMS,cAAc,GAAGrB,WAAW,CAAIkB,KAAF,IAAa;AAChD;AACA;AACAA,IAAAA,KAAK,CAACI,OAAN,GAHgD,CAKhD;;AACA,QAAKT,gBAAgB,CAACD,OAAtB,EAAgC;AAC/B;AACA;;AAEDE,IAAAA,kBAAkB,CAACF,OAAnB,GAA6BW,UAAU,CAAE,MAAM;AAC9C,UAAK,eAAe,OAAOZ,qBAAqB,CAACC,OAAjD,EAA2D;AAC1DD,QAAAA,qBAAqB,CAACC,OAAtB,CAA+BM,KAA/B;AACA;AACD,KAJsC,EAIpC,CAJoC,CAAvC;AAKA,GAfiC,EAe/B,EAf+B,CAAlC;AAiBA,SAAO;AACNM,IAAAA,OAAO,EAAET,eADH;AAENU,IAAAA,WAAW,EAAER,oBAFP;AAGNS,IAAAA,SAAS,EAAET,oBAHL;AAINU,IAAAA,YAAY,EAAEV,oBAJR;AAKNW,IAAAA,UAAU,EAAEX,oBALN;AAMNY,IAAAA,MAAM,EAAER;AANF,GAAP;AAQA","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"]}
@@ -3,7 +3,6 @@
3
3
  */
4
4
  import Mousetrap from 'mousetrap';
5
5
  import 'mousetrap/plugins/global-bind/mousetrap-global-bind';
6
- import { castArray } from 'lodash';
7
6
  /**
8
7
  * WordPress dependencies
9
8
  */
@@ -60,7 +59,8 @@ shortcuts, callback) {
60
59
 
61
60
  /** @type {unknown} */
62
61
  document);
63
- castArray(shortcuts).forEach(shortcut => {
62
+ const shortcutsArray = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
63
+ shortcutsArray.forEach(shortcut => {
64
64
  const keys = shortcut.split('+'); // Determines whether a key is a modifier by the length of the string.
65
65
  // E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that
66
66
  // the modifiers are Shift and Cmd because they're not a single character.
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.js"],"names":["Mousetrap","castArray","useEffect","useRef","isAppleOS","useKeyboardShortcut","shortcuts","callback","bindGlobal","eventName","isDisabled","target","currentCallback","current","mousetrap","document","forEach","shortcut","keys","split","modifiers","Set","filter","value","length","hasAlt","has","hasShift","size","Error","bindFn","reset"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,WAAtB;AACA,OAAO,qDAAP;AACA,SAASC,SAAT,QAA0B,QAA1B;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,mBAAT;AACC;AACAC,SAFD,EAGCC,QAHD,EAUE;AAAA,MAND;AACCC,IAAAA,UAAU,GAAG,KADd;AAECC,IAAAA,SAAS,GAAG,SAFb;AAGCC,IAAAA,UAAU,GAAG,KAHd;AAGqB;AACpBC,IAAAA;AAJD,GAMC,uEADG,EACH;AACD,QAAMC,eAAe,GAAGT,MAAM,CAAEI,QAAF,CAA9B;AACAL,EAAAA,SAAS,CAAE,MAAM;AAChBU,IAAAA,eAAe,CAACC,OAAhB,GAA0BN,QAA1B;AACA,GAFQ,EAEN,CAAEA,QAAF,CAFM,CAAT;AAIAL,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKQ,UAAL,EAAkB;AACjB;AACA;;AACD,UAAMI,SAAS,GAAG,IAAId,SAAJ,CACjBW,MAAM,IAAIA,MAAM,CAACE,OAAjB,GACGF,MAAM,CAACE,OADV,GAEG;AACA;AACA;;AACA;;AAAyB;AAAyBE,IAAAA,QANpC,CAAlB;AAQAd,IAAAA,SAAS,CAAEK,SAAF,CAAT,CAAuBU,OAAvB,CAAkCC,QAAF,IAAgB;AAC/C,YAAMC,IAAI,GAAGD,QAAQ,CAACE,KAAT,CAAgB,GAAhB,CAAb,CAD+C,CAE/C;AACA;AACA;;AACA,YAAMC,SAAS,GAAG,IAAIC,GAAJ,CACjBH,IAAI,CAACI,MAAL,CAAeC,KAAF,IAAaA,KAAK,CAACC,MAAN,GAAe,CAAzC,CADiB,CAAlB;AAGA,YAAMC,MAAM,GAAGL,SAAS,CAACM,GAAV,CAAe,KAAf,CAAf;AACA,YAAMC,QAAQ,GAAGP,SAAS,CAACM,GAAV,CAAe,OAAf,CAAjB,CAT+C,CAW/C;;AACA,UACCtB,SAAS,OACLgB,SAAS,CAACQ,IAAV,KAAmB,CAAnB,IAAwBH,MAA1B,IACCL,SAAS,CAACQ,IAAV,KAAmB,CAAnB,IAAwBH,MAAxB,IAAkCE,QAF5B,CADV,EAIE;AACD,cAAM,IAAIE,KAAJ,CACJ,eAAeZ,QAAU,iEADrB,CAAN;AAGA;;AAED,YAAMa,MAAM,GAAGtB,UAAU,GAAG,YAAH,GAAkB,MAA3C,CAtB+C,CAuB/C;;AACAM,MAAAA,SAAS,CAAEgB,MAAF,CAAT,CACCb,QADD,EAEC;AAAA;AAIC;AACAL,UAAAA,eAAe,CAACC,OAAhB,CAAyB,YAAzB;AALD;AAAA,OAFD,EAQCJ,SARD;AAUA,KAlCD;AAoCA,WAAO,MAAM;AACZK,MAAAA,SAAS,CAACiB,KAAV;AACA,KAFD;AAGA,GAnDQ,EAmDN,CAAEzB,SAAF,EAAaE,UAAb,EAAyBC,SAAzB,EAAoCE,MAApC,EAA4CD,UAA5C,CAnDM,CAAT;AAoDA;;AAED,eAAeL,mBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind';\nimport { castArray } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * A block selection object.\n *\n * @typedef {Object} WPKeyboardShortcutConfig\n *\n * @property {boolean} [bindGlobal] Handle keyboard events anywhere including inside textarea/input fields.\n * @property {string} [eventName] Event name used to trigger the handler, defaults to keydown.\n * @property {boolean} [isDisabled] Disables the keyboard handler if the value is true.\n * @property {import('react').RefObject<HTMLElement>} [target] React reference to the DOM element used to catch the keyboard event.\n */\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param {string[]|string} shortcuts Keyboard Shortcuts.\n * @param {(e: import('mousetrap').ExtendedKeyboardEvent, combo: string) => void} callback Shortcut callback.\n * @param {WPKeyboardShortcutConfig} options Shortcut options.\n */\nfunction useKeyboardShortcut(\n\t/* eslint-enable jsdoc/valid-types */\n\tshortcuts,\n\tcallback,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false, // This is important for performance considerations.\n\t\ttarget,\n\t} = {}\n) {\n\tconst currentCallback = useRef( callback );\n\tuseEffect( () => {\n\t\tcurrentCallback.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t // necessary to maintain the existing behavior.\n\t\t\t\t /** @type {Element} */ ( /** @type {unknown} */ ( document ) )\n\t\t);\n\t\tcastArray( shortcuts ).forEach( ( shortcut ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\t// Determines whether a key is a modifier by the length of the string.\n\t\t\t// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that\n\t\t\t// the modifiers are Shift and Cmd because they're not a single character.\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\t// This should be better moved to the shortcut registration instead.\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// @ts-ignore `bindGlobal` is an undocumented property\n\t\t\tmousetrap[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t(\n\t\t\t\t\t/* eslint-disable jsdoc/valid-types */\n\t\t\t\t\t/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args\n\t\t\t\t) =>\n\t\t\t\t\t/* eslint-enable jsdoc/valid-types */\n\t\t\t\t\tcurrentCallback.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"]}
1
+ {"version":3,"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.js"],"names":["Mousetrap","useEffect","useRef","isAppleOS","useKeyboardShortcut","shortcuts","callback","bindGlobal","eventName","isDisabled","target","currentCallback","current","mousetrap","document","shortcutsArray","Array","isArray","forEach","shortcut","keys","split","modifiers","Set","filter","value","length","hasAlt","has","hasShift","size","Error","bindFn","reset"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,WAAtB;AACA,OAAO,qDAAP;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,mBAAT;AACC;AACAC,SAFD,EAGCC,QAHD,EAUE;AAAA,MAND;AACCC,IAAAA,UAAU,GAAG,KADd;AAECC,IAAAA,SAAS,GAAG,SAFb;AAGCC,IAAAA,UAAU,GAAG,KAHd;AAGqB;AACpBC,IAAAA;AAJD,GAMC,uEADG,EACH;AACD,QAAMC,eAAe,GAAGT,MAAM,CAAEI,QAAF,CAA9B;AACAL,EAAAA,SAAS,CAAE,MAAM;AAChBU,IAAAA,eAAe,CAACC,OAAhB,GAA0BN,QAA1B;AACA,GAFQ,EAEN,CAAEA,QAAF,CAFM,CAAT;AAIAL,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKQ,UAAL,EAAkB;AACjB;AACA;;AACD,UAAMI,SAAS,GAAG,IAAIb,SAAJ,CACjBU,MAAM,IAAIA,MAAM,CAACE,OAAjB,GACGF,MAAM,CAACE,OADV,GAEG;AACA;AACA;;AACA;;AAAyB;AAAyBE,IAAAA,QANpC,CAAlB;AAQA,UAAMC,cAAc,GAAGC,KAAK,CAACC,OAAN,CAAeZ,SAAf,IACpBA,SADoB,GAEpB,CAAEA,SAAF,CAFH;AAGAU,IAAAA,cAAc,CAACG,OAAf,CAA0BC,QAAF,IAAgB;AACvC,YAAMC,IAAI,GAAGD,QAAQ,CAACE,KAAT,CAAgB,GAAhB,CAAb,CADuC,CAEvC;AACA;AACA;;AACA,YAAMC,SAAS,GAAG,IAAIC,GAAJ,CACjBH,IAAI,CAACI,MAAL,CAAeC,KAAF,IAAaA,KAAK,CAACC,MAAN,GAAe,CAAzC,CADiB,CAAlB;AAGA,YAAMC,MAAM,GAAGL,SAAS,CAACM,GAAV,CAAe,KAAf,CAAf;AACA,YAAMC,QAAQ,GAAGP,SAAS,CAACM,GAAV,CAAe,OAAf,CAAjB,CATuC,CAWvC;;AACA,UACCzB,SAAS,OACLmB,SAAS,CAACQ,IAAV,KAAmB,CAAnB,IAAwBH,MAA1B,IACCL,SAAS,CAACQ,IAAV,KAAmB,CAAnB,IAAwBH,MAAxB,IAAkCE,QAF5B,CADV,EAIE;AACD,cAAM,IAAIE,KAAJ,CACJ,eAAeZ,QAAU,iEADrB,CAAN;AAGA;;AAED,YAAMa,MAAM,GAAGzB,UAAU,GAAG,YAAH,GAAkB,MAA3C,CAtBuC,CAuBvC;;AACAM,MAAAA,SAAS,CAAEmB,MAAF,CAAT,CACCb,QADD,EAEC;AAAA;AAIC;AACAR,UAAAA,eAAe,CAACC,OAAhB,CAAyB,YAAzB;AALD;AAAA,OAFD,EAQCJ,SARD;AAUA,KAlCD;AAoCA,WAAO,MAAM;AACZK,MAAAA,SAAS,CAACoB,KAAV;AACA,KAFD;AAGA,GAtDQ,EAsDN,CAAE5B,SAAF,EAAaE,UAAb,EAAyBC,SAAzB,EAAoCE,MAApC,EAA4CD,UAA5C,CAtDM,CAAT;AAuDA;;AAED,eAAeL,mBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * A block selection object.\n *\n * @typedef {Object} WPKeyboardShortcutConfig\n *\n * @property {boolean} [bindGlobal] Handle keyboard events anywhere including inside textarea/input fields.\n * @property {string} [eventName] Event name used to trigger the handler, defaults to keydown.\n * @property {boolean} [isDisabled] Disables the keyboard handler if the value is true.\n * @property {import('react').RefObject<HTMLElement>} [target] React reference to the DOM element used to catch the keyboard event.\n */\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param {string[]|string} shortcuts Keyboard Shortcuts.\n * @param {(e: import('mousetrap').ExtendedKeyboardEvent, combo: string) => void} callback Shortcut callback.\n * @param {WPKeyboardShortcutConfig} options Shortcut options.\n */\nfunction useKeyboardShortcut(\n\t/* eslint-enable jsdoc/valid-types */\n\tshortcuts,\n\tcallback,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false, // This is important for performance considerations.\n\t\ttarget,\n\t} = {}\n) {\n\tconst currentCallback = useRef( callback );\n\tuseEffect( () => {\n\t\tcurrentCallback.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t // necessary to maintain the existing behavior.\n\t\t\t\t /** @type {Element} */ ( /** @type {unknown} */ ( document ) )\n\t\t);\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\t\tshortcutsArray.forEach( ( shortcut ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\t// Determines whether a key is a modifier by the length of the string.\n\t\t\t// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that\n\t\t\t// the modifiers are Shift and Cmd because they're not a single character.\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\t// This should be better moved to the shortcut registration instead.\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// @ts-ignore `bindGlobal` is an undocumented property\n\t\t\tmousetrap[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t(\n\t\t\t\t\t/* eslint-disable jsdoc/valid-types */\n\t\t\t\t\t/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args\n\t\t\t\t) =>\n\t\t\t\t\t/* eslint-enable jsdoc/valid-types */\n\t\t\t\t\tcurrentCallback.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"]}
@@ -75,6 +75,7 @@ function assignRef(ref, value) {
75
75
 
76
76
  export default function useMergeRefs(refs) {
77
77
  const element = useRef();
78
+ const isAttached = useRef(false);
78
79
  const didElementChange = useRef(false);
79
80
  /* eslint-disable jsdoc/no-undefined-types */
80
81
 
@@ -91,7 +92,7 @@ export default function useMergeRefs(refs) {
91
92
  // which case the ref callbacks will already have been called.
92
93
 
93
94
  useLayoutEffect(() => {
94
- if (didElementChange.current === false) {
95
+ if (didElementChange.current === false && isAttached.current === true) {
95
96
  refs.forEach((ref, index) => {
96
97
  const previousRef = previousRefs.current[index];
97
98
 
@@ -115,7 +116,8 @@ export default function useMergeRefs(refs) {
115
116
  // Update the element so it can be used when calling ref callbacks on a
116
117
  // dependency change.
117
118
  assignRef(element, value);
118
- didElementChange.current = true; // When an element changes, the current ref callback should be called
119
+ didElementChange.current = true;
120
+ isAttached.current = value !== null; // When an element changes, the current ref callback should be called
119
121
  // with the new element and the previous one with `null`.
120
122
 
121
123
  const refsToAssign = value ? currentRefs.current : previousRefs.current; // Update the latest refs.
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/compose/src/hooks/use-merge-refs/index.js"],"names":["useRef","useCallback","useLayoutEffect","assignRef","ref","value","hasOwnProperty","current","useMergeRefs","refs","element","didElementChange","previousRefs","currentRefs","forEach","index","previousRef","refsToAssign"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,WAAjB,EAA8BC,eAA9B,QAAqD,oBAArD;AAEA;;AACA;AACA;AACA;AACA;;AACA;;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,GAApB,EAAyBC,KAAzB,EAAiC;AAChC,MAAK,OAAOD,GAAP,KAAe,UAApB,EAAiC;AAChCA,IAAAA,GAAG,CAAEC,KAAF,CAAH;AACA,GAFD,MAEO,IAAKD,GAAG,IAAIA,GAAG,CAACE,cAAJ,CAAoB,SAApB,CAAZ,EAA8C;AACpD;;AACA;AAAqDF,IAAAA,GAAF,CAAQG,OAAR,GAClDF,KADkD;AAEnD;AACA;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASG,YAAT,CAAuBC,IAAvB,EAA8B;AAC5C,QAAMC,OAAO,GAAGV,MAAM,EAAtB;AACA,QAAMW,gBAAgB,GAAGX,MAAM,CAAE,KAAF,CAA/B;AACA;;AACA;;AACA;;AACA,QAAMY,YAAY,GAAGZ,MAAM,CAAE,EAAF,CAA3B;AACA,QAAMa,WAAW,GAAGb,MAAM,CAAES,IAAF,CAA1B,CAP4C,CAS5C;AACA;;AACAI,EAAAA,WAAW,CAACN,OAAZ,GAAsBE,IAAtB,CAX4C,CAa5C;AACA;AACA;;AACAP,EAAAA,eAAe,CAAE,MAAM;AACtB,QAAKS,gBAAgB,CAACJ,OAAjB,KAA6B,KAAlC,EAA0C;AACzCE,MAAAA,IAAI,CAACK,OAAL,CAAc,CAAEV,GAAF,EAAOW,KAAP,KAAkB;AAC/B,cAAMC,WAAW,GAAGJ,YAAY,CAACL,OAAb,CAAsBQ,KAAtB,CAApB;;AACA,YAAKX,GAAG,KAAKY,WAAb,EAA2B;AAC1Bb,UAAAA,SAAS,CAAEa,WAAF,EAAe,IAAf,CAAT;AACAb,UAAAA,SAAS,CAAEC,GAAF,EAAOM,OAAO,CAACH,OAAf,CAAT;AACA;AACD,OAND;AAOA;;AAEDK,IAAAA,YAAY,CAACL,OAAb,GAAuBE,IAAvB;AACA,GAZc,EAYZA,IAZY,CAAf,CAhB4C,CA8B5C;AACA;;AACAP,EAAAA,eAAe,CAAE,MAAM;AACtBS,IAAAA,gBAAgB,CAACJ,OAAjB,GAA2B,KAA3B;AACA,GAFc,CAAf,CAhC4C,CAoC5C;AACA;;AACA,SAAON,WAAW,CAAII,KAAF,IAAa;AAChC;AACA;AACAF,IAAAA,SAAS,CAAEO,OAAF,EAAWL,KAAX,CAAT;AAEAM,IAAAA,gBAAgB,CAACJ,OAAjB,GAA2B,IAA3B,CALgC,CAOhC;AACA;;AACA,UAAMU,YAAY,GAAGZ,KAAK,GAAGQ,WAAW,CAACN,OAAf,GAAyBK,YAAY,CAACL,OAAhE,CATgC,CAWhC;;AACA,SAAM,MAAMH,GAAZ,IAAmBa,YAAnB,EAAkC;AACjCd,MAAAA,SAAS,CAAEC,GAAF,EAAOC,KAAP,CAAT;AACA;AACD,GAfiB,EAef,EAfe,CAAlB;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @typedef {T extends import('react').Ref<infer R> ? R : never} TypeFromRef\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @template T\n * @param {import('react').Ref<T>} ref\n * @param {T} value\n */\nfunction assignRef( ref, value ) {\n\tif ( typeof ref === 'function' ) {\n\t\tref( value );\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t/* eslint-disable jsdoc/no-undefined-types */\n\t\t/** @type {import('react').MutableRefObject<T>} */ ( ref ).current =\n\t\t\tvalue;\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * To make ref callbacks easier to use, you can also pass the result of\n * `useRefEffect`, which makes cleanup easier by allowing you to return a\n * cleanup function instead of handling `null`.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useRefEffect( ( node ) => {\n * node.addEventListener( ... );\n * return () => {\n * node.removeEventListener( ... );\n * };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs useMergeRefs( [\n * enabled && ref,\n * otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @template {import('react').Ref<any>} TRef\n * @param {Array<TRef>} refs The refs to be merged.\n *\n * @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.\n */\nexport default function useMergeRefs( refs ) {\n\tconst element = useRef();\n\tconst didElementChange = useRef( false );\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<TRef[]>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\tconst previousRefs = useRef( [] );\n\tconst currentRefs = useRef( refs );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefs.current = refs;\n\n\t// If any of the refs change, call the previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif ( didElementChange.current === false ) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefs.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tassignRef( previousRef, null );\n\t\t\t\t\tassignRef( ref, element.current );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefs.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChange.current = false;\n\t} );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\tassignRef( element, value );\n\n\t\tdidElementChange.current = true;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tconst refsToAssign = value ? currentRefs.current : previousRefs.current;\n\n\t\t// Update the latest refs.\n\t\tfor ( const ref of refsToAssign ) {\n\t\t\tassignRef( ref, value );\n\t\t}\n\t}, [] );\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/compose/src/hooks/use-merge-refs/index.js"],"names":["useRef","useCallback","useLayoutEffect","assignRef","ref","value","hasOwnProperty","current","useMergeRefs","refs","element","isAttached","didElementChange","previousRefs","currentRefs","forEach","index","previousRef","refsToAssign"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,WAAjB,EAA8BC,eAA9B,QAAqD,oBAArD;AAEA;;AACA;AACA;AACA;AACA;;AACA;;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,GAApB,EAAyBC,KAAzB,EAAiC;AAChC,MAAK,OAAOD,GAAP,KAAe,UAApB,EAAiC;AAChCA,IAAAA,GAAG,CAAEC,KAAF,CAAH;AACA,GAFD,MAEO,IAAKD,GAAG,IAAIA,GAAG,CAACE,cAAJ,CAAoB,SAApB,CAAZ,EAA8C;AACpD;;AACA;AAAqDF,IAAAA,GAAF,CAAQG,OAAR,GAClDF,KADkD;AAEnD;AACA;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASG,YAAT,CAAuBC,IAAvB,EAA8B;AAC5C,QAAMC,OAAO,GAAGV,MAAM,EAAtB;AACA,QAAMW,UAAU,GAAGX,MAAM,CAAE,KAAF,CAAzB;AACA,QAAMY,gBAAgB,GAAGZ,MAAM,CAAE,KAAF,CAA/B;AACA;;AACA;;AACA;;AACA,QAAMa,YAAY,GAAGb,MAAM,CAAE,EAAF,CAA3B;AACA,QAAMc,WAAW,GAAGd,MAAM,CAAES,IAAF,CAA1B,CAR4C,CAU5C;AACA;;AACAK,EAAAA,WAAW,CAACP,OAAZ,GAAsBE,IAAtB,CAZ4C,CAc5C;AACA;AACA;;AACAP,EAAAA,eAAe,CAAE,MAAM;AACtB,QACCU,gBAAgB,CAACL,OAAjB,KAA6B,KAA7B,IACAI,UAAU,CAACJ,OAAX,KAAuB,IAFxB,EAGE;AACDE,MAAAA,IAAI,CAACM,OAAL,CAAc,CAAEX,GAAF,EAAOY,KAAP,KAAkB;AAC/B,cAAMC,WAAW,GAAGJ,YAAY,CAACN,OAAb,CAAsBS,KAAtB,CAApB;;AACA,YAAKZ,GAAG,KAAKa,WAAb,EAA2B;AAC1Bd,UAAAA,SAAS,CAAEc,WAAF,EAAe,IAAf,CAAT;AACAd,UAAAA,SAAS,CAAEC,GAAF,EAAOM,OAAO,CAACH,OAAf,CAAT;AACA;AACD,OAND;AAOA;;AAEDM,IAAAA,YAAY,CAACN,OAAb,GAAuBE,IAAvB;AACA,GAfc,EAeZA,IAfY,CAAf,CAjB4C,CAkC5C;AACA;;AACAP,EAAAA,eAAe,CAAE,MAAM;AACtBU,IAAAA,gBAAgB,CAACL,OAAjB,GAA2B,KAA3B;AACA,GAFc,CAAf,CApC4C,CAwC5C;AACA;;AACA,SAAON,WAAW,CAAII,KAAF,IAAa;AAChC;AACA;AACAF,IAAAA,SAAS,CAAEO,OAAF,EAAWL,KAAX,CAAT;AAEAO,IAAAA,gBAAgB,CAACL,OAAjB,GAA2B,IAA3B;AACAI,IAAAA,UAAU,CAACJ,OAAX,GAAqBF,KAAK,KAAK,IAA/B,CANgC,CAQhC;AACA;;AACA,UAAMa,YAAY,GAAGb,KAAK,GAAGS,WAAW,CAACP,OAAf,GAAyBM,YAAY,CAACN,OAAhE,CAVgC,CAYhC;;AACA,SAAM,MAAMH,GAAZ,IAAmBc,YAAnB,EAAkC;AACjCf,MAAAA,SAAS,CAAEC,GAAF,EAAOC,KAAP,CAAT;AACA;AACD,GAhBiB,EAgBf,EAhBe,CAAlB;AAiBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @typedef {T extends import('react').Ref<infer R> ? R : never} TypeFromRef\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @template T\n * @param {import('react').Ref<T>} ref\n * @param {T} value\n */\nfunction assignRef( ref, value ) {\n\tif ( typeof ref === 'function' ) {\n\t\tref( value );\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t/* eslint-disable jsdoc/no-undefined-types */\n\t\t/** @type {import('react').MutableRefObject<T>} */ ( ref ).current =\n\t\t\tvalue;\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * To make ref callbacks easier to use, you can also pass the result of\n * `useRefEffect`, which makes cleanup easier by allowing you to return a\n * cleanup function instead of handling `null`.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useRefEffect( ( node ) => {\n * node.addEventListener( ... );\n * return () => {\n * node.removeEventListener( ... );\n * };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs useMergeRefs( [\n * enabled && ref,\n * otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @template {import('react').Ref<any>} TRef\n * @param {Array<TRef>} refs The refs to be merged.\n *\n * @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.\n */\nexport default function useMergeRefs( refs ) {\n\tconst element = useRef();\n\tconst isAttached = useRef( false );\n\tconst didElementChange = useRef( false );\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<TRef[]>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\tconst previousRefs = useRef( [] );\n\tconst currentRefs = useRef( refs );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefs.current = refs;\n\n\t// If any of the refs change, call the previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tdidElementChange.current === false &&\n\t\t\tisAttached.current === true\n\t\t) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefs.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tassignRef( previousRef, null );\n\t\t\t\t\tassignRef( ref, element.current );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefs.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChange.current = false;\n\t} );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\tassignRef( element, value );\n\n\t\tdidElementChange.current = true;\n\t\tisAttached.current = value !== null;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tconst refsToAssign = value ? currentRefs.current : previousRefs.current;\n\n\t\t// Update the latest refs.\n\t\tfor ( const ref of refsToAssign ) {\n\t\t\tassignRef( ref, value );\n\t\t}\n\t}, [] );\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-global-events/listener.js"],"names":[],"mappings":";AAKA;;;;GAIG;AACH;IAEE,kBAAkB;IAClB,WADW,GAAG,CACK;IA4BpB,mBAAwB,GAAG,QAM1B;IA7BD,eAAgB,GAAG,YAA2B,GAAG,QAQhD;IAED,kBAAmB,GAAG,YAA2B,GAAG,QAWnD;CASD"}
1
+ {"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-global-events/listener.js"],"names":[],"mappings":";AAAA;;;;GAIG;AACH;IAEE,kBAAkB;IAClB,WADW,GAAG,CACK;IA+BpB,mBAAwB,GAAG,QAM1B;IAhCD,eAAgB,GAAG,YAA2B,GAAG,QAQhD;IAED,kBAAmB,GAAG,YAA2B,GAAG,QAcnD;CASD"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-safe-timeout/index.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,EAEN,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,2CAA2C,CAAC;AAEnD;;;;;;;GAOG;AACH,UAAU,YAAY;IACrB,UAAU,EAAE,CAAE,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,KAAM,MAAM,CAAC;IACxD,YAAY,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,QAAA,MAAM,eAAe;;kBAMR,MAAM,EAAE;;uBAaF,MAAM,IAAI,SAAS,MAAM;yBASvB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAkB1B,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-safe-timeout/index.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,EAEN,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,2CAA2C,CAAC;AAEnD;;;;;;;GAOG;AACH,UAAU,YAAY;IACrB,UAAU,EAAE,CAAE,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,KAAM,MAAM,CAAC;IACxD,YAAY,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,QAAA,MAAM,eAAe;;kBAMR,MAAM,EAAE;;uBAaF,MAAM,IAAI,SAAS,MAAM;yBASvB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAkB1B,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.js"],"names":[],"mappings":"AAmCA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH;IAjB4B,UAAU,GAA3B,OAAO;IACN,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAgKnD"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.js"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH;IAjB4B,UAAU,GAA3B,OAAO;IACN,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CA+JnD"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.js"],"names":[],"mappings":"AAsDA;;GAEG;AAEH;;;GAGG;AAEH;;;GAGG;AAEH;;GAEG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;GAUG;AACH,wDAPW,aAAa,GAGZ,uBAAuB,CAqGlC;oCA3KY,iBAAiB,GAAG,eAAe,GAAG,gBAAgB;6BAoCtD,OAAO,OAAO,EAAE,cAAc;oCAKhC,cAAc;;;;;wBAKX,aAAa;;8BAId,OAAO,OAAO,EAAE,gBAAgB,CAAC,wBAAwB,GAAG,SAAS,CAAC;;;;;aAKrE,aAAa;;;;YACb,aAAa;;;;iBACb,aAAa;;;;eACb,aAAa;;;;kBACb,aAAa;;;;gBACb,aAAa"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.js"],"names":[],"mappings":"AAgDA;;GAEG;AAEH;;;GAGG;AAEH;;;GAGG;AAEH;;GAEG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;GAUG;AACH,wDAPW,aAAa,GAGZ,uBAAuB,CAqGlC;oCA1KY,iBAAiB,GAAG,eAAe,GAAG,gBAAgB;6BAmCtD,OAAO,OAAO,EAAE,cAAc;oCAKhC,cAAc;;;;;wBAKX,aAAa;;8BAId,OAAO,OAAO,EAAE,gBAAgB,CAAC,wBAAwB,GAAG,SAAS,CAAC;;;;;aAKrE,aAAa;;;;YACb,aAAa;;;;iBACb,aAAa;;;;eACb,aAAa;;;;kBACb,aAAa;;;;gBACb,aAAa"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keyboard-shortcut/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;;;;GASG;AAGH;;;;;;;;GAQG;AACH,gDAJW,MAAM,EAAE,GAAC,MAAM,gBACX,OAAO,WAAW,EAAE,qBAAqB,SAAS,MAAM,KAAK,IAAI,mDACrE,wBAAwB,QAsElC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keyboard-shortcut/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYA;;;;;;;;;GASG;AAGH;;;;;;;;GAQG;AACH,gDAJW,MAAM,EAAE,GAAC,MAAM,gBACX,OAAO,WAAW,EAAE,qBAAqB,SAAS,MAAM,KAAK,IAAI,mDACrE,wBAAwB,QAyElC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wIAsDC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wIA2DC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/compose",
3
- "version": "5.16.1-next.4d3b314fd5.0",
3
+ "version": "5.17.0",
4
4
  "description": "WordPress higher-order components (HOCs).",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -30,17 +30,15 @@
30
30
  "sideEffects": false,
31
31
  "dependencies": {
32
32
  "@babel/runtime": "^7.16.0",
33
- "@types/lodash": "^4.14.172",
34
33
  "@types/mousetrap": "^1.6.8",
35
- "@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
36
- "@wordpress/dom": "^3.18.1-next.4d3b314fd5.0",
37
- "@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
38
- "@wordpress/is-shallow-equal": "^4.18.1-next.4d3b314fd5.0",
39
- "@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
40
- "@wordpress/priority-queue": "^2.18.1-next.4d3b314fd5.0",
34
+ "@wordpress/deprecated": "^3.19.0",
35
+ "@wordpress/dom": "^3.19.0",
36
+ "@wordpress/element": "^4.17.0",
37
+ "@wordpress/is-shallow-equal": "^4.19.0",
38
+ "@wordpress/keycodes": "^3.19.0",
39
+ "@wordpress/priority-queue": "^2.19.0",
41
40
  "change-case": "^4.1.2",
42
41
  "clipboard": "^2.0.8",
43
- "lodash": "^4.17.21",
44
42
  "mousetrap": "^1.6.5",
45
43
  "use-memo-one": "^1.1.1"
46
44
  },
@@ -50,5 +48,5 @@
50
48
  "publishConfig": {
51
49
  "access": "public"
52
50
  },
53
- "gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
51
+ "gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
54
52
  }
@@ -1,8 +1,3 @@
1
- /**
2
- * External dependencies
3
- */
4
- import { without } from 'lodash';
5
-
6
1
  /**
7
2
  * Class responsible for orchestrating event handling on the global window,
8
3
  * binding a single event to be shared across all handling instances, and
@@ -27,9 +22,12 @@ class Listener {
27
22
  }
28
23
 
29
24
  remove( /** @type {any} */ eventType, /** @type {any} */ instance ) {
30
- this.listeners[ eventType ] = without(
31
- this.listeners[ eventType ],
32
- instance
25
+ if ( ! this.listeners[ eventType ] ) {
26
+ return;
27
+ }
28
+
29
+ this.listeners[ eventType ] = this.listeners[ eventType ].filter(
30
+ ( /** @type {any} */ listener ) => listener !== instance
33
31
  );
34
32
 
35
33
  if ( ! this.listeners[ eventType ].length ) {
@@ -1,8 +1,3 @@
1
- /**
2
- * External dependencies
3
- */
4
- import { without } from 'lodash';
5
-
6
1
  /**
7
2
  * WordPress dependencies
8
3
  */
@@ -64,7 +59,7 @@ const withSafeTimeout = createHigherOrderComponent(
64
59
 
65
60
  clearTimeout( id: number ) {
66
61
  clearTimeout( id );
67
- this.timeouts = without( this.timeouts, id );
62
+ this.timeouts.filter( ( timeoutId ) => timeoutId !== id );
68
63
  }
69
64
 
70
65
  render() {
@@ -1,8 +1,3 @@
1
- /**
2
- * External dependencies
3
- */
4
- import { includes } from 'lodash';
5
-
6
1
  /**
7
2
  * WordPress dependencies
8
3
  */
@@ -89,8 +84,7 @@ export default function useDisabled( {
89
84
 
90
85
  focus.focusable.find( node ).forEach( ( focusable ) => {
91
86
  if (
92
- includes(
93
- DISABLED_ELIGIBLE_NODE_NAMES,
87
+ DISABLED_ELIGIBLE_NODE_NAMES.includes(
94
88
  focusable.nodeName
95
89
  ) &&
96
90
  // @ts-ignore
@@ -1,8 +1,3 @@
1
- /**
2
- * External dependencies
3
- */
4
- import { includes } from 'lodash';
5
-
6
1
  /**
7
2
  * WordPress dependencies
8
3
  */
@@ -42,8 +37,7 @@ function isFocusNormalizedButton( eventTarget ) {
42
37
  return true;
43
38
 
44
39
  case 'INPUT':
45
- return includes(
46
- INPUT_BUTTON_TYPES,
40
+ return INPUT_BUTTON_TYPES.includes(
47
41
  /** @type {HTMLInputElement} */ ( eventTarget ).type
48
42
  );
49
43
  }
@@ -136,7 +130,7 @@ export default function useFocusOutside( onFocusOutside ) {
136
130
  */
137
131
  const normalizeButtonFocus = useCallback( ( event ) => {
138
132
  const { type, target } = event;
139
- const isInteractionEnd = includes( [ 'mouseup', 'touchend' ], type );
133
+ const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
140
134
 
141
135
  if ( isInteractionEnd ) {
142
136
  preventBlurCheck.current = false;
@@ -1,8 +1,3 @@
1
- /**
2
- * External dependencies
3
- */
4
- import { includes } from 'lodash';
5
-
6
1
  /**
7
2
  * WordPress dependencies
8
3
  */
@@ -39,8 +34,7 @@ function isFocusNormalizedButton( eventTarget ) {
39
34
  return true;
40
35
 
41
36
  case 'INPUT':
42
- return includes(
43
- INPUT_BUTTON_TYPES,
37
+ return INPUT_BUTTON_TYPES.includes(
44
38
  /** @type {HTMLInputElement} */ ( eventTarget ).type
45
39
  );
46
40
  }
@@ -133,7 +127,7 @@ export default function useFocusOutside( onFocusOutside ) {
133
127
  */
134
128
  const normalizeButtonFocus = useCallback( ( event ) => {
135
129
  const { type, target } = event;
136
- const isInteractionEnd = includes( [ 'mouseup', 'touchend' ], type );
130
+ const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
137
131
 
138
132
  if ( isInteractionEnd ) {
139
133
  preventBlurCheck.current = false;
@@ -3,7 +3,6 @@
3
3
  */
4
4
  import Mousetrap from 'mousetrap';
5
5
  import 'mousetrap/plugins/global-bind/mousetrap-global-bind';
6
- import { castArray } from 'lodash';
7
6
 
8
7
  /**
9
8
  * WordPress dependencies
@@ -60,7 +59,10 @@ function useKeyboardShortcut(
60
59
  // necessary to maintain the existing behavior.
61
60
  /** @type {Element} */ ( /** @type {unknown} */ ( document ) )
62
61
  );
63
- castArray( shortcuts ).forEach( ( shortcut ) => {
62
+ const shortcutsArray = Array.isArray( shortcuts )
63
+ ? shortcuts
64
+ : [ shortcuts ];
65
+ shortcutsArray.forEach( ( shortcut ) => {
64
66
  const keys = shortcut.split( '+' );
65
67
  // Determines whether a key is a modifier by the length of the string.
66
68
  // E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that
@@ -71,6 +71,7 @@ function assignRef( ref, value ) {
71
71
  */
72
72
  export default function useMergeRefs( refs ) {
73
73
  const element = useRef();
74
+ const isAttached = useRef( false );
74
75
  const didElementChange = useRef( false );
75
76
  /* eslint-disable jsdoc/no-undefined-types */
76
77
  /** @type {import('react').MutableRefObject<TRef[]>} */
@@ -86,7 +87,10 @@ export default function useMergeRefs( refs ) {
86
87
  // ref with the node, except when the element changes in the same cycle, in
87
88
  // which case the ref callbacks will already have been called.
88
89
  useLayoutEffect( () => {
89
- if ( didElementChange.current === false ) {
90
+ if (
91
+ didElementChange.current === false &&
92
+ isAttached.current === true
93
+ ) {
90
94
  refs.forEach( ( ref, index ) => {
91
95
  const previousRef = previousRefs.current[ index ];
92
96
  if ( ref !== previousRef ) {
@@ -113,6 +117,7 @@ export default function useMergeRefs( refs ) {
113
117
  assignRef( element, value );
114
118
 
115
119
  didElementChange.current = true;
120
+ isAttached.current = value !== null;
116
121
 
117
122
  // When an element changes, the current ref callback should be called
118
123
  // with the new element and the previous one with `null`.