@wordpress/block-editor/build/components/tabbed-sidebar/index.js

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  Tabs
} = (0, _lockUnlock.unlock)(_components.privateApis);

/**
 * A component that creates a tabbed sidebar with a close button.
 *
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/tabbed-sidebar/README.md
 *
 * @example
 * ```jsx
 * function MyTabbedSidebar() {
 *   return (
 *     <TabbedSidebar
 *       tabs={ [
 *         {
 *           name: 'tab1',
 *           title: 'Settings',
 *           panel: <PanelContents />,
 *         }
 *       ] }
 *       onClose={ () => {} }
 *       onSelect={ () => {} }
 *       defaultTabId="tab1"
 *       selectedTab="tab1"
 *       closeButtonLabel="Close sidebar"
 *     />
 *   );
 * }
 * ```
 *
 * @param {Object}   props                  Component props.
 * @param {string}   [props.defaultTabId]   The ID of the tab to be selected by default when the component renders.
 * @param {Function} props.onClose          Function called when the close button is clicked.
 * @param {Function} props.onSelect         Function called when a tab is selected. Receives the selected tab's ID as an argument.
 * @param {string}   props.selectedTab      The ID of the currently selected tab.
 * @param {Array}    props.tabs             Array of tab objects. Each tab should have: name (string), title (string),
 *                                          panel (React.Node), and optionally panelRef (React.Ref).
 * @param {string}   props.closeButtonLabel Accessibility label for the close button.
 * @param {Object}   ref                    Forward ref to the tabs list element.
 * @return {Element} The tabbed sidebar component.
 */
function TabbedSidebar({
  defaultTabId,
  onClose,
  onSelect,
  selectedTab,
  tabs,
  closeButtonLabel
}, ref) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "block-editor-tabbed-sidebar",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, {
      selectOnMove: false,
      defaultTabId: defaultTabId,
      onSelect: onSelect,
      selectedTabId: selectedTab,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "block-editor-tabbed-sidebar__tablist-and-close-button",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          className: "block-editor-tabbed-sidebar__close-button",
          icon: _icons.closeSmall,
          label: closeButtonLabel,
          onClick: () => onClose(),
          size: "compact"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabList, {
          className: "block-editor-tabbed-sidebar__tablist",
          ref: ref,
          children: tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
            tabId: tab.name,
            className: "block-editor-tabbed-sidebar__tab",
            children: tab.title
          }, tab.name))
        })]
      }), tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
        tabId: tab.name,
        focusable: false,
        className: "block-editor-tabbed-sidebar__tabpanel",
        ref: tab.panelRef,
        children: tab.panel
      }, tab.name))]
    })
  });
}
var _default = exports.default = (0, _element.forwardRef)(TabbedSidebar);
//# sourceMappingURL=index.js.map