@wordpress/block-editor
Version:
8 lines (7 loc) • 6.15 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/link-picker/link-picker.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tButton,\n\tPopover,\n\tVisuallyHidden,\n\tuseBaseControlProps,\n} from '@wordpress/components';\nimport { useState, useId, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport LinkControl from '../link-control';\nimport { LinkPreview } from './link-preview';\n\n/**\n * @typedef {Object} LinkPickerPreview\n * @property {string} title - Display title for the link\n * @property {string} url - Display URL for the link\n * @property {string} [image] - Optional image URL for the link preview\n * @property {Array<Object>} [badges] - Optional array of badge objects with label and intent\n * @property {string} badges[].label - Badge label text\n * @property {string} badges[].intent - Badge intent/style\n */\n\n/**\n * LinkPicker component that combines the preview button and search input.\n * Shows a preview button as a trigger, and opens a popover with search input when clicked.\n *\n * @param {Object} props - Component props\n * @param {LinkPickerPreview} props.preview - Preview data object\n * @param {Function} props.onSelect - Callback when a suggestion is selected\n * @param {Object} props.suggestionsQuery - Query parameters for suggestions\n * @param {string} props.label - Label for the control\n * @param {string} props.help - Help text for the control\n */\nexport function LinkPicker( {\n\tpreview,\n\tonSelect,\n\tsuggestionsQuery,\n\tlabel,\n\thelp,\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\tconst instanceId = useId();\n\tconst dialogTitleId = `link-picker-title-${ instanceId }`;\n\tconst dialogDescriptionId = `link-picker-description-${ instanceId }`;\n\tconst anchorRef = useRef( null );\n\n\t// Use the proper BaseControl pattern for associating help text\n\tconst { baseControlProps, controlProps } = useBaseControlProps( {\n\t\thelp,\n\t} );\n\n\tconst handleChange = ( newValue ) => {\n\t\t// Close the popover immediately\n\t\tsetIsOpen( false );\n\n\t\t// When a link is selected in LinkControl\n\t\tif ( newValue ) {\n\t\t\tconst suggestion = {\n\t\t\t\turl: newValue.url,\n\t\t\t\tkind: newValue.kind,\n\t\t\t\ttype: newValue.type,\n\t\t\t\tid: newValue.id,\n\t\t\t\ttitle: newValue.title,\n\t\t\t};\n\t\t\tonSelect( suggestion );\n\t\t}\n\t};\n\n\treturn (\n\t\t<BaseControl { ...baseControlProps }>\n\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t<Button\n\t\t\t\tref={ anchorRef }\n\t\t\t\tonClick={ () => setIsOpen( ! isOpen ) }\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\taria-describedby={ controlProps[ 'aria-describedby' ] }\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"link-preview-button\"\n\t\t\t>\n\t\t\t\t{ label && <VisuallyHidden>{ label }:</VisuallyHidden> }\n\t\t\t\t<LinkPreview\n\t\t\t\t\ttitle={ preview.title || __( 'Add link' ) }\n\t\t\t\t\turl={ preview.url }\n\t\t\t\t\timage={ preview.image }\n\t\t\t\t\tbadges={ preview.badges }\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tanchor={ anchorRef.current }\n\t\t\t\t\tonClose={ () => setIsOpen( false ) }\n\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\toffset={ 36 }\n\t\t\t\t\tshift\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\taria-labelledby={ dialogTitleId }\n\t\t\t\t\t\taria-describedby={ dialogDescriptionId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t\t<h2 id={ dialogTitleId }>\n\t\t\t\t\t\t\t\t{ __( 'Select a link' ) }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t<p id={ dialogDescriptionId }>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Search for and add a link to the navigation item.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t<LinkControl\n\t\t\t\t\t\t\tvalue={ null }\n\t\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\t\tsuggestionsQuery={ suggestionsQuery }\n\t\t\t\t\t\t\tshowInitialSuggestions\n\t\t\t\t\t\t\tforceIsEditingLink\n\t\t\t\t\t\t\tsettings={ [] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</BaseControl>\n\t);\n}\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAMO;AACP,qBAAwC;AACxC,kBAAmB;AAKnB,0BAAwB;AACxB,0BAA4B;AA4DzB;AArCI,SAAS,WAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,QAAQ,SAAU,QAAI,yBAAU,KAAM;AAC9C,QAAM,iBAAa,sBAAM;AACzB,QAAM,gBAAgB,qBAAsB,UAAW;AACvD,QAAM,sBAAsB,2BAA4B,UAAW;AACnE,QAAM,gBAAY,uBAAQ,IAAK;AAG/B,QAAM,EAAE,kBAAkB,aAAa,QAAI,uCAAqB;AAAA,IAC/D;AAAA,EACD,CAAE;AAEF,QAAM,eAAe,CAAE,aAAc;AAEpC,cAAW,KAAM;AAGjB,QAAK,UAAW;AACf,YAAM,aAAa;AAAA,QAClB,KAAK,SAAS;AAAA,QACd,MAAM,SAAS;AAAA,QACf,MAAM,SAAS;AAAA,QACf,IAAI,SAAS;AAAA,QACb,OAAO,SAAS;AAAA,MACjB;AACA,eAAU,UAAW;AAAA,IACtB;AAAA,EACD;AAEA,SACC,6CAAC,iCAAc,GAAG,kBACjB;AAAA,gDAAC,8BAAY,aAAZ,EAA0B,iBAAO;AAAA,IAClC;AAAA,MAAC;AAAA;AAAA,QACA,KAAM;AAAA,QACN,SAAU,MAAM,UAAW,CAAE,MAAO;AAAA,QACpC,iBAAc;AAAA,QACd,iBAAgB;AAAA,QAChB,oBAAmB,aAAc,kBAAmB;AAAA,QACpD,SAAQ;AAAA,QACR,uBAAqB;AAAA,QACrB,WAAU;AAAA,QAER;AAAA,mBAAS,6CAAC,oCAAiB;AAAA;AAAA,YAAO;AAAA,aAAC;AAAA,UACrC;AAAA,YAAC;AAAA;AAAA,cACA,OAAQ,QAAQ,aAAS,gBAAI,UAAW;AAAA,cACxC,KAAM,QAAQ;AAAA,cACd,OAAQ,QAAQ;AAAA,cAChB,QAAS,QAAQ;AAAA;AAAA,UAClB;AAAA;AAAA;AAAA,IACD;AAAA,IACE,UACD;AAAA,MAAC;AAAA;AAAA,QACA,QAAS,UAAU;AAAA,QACnB,SAAU,MAAM,UAAW,KAAM;AAAA,QACjC,WAAU;AAAA,QACV,QAAS;AAAA,QACT,OAAK;AAAA,QAEL;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,mBAAkB;AAAA,YAClB,oBAAmB;AAAA,YAEnB;AAAA,2DAAC,oCACA;AAAA,4DAAC,QAAG,IAAK,eACN,8BAAI,eAAgB,GACvB;AAAA,gBACA,4CAAC,OAAE,IAAK,qBACL;AAAA,kBACD;AAAA,gBACD,GACD;AAAA,iBACD;AAAA,cACA;AAAA,gBAAC,oBAAAA;AAAA,gBAAA;AAAA,kBACA,OAAQ;AAAA,kBACR,UAAW;AAAA,kBACX;AAAA,kBACA,wBAAsB;AAAA,kBACtB,oBAAkB;AAAA,kBAClB,UAAW,CAAC;AAAA;AAAA,cACb;AAAA;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
"names": ["LinkControl"]
}