frontend/src/components/ParticipantPicker/ParticipantPicker.tsx

@@ -1,12 +1,19 @@
-import Combobox, { type ComboboxOption, type ComboboxSize } from '../Combobox/Combobox';
-import ListCard from '../ListCard/ListCard';
+import type { HTMLAttributes } from "react";
+import clsx from "clsx";
+import Combobox, {
+  type ComboboxOption,
+  type ComboboxSize,
+} from "../Combobox/Combobox";
+import ListCard from "../ListCard/ListCard";
 
-export interface ParticipantPickerProps {
+export interface ParticipantPickerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   options: ComboboxOption[];
   value: string[];
   onChange: (value: string[]) => void;
   placeholder?: string;
-    label?: string;
+  label: string;
+  hideLabel?: boolean;
   noResultsText?: string;
   size?: ComboboxSize;
   fullWidth?: boolean;
@@ -16,22 +23,26 @@ export interface ParticipantPickerProps {
 }
 
 const widthClasses: Record<ComboboxSize, string> = {
-    sm: 'w-(--text-input-default-width-md)',
-    md: 'w-(--text-input-default-width-md)',
-    lg: 'w-(--text-input-default-width-lg)',
+  sm: "w-(--text-input-default-width-md)",
+  md: "w-(--text-input-default-width-md)",
+  lg: "w-(--text-input-default-width-lg)",
 };
 
 export default function ParticipantPicker({
   options,
   value,
   onChange,
-    placeholder = 'Sök...',
+  placeholder = "Sök...",
   label,
-    noResultsText = 'Inga resultat',
-    size = 'md',
+  hideLabel = false,
+  noResultsText = "Inga resultat",
+  size = "md",
   fullWidth = false,
   customWidth,
   onSearchChange,
+  className,
+  style,
+  ...props
 }: ParticipantPickerProps) {
   const handleRemove = (valueToRemove: string) => {
     onChange(value.filter((v) => v !== valueToRemove));
@@ -39,21 +50,23 @@ export default function ParticipantPicker({
 
   const selectedOptions = options.filter((opt) => value.includes(opt.value));
 
-    const containerClasses = fullWidth
-        ? 'flex flex-col gap-(--spacing-sm) w-full'
-        : customWidth
-          ? 'flex flex-col gap-(--spacing-sm)'
-          : `flex flex-col gap-(--spacing-sm) ${widthClasses[size]}`;
-    const widthStyle = customWidth ? { width: customWidth } : undefined;
+  const containerClasses = clsx(
+    "flex flex-col gap-(--spacing-sm)",
+    fullWidth && "w-full",
+    !fullWidth && !customWidth && widthClasses[size],
+    className,
+  );
+  const widthStyle = customWidth ? { width: customWidth, ...style } : style;
 
   return (
-        <div className={containerClasses} style={widthStyle}>
+    <div className={containerClasses} style={widthStyle} {...props}>
       <Combobox
         options={options}
         value={value}
         onChange={(v) => onChange(v as string[])}
         placeholder={placeholder}
         label={label}
+        hideLabel={hideLabel}
         noResultsText={noResultsText}
         size={size}
         fullWidth