braid-design-system
Version:
Themeable design system for the SEEK Group
108 lines (106 loc) • 4.46 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
const dedent = require("dedent");
const react = require("react");
const lib_hooks_useFallbackId_cjs = require("../../../hooks/useFallbackId.cjs");
const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
const lib_components_FieldLabel_FieldLabel_cjs = require("../../FieldLabel/FieldLabel.cjs");
const lib_components_FieldMessage_FieldMessage_cjs = require("../../FieldMessage/FieldMessage.cjs");
const lib_components_Stack_Stack_cjs = require("../../Stack/Stack.cjs");
const lib_components_private_buildDataAttributes_cjs = require("../buildDataAttributes.cjs");
const lib_components_private_mergeIds_cjs = require("../mergeIds.cjs");
const lib_components_private_validateTabIndex_cjs = require("../validateTabIndex.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
const FieldGroup = ({
id,
disabled,
children,
secondaryLabel,
tertiaryLabel,
description,
message,
reserveMessageSpace = false,
messageSpace = "xsmall",
tone,
required,
role,
tabIndex,
data,
componentName,
...restProps
}) => {
const resolvedId = lib_hooks_useFallbackId_cjs.useFallbackId(id);
const labelId = react.useId();
const messageId = react.useId();
const descriptionId = react.useId();
let ariaLabelledBy;
let ariaLabel;
if ("label" in restProps && restProps.label) {
ariaLabelledBy = labelId;
} else if ("aria-labelledby" in restProps && restProps["aria-labelledby"]) {
ariaLabelledBy = restProps["aria-labelledby"];
} else if ("aria-label" in restProps && restProps["aria-label"]) {
ariaLabel = restProps["aria-label"];
}
if (process.env.NODE_ENV !== "production") {
if ("label" in restProps && typeof restProps.label === "string" && restProps.label.trim().length === 0 && !("aria-label" in restProps) && !("aria-labelledby" in restProps)) {
console.warn(
dedent__default.default`
The "label" prop is required as the accessible name for a ${componentName}.
If you are labelling the ${componentName} with another element or using a non-visual label please provide the appropriate props, either "aria-label" or "aria-labelledby".
See the ${componentName} documentation for more information: https://seek-oss.github.io/braid-design-system/components/${componentName}#indirect-or-hidden-field-labels
`
);
}
lib_components_private_validateTabIndex_cjs.validateTabIndex(tabIndex);
}
return /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "fieldset",
disabled,
id: resolvedId,
role,
"aria-labelledby": ariaLabelledBy,
"aria-label": ariaLabel,
"aria-required": required,
...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Stack_Stack_cjs.Stack, { space: "small", children: [
"label" in restProps && restProps.label || description ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "legend", id: labelId, children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_FieldLabel_FieldLabel_cjs.FieldLabel,
{
htmlFor: false,
label: "label" in restProps ? restProps.label : void 0,
secondaryLabel,
tertiaryLabel,
disabled,
description,
descriptionId: description ? descriptionId : void 0
}
) }) : null,
/* @__PURE__ */ jsxRuntime.jsxs(lib_components_Stack_Stack_cjs.Stack, { space: messageSpace, children: [
children({
disabled,
tabIndex,
"aria-describedby": lib_components_private_mergeIds_cjs.mergeIds(
message ? messageId : void 0,
description ? descriptionId : void 0
)
}),
message && !disabled || reserveMessageSpace ? /* @__PURE__ */ jsxRuntime.jsx(
lib_components_FieldMessage_FieldMessage_cjs.FieldMessage,
{
id: messageId,
tone,
disabled,
message,
reserveMessageSpace
}
) : null
] })
] })
}
);
};
exports.FieldGroup = FieldGroup;