@indico-data/design-system 2.34.3 → 2.35.0

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/lib/src/components/icons/indicons.d.ts

@@ -67,6 +67,7 @@ declare const indicons: {
     form: import("react/jsx-runtime").JSX.Element;
     gallery: import("react/jsx-runtime").JSX.Element;
     'find-documents': import("react/jsx-runtime").JSX.Element;
+    'gen-ai': import("react/jsx-runtime").JSX.Element;
     graphiql: import("react/jsx-runtime").JSX.Element;
     'grid-view': import("react/jsx-runtime").JSX.Element;
     happy: import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.34.3",
+  "version": "2.35.0",
   "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/components/icons/indicons.tsx

@@ -386,6 +386,11 @@ const indicons = {
       />
     </svg>
   ),
+  'gen-ai': (
+    <svg viewBox="0 0 20 23" fill="currentColor">
+      <path d="M9.304 4.9c.124 0 .186-.07.218-.18.32-1.685.3-1.725 2.103-2.058.124-.02.197-.09.197-.212 0-.12-.073-.191-.197-.211-1.793-.353-1.74-.394-2.103-2.057C9.49.07 9.428 0 9.304 0s-.187.07-.218.182c-.362 1.663-.3 1.704-2.103 2.057-.114.02-.197.09-.197.211s.083.192.197.212c1.803.353 1.782.373 2.103 2.057.031.111.094.182.218.182M4.29 11.839c.196 0 .331-.121.352-.303.373-2.692.466-2.692 3.325-3.226.187-.03.322-.151.322-.343 0-.182-.135-.313-.322-.343-2.859-.383-2.963-.474-3.325-3.216a.34.34 0 0 0-.352-.313c-.187 0-.322.131-.342.323C3.606 7.119 3.46 7.109.622 7.623c-.187.04-.321.161-.321.343 0 .202.134.312.362.343 2.818.443 2.943.514 3.285 3.206.02.202.155.323.342.323M11.314 23c.27 0 .466-.192.518-.464.735-5.525 1.533-6.362 7.148-6.967.29-.03.487-.242.487-.504 0-.263-.196-.464-.486-.505-5.616-.605-6.414-1.442-7.15-6.967-.05-.272-.248-.454-.517-.454-.27 0-.466.182-.508.454-.735 5.525-1.543 6.362-7.148 6.967-.3.04-.498.242-.498.505 0 .262.197.474.498.504 5.594.716 6.371 1.452 7.148 6.967.042.272.239.464.508.464" />
+    </svg>
+  ),
   graphiql: (
     <svg viewBox="0 0 102 102" fill="currentColor">
       <path d="M90,62.8c-0.8-0.4-1.5-0.7-2.3-0.9V38.1c0.8-0.2,1.6-0.5,2.4-0.9c4.3-2.5,5.7-7.9,3.3-12.2c-2.5-4.3-7.9-5.7-12.2-3.3  c-0.8,0.4-1.4,1-2,1.6L58.5,11.5c0.2-0.8,0.4-1.7,0.4-2.5C58.9,4,54.9,0,50,0s-8.9,4-8.9,8.9c0,0.9,0.1,1.7,0.4,2.5L20.9,23.3  c-0.6-0.6-1.2-1.1-2-1.6c-4.3-2.5-9.7-1-12.2,3.3c-2.5,4.3-1,9.7,3.3,12.2c0.8,0.4,1.6,0.7,2.4,0.9v23.8c-0.8,0.2-1.6,0.5-2.3,0.9  C5.7,65.3,4.3,70.7,6.7,75s7.9,5.7,12.2,3.3c0.8-0.4,1.4-1,2-1.6l20.6,11.9c-0.2,0.8-0.4,1.6-0.4,2.5c0,4.9,4,8.9,8.9,8.9  s8.9-4,8.9-8.9c0-1-0.2-1.9-0.5-2.8l20.4-11.8c0.6,0.7,1.4,1.3,2.2,1.8c4.3,2.5,9.7,1,12.2-3.3C95.8,70.7,94.3,65.3,90,62.8z   M23.1,68.4c-0.2-0.8-0.5-1.6-0.9-2.3c-0.4-0.8-1-1.4-1.6-2l26.9-46.6c0.8,0.2,1.6,0.4,2.5,0.4c0.9,0,1.7-0.1,2.5-0.4l26.9,46.6  c-0.6,0.6-1.1,1.2-1.6,2c-0.4,0.8-0.7,1.5-0.9,2.3H23.1z M77,27c-0.6,2.2-0.4,4.7,0.8,6.9c1.3,2.2,3.3,3.6,5.6,4.2v23.8  c-0.1,0-0.2,0.1-0.3,0.1L56.2,15.4c0.1-0.1,0.2-0.2,0.2-0.2L77,27z M43.6,15.1c0.1,0.1,0.2,0.2,0.3,0.3L16.9,62  c-0.1,0-0.2-0.1-0.3-0.1V38.1c2.3-0.6,4.3-2,5.6-4.2c1.3-2.2,1.5-4.7,0.8-6.9L43.6,15.1z M56.6,85.1c-1.6-1.8-4-2.9-6.6-2.9  c-2.5,0-4.8,1-6.4,2.7L23,73c0-0.1,0.1-0.2,0.1-0.3h53.8c0,0.2,0.1,0.4,0.2,0.6L56.6,85.1z" />

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',