@indico-data/design-system 2.34.3 → 2.34.4

package/lib/index.d.ts

@@ -940,8 +940,10 @@ interface LabelProps {
 interface BaseInputProps {
     value?: string | undefined;
     placeholder?: string;
-    onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
+    onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React$1.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;
     errorMessage?: string | undefined;
     helpText?: string;
     iconName?: IconName$1;
@@ -1015,6 +1017,8 @@ interface PasswordInputProps extends LabelProps {
     value?: string | undefined;
     placeholder?: string;
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React$1.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;

package/lib/index.esm.js

@@ -20964,7 +20964,7 @@ const DisplayFormError = ({ message }) => {
 };
 
 const Input = React__default.forwardRef((_a, ref) => {
-    var { name, placeholder, onChange, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, className } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "className"]);
+    var { name, placeholder, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, onChange, onBlur, onKeyDown, className } = _a, rest = __rest$1(_a, ["name", "placeholder", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "onChange", "onBlur", "onKeyDown", "className"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const handleClear = () => {
         onChange({ target: { value: '' } });
@@ -20973,7 +20973,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, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, 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, "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 }))] }));
 });
 const LabeledInput = withLabel(Input);
 
@@ -21001,7 +21001,7 @@ const Textarea = React__default.forwardRef((_a, ref) => {
 const LabeledTextarea = withLabel(Textarea);
 
 const PasswordInput = React__default.forwardRef((_a, ref) => {
-    var { name, placeholder, onChange, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
+    var { name, placeholder, onChange, onBlur, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "onBlur", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const [showPassword, setShowPassword] = useState(false);
     const handleShowPassword = () => {
@@ -21010,7 +21010,7 @@ const PasswordInput = React__default.forwardRef((_a, ref) => {
     const inputClasses = classNames('password-input', {
         error: hasErrors,
     }, 'password-input--has-icon');
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-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: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledPasswordInput = withLabel(PasswordInput);