@wordpress/components
Version:
UI components for WordPress.
144 lines (139 loc) • 5.15 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.VisualLabel = exports.BaseControl = void 0;
Object.defineProperty(exports, "useBaseControlProps", {
enumerable: true,
get: function () {
return _hooks.useBaseControlProps;
}
});
var _clsx = _interopRequireDefault(require("clsx"));
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _element = require("@wordpress/element");
var _visuallyHidden = require("../visually-hidden");
var _baseControlStyles = require("./styles/base-control-styles");
var _context = require("../context");
var _jsxRuntime = require("react/jsx-runtime");
var _hooks = require("./hooks");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const UnconnectedBaseControl = props => {
const {
__nextHasNoMarginBottom = false,
__associatedWPComponentName = 'BaseControl',
id,
label,
hideLabelFromVision = false,
help,
className,
children
} = (0, _context.useContextSystem)(props, 'BaseControl');
if (!__nextHasNoMarginBottom) {
(0, _deprecated.default)(`Bottom margin styles for wp.components.${__associatedWPComponentName}`, {
since: '6.7',
version: '7.0',
hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_baseControlStyles.Wrapper, {
className: className,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_baseControlStyles.StyledField, {
className: "components-base-control__field"
// TODO: Official deprecation for this should start after all internal usages have been migrated
,
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
children: [label && id && (hideLabelFromVision ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
as: "label",
htmlFor: id,
children: label
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledLabel, {
className: "components-base-control__label",
htmlFor: id,
children: label
})), label && !id && (hideLabelFromVision ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
as: "label",
children: label
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(VisualLabel, {
children: label
})), children]
}), !!help && /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledHelp, {
id: id ? id + '__help' : undefined,
className: "components-base-control__help",
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
children: help
})]
});
};
const UnforwardedVisualLabel = (props, ref) => {
const {
className,
children,
...restProps
} = props;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledVisualLabel, {
ref: ref,
...restProps,
className: (0, _clsx.default)('components-base-control__label', className),
children: children
});
};
const VisualLabel = exports.VisualLabel = (0, _element.forwardRef)(UnforwardedVisualLabel);
/**
* `BaseControl` is a component used to generate labels and help text for components handling user inputs.
*
* ```jsx
* import { BaseControl, useBaseControlProps } from '@wordpress/components';
*
* // Render a `BaseControl` for a textarea input
* const MyCustomTextareaControl = ({ children, ...baseProps }) => (
* // `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
* // and the inner control itself. Namely, it takes care of generating a unique `id`,
* // properly associating it with the `label` and `help` elements.
* const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
*
* return (
* <BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
* <textarea { ...controlProps }>
* { children }
* </textarea>
* </BaseControl>
* );
* );
* ```
*/
const BaseControl = exports.BaseControl = Object.assign((0, _context.contextConnectWithoutRef)(UnconnectedBaseControl, 'BaseControl'), {
/**
* `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
*
* It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
* e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
* otherwise use if the `label` prop was passed.
*
* ```jsx
* import { BaseControl } from '@wordpress/components';
*
* const MyBaseControl = () => (
* <BaseControl
* __nextHasNoMarginBottom
* help="This button is already accessibly labeled."
* >
* <BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
* <Button>Select an author</Button>
* </BaseControl>
* );
* ```
*/
VisualLabel
});
var _default = exports.default = BaseControl;
//# sourceMappingURL=index.js.map