Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@launchpad-ui/form

Package Overview
Dependencies
Maintainers
1
Versions
170
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@launchpad-ui/form - npm Package Compare versions

Comparing version 0.6.28 to 0.6.29

483

dist/index.es.js
import './style.css';
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { forwardRef, useState, useRef, Children, isValidElement, cloneElement } from "react";
import { cx } from "classix";
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { VisuallyHidden } from "@react-aria/visually-hidden";

@@ -70,3 +70,8 @@ const formGroup = "_formGroup_1qrlg_1";

const classes = cx(styles.requiredAsterisk, className);
return /* @__PURE__ */ jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
return /* @__PURE__ */ jsx("span", {
...rest,
"data-test-id": testId,
className: classes,
children: "*"
});
};

@@ -83,145 +88,137 @@ const Label = ({

const classes = cx(styles.label, className, disabled && styles.labelDisabled);
return /* @__PURE__ */ jsxs("label", { ...rest, "data-test-id": testId, className: classes, children: [
children,
optional && !required && /* @__PURE__ */ jsx("small", { className: styles.labelOptional, children: "(optional)" }),
required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})
] });
return /* @__PURE__ */ jsxs("label", {
...rest,
"data-test-id": testId,
className: classes,
children: [children, optional && !required && /* @__PURE__ */ jsx("small", {
className: styles.labelOptional,
children: "(optional)"
}), required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
});
};
const Checkbox = forwardRef(
({
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
children,
disabled,
checked,
labelClassName,
"data-test-id": testId = "checkbox",
...rest
}, ref) => {
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
if (!children && !hasAriaLabel) {
console.warn(
"If you do not provide children, you must specify an aria-label for accessibility"
);
}
return /* @__PURE__ */ jsxs(Label, { className: labelClassName, children: [
/* @__PURE__ */ jsx(
"input",
{
...rest,
ref,
checked,
"aria-checked": checked ? "true" : "false",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
className: styles.checkbox,
disabled,
type: "checkbox",
"data-test-id": testId
}
),
" ",
disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children
] });
const Checkbox = forwardRef(({
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
children,
disabled,
checked,
labelClassName,
"data-test-id": testId = "checkbox",
...rest
}, ref) => {
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
if (!children && !hasAriaLabel) {
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
}
);
return /* @__PURE__ */ jsxs(Label, {
className: labelClassName,
children: [/* @__PURE__ */ jsx("input", {
...rest,
ref,
checked,
"aria-checked": checked ? "true" : "false",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
className: styles.checkbox,
disabled,
type: "checkbox",
"data-test-id": testId
}), " ", disabled ? /* @__PURE__ */ jsx("span", {
className: styles.labelDisabled,
children
}) : children]
});
});
Checkbox.displayName = "Checkbox";
const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
const TextField = forwardRef(
({
className,
type = "text",
tiny = false,
readOnly,
tabIndex = 0,
suffix: suffix2,
overrideWidth,
"data-test-id": testId = "text-field",
...rest
}, ref) => {
const classes = overrideWidth ? className : cx(styles.formInput, tiny && styles.formInputTiny, className);
if (suffix2) {
return /* @__PURE__ */ jsxs("div", { className: styles.suffixContainer, children: [
/* @__PURE__ */ jsx(
"input",
{
...rest,
type,
"data-test-id": testId,
className: classes,
readOnly,
ref,
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
}
),
/* @__PURE__ */ jsx("label", { className: styles.suffix, htmlFor: rest.id, children: suffix2 })
] });
}
return /* @__PURE__ */ jsx(
"input",
{
const TextField = forwardRef(({
className,
type = "text",
tiny = false,
readOnly,
tabIndex = 0,
suffix: suffix2,
overrideWidth,
"data-test-id": testId = "text-field",
...rest
}, ref) => {
const classes = overrideWidth ? className : cx(styles.formInput, tiny && styles.formInputTiny, className);
if (suffix2) {
return /* @__PURE__ */ jsxs("div", {
className: styles.suffixContainer,
children: [/* @__PURE__ */ jsx("input", {
...rest,
type,
"data-test-id": testId,
className: classes,
readOnly,
tabIndex,
ref,
"data-test-id": testId,
style: overrideWidth ? {
width: overrideWidth
} : void 0,
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
}
);
}), /* @__PURE__ */ jsx("label", {
className: styles.suffix,
htmlFor: rest.id,
children: suffix2
})]
});
}
);
return /* @__PURE__ */ jsx("input", {
...rest,
type,
className: classes,
readOnly,
tabIndex,
ref,
"data-test-id": testId,
style: overrideWidth ? {
width: overrideWidth
} : void 0,
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
});
});
TextField.displayName = "TextField";
const CompactTextField = forwardRef(
({
className,
id,
label: label2,
needsErrorFeedback,
value,
onFocus,
onBlur,
"data-test-id": testId = "compact-text-field",
...rest
}, ref) => {
const [isActive2, setIsActive] = useState(
(typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
);
const isActiveState = isActive2 || needsErrorFeedback;
const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);
const placeholder = isActiveState ? "" : label2;
const handleFocus = (event) => {
setIsActive(true);
if (onFocus) {
onFocus(event);
}
};
const handleBlur = (event) => {
const value2 = event.target.value || "";
setIsActive(value2.trim().length !== 0);
if (onBlur) {
onBlur(event);
}
};
return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, children: [
/* @__PURE__ */ jsx(Label, { htmlFor: id, children: label2 }),
/* @__PURE__ */ jsx(
TextField,
{
...rest,
id,
placeholder,
value,
ref,
onFocus: handleFocus,
onBlur: handleBlur
}
)
] });
}
);
const CompactTextField = forwardRef(({
className,
id,
label: label2,
needsErrorFeedback,
value,
onFocus,
onBlur,
"data-test-id": testId = "compact-text-field",
...rest
}, ref) => {
const [isActive2, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
const isActiveState = isActive2 || needsErrorFeedback;
const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);
const placeholder = isActiveState ? "" : label2;
const handleFocus = (event) => {
setIsActive(true);
if (onFocus) {
onFocus(event);
}
};
const handleBlur = (event) => {
const value2 = event.target.value || "";
setIsActive(value2.trim().length !== 0);
if (onBlur) {
onBlur(event);
}
};
return /* @__PURE__ */ jsxs("div", {
className: classes,
"data-test-id": testId,
children: [/* @__PURE__ */ jsx(Label, {
htmlFor: id,
children: label2
}), /* @__PURE__ */ jsx(TextField, {
...rest,
id,
placeholder,
value,
ref,
onFocus: handleFocus,
onBlur: handleBlur
})]
});
});
CompactTextField.displayName = "CompactTextField";

