@indico-data/design-system 2.38.0 → 2.39.0

package/lib/index.d.ts

@@ -909,6 +909,7 @@ interface BaseInputProps {
     value?: string | undefined;
     placeholder?: string;
     isDisabled?: boolean;
+    readonly?: boolean;
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (e: React$1.FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;

package/lib/index.esm.js

@@ -20970,7 +20970,7 @@ const DisplayFormError = ({ message }) => {
 };
 
 const Input = React__default.forwardRef((_a, ref) => {
-    var { id, name, placeholder, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, onChange, onBlur, onKeyDown, className } = _a, rest = __rest(_a, ["id", "name", "placeholder", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "onChange", "onBlur", "onKeyDown", "className"]);
+    var { id, name, placeholder, isRequired, isDisabled, readonly, isClearable, errorMessage, helpText, iconName, onChange, onBlur, onKeyDown, className } = _a, rest = __rest(_a, ["id", "name", "placeholder", "isRequired", "isDisabled", "readonly", "isClearable", "errorMessage", "helpText", "iconName", "onChange", "onBlur", "onKeyDown", "className"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const handleClear = () => {
         onChange({ target: { value: '' } });
@@ -20979,7 +20979,7 @@ const Input = React__default.forwardRef((_a, ref) => {
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, id: id, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, id: id, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, readOnly: readonly, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledInput = withLabel(Input);