(PC-33528)[PRO] feat: add jsdoc for multiselect component

pro/src/ui-kit/MultiSelect/MultiSelect.tsx

@@ -9,30 +9,86 @@ import styles from './MultiSelect.module.scss'
 import { MultiSelectPanel } from './MultiSelectPanel'
 import { MultiSelectTrigger } from './MultiSelectTrigger'
 
+/**
+ * Represents an option in the MultiSelect component.
+ */
 export type Option = {
+  /** Unique identifier for the option */
   id: string
+  /** Display label for the option */
   label: string
 }
 
+/**
+ * Props for the MultiSelect component.
+ */
 type MultiSelectProps = {
+  /** Array of available options */
   options: Option[]
+  /** Array of initially selected options */
   defaultOptions?: Option[]
+  /** Label for the MultiSelect field */
   label: string
+  /** Whether to include a "Select All" option */
   hasSelectAllOptions?: boolean
+  /** Whether the MultiSelect is disabled */
   disabled?: boolean
+  /** Callback function called when selected options change */
   onSelectedOptionsChanged: (options: Option[]) => void
+  /** Error message to display */
   error?: string
+  /** Name attribute for the form field */
   name: string
+  /** Label for the dropdown button */
   buttonLabel: string
-} & ( // If `hasSearch` is `true`, `searchLabel` are required. // This part applies the condition
-  | { hasSearch: true; searchLabel: string }
-  // If `hasSearch` is `false` or undefined, `searchLabel` are optional.
+} & (
+  | {
+      /**
+       * Whether to include a search bar above options
+       * If `hasSearch` is `true`, `searchLabel` are required. This part applies the condition
+       */
+      hasSearch: true
+      searchLabel: string
+    }
+  /* If `hasSearch` is `false` or undefined, `searchLabel` should not be provided. */
   | {
       hasSearch?: false | undefined
       searchLabel?: never
     }
 )
 
+/**
+ * MultiSelect component for selecting multiple options from a dropdown list.
+ *
+ * This component provides a customizable dropdown for selecting multiple options,
+ * with features like search functionality, select all option, and individual option selection.
+ * It integrates with form layouts.
+ *
+ * @param {MultiSelectProps} props - The props for the MultiSelect component.
+ * @returns {JSX.Element} The rendered MultiSelect component.
+ *
+ * @example
+ * <MultiSelect
+ *   options={[
+ *     { id: '1', label: 'Option 1' },
+ *     { id: '2', label: 'Option 2' },
+ *     { id: '3', label: 'Option 3' }
+ *   ]}
+ *   label="Select Options"
+ *   buttonLabel="Options"
+ *   name="multiSelect"
+ *   onSelectedOptionsChanged={(selectedOptions) => console.log(selectedOptions)}
+ *   hasSearch={true}
+ *   searchLabel="Search options"
+ * />
+ *
+ *
+ * @accessibility
+ * - The component uses `aria-expanded` to indicate the open/closed state of the dropdown.
+ * - The dropdown trigger is keyboard accessible and can be activated using Enter or Space.
+ * - When open, the dropdown panel is navigable using arrow keys.
+ *
+ */
 export const MultiSelect = ({
   options,
   defaultOptions = [],