@wordpress/block-editor/build/components/inspector-controls/list-view-content-popover.cjs.map

Generic block editor.

{
  "version": 3,
  "sources": ["../../../src/components/inspector-controls/list-view-content-popover.js"],
  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tcreateSlotFill,\n\tPopover,\n\t__experimentalUseSlotFills as useSlotFills,\n} from '@wordpress/components';\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\n/** @typedef {import('@wordpress/element').RefObject} RefObject */\n\n// Create private slot-fill for ListViewContentPanel\nconst LIST_VIEW_CONTENT_PANEL_SLOT = Symbol( 'ListViewContentPopover' );\nconst { Fill, Slot } = createSlotFill( LIST_VIEW_CONTENT_PANEL_SLOT );\n\nexport { Fill as ListViewContentFill };\n\n// Hook to determine popover placement for inspector controls\nfunction useInspectorPopoverPlacement() {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\toffset: 35,\n\t\t\t\t\tresize: false,\n\t\t\t\t},\n\t\t  }\n\t\t: {};\n}\n\n/**\n * Displays a popover for the List View block inspector support.\n * Blocks can use `<InspectorControls group=\"content\">` to display their\n * controls in this popover when inside a section with a parent that has\n * List View block support. The routing is handled automatically by\n * `InspectorControlsFill`.\n *\n * @param {Object}                 props\n * @param {RefObject<HTMLElement>} props.listViewRef Ref to the List View slot for the block inspector.\n */\nexport function ListViewContentPopover( { listViewRef } ) {\n\tconst { popoverProps } = useInspectorPopoverPlacement();\n\tconst fills = useSlotFills( LIST_VIEW_CONTENT_PANEL_SLOT );\n\tconst hasFills = Boolean( fills && fills.length );\n\n\t// Get both the selected client ID and the popover open state.\n\tconst { selectedClientId, isOpen } = useSelect( ( select ) => {\n\t\tconst { getSelectedBlockClientId } = select( blockEditorStore );\n\t\tconst privateSelectors = unlock( select( blockEditorStore ) );\n\n\t\treturn {\n\t\t\tselectedClientId: getSelectedBlockClientId(),\n\t\t\tisOpen: privateSelectors.isListViewContentPanelOpen(),\n\t\t};\n\t}, [] );\n\n\t// Query DOM for the selected block row element in List View.\n\tconst [ anchorElement, setAnchorElement ] = useState( null );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! selectedClientId || ! listViewRef?.current ) {\n\t\t\tsetAnchorElement( null );\n\t\t\treturn;\n\t\t}\n\n\t\t// Query for the block in list view to anchor the popover.\n\t\t// Ensures the vertical positioning of the popover matches the\n\t\t// selected block in List View.\n\t\tconst element = listViewRef.current.querySelector(\n\t\t\t`[data-block=\"${ selectedClientId }\"]`\n\t\t);\n\n\t\tsetAnchorElement( element );\n\t}, [ selectedClientId, listViewRef ] );\n\n\t// eslint-disable-next-line @wordpress/no-unused-vars-before-return\n\tconst { closeListViewContentPanel } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\n\t// Only render when explicitly open.\n\tif ( ! isOpen || ! hasFills || ! anchorElement ) {\n\t\treturn null;\n\t}\n\n\t// The slot rendered in the popover doesn't use `bubblesVirtually`, this has a downside\n\t// that certain context providers (like `BlockEditContext`) are not available\n\t// to fills.\n\t// The upside is that it allows nested popovers to function correctly. If `bubblesVirtually`\n\t// is set opening a nest popover triggers the `onFocusOutside` of this popover and closes it.\n\t// Is there a solution that has no trade-offs?\n\treturn (\n\t\t<Popover\n\t\t\t{ ...( popoverProps ?? {} ) }\n\t\t\tclassName=\"block-editor-inspector-list-view-content-popover\"\n\t\t\tanchor={ anchorElement }\n\t\t\tonClose={ closeListViewContentPanel }\n\t\t>\n\t\t\t<div style={ { width: '280px' } }>\n\t\t\t\t<Slot />\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n"],
  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,qBAA0C;AAC1C,qBAAiC;AACjC,kBAAuC;AAKvC,mBAA0C;AAC1C,yBAAuB;AA6FnB;AAxFJ,IAAM,+BAA+B,uBAAQ,wBAAyB;AACtE,IAAM,EAAE,MAAM,KAAK,QAAI,kCAAgB,4BAA6B;AAKpE,SAAS,+BAA+B;AACvC,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,SAAO,CAAE,WACN;AAAA,IACA,cAAc;AAAA,MACb,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,QAAQ;AAAA,IACT;AAAA,EACA,IACA,CAAC;AACL;AAYO,SAAS,uBAAwB,EAAE,YAAY,GAAI;AACzD,QAAM,EAAE,aAAa,IAAI,6BAA6B;AACtD,QAAM,YAAQ,kBAAAA,4BAAc,4BAA6B;AACzD,QAAM,WAAW,QAAS,SAAS,MAAM,MAAO;AAGhD,QAAM,EAAE,kBAAkB,OAAO,QAAI,uBAAW,CAAE,WAAY;AAC7D,UAAM,EAAE,yBAAyB,IAAI,OAAQ,aAAAC,KAAiB;AAC9D,UAAM,uBAAmB,2BAAQ,OAAQ,aAAAA,KAAiB,CAAE;AAE5D,WAAO;AAAA,MACN,kBAAkB,yBAAyB;AAAA,MAC3C,QAAQ,iBAAiB,2BAA2B;AAAA,IACrD;AAAA,EACD,GAAG,CAAC,CAAE;AAGN,QAAM,CAAE,eAAe,gBAAiB,QAAI,yBAAU,IAAK;AAE3D,sCAAiB,MAAM;AACtB,QAAK,CAAE,oBAAoB,CAAE,aAAa,SAAU;AACnD,uBAAkB,IAAK;AACvB;AAAA,IACD;AAKA,UAAM,UAAU,YAAY,QAAQ;AAAA,MACnC,gBAAiB,gBAAiB;AAAA,IACnC;AAEA,qBAAkB,OAAQ;AAAA,EAC3B,GAAG,CAAE,kBAAkB,WAAY,CAAE;AAGrC,QAAM,EAAE,0BAA0B,QAAI;AAAA,QACrC,yBAAa,aAAAA,KAAiB;AAAA,EAC/B;AAGA,MAAK,CAAE,UAAU,CAAE,YAAY,CAAE,eAAgB;AAChD,WAAO;AAAA,EACR;AAQA,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAK,gBAAgB,CAAC;AAAA,MACxB,WAAU;AAAA,MACV,QAAS;AAAA,MACT,SAAU;AAAA,MAEV,sDAAC,SAAI,OAAQ,EAAE,OAAO,QAAQ,GAC7B,sDAAC,QAAK,GACP;AAAA;AAAA,EACD;AAEF;",
  "names": ["useSlotFills", "blockEditorStore"]
}