@wordpress/block-editor
Version:
8 lines (7 loc) • 6.23 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/block-popover/index.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { Popover } from '@wordpress/components';\nimport {\n\tforwardRef,\n\tuseMemo,\n\tuseReducer,\n\tuseLayoutEffect,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport usePopoverScroll from './use-popover-scroll';\nimport { rectUnion, getElementBounds } from '../../utils/dom';\n\nconst MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;\n\nfunction BlockPopover(\n\t{\n\t\tclientId,\n\t\tbottomClientId,\n\t\tchildren,\n\t\t__unstablePopoverSlot,\n\t\t__unstableContentRef,\n\t\tshift = true,\n\t\t...props\n\t},\n\tref\n) {\n\tconst selectedElement = useBlockElement( clientId );\n\tconst lastSelectedElement = useBlockElement( bottomClientId ?? clientId );\n\tconst mergedRefs = useMergeRefs( [\n\t\tref,\n\t\tusePopoverScroll( __unstableContentRef ),\n\t] );\n\n\tconst [\n\t\tpopoverDimensionsRecomputeCounter,\n\t\tforceRecomputePopoverDimensions,\n\t] = useReducer(\n\t\t// Module is there to make sure that the counter doesn't overflow.\n\t\t( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,\n\t\t0\n\t);\n\n\t// When blocks are moved up/down, they are animated to their new position by\n\t// updating the `transform` property manually (i.e. without using CSS\n\t// transitions or animations). The animation, which can also scroll the block\n\t// editor, can sometimes cause the position of the Popover to get out of sync.\n\t// A MutationObserver is therefore used to make sure that changes to the\n\t// selectedElement's attribute (i.e. `transform`) can be tracked and used to\n\t// trigger the Popover to rerender.\n\tuseLayoutEffect( () => {\n\t\tif ( ! selectedElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst observer = new window.MutationObserver(\n\t\t\tforceRecomputePopoverDimensions\n\t\t);\n\t\tobserver.observe( selectedElement, { attributes: true } );\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ selectedElement ] );\n\n\tconst popoverAnchor = useMemo( () => {\n\t\tif (\n\t\t\t// popoverDimensionsRecomputeCounter is by definition always equal or greater\n\t\t\t// than 0. This check is only there to satisfy the correctness of the\n\t\t\t// exhaustive-deps rule for the `useMemo` hook.\n\t\t\tpopoverDimensionsRecomputeCounter < 0 ||\n\t\t\t! selectedElement ||\n\t\t\t( bottomClientId && ! lastSelectedElement )\n\t\t) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn {\n\t\t\tgetBoundingClientRect() {\n\t\t\t\treturn lastSelectedElement\n\t\t\t\t\t? rectUnion(\n\t\t\t\t\t\t\tgetElementBounds( selectedElement ),\n\t\t\t\t\t\t\tgetElementBounds( lastSelectedElement )\n\t\t\t\t\t )\n\t\t\t\t\t: getElementBounds( selectedElement );\n\t\t\t},\n\t\t\tcontextElement: selectedElement,\n\t\t};\n\t}, [\n\t\tpopoverDimensionsRecomputeCounter,\n\t\tselectedElement,\n\t\tbottomClientId,\n\t\tlastSelectedElement,\n\t] );\n\n\tif ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Popover\n\t\t\tref={ mergedRefs }\n\t\t\tanimate={ false }\n\t\t\tfocusOnMount={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\t// Render in the old slot if needed for backward compatibility,\n\t\t\t// otherwise render in place (not in the default popover slot).\n\t\t\t__unstableSlotName={ __unstablePopoverSlot }\n\t\t\tinline={ ! __unstablePopoverSlot }\n\t\t\tplacement=\"top-start\"\n\t\t\tresize={ false }\n\t\t\tflip={ false }\n\t\t\tshift={ shift }\n\t\t\t{ ...props }\n\t\t\tclassName={ clsx( 'block-editor-block-popover', props.className ) }\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t{ children }\n\t\t</Popover>\n\t);\n}\n\nexport const PrivateBlockPopover = forwardRef( BlockPopover );\n\nconst PublicBlockPopover = (\n\t{ clientId, bottomClientId, children, ...props },\n\tref\n) => (\n\t<PrivateBlockPopover\n\t\t{ ...props }\n\t\tbottomClientId={ bottomClientId }\n\t\tclientId={ clientId }\n\t\t__unstableContentRef={ undefined }\n\t\t__unstablePopoverSlot={ undefined }\n\t\tref={ ref }\n\t>\n\t\t{ children }\n\t</PrivateBlockPopover>\n);\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-popover/README.md\n */\nexport default forwardRef( PublicBlockPopover );\n"],
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAKP,SAAS,uBAAuB;AAChC,OAAO,sBAAsB;AAC7B,SAAS,WAAW,wBAAwB;AAyF1C;AAvFF,IAAM,gCAAgC,OAAO;AAE7C,SAAS,aACR;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACJ,GACA,KACC;AACD,QAAM,kBAAkB,gBAAiB,QAAS;AAClD,QAAM,sBAAsB,gBAAiB,kBAAkB,QAAS;AACxE,QAAM,aAAa,aAAc;AAAA,IAChC;AAAA,IACA,iBAAkB,oBAAqB;AAAA,EACxC,CAAE;AAEF,QAAM;AAAA,IACL;AAAA,IACA;AAAA,EACD,IAAI;AAAA;AAAA,IAEH,CAAE,OAAS,IAAI,KAAM;AAAA,IACrB;AAAA,EACD;AASA,kBAAiB,MAAM;AACtB,QAAK,CAAE,iBAAkB;AACxB;AAAA,IACD;AAEA,UAAM,WAAW,IAAI,OAAO;AAAA,MAC3B;AAAA,IACD;AACA,aAAS,QAAS,iBAAiB,EAAE,YAAY,KAAK,CAAE;AAExD,WAAO,MAAM;AACZ,eAAS,WAAW;AAAA,IACrB;AAAA,EACD,GAAG,CAAE,eAAgB,CAAE;AAEvB,QAAM,gBAAgB,QAAS,MAAM;AACpC;AAAA;AAAA;AAAA;AAAA,MAIC,oCAAoC,KACpC,CAAE,mBACA,kBAAkB,CAAE;AAAA,MACrB;AACD,aAAO;AAAA,IACR;AAEA,WAAO;AAAA,MACN,wBAAwB;AACvB,eAAO,sBACJ;AAAA,UACA,iBAAkB,eAAgB;AAAA,UAClC,iBAAkB,mBAAoB;AAAA,QACtC,IACA,iBAAkB,eAAgB;AAAA,MACtC;AAAA,MACA,gBAAgB;AAAA,IACjB;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,MAAK,CAAE,mBAAqB,kBAAkB,CAAE,qBAAwB;AACvE,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,SAAU;AAAA,MACV,cAAe;AAAA,MACf,QAAS;AAAA,MAGT,oBAAqB;AAAA,MACrB,QAAS,CAAE;AAAA,MACX,WAAU;AAAA,MACV,QAAS;AAAA,MACT,MAAO;AAAA,MACP;AAAA,MACE,GAAG;AAAA,MACL,WAAY,KAAM,8BAA8B,MAAM,SAAU;AAAA,MAChE,SAAQ;AAAA,MAEN;AAAA;AAAA,EACH;AAEF;AAEO,IAAM,sBAAsB,WAAY,YAAa;AAE5D,IAAM,qBAAqB,CAC1B,EAAE,UAAU,gBAAgB,UAAU,GAAG,MAAM,GAC/C,QAEA;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA,sBAAuB;AAAA,IACvB,uBAAwB;AAAA,IACxB;AAAA,IAEE;AAAA;AACH;AAMD,IAAO,wBAAQ,WAAY,kBAAmB;",
"names": []
}