@indico-data/design-system 2.34.3 → 2.34.4

package/lib/src/components/forms/input/Input.d.ts

@@ -4,8 +4,10 @@ import { LabelProps } from '../subcomponents/Label';
 export interface BaseInputProps {
     value?: string | undefined;
     placeholder?: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     errorMessage?: string | undefined;
     helpText?: string;
     iconName?: IconName;

package/lib/src/components/forms/passwordInput/PasswordInput.d.ts

@@ -5,6 +5,8 @@ export interface PasswordInputProps extends LabelProps {
     value?: string | undefined;
     placeholder?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.34.3",
+  "version": "2.34.4",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/forms/input/Input.tsx

@@ -9,8 +9,10 @@ import { DisplayFormError } from '../subcomponents/DisplayFormError';
 export interface BaseInputProps {
   value?: string | undefined;
   placeholder?: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   isDisabled?: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   errorMessage?: string | undefined;
   helpText?: string;
   iconName?: IconName;
@@ -26,13 +28,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     {
       name,
       placeholder,
-      onChange,
       isRequired,
       isDisabled,
       isClearable,
       errorMessage,
       helpText,
       iconName,
+      onChange,
+      onBlur,
+      onKeyDown,
       className,
       ...rest
     },
@@ -66,6 +70,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             disabled={isDisabled}
             placeholder={placeholder}
             onChange={onChange}
+            onBlur={onBlur}
+            onKeyDown={onKeyDown}
             className={inputClasses}
             aria-invalid={hasErrors ? true : undefined}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}

package/src/components/forms/numberInput/NumberInput.tsx

@@ -18,6 +18,8 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
     {
       name,
       onChange,
+      onBlur,
+      onKeyDown,
       isRequired,
       isDisabled,
       isClearable,
@@ -58,6 +60,8 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
             type="number"
             disabled={isDisabled}
             onChange={onChange}
+            onBlur={onBlur}
+            onKeyDown={onKeyDown}
             className={inputClasses}
             aria-invalid={hasErrors ? true : undefined}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}

package/src/components/forms/passwordInput/PasswordInput.tsx

@@ -9,6 +9,8 @@ export interface PasswordInputProps extends LabelProps {
   value?: string | undefined;
   placeholder?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
@@ -22,6 +24,8 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
       name,
       placeholder,
       onChange,
+      onBlur,
+      onKeyDown,
       isRequired,
       isDisabled,
       errorMessage,
@@ -59,6 +63,8 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
             disabled={isDisabled}
             placeholder={placeholder}
             onChange={onChange}
+            onBlur={onBlur}
+            onKeyDown={onKeyDown}
             className={inputClasses}
             aria-invalid={hasErrors ? 'true' : 'false'}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}

package/src/storybook/formArgTypes.ts

@@ -61,6 +61,30 @@ const baseInputArgTypes: ArgTypes = {
     type: { name: 'function', required: true },
     action: 'onChange',
   },
+  onBlur: {
+    control: false,
+    description: 'onBlur event handler',
+    table: {
+      category: 'Callbacks',
+      type: {
+        summary: '(e: React.FocusEvent<HTMLInputElement>) => void',
+      },
+    },
+    type: { name: 'function', required: false },
+    action: 'onBlur',
+  },
+  onKeyDown: {
+    control: false,
+    description: 'onKeyDown event handler',
+    table: {
+      category: 'Callbacks',
+      type: {
+        summary: '(e: React.KeyboardEvent<HTMLInputElement>) => void',
+      },
+    },
+    type: { name: 'function', required: false },
+    action: 'onKeyDown',
+  },
   placeholder: {
     control: 'text',
     description: 'The placeholder for the form component',