@indico-data/design-system 3.10.0 → 3.11.0

package/package.json

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

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
 };