UNPKG

@wordpress/block-editor

Version:
8 lines (7 loc) 4.62 kB
{ "version": 3, "sources": ["../../../src/components/tabbed-sidebar/index.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { forwardRef } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\n/**\n * A component that creates a tabbed sidebar with a close button.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/tabbed-sidebar/README.md\n *\n * @example\n * ```jsx\n * function MyTabbedSidebar() {\n * return (\n * <TabbedSidebar\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Settings',\n * panel: <PanelContents />,\n * }\n * ] }\n * onClose={ () => {} }\n * onSelect={ () => {} }\n * defaultTabId=\"tab1\"\n * selectedTab=\"tab1\"\n * closeButtonLabel=\"Close sidebar\"\n * />\n * );\n * }\n * ```\n *\n * @param {Object} props Component props.\n * @param {string} [props.defaultTabId] The ID of the tab to be selected by default when the component renders.\n * @param {Function} props.onClose Function called when the close button is clicked.\n * @param {Function} props.onSelect Function called when a tab is selected. Receives the selected tab's ID as an argument.\n * @param {string} props.selectedTab The ID of the currently selected tab.\n * @param {Array} props.tabs Array of tab objects. Each tab should have: name (string), title (string),\n * panel (React.Node), and optionally panelRef (React.Ref).\n * @param {string} props.closeButtonLabel Accessibility label for the close button.\n * @param {Object} ref Forward ref to the tabs list element.\n * @return {Element} The tabbed sidebar component.\n */\nfunction TabbedSidebar(\n\t{ defaultTabId, onClose, onSelect, selectedTab, tabs, closeButtonLabel },\n\tref\n) {\n\treturn (\n\t\t<div className=\"block-editor-tabbed-sidebar\">\n\t\t\t<Tabs\n\t\t\t\tselectOnMove={ false }\n\t\t\t\tdefaultTabId={ defaultTabId }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tselectedTabId={ selectedTab }\n\t\t\t>\n\t\t\t\t<div className=\"block-editor-tabbed-sidebar__tablist-and-close-button\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"block-editor-tabbed-sidebar__close-button\"\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tlabel={ closeButtonLabel }\n\t\t\t\t\t\tonClick={ () => onClose() }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<Tabs.TabList\n\t\t\t\t\t\tclassName=\"block-editor-tabbed-sidebar__tablist\"\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-tabbed-sidebar__tab\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t</div>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\tclassName=\"block-editor-tabbed-sidebar__tabpanel\"\n\t\t\t\t\t\tref={ tab.panelRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ tab.panel }\n\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t) ) }\n\t\t\t</Tabs>\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( TabbedSidebar );\n"], "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AACP,qBAA2B;AAC3B,mBAA2B;AAK3B,yBAAuB;AAsDnB;AApDJ,IAAM,EAAE,KAAK,QAAI,2BAAQ,kBAAAA,WAAsB;AAwC/C,SAAS,cACR,EAAE,cAAc,SAAS,UAAU,aAAa,MAAM,iBAAiB,GACvE,KACC;AACD,SACC,4CAAC,SAAI,WAAU,+BACd;AAAA,IAAC;AAAA;AAAA,MACA,cAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,eAAgB;AAAA,MAEhB;AAAA,qDAAC,SAAI,WAAU,yDACd;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,MAAO;AAAA,cACP,OAAQ;AAAA,cACR,SAAU,MAAM,QAAQ;AAAA,cACxB,MAAK;AAAA;AAAA,UACN;AAAA,UAEA;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACA,WAAU;AAAA,cACV;AAAA,cAEE,eAAK,IAAK,CAAE,QACb;AAAA,gBAAC,KAAK;AAAA,gBAAL;AAAA,kBAEA,OAAQ,IAAI;AAAA,kBACZ,WAAU;AAAA,kBAER,cAAI;AAAA;AAAA,gBAJA,IAAI;AAAA,cAKX,CACC;AAAA;AAAA,UACH;AAAA,WACD;AAAA,QACE,KAAK,IAAK,CAAE,QACb;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YAEA,OAAQ,IAAI;AAAA,YACZ,WAAY;AAAA,YACZ,WAAU;AAAA,YACV,KAAM,IAAI;AAAA,YAER,cAAI;AAAA;AAAA,UANA,IAAI;AAAA,QAOX,CACC;AAAA;AAAA;AAAA,EACH,GACD;AAEF;AAEA,IAAO,6BAAQ,2BAAY,aAAc;", "names": ["componentsPrivateApis"] }