UNPKG

@wordpress/block-library

Version:

Block library for the WordPress editor.

github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/README.md

WordPress/gutenberg

8 lines (7 loc) • 3.39 kB
1
2
3
4
5
6
7
8
{ "version": 3, "sources": ["../../../src/navigation-link/link-ui/dialog-wrapper.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, VisuallyHidden } from '@wordpress/components';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';\nimport { useInstanceId, useFocusOnMount } from '@wordpress/compose';\n\n/**\n * Shared BackButton component for consistent navigation across LinkUI sub-components.\n *\n * @param {Object} props Component props.\n * @param {string} props.className CSS class name for the button.\n * @param {Function} props.onBack Callback when user wants to go back.\n */\nfunction BackButton( { className, onBack } ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ className }\n\t\t\ticon={ isRTL() ? chevronRightSmall : chevronLeftSmall }\n\t\t\tonClick={ ( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tonBack();\n\t\t\t} }\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{ __( 'Back' ) }\n\t\t</Button>\n\t);\n}\n\n/**\n * Shared DialogWrapper component for consistent dialog structure across LinkUI sub-components.\n *\n * @param {Object} props Component props.\n * @param {string} props.className CSS class name for the dialog container.\n * @param {string} props.title Dialog title for accessibility.\n * @param {string} props.description Dialog description for accessibility.\n * @param {Function} props.onBack Callback when user wants to go back.\n * @param {Object} props.children Child components to render inside the dialog.\n */\nfunction DialogWrapper( { className, title, description, onBack, children } ) {\n\tconst dialogTitleId = useInstanceId(\n\t\tDialogWrapper,\n\t\t'link-ui-dialog-title'\n\t);\n\tconst dialogDescriptionId = useInstanceId(\n\t\tDialogWrapper,\n\t\t'link-ui-dialog-description'\n\t);\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst backButtonClassName = `${ className }__back`;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ className }\n\t\t\trole=\"dialog\"\n\t\t\taria-labelledby={ dialogTitleId }\n\t\t\taria-describedby={ dialogDescriptionId }\n\t\t\tref={ focusOnMountRef }\n\t\t>\n\t\t\t<VisuallyHidden>\n\t\t\t\t<h2 id={ dialogTitleId }>{ title }</h2>\n\t\t\t\t<p id={ dialogDescriptionId }>{ description }</p>\n\t\t\t</VisuallyHidden>\n\n\t\t\t<BackButton className={ backButtonClassName } onBack={ onBack } />\n\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default DialogWrapper;\n"], "mappings": ";AAGA,SAAS,QAAQ,sBAAsB;AACvC,SAAS,IAAI,aAAa;AAC1B,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,eAAe,uBAAuB;AAW7C,cA4CC,YA5CD;AAFF,SAAS,WAAY,EAAE,WAAW,OAAO,GAAI;AAC5C,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,MAAO,MAAM,IAAI,oBAAoB;AAAA,MACrC,SAAU,CAAE,MAAO;AAClB,UAAE,eAAe;AACjB,eAAO;AAAA,MACR;AAAA,MACA,MAAK;AAAA,MAEH,aAAI,MAAO;AAAA;AAAA,EACd;AAEF;AAYA,SAAS,cAAe,EAAE,WAAW,OAAO,aAAa,QAAQ,SAAS,GAAI;AAC7E,QAAM,gBAAgB;AAAA,IACrB;AAAA,IACA;AAAA,EACD;AACA,QAAM,sBAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,EACD;AACA,QAAM,kBAAkB,gBAAiB,cAAe;AACxD,QAAM,sBAAsB,GAAI,SAAU;AAE1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,mBAAkB;AAAA,MAClB,oBAAmB;AAAA,MACnB,KAAM;AAAA,MAEN;AAAA,6BAAC,kBACA;AAAA,8BAAC,QAAG,IAAK,eAAkB,iBAAO;AAAA,UAClC,oBAAC,OAAE,IAAK,qBAAwB,uBAAa;AAAA,WAC9C;AAAA,QAEA,oBAAC,cAAW,WAAY,qBAAsB,QAAkB;AAAA,QAE9D;AAAA;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,yBAAQ;", "names": [] }