@@ -238,13 +235,10 @@ const FieldError = ({

}
return /* @__PURE__ */ jsx(
"span",
{
...rest,
className: cx(styles.fieldError, className),
"aria-live": "polite",
"data-test-id": testId,
id: createFieldErrorId(name),
children: `Error - ${errorMessage}`
}
);
return /* @__PURE__ */ jsx("span", {
...rest,
className: cx(styles.fieldError, className),
"aria-live": "polite",
"data-test-id": testId,
id: createFieldErrorId(name),
children: `Error - ${errorMessage}`
});
};

@@ -258,3 +252,8 @@ const FieldSet = ({

const classes = cx(styles.fieldSet, className);
return /* @__PURE__ */ jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
return /* @__PURE__ */ jsx("fieldset", {
"data-test-id": testId,
className: classes,
...rest,
children
});
};

@@ -270,9 +269,9 @@ const Form = (props) => {

} = props;
const classes = cx(
styles.form,
className,
inline && styles.formInline,
!!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin
);
return /* @__PURE__ */ jsx("form", { ...rest, "data-test-id": testId, className: classes, children });
const classes = cx(styles.form, className, inline && styles.formInline, !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin);
return /* @__PURE__ */ jsx("form", {
...rest,
"data-test-id": testId,
className: classes,
children
});
};

