braid-design-system
Version:
Themeable design system for the SEEK Group
132 lines (131 loc) • 5.37 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
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_FieldMessage_FieldMessage_cjs = require("../../FieldMessage/FieldMessage.cjs");
const lib_components_Text_Text_cjs = require("../../Text/Text.cjs");
const lib_components_private_badgeSlotSpace_cjs = require("../badgeSlotSpace.cjs");
const lib_components_private_mergeIds_cjs = require("../mergeIds.cjs");
const lib_components_private_InlineField_StyledInput_cjs = require("./StyledInput.cjs");
const lib_components_private_InlineField_InlineField_css_cjs = require("./InlineField.css.cjs");
const lib_components_private_touchable_virtualTouchable_css_cjs = require("../touchable/virtualTouchable.css.cjs");
const InlineField = react.forwardRef(
({
id,
name,
value,
checked,
data,
onChange,
label,
type,
children,
description,
badge,
message,
reserveMessageSpace = false,
tone = "neutral",
disabled = false,
required,
inList = false,
tabIndex,
size = "standard",
"aria-describedby": ariaDescribedBy,
...restProps
}, forwardedRef) => {
const resolvedId = lib_hooks_useFallbackId_cjs.useFallbackId(id);
const messageId = react.useId();
const descriptionId = react.useId();
const hasMessage = message && !disabled || reserveMessageSpace;
if (process.env.NODE_ENV !== "production") {
if (badge && badge.props.bleedY !== void 0) {
console.warn(
`Badge elements cannot set the \`bleedY\` prop when passed to a ${type.charAt(0).toUpperCase()}${type.slice(1)} component`
);
}
}
return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { position: "relative", children: [
/* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { display: "flex", textAlign: "left", children: [
/* @__PURE__ */ jsxRuntime.jsx(
lib_components_private_InlineField_StyledInput_cjs.StyledInput,
{
...restProps,
type,
id: resolvedId,
checked,
name,
value,
data,
onChange,
disabled,
tone,
tabIndex,
required,
"aria-describedby": lib_components_private_mergeIds_cjs.mergeIds(
ariaDescribedBy,
message ? messageId : void 0,
description ? descriptionId : void 0
),
size,
ref: forwardedRef
}
),
/* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { paddingLeft: "xsmall", flexGrow: 1, children: [
/* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
display: "flex",
className: [lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size], lib_components_private_InlineField_InlineField_css_cjs.labelOffset],
children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "label",
htmlFor: resolvedId,
userSelect: "none",
display: "block",
cursor: !disabled ? "pointer" : void 0,
className: lib_components_private_touchable_virtualTouchable_css_cjs.virtualTouchable,
children: /* @__PURE__ */ jsxRuntime.jsxs(
lib_components_Text_Text_cjs.Text,
{
weight: checked && !inList ? "strong" : void 0,
tone: disabled ? "secondary" : void 0,
size,
children: [
badge ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", paddingRight: lib_components_private_badgeSlotSpace_cjs.badgeSlotSpace, children: label }) : label,
badge ? react.cloneElement(badge, {}) : null
]
}
)
}
)
}
),
description ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingTop: "small", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { tone: "secondary", size, id: descriptionId, children: description }) }) : null,
children ? /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
position: "relative",
display: "none",
paddingTop: "small",
className: lib_components_private_InlineField_InlineField_css_cjs.children,
children
}
) : null
] })
] }),
hasMessage ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingTop: description ? "small" : "xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_FieldMessage_FieldMessage_cjs.FieldMessage,
{
id: messageId,
tone,
disabled,
message,
reserveMessageSpace
}
) }) : null
] });
}
);
exports.InlineField = InlineField;