@wordpress/components/build/toolbar/toolbar-group/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _toolbarButton = _interopRequireDefault(require("../toolbar-button"));
var _toolbarGroupContainer = _interopRequireDefault(require("./toolbar-group-container"));
var _toolbarGroupCollapsed = _interopRequireDefault(require("./toolbar-group-collapsed"));
var _toolbarContext = _interopRequireDefault(require("../toolbar-context"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function isNestedArray(arr) {
  return Array.isArray(arr) && Array.isArray(arr[0]);
}

/**
 * Renders a collapsible group of controls
 *
 * The `controls` prop accepts an array of sets. A set is an array of controls.
 * Controls have the following shape:
 *
 * ```
 * {
 *   icon: string,
 *   title: string,
 *   subscript: string,
 *   onClick: Function,
 *   isActive: boolean,
 *   isDisabled: boolean
 * }
 * ```
 *
 * For convenience it is also possible to pass only an array of controls. It is
 * then assumed this is the only set.
 *
 * Either `controls` or `children` is required, otherwise this components
 * renders nothing.
 *
 * @param props               Component props.
 * @param [props.controls]    The controls to render in this toolbar.
 * @param [props.children]    Any other things to render inside the toolbar besides the controls.
 * @param [props.className]   Class to set on the container div.
 * @param [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.
 * @param [props.title]       ARIA label for dropdown menu if is collapsed.
 */
function ToolbarGroup({
  controls = [],
  children,
  className,
  isCollapsed,
  title,
  ...props
}) {
  // It'll contain state if `ToolbarGroup` is being used within
  // `<Toolbar label="label" />`
  const accessibleToolbarState = (0, _element.useContext)(_toolbarContext.default);
  if ((!controls || !controls.length) && !children) {
    return null;
  }
  const finalClassName = (0, _clsx.default)(
  // Unfortunately, there's legacy code referencing to `.components-toolbar`
  // So we can't get rid of it
  accessibleToolbarState ? 'components-toolbar-group' : 'components-toolbar', className);

  // Normalize controls to nested array of objects (sets of controls)
  let controlSets;
  if (isNestedArray(controls)) {
    controlSets = controls;
  } else {
    controlSets = [controls];
  }
  if (isCollapsed) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbarGroupCollapsed.default, {
      label: title,
      controls: controlSets,
      className: finalClassName,
      children: children,
      ...props
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_toolbarGroupContainer.default, {
    className: finalClassName,
    ...props,
    children: [controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbarButton.default, {
      containerClassName: indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : undefined,
      ...control
    }, [indexOfSet, indexOfControl].join()))), children]
  });
}
var _default = exports.default = ToolbarGroup;
//# sourceMappingURL=index.js.map