@@ -289,8 +288,9 @@ const FormGroup = (props) => {

} = props;
const classes = cx(
styles.formGroup,
className,
!ignoreValidation && isInvalid2 && styles.isInvalid
);
return /* @__PURE__ */ jsx("fieldset", { className: classes, "data-test-id": testId, ...rest, children });
const classes = cx(styles.formGroup, className, !ignoreValidation && isInvalid2 && styles.isInvalid);
return /* @__PURE__ */ jsx("fieldset", {
className: classes,
"data-test-id": testId,
...rest,
children
});
};

@@ -304,3 +304,8 @@ const FormHint = ({

const classes = cx(styles.hint, className);
return /* @__PURE__ */ jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
return /* @__PURE__ */ jsx("div", {
...rest,
"data-test-id": testId,
className: classes,
children
});
};

@@ -324,22 +329,21 @@ const FormField = ({

};
return /* @__PURE__ */ jsxs(
FormGroup,
{
className: cx(styles.field, className),
return /* @__PURE__ */ jsxs(FormGroup, {
className: cx(styles.field, className),
name,
ignoreValidation,
isInvalid: isInvalid2,
onBlur: handleBlur,
"data-test-id": testId,
children: [label2 && /* @__PURE__ */ jsxs("label", {
htmlFor,
children: [label2, isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
}), hint2 && /* @__PURE__ */ jsx(FormHint, {
className: styles.hint,
children: hint2
}), children, /* @__PURE__ */ jsx(FieldError, {
className: styles.fieldErrorMessage,
name,
ignoreValidation,
isInvalid: isInvalid2,
onBlur: handleBlur,
"data-test-id": testId,
children: [
label2 && /* @__PURE__ */ jsxs("label", { htmlFor, children: [
label2,
isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, {})
] }),
hint2 && /* @__PURE__ */ jsx(FormHint, { className: styles.hint, children: hint2 }),
children,
/* @__PURE__ */ jsx(FieldError, { className: styles.fieldErrorMessage, name, errorMessage })
]
}
);
errorMessage
})]
});
};

@@ -355,6 +359,11 @@ const IconField = ({

const classes = cx(styles.iconField, className);
return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, ...rest, children: [
children,
/* @__PURE__ */ jsx(Icon, { size: "small", className: styles.iconFieldIcon })
] });
return /* @__PURE__ */ jsxs("div", {
className: classes,
"data-test-id": testId,
...rest,
children: [children, /* @__PURE__ */ jsx(Icon, {
size: "small",
className: styles.iconFieldIcon
})]
});
};

@@ -376,23 +385,25 @@ const Radio = ({

if (!children && !hasAriaLabel) {
console.warn(
"If you do not provide children, you must specify an aria-label for accessibility"
);
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"input",
{
...rest,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
className: cx(styles.radio, className),
checked,
disabled,
id,
"data-test-id": testId,
type: "radio"
}
),
/* @__PURE__ */ jsx(Label, { className: labelClassName, htmlFor: id, style: labelStyle, children: disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children })
] });
return /* @__PURE__ */ jsxs(Fragment, {
children: [/* @__PURE__ */ jsx("input", {
...rest,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
className: cx(styles.radio, className),
checked,
disabled,
id,
"data-test-id": testId,
type: "radio"
}), /* @__PURE__ */ jsx(Label, {
className: labelClassName,
htmlFor: id,
style: labelStyle,
children: disabled ? /* @__PURE__ */ jsx("span", {
className: styles.labelDisabled,
children
}) : children
})]
});
};

@@ -450,6 +461,14 @@ const RadioGroup = (props) => {

const radios = Children.map(children, (child) => updateRadioElems(child));
return /* @__PURE__ */ jsxs("fieldset", { "data-test-id": testId, ref: fieldsetRef, children: [
legend && /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: legend }) }),
/* @__PURE__ */ jsx("div", { ...rest, children: radios })
] });
return /* @__PURE__ */ jsxs("fieldset", {
"data-test-id": testId,
ref: fieldsetRef,
children: [legend && /* @__PURE__ */ jsx("legend", {
children: /* @__PURE__ */ jsx(VisuallyHidden, {
children: legend
})
}), /* @__PURE__ */ jsx("div", {
...rest,
children: radios
})]
});
};

@@ -463,27 +482,31 @@ const Select = ({

const classes = cx(styles.formInput, className);
return /* @__PURE__ */ jsx("select", { ...rest, "data-test-id": testId, className: classes, children });
return /* @__PURE__ */ jsx("select", {
...rest,
"data-test-id": testId,
className: classes,
children
});
};
const TextArea = forwardRef(
({ className, "data-test-id": testId = "text-area", ...props }, ref) => {
const onKeyDown = (e) => {
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
e.stopPropagation();
}
if (e.key === "Escape") {
e.nativeEvent.stopImmediatePropagation();
}
};
return /* @__PURE__ */ jsx(
"textarea",
{
...props,
className: cx(styles.formInput, className),
ref,
"data-test-id": testId,
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
onKeyDown
}
);
}
);
const TextArea = forwardRef(({
className,
"data-test-id": testId = "text-area",
...props
}, ref) => {
const onKeyDown = (e) => {
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
e.stopPropagation();
}
if (e.key === "Escape") {
e.nativeEvent.stopImmediatePropagation();
}
};
return /* @__PURE__ */ jsx("textarea", {
...props,
className: cx(styles.formInput, className),
ref,
"data-test-id": testId,
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
onKeyDown
});
});
TextArea.displayName = "TextArea";

@@ -490,0 +513,0 @@ export {

485

dist/index.js
require('./style.css');
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const react = require("react");
const classix = require("classix");
const jsxRuntime = require("react/jsx-runtime");
const visuallyHidden = require("@react-aria/visually-hidden");

@@ -72,3 +72,8 @@ const formGroup = "_formGroup_1qrlg_1";

const classes = classix.cx(styles.requiredAsterisk, className);
return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
return /* @__PURE__ */ jsxRuntime.jsx("span", {
...rest,
"data-test-id": testId,
className: classes,
children: "*"
});
};

@@ -85,145 +90,137 @@ const Label = ({

const classes = classix.cx(styles.label, className, disabled && styles.labelDisabled);
return /* @__PURE__ */ jsxRuntime.jsxs("label", { ...rest, "data-test-id": testId, className: classes, children: [
children,
optional && !required && /* @__PURE__ */ jsxRuntime.jsx("small", { className: styles.labelOptional, children: "(optional)" }),
required && !optional && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})
] });
return /* @__PURE__ */ jsxRuntime.jsxs("label", {
...rest,
"data-test-id": testId,
className: classes,
children: [children, optional && !required && /* @__PURE__ */ jsxRuntime.jsx("small", {
className: styles.labelOptional,
children: "(optional)"
}), required && !optional && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})]
});
};
const Checkbox = react.forwardRef(
({
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
children,
disabled,
checked,
labelClassName,
"data-test-id": testId = "checkbox",
...rest
}, ref) => {
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
if (!children && !hasAriaLabel) {
console.warn(
"If you do not provide children, you must specify an aria-label for accessibility"
);
}
return /* @__PURE__ */ jsxRuntime.jsxs(Label, { className: labelClassName, children: [
/* @__PURE__ */ jsxRuntime.jsx(
"input",
{
...rest,
ref,
checked,
"aria-checked": checked ? "true" : "false",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
className: styles.checkbox,
disabled,
type: "checkbox",
"data-test-id": testId
}
),
" ",
disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.labelDisabled, children }) : children
] });
const Checkbox = react.forwardRef(({
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
children,
disabled,
checked,
labelClassName,
"data-test-id": testId = "checkbox",
...rest
}, ref) => {
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
if (!children && !hasAriaLabel) {
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
}
);
return /* @__PURE__ */ jsxRuntime.jsxs(Label, {
className: labelClassName,
children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
...rest,
ref,
checked,
"aria-checked": checked ? "true" : "false",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
className: styles.checkbox,
disabled,
type: "checkbox",
"data-test-id": testId
}), " ", disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", {
className: styles.labelDisabled,
children
}) : children]
});
});
Checkbox.displayName = "Checkbox";
const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
const TextField = react.forwardRef(
({
className,
type = "text",
tiny = false,
readOnly,
tabIndex = 0,
suffix: suffix2,
overrideWidth,
"data-test-id": testId = "text-field",
...rest
}, ref) => {
const classes = overrideWidth ? className : classix.cx(styles.formInput, tiny && styles.formInputTiny, className);
if (suffix2) {
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.suffixContainer, children: [
/* @__PURE__ */ jsxRuntime.jsx(
"input",
{
...rest,
type,
"data-test-id": testId,
className: classes,
readOnly,
ref,
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
}
),
/* @__PURE__ */ jsxRuntime.jsx("label", { className: styles.suffix, htmlFor: rest.id, children: suffix2 })
] });
}
return /* @__PURE__ */ jsxRuntime.jsx(
"input",
{
const TextField = react.forwardRef(({
className,
type = "text",
tiny = false,
readOnly,
tabIndex = 0,
suffix: suffix2,
overrideWidth,
"data-test-id": testId = "text-field",
...rest
}, ref) => {
const classes = overrideWidth ? className : classix.cx(styles.formInput, tiny && styles.formInputTiny, className);
if (suffix2) {
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
className: styles.suffixContainer,
children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
...rest,
type,
"data-test-id": testId,
className: classes,
readOnly,
tabIndex,
ref,
"data-test-id": testId,
style: overrideWidth ? {
width: overrideWidth
} : void 0,
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
}
);
}), /* @__PURE__ */ jsxRuntime.jsx("label", {
className: styles.suffix,
htmlFor: rest.id,
children: suffix2
})]
});
}
);
return /* @__PURE__ */ jsxRuntime.jsx("input", {
...rest,
type,
className: classes,
readOnly,
tabIndex,
ref,
"data-test-id": testId,
style: overrideWidth ? {
width: overrideWidth
} : void 0,
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
});
});
TextField.displayName = "TextField";
const CompactTextField = react.forwardRef(
({
className,
id,
label: label2,
needsErrorFeedback,
value,
onFocus,
onBlur,
"data-test-id": testId = "compact-text-field",
...rest
}, ref) => {
const [isActive2, setIsActive] = react.useState(
(typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
);
const isActiveState = isActive2 || needsErrorFeedback;
const classes = classix.cx(styles.compactTextField, className, isActiveState && styles.isActive);
const placeholder = isActiveState ? "" : label2;
const handleFocus = (event) => {
setIsActive(true);
if (onFocus) {
onFocus(event);
}
};
const handleBlur = (event) => {
const value2 = event.target.value || "";
setIsActive(value2.trim().length !== 0);
if (onBlur) {
onBlur(event);
}
};
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, "data-test-id": testId, children: [
/* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: id, children: label2 }),
/* @__PURE__ */ jsxRuntime.jsx(
TextField,
{
...rest,
id,
placeholder,
value,
ref,
onFocus: handleFocus,
onBlur: handleBlur
}
)
] });
}
);
const CompactTextField = react.forwardRef(({
className,
id,
label: label2,
needsErrorFeedback,
value,
onFocus,
onBlur,
"data-test-id": testId = "compact-text-field",
...rest
}, ref) => {
const [isActive2, setIsActive] = react.useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
const isActiveState = isActive2 || needsErrorFeedback;
const classes = classix.cx(styles.compactTextField, className, isActiveState && styles.isActive);
const placeholder = isActiveState ? "" : label2;
const handleFocus = (event) => {
setIsActive(true);
if (onFocus) {
onFocus(event);
}
};
const handleBlur = (event) => {
const value2 = event.target.value || "";
setIsActive(value2.trim().length !== 0);
if (onBlur) {
onBlur(event);
}
};
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
className: classes,
"data-test-id": testId,
children: [/* @__PURE__ */ jsxRuntime.jsx(Label, {
htmlFor: id,
children: label2
}), /* @__PURE__ */ jsxRuntime.jsx(TextField, {
...rest,
id,
placeholder,
value,
ref,
onFocus: handleFocus,
onBlur: handleBlur
})]
});
});
CompactTextField.displayName = "CompactTextField";

@@ -240,13 +237,10 @@ const FieldError = ({

}
return /* @__PURE__ */ jsxRuntime.jsx(
"span",
{
...rest,
className: classix.cx(styles.fieldError, className),
"aria-live": "polite",
"data-test-id": testId,
id: createFieldErrorId(name),
children: `Error - ${errorMessage}`
}
);
return /* @__PURE__ */ jsxRuntime.jsx("span", {
...rest,
className: classix.cx(styles.fieldError, className),
"aria-live": "polite",
"data-test-id": testId,
id: createFieldErrorId(name),
children: `Error - ${errorMessage}`
});
};

@@ -260,3 +254,8 @@ const FieldSet = ({

const classes = classix.cx(styles.fieldSet, className);
return /* @__PURE__ */ jsxRuntime.jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
return /* @__PURE__ */ jsxRuntime.jsx("fieldset", {
"data-test-id": testId,
className: classes,
...rest,
children
});
};

@@ -272,9 +271,9 @@ const Form = (props) => {

} = props;
const classes = classix.cx(
styles.form,
className,
inline && styles.formInline,
!!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin
);
return /* @__PURE__ */ jsxRuntime.jsx("form", { ...rest, "data-test-id": testId, className: classes, children });
const classes = classix.cx(styles.form, className, inline && styles.formInline, !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin);
return /* @__PURE__ */ jsxRuntime.jsx("form", {
...rest,
"data-test-id": testId,
className: classes,
children
});
};

@@ -291,8 +290,9 @@ const FormGroup = (props) => {

} = props;
const classes = classix.cx(
styles.formGroup,
className,
!ignoreValidation && isInvalid2 && styles.isInvalid
);
return /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className: classes, "data-test-id": testId, ...rest, children });
const classes = classix.cx(styles.formGroup, className, !ignoreValidation && isInvalid2 && styles.isInvalid);
return /* @__PURE__ */ jsxRuntime.jsx("fieldset", {
className: classes,
"data-test-id": testId,
...rest,
children
});
};

@@ -306,3 +306,8 @@ const FormHint = ({

const classes = classix.cx(styles.hint, className);
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
return /* @__PURE__ */ jsxRuntime.jsx("div", {
...rest,
"data-test-id": testId,
className: classes,
children
});
};

@@ -326,22 +331,21 @@ const FormField = ({

};
return /* @__PURE__ */ jsxRuntime.jsxs(
FormGroup,
{
className: classix.cx(styles.field, className),
return /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, {
className: classix.cx(styles.field, className),
name,
ignoreValidation,
isInvalid: isInvalid2,
onBlur: handleBlur,
"data-test-id": testId,
children: [label2 && /* @__PURE__ */ jsxRuntime.jsxs("label", {
htmlFor,
children: [label2, isRequired && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})]
}), hint2 && /* @__PURE__ */ jsxRuntime.jsx(FormHint, {
className: styles.hint,
children: hint2
}), children, /* @__PURE__ */ jsxRuntime.jsx(FieldError, {
className: styles.fieldErrorMessage,
name,
ignoreValidation,
isInvalid: isInvalid2,
onBlur: handleBlur,
"data-test-id": testId,
children: [
label2 && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor, children: [
label2,
isRequired && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})
] }),
hint2 && /* @__PURE__ */ jsxRuntime.jsx(FormHint, { className: styles.hint, children: hint2 }),
children,
/* @__PURE__ */ jsxRuntime.jsx(FieldError, { className: styles.fieldErrorMessage, name, errorMessage })
]
}
);
errorMessage
})]
});
};

@@ -357,6 +361,11 @@ const IconField = ({

const classes = classix.cx(styles.iconField, className);
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, "data-test-id": testId, ...rest, children: [
children,
/* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "small", className: styles.iconFieldIcon })
] });
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
className: classes,
"data-test-id": testId,
...rest,
children: [children, /* @__PURE__ */ jsxRuntime.jsx(Icon, {
size: "small",
className: styles.iconFieldIcon
})]
});
};

@@ -378,23 +387,25 @@ const Radio = ({

if (!children && !hasAriaLabel) {
console.warn(
"If you do not provide children, you must specify an aria-label for accessibility"
);
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
}
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
"input",
{
...rest,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
className: classix.cx(styles.radio, className),
checked,
disabled,
id,
"data-test-id": testId,
type: "radio"
}
),
/* @__PURE__ */ jsxRuntime.jsx(Label, { className: labelClassName, htmlFor: id, style: labelStyle, children: disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.labelDisabled, children }) : children })
] });
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
...rest,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
className: classix.cx(styles.radio, className),
checked,
disabled,
id,
"data-test-id": testId,
type: "radio"
}), /* @__PURE__ */ jsxRuntime.jsx(Label, {
className: labelClassName,
htmlFor: id,
style: labelStyle,
children: disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", {
className: styles.labelDisabled,
children
}) : children
})]
});
};

@@ -452,6 +463,14 @@ const RadioGroup = (props) => {

const radios = react.Children.map(children, (child) => updateRadioElems(child));
return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { "data-test-id": testId, ref: fieldsetRef, children: [
legend && /* @__PURE__ */ jsxRuntime.jsx("legend", { children: /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, { children: legend }) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, children: radios })
] });
return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", {
"data-test-id": testId,
ref: fieldsetRef,
children: [legend && /* @__PURE__ */ jsxRuntime.jsx("legend", {
children: /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, {
children: legend
})
}), /* @__PURE__ */ jsxRuntime.jsx("div", {
...rest,
children: radios
})]
});
};

@@ -465,27 +484,31 @@ const Select = ({

const classes = classix.cx(styles.formInput, className);
return /* @__PURE__ */ jsxRuntime.jsx("select", { ...rest, "data-test-id": testId, className: classes, children });
return /* @__PURE__ */ jsxRuntime.jsx("select", {
...rest,
"data-test-id": testId,
className: classes,
children
});
};
const TextArea = react.forwardRef(
({ className, "data-test-id": testId = "text-area", ...props }, ref) => {
const onKeyDown = (e) => {
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
e.stopPropagation();
}
if (e.key === "Escape") {
e.nativeEvent.stopImmediatePropagation();
}
};
return /* @__PURE__ */ jsxRuntime.jsx(
"textarea",
{
...props,
className: classix.cx(styles.formInput, className),
ref,
"data-test-id": testId,
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
onKeyDown
}
);
}
);
const TextArea = react.forwardRef(({
className,
"data-test-id": testId = "text-area",
...props
}, ref) => {
const onKeyDown = (e) => {
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
e.stopPropagation();
}
if (e.key === "Escape") {
e.nativeEvent.stopImmediatePropagation();
}
};
return /* @__PURE__ */ jsxRuntime.jsx("textarea", {
...props,
className: classix.cx(styles.formInput, className),
ref,
"data-test-id": testId,
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
onKeyDown
});
});
TextArea.displayName = "TextArea";

@@ -492,0 +515,0 @@ exports.Checkbox = Checkbox;

16

package.json
{
"name": "@launchpad-ui/form",
"version": "0.6.28",
"version": "0.6.29",
"status": "beta",

@@ -29,14 +29,14 @@ "publishConfig": {

"dependencies": {
"@react-aria/visually-hidden": "^3.6.0",
"classix": "^2.1.13",
"@launchpad-ui/icons": "~0.6.13",
"@react-aria/visually-hidden": "3.6.0",
"classix": "2.1.17",
"@launchpad-ui/icons": "~0.6.14",
"@launchpad-ui/tokens": "~0.4.7"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react": "18.2.0",
"react-dom": "18.2.0"
},

@@ -43,0 +43,0 @@ "scripts": {

dist/index.es.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc