@indico-data/design-system 3.10.0 → 3.12.0

package/package.json

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

package/src/components/button/Button.mdx

@@ -14,6 +14,10 @@ The Button component is one of the most versitile components we can use in our D
 
 <Controls of={ButtonStories.Default} />
 
+## Event Handlers
+
+Use the event props to respond to interactions, including `onBlur` for focus loss, `onClick` for activation, `onMouseEnter`/`onMouseExit` for hover changes, and `onKeyDown` for keyboard support.
+
 ## Sizes
 
 The Sizes available are small (`xs`), medium (`sm`), large (`md`), and extra large (`lg`). The default size is medium.

package/src/components/button/Button.stories.tsx

@@ -132,6 +132,10 @@ const meta: Meta = {
     },
 
     // Event Handlers
+    onBlur: {
+      table: { category: 'Event Handlers' },
+      action: 'blurred',
+    },
     onClick: {
       table: { category: 'Event Handlers' },
       action: 'clicked',

package/src/components/button/Button.tsx

@@ -20,6 +20,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     onMouseEnter,
     onMouseExit,
     onKeyDown,
+    onBlur,
     className,
     href,
     ...rest
@@ -57,6 +58,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseExit}
       onKeyDown={onKeyDown}
+      onBlur={onBlur}
       {...rest}
     >
       {/* Loading Icon on the left (default) */}

package/src/components/button/types.ts

@@ -27,6 +27,10 @@ export interface ButtonProps {
    * The function to call when the mouse exits the button
    */
   onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * The function to call when the button loses focus
+   */
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   /**
    * The function to call when the button is clicked
    */

package/src/components/forms/select/Select.tsx

@@ -34,30 +34,38 @@ const OptionComponent = <OptionType extends SelectOption>({
   );
 };
 
-const Select = <OptionType extends SelectOption>({
-  classNamePrefix = 'select',
-  className,
-  components: customComponents,
-  label,
-  hasHiddenLabel,
-  name,
-  ...props
-}: SelectProps<OptionType>) => {
-  const defaultComponents = {
-    Option: OptionComponent as React.ComponentType<OptionProps<OptionType>>,
-  };
+const Select = React.forwardRef(
+  <OptionType extends SelectOption>(
+    {
+      classNamePrefix = 'select',
+      className,
+      components: customComponents,
+      label,
+      hasHiddenLabel,
+      name,
+      ...props
+    }: SelectProps<OptionType>,
+    ref: React.Ref<any>,
+  ) => {
+    const defaultComponents = {
+      Option: OptionComponent as React.ComponentType<OptionProps<OptionType>>,
+    };
 
-  const mergedComponents = { ...defaultComponents, ...customComponents };
+    const mergedComponents = { ...defaultComponents, ...customComponents };
 
-  return (
-    <ReactSelect
-      classNamePrefix={classNamePrefix}
-      className={classNames('select-wrapper', className)}
-      components={mergedComponents}
-      {...props}
-    />
-  );
-};
+    return (
+      <ReactSelect
+        ref={ref}
+        classNamePrefix={classNamePrefix}
+        className={classNames('select-wrapper', className)}
+        components={mergedComponents}
+        {...props}
+      />
+    );
+  },
+) as <OptionType extends SelectOption>(
+  props: SelectProps<OptionType> & { ref?: React.Ref<any> },
+) => React.ReactElement;
 
 const LabeledSelect = withLabel(Select);
 

package/src/components/forms/select/types.ts

@@ -1,6 +1,8 @@
+import { ReactNode } from 'react';
+
 export type SelectOption = {
   label: string;
   value: string;
-  detail?: string;
+  detail?: ReactNode;
   [key: string]: any; // Allow for additional properties
 };