@wordpress/components/build/ui/form-group/form-group.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 _context = require("../context");

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

var _view = require("../view");

var _formGroupContent = _interopRequireDefault(require("./form-group-content"));

var _useFormGroup = require("./use-form-group");

/**
 * Internal dependencies
 */

/**
 * @param {import('../context').ViewOwnProps<import('./types').FormGroupProps, 'div'>} props
 * @param {import('react').Ref<any>} forwardedRef
 */
function FormGroup(props, forwardedRef) {
  const {
    contentProps,
    horizontal,
    ...otherProps
  } = (0, _useFormGroup.useFormGroup)(props);

  if (horizontal) {
    return (0, _element.createElement)(_grid.Grid, (0, _extends2.default)({
      templateColumns: "minmax(0, 1fr) 2fr"
    }, otherProps, {
      ref: forwardedRef
    }), (0, _element.createElement)(_formGroupContent.default, contentProps));
  }

  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, otherProps, {
    ref: forwardedRef
  }), (0, _element.createElement)(_formGroupContent.default, contentProps));
}
/**
 * `FormGroup` is a form component that groups a label with a form element (e.g. `Switch` or `TextInput`).
 *
 * @example
 * ```jsx
 * import { FormGroup, TextInput } from `@wordpress/components/ui`;
 *
 * function Example() {
 * 	return (
 * 		<FormGroup label="First name">
 * 			<TextInput />
 * 		</FormGroup>
 * 	);
 * }
 * ```
 */


const ConnectedFormGroup = (0, _context.contextConnect)(FormGroup, 'FormGroup');
var _default = ConnectedFormGroup;
exports.default = _default;
//# sourceMappingURL=form-group.js.map