{
  "version": 3,
  "sources": ["../../src/utils/media-control.js"],
  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tDropZone,\n\tFlexBlock,\n\tSpinner,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport {\n\tMediaReplaceFlow,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { focus } from '@wordpress/dom';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { reset as resetIcon } from '@wordpress/icons';\nimport { getFilename } from '@wordpress/url';\n\n/**\n * Focuses the toggle button.\n *\n * @param {Object} containerRef - ref object containing current element\n */\nconst focusToggleButton = ( containerRef ) => {\n\t// Use requestAnimationFrame to ensure DOM updates are complete.\n\twindow.requestAnimationFrame( () => {\n\t\tconst [ toggleButton ] = focus.tabbable.find( containerRef?.current );\n\t\tif ( ! toggleButton ) {\n\t\t\treturn;\n\t\t}\n\n\t\ttoggleButton.focus();\n\t} );\n};\n\n/**\n * MediaControlPreview - Preview component showing media thumbnail and filename\n *\n * @param {Object} props\n * @param {string} props.url            Media URL for thumbnail\n * @param {string} props.filename       Filename to display\n * @param {Object} props.itemGroupProps Optional props to pass to ItemGroup\n * @param {string} props.className      Optional className for Truncate\n * @param {string} props.label          Optional label for accessibility\n * @return {Element} Preview component\n */\nexport function MediaControlPreview( {\n\turl,\n\tfilename,\n\titemGroupProps,\n\tclassName,\n\tlabel,\n} ) {\n\treturn (\n\t\t<ItemGroup { ...itemGroupProps } as=\"span\">\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"block-library-utils__media-control__inspector-image-indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tbackgroundImage: url ? `url(${ url })` : undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock>\n\t\t\t\t\t<Truncate numberOfLines={ 1 } className={ className }>\n\t\t\t\t\t\t{ filename ?? label }\n\t\t\t\t\t</Truncate>\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</ItemGroup>\n\t);\n}\n\n/**\n * MediaControl - Complete media selection control for inspector panels\n *\n * @param {Object}   props\n * @param {number}   props.mediaId      Media attachment ID\n * @param {string}   props.mediaUrl     Media URL\n * @param {string}   props.filename     Filename to display\n * @param {Array}    props.allowedTypes Allowed media types\n * @param {Function} props.onSelect     Callback when media selected\n * @param {Function} props.onSelectURL  Callback when URL entered\n * @param {Function} props.onError      Error callback\n * @param {Function} props.onReset      Reset/remove callback\n * @param {boolean}  props.isUploading  Whether upload in progress\n * @param {string}   props.emptyLabel   Label when no media (default: 'Add media')\n * @return {Element} Media control component\n */\nexport function MediaControl( {\n\tmediaId,\n\tmediaUrl,\n\tfilename,\n\tallowedTypes,\n\tonSelect,\n\tonSelectURL,\n\tonError,\n\tonReset,\n\tisUploading = false,\n\temptyLabel = __( 'Media' ),\n} ) {\n\tconst { getSettings } = useSelect( blockEditorStore );\n\tconst onFilesDrop = ( filesList ) => {\n\t\tconst { mediaUpload } = getSettings();\n\t\tif ( ! mediaUpload ) {\n\t\t\treturn;\n\t\t}\n\t\tmediaUpload( {\n\t\t\tallowedTypes,\n\t\t\tfilesList,\n\t\t\tonFileChange( [ media ] ) {\n\t\t\t\tonSelect( media );\n\t\t\t},\n\t\t\tonError,\n\t\t\tmultiple: false,\n\t\t} );\n\t};\n\tconst containerRef = useRef();\n\n\treturn (\n\t\t<div\n\t\t\tref={ containerRef }\n\t\t\tclassName=\"block-library-utils__media-control\"\n\t\t>\n\t\t\t<MediaReplaceFlow\n\t\t\t\tclassName=\"block-library-utils__media-control__replace-flow\"\n\t\t\t\tmediaId={ mediaId }\n\t\t\t\tmediaURL={ mediaUrl }\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\tonError={ onError }\n\t\t\t\tname={\n\t\t\t\t\t<MediaControlPreview\n\t\t\t\t\t\turl={ mediaUrl }\n\t\t\t\t\t\tfilename={ filename }\n\t\t\t\t\t\tclassName=\"block-library-utils__media-control__inspector-media-replace-title\"\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tmediaUrl\n\t\t\t\t\t\t\t\t? getFilename( filename ) || emptyLabel\n\t\t\t\t\t\t\t\t: emptyLabel\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\trenderToggle={ ( props ) => (\n\t\t\t\t\t<Button { ...props } __next40pxDefaultSize>\n\t\t\t\t\t\t{ isUploading ? <Spinner /> : props.children }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\tonReset={ onReset }\n\t\t\t/>\n\t\t\t{ mediaUrl && onReset && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\tclassName=\"block-library-utils__media-control__reset\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonReset();\n\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<DropZone onFilesDrop={ onFilesDrop } />\n\t\t</div>\n\t);\n}\n"],
  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAQO;AACP,0BAGO;AACP,iBAAsB;AACtB,qBAAuB;AACvB,kBAAmB;AACnB,kBAA0B;AAC1B,mBAAmC;AACnC,iBAA4B;AAuCzB;AAhCH,IAAM,oBAAoB,CAAE,iBAAkB;AAE7C,SAAO,sBAAuB,MAAM;AACnC,UAAM,CAAE,YAAa,IAAI,iBAAM,SAAS,KAAM,cAAc,OAAQ;AACpE,QAAK,CAAE,cAAe;AACrB;AAAA,IACD;AAEA,iBAAa,MAAM;AAAA,EACpB,CAAE;AACH;AAaO,SAAS,oBAAqB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,4CAAC,kBAAAA,yBAAA,EAAY,GAAG,gBAAiB,IAAG,QACnC,uDAAC,kBAAAC,sBAAA,EAAO,SAAQ,cACf;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAQ;AAAA,UACP,iBAAiB,MAAM,OAAQ,GAAI,MAAM;AAAA,QAC1C;AAAA;AAAA,IACD;AAAA,IACA,4CAAC,+BACA,sDAAC,kBAAAC,wBAAA,EAAS,eAAgB,GAAI,WAC3B,sBAAY,OACf,GACD;AAAA,KACD,GACD;AAEF;AAkBO,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,iBAAa,gBAAI,OAAQ;AAC1B,GAAI;AACH,QAAM,EAAE,YAAY,QAAI,uBAAW,oBAAAC,KAAiB;AACpD,QAAM,cAAc,CAAE,cAAe;AACpC,UAAM,EAAE,YAAY,IAAI,YAAY;AACpC,QAAK,CAAE,aAAc;AACpB;AAAA,IACD;AACA,gBAAa;AAAA,MACZ;AAAA,MACA;AAAA,MACA,aAAc,CAAE,KAAM,GAAI;AACzB,iBAAU,KAAM;AAAA,MACjB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACX,CAAE;AAAA,EACH;AACA,QAAM,mBAAe,uBAAO;AAE5B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV;AAAA,YACA,UAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,MACC;AAAA,cAAC;AAAA;AAAA,gBACA,KAAM;AAAA,gBACN;AAAA,gBACA,WAAU;AAAA,gBACV,OACC,eACG,wBAAa,QAAS,KAAK,aAC3B;AAAA;AAAA,YAEL;AAAA,YAED,cAAe,CAAE,UAChB,4CAAC,4BAAS,GAAG,OAAQ,uBAAqB,MACvC,wBAAc,4CAAC,6BAAQ,IAAK,MAAM,UACrC;AAAA,YAED;AAAA;AAAA,QACD;AAAA,QACE,YAAY,WACb;AAAA,UAAC;AAAA;AAAA,YACA,WAAQ,gBAAI,OAAQ;AAAA,YACpB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,MAAO,aAAAC;AAAA,YACP,SAAU,MAAM;AACf,sBAAQ;AACR,gCAAmB,YAAa;AAAA,YACjC;AAAA;AAAA,QACD;AAAA,QAED,4CAAC,8BAAS,aAA4B;AAAA;AAAA;AAAA,EACvC;AAEF;",
  "names": ["ItemGroup", "HStack", "Truncate", "blockEditorStore", "resetIcon"]
}