/**
 * WordPress dependencies
 */
import { Button, privateApis as componentsPrivateApis } from '@wordpress/components';
import { forwardRef } from '@wordpress/element';
import { closeSmall } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import { unlock } from '../../lock-unlock';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const {
  Tabs
} = unlock(componentsPrivateApis);
function TabbedSidebar({
  defaultTabId,
  onClose,
  onSelect,
  selectedTab,
  tabs,
  closeButtonLabel
}, ref) {
  return /*#__PURE__*/_jsx("div", {
    className: "block-editor-tabbed-sidebar",
    children: /*#__PURE__*/_jsxs(Tabs, {
      selectOnMove: false,
      defaultTabId: defaultTabId,
      onSelect: onSelect,
      selectedTabId: selectedTab,
      children: [/*#__PURE__*/_jsxs("div", {
        className: "block-editor-tabbed-sidebar__tablist-and-close-button",
        children: [/*#__PURE__*/_jsx(Button, {
          className: "block-editor-tabbed-sidebar__close-button",
          icon: closeSmall,
          label: closeButtonLabel,
          onClick: () => onClose(),
          size: "small"
        }), /*#__PURE__*/_jsx(Tabs.TabList, {
          className: "block-editor-tabbed-sidebar__tablist",
          ref: ref,
          children: tabs.map(tab => /*#__PURE__*/_jsx(Tabs.Tab, {
            tabId: tab.name,
            className: "block-editor-tabbed-sidebar__tab",
            children: tab.title
          }, tab.name))
        })]
      }), tabs.map(tab => /*#__PURE__*/_jsx(Tabs.TabPanel, {
        tabId: tab.name,
        focusable: false,
        className: "block-editor-tabbed-sidebar__tabpanel",
        ref: tab.panelRef,
        children: tab.panel
      }, tab.name))]
    })
  });
}
export default forwardRef(TabbedSidebar);
//# sourceMappingURL=index.js.map