"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ToolsPanel = void 0;
var _toolsPanelHeader = _interopRequireDefault(require("../tools-panel-header"));
var _context = require("../context");
var _hook = require("./hook");
var _grid = require("../../grid");
var _context2 = require("../../context");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

const UnconnectedToolsPanel = (props, forwardedRef) => {
  const {
    children,
    label,
    panelContext,
    resetAllItems,
    toggleItem,
    headingLevel,
    dropdownMenuProps,
    ...toolsPanelProps
  } = (0, _hook.useToolsPanel)(props);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_grid.Grid, {
    ...toolsPanelProps,
    columns: 2,
    ref: forwardedRef,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_context.ToolsPanelContext.Provider, {
      value: panelContext,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_toolsPanelHeader.default, {
        label: label,
        resetAll: resetAllItems,
        toggleItem: toggleItem,
        headingLevel: headingLevel,
        dropdownMenuProps: dropdownMenuProps
      }), children]
    })
  });
};

/**
 * The `ToolsPanel` is a container component that displays its children preceded
 * by a header. The header includes a dropdown menu which is automatically
 * generated from the panel's inner `ToolsPanelItems`.
 *
 * ```jsx
 * import { __ } from '@wordpress/i18n';
 * import {
 *   __experimentalToolsPanel as ToolsPanel,
 *   __experimentalToolsPanelItem as ToolsPanelItem,
 *   __experimentalUnitControl as UnitControl
 * } from '@wordpress/components';
 *
 * function Example() {
 *   const [ height, setHeight ] = useState();
 *   const [ width, setWidth ] = useState();
 *
 *   const resetAll = () => {
 *     setHeight();
 *     setWidth();
 *   }
 *
 *   return (
 *     <ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
 *       <ToolsPanelItem
 *         hasValue={ () => !! height }
 *         label={ __( 'Height' ) }
 *         onDeselect={ () => setHeight() }
 *       >
 *         <UnitControl
 *           label={ __( 'Height' ) }
 *           onChange={ setHeight }
 *           value={ height }
 *         />
 *       </ToolsPanelItem>
 *       <ToolsPanelItem
 *         hasValue={ () => !! width }
 *         label={ __( 'Width' ) }
 *         onDeselect={ () => setWidth() }
 *       >
 *         <UnitControl
 *           label={ __( 'Width' ) }
 *           onChange={ setWidth }
 *           value={ width }
 *         />
 *       </ToolsPanelItem>
 *     </ToolsPanel>
 *   );
 * }
 * ```
 */
const ToolsPanel = exports.ToolsPanel = (0, _context2.contextConnect)(UnconnectedToolsPanel, 'ToolsPanel');
var _default = exports.default = ToolsPanel;
//# sourceMappingURL=component.js.map