@wordpress/components/build/ui/control-group/component.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 _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _flex = require("../../flex");

var _grid = require("../grid");

var _hook = require("./hook");

var _context = require("../context");

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

/**
 * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
 * @param {import('react').Ref<any>} forwardedRef
 */
function ControlGroup(props, forwardedRef) {
  const {
    children,
    direction = 'row',
    templateColumns,
    ...otherProps
  } = (0, _hook.useControlGroup)(props);
  const isGrid = !!templateColumns;

  if (isGrid) {
    return (0, _element.createElement)(_grid.Grid, (0, _extends2.default)({
      gap: 0,
      templateColumns: templateColumns
    }, otherProps, {
      ref: forwardedRef
    }), children);
  }

  return (0, _element.createElement)(_flex.Flex, (0, _extends2.default)({
    direction: direction,
    gap: `-1px`
  }, otherProps, {
    ref: forwardedRef
  }), children);
}
/**
 * `ControlGroup` is a layout-based component for rendering a group of
 * control-based components, such as `Button`, `Select` or `TextInput`.
 * Control components that render within `ControlGroup` automatically
 * have their borders offset and border-radii rounded.
 *
 * @example
 * ```jsx
 * import { Button, ControlGroup, Select, TextInput } from `@wordpress/components/ui`;
 *
 * function Example() {
 *   return (
 *     <ControlGroup templateColumns="auto 1fr auto">
 *       <Select />
 *       <TextInput placeholder="First name" />
 *       <Button variant="primary" />
 *     </ControlGroup>
 *   );
 * }
 * ```
 */


const ConnectedControlGroup = (0, _context.contextConnect)(ControlGroup, 'ControlGroup');
var _default = ConnectedControlGroup;
exports.default = _default;
//# sourceMappingURL=component.js.map