@genspectrum/dashboard-components 0.16.3 → 0.17.0

package/dist/style.css

@@ -1073,12 +1073,6 @@ html {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
   }
-
-  .table-zebra tr.hover:hover,
-  .table-zebra tr.hover:nth-child(even):hover {
-    --tw-bg-opacity: 1;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
-  }
 }
 .btn {
   display: inline-flex;
@@ -3098,6 +3092,9 @@ input.tab:checked + .tab-content,
 .right-0 {
   right: 0px;
 }
+.right-10 {
+  right: 2.5rem;
+}
 .right-2 {
   right: 0.5rem;
 }
@@ -3247,9 +3244,6 @@ input.tab:checked + .tab-content,
 .w-\[6rem\] {
   width: 6rem;
 }
-.w-\[7\.5rem\] {
-  width: 7.5rem;
-}
 .w-full {
   width: 100%;
 }
@@ -3257,6 +3251,9 @@ input.tab:checked + .tab-content,
   width: -moz-max-content;
   width: max-content;
 }
+.min-w-24 {
+  min-width: 6rem;
+}
 .min-w-32 {
   min-width: 8rem;
 }
@@ -3278,6 +3275,10 @@ input.tab:checked + .tab-content,
 .grow {
   flex-grow: 1;
 }
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3292,6 +3293,11 @@ input.tab:checked + .tab-content,
 .cursor-pointer {
   cursor: pointer;
 }
+.select-text {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
 .list-inside {
   list-style-position: inside;
 }
@@ -3371,12 +3377,27 @@ input.tab:checked + .tab-content,
   border-bottom-right-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
+.rounded-b-none {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.rounded-t-md {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+.rounded-t-none {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
 .rounded-tr-md {
   border-top-right-radius: 0.375rem;
 }
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-2 {
   border-width: 2px;
 }
@@ -3418,6 +3439,9 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
 }
+.bg-transparent {
+  background-color: transparent;
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -3465,6 +3489,9 @@ input.tab:checked + .tab-content,
 .pl-2 {
   padding-left: 0.5rem;
 }
+.pr-14 {
+  padding-right: 3.5rem;
+}
 .text-center {
   text-align: center;
 }
@@ -3663,6 +3690,51 @@ input.tab:checked + .tab-content,
     visibility: visible;
   }
 }
+@container (min-width: 14rem) {
+
+  .\@4xs\:flex-row {
+    flex-direction: row;
+  }
+
+  .\@4xs\:rounded-l-none {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .\@4xs\:rounded-bl-md {
+    border-bottom-left-radius: 0.375rem;
+  }
+
+  .\@4xs\:rounded-tr-none {
+    border-top-right-radius: 0px;
+  }
+}
+@container (min-width: 28rem) {
+
+  .\@md\:flex-row {
+    flex-direction: row;
+  }
+
+  .\@md\:rounded-l-md {
+    border-top-left-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+
+  .\@md\:rounded-l-none {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .\@md\:rounded-r-md {
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+
+  .\@md\:rounded-r-none {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\:max-w-5xl {

package/dist/util.d.ts

@@ -73,8 +73,8 @@ declare const confidenceIntervalMethodSchema: default_2.ZodUnion<[default_2.ZodL
 
 export declare type DateRangeOption = default_2.infer<typeof dateRangeOptionSchema>;
 
-export declare class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
-    constructor(detail: DateRangeSelectOption);
+export declare class DateRangeOptionChangedEvent extends CustomEvent<DateRangeValue> {
+    constructor(detail: DateRangeValue);
 }
 
 /**
@@ -136,11 +136,9 @@ declare const dateRangeOptionSchema: default_2.ZodObject<{
     dateTo?: string | undefined;
 }>;
 
-export declare type DateRangeSelectOption = Required<DateRangeValue>;
+export declare type DateRangeValue = default_2.infer<typeof dateRangeValueSchema>;
 
-declare type DateRangeValue = default_2.infer<typeof dateRangeValueSchema>;
-
-declare const dateRangeValueSchema: default_2.ZodUnion<[default_2.ZodString, default_2.ZodObject<{
+declare const dateRangeValueSchema: default_2.ZodOptional<default_2.ZodUnion<[default_2.ZodString, default_2.ZodObject<{
     dateFrom: default_2.ZodOptional<default_2.ZodString>;
     dateTo: default_2.ZodOptional<default_2.ZodString>;
 }, "strip", default_2.ZodTypeAny, {
@@ -149,7 +147,7 @@ declare const dateRangeValueSchema: default_2.ZodUnion<[default_2.ZodString, def
 }, {
     dateFrom?: string | undefined;
     dateTo?: string | undefined;
-}>]>;
+}>]>>;
 
 export declare type LapisFilter = default_2.infer<typeof lapisFilterSchema>;
 
@@ -202,6 +200,50 @@ declare const mapSourceSchema: default_2.ZodObject<{
     topologyObjectsKey: string;
 }>;
 
+export declare type MutationAnnotation = default_2.infer<typeof mutationAnnotationSchema>;
+
+export declare type MutationAnnotations = default_2.infer<typeof mutationAnnotationsSchema>;
+
+declare const mutationAnnotationSchema: default_2.ZodObject<{
+    name: default_2.ZodString;
+    description: default_2.ZodString;
+    symbol: default_2.ZodString;
+    nucleotideMutations: default_2.ZodArray<default_2.ZodString, "many">;
+    aminoAcidMutations: default_2.ZodArray<default_2.ZodString, "many">;
+}, "strip", default_2.ZodTypeAny, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}>;
+
+declare const mutationAnnotationsSchema: default_2.ZodArray<default_2.ZodObject<{
+    name: default_2.ZodString;
+    description: default_2.ZodString;
+    symbol: default_2.ZodString;
+    nucleotideMutations: default_2.ZodArray<default_2.ZodString, "many">;
+    aminoAcidMutations: default_2.ZodArray<default_2.ZodString, "many">;
+}, "strip", default_2.ZodTypeAny, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}, {
+    symbol: string;
+    name: string;
+    description: string;
+    nucleotideMutations: string[];
+    aminoAcidMutations: string[];
+}>, "many">;
+
 export declare type MutationComparisonProps = default_2.infer<typeof mutationComparisonPropsSchema>;
 
 declare const mutationComparisonPropsSchema: default_2.ZodObject<{
@@ -247,6 +289,7 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
     pageSize: default_2.ZodUnion<[default_2.ZodBoolean, default_2.ZodNumber]>;
 }, "strip", default_2.ZodTypeAny, {
     width: string;
+    sequenceType: "nucleotide" | "amino acid";
     pageSize: number | boolean;
     lapisFilters: {
         lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -257,11 +300,11 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
         };
         displayName: string;
     }[];
-    sequenceType: "nucleotide" | "amino acid";
     views: ("table" | "venn")[];
     height?: string | undefined;
 }, {
     width: string;
+    sequenceType: "nucleotide" | "amino acid";
     pageSize: number | boolean;
     lapisFilters: {
         lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -272,7 +315,6 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
         };
         displayName: string;
     }[];
-    sequenceType: "nucleotide" | "amino acid";
     views: ("table" | "venn")[];
     height?: string | undefined;
 }>;
@@ -348,8 +390,8 @@ declare const mutationsPropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     };
     width: string;
-    pageSize: number | boolean;
     sequenceType: "nucleotide" | "amino acid";
+    pageSize: number | boolean;
     views: ("table" | "grid" | "insertions")[];
     height?: string | undefined;
     baselineLapisFilter?: (Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -366,8 +408,8 @@ declare const mutationsPropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     };
     width: string;
-    pageSize: number | boolean;
     sequenceType: "nucleotide" | "amino acid";
+    pageSize: number | boolean;
     views: ("table" | "grid" | "insertions")[];
     height?: string | undefined;
     baselineLapisFilter?: (Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -880,7 +922,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -888,7 +930,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -896,7 +938,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -904,7 +946,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -912,7 +954,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -920,7 +962,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -928,7 +970,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -936,7 +978,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -944,7 +986,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -952,7 +994,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -960,7 +1002,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -968,7 +1010,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -976,10 +1018,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -987,7 +1026,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -995,7 +1034,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1003,7 +1046,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1027,11 +1070,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1039,7 +1081,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-COWV-Y0k.js";
+import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-DkvWdq_G.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.16.3",
+    "version": "0.17.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -87,6 +87,7 @@
         "chartjs-chart-error-bars": "^4.4.0",
         "chartjs-chart-venn": "^4.3.0",
         "dayjs": "^1.11.10",
+        "dompurify": "^3.2.4",
         "downshift": "^9.0.8",
         "flatpickr": "^4.6.13",
         "gridjs": "^6.2.0",

package/src/preact/components/annotated-mutation.stories.tsx

@@ -66,7 +66,7 @@ export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { an
         annotations: [
             {
                 name: 'Test annotation',
-                description: 'This is a test annotation',
+                description: 'This is a test annotation <a class="link" href="/">with a link.</a>',
                 symbol: '*',
                 nucleotideMutations: ['A23403G'],
                 aminoAcidMutations: [],
@@ -81,6 +81,7 @@ export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { an
 
         await userEvent.click(canvas.getByText('A23403G'));
         await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+        await expect(canvas.getByRole('link', { name: 'with a link.' })).toBeVisible();
     },
 };
 

package/src/preact/components/annotated-mutation.tsx

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { useRef } from 'gridjs';
 import { Fragment, type FunctionComponent, type RefObject } from 'preact';
 
@@ -56,14 +57,17 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
             {mutationAnnotations.map((annotation) => (
                 <Fragment key={annotation.name}>
                     <InfoHeadline2>{annotation.name}</InfoHeadline2>
-                    <InfoParagraph>{annotation.description}</InfoParagraph>
+                    <InfoParagraph>
+                        {/* eslint-disable-next-line react/no-danger */}
+                        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(annotation.description) }} />
+                    </InfoParagraph>
                 </Fragment>
             ))}
         </div>
     );
 
     return (
-        <ButtonWithModalDialog modalContent={modalContent} modalRef={modalRef}>
+        <ButtonWithModalDialog buttonClassName={'select-text'} modalContent={modalContent} modalRef={modalRef}>
             {mutation.code}
             <sup>
                 {mutationAnnotations

package/src/preact/components/clearable-select.stories.tsx

@@ -0,0 +1,75 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { fn, userEvent, within } from '@storybook/test';
+
+import { ClearableSelect, type ClearableSelectProps } from './clearable-select';
+import { expectOptionSelected } from '../shared/stories/expectOptionSelected';
+
+const meta: Meta<ClearableSelectProps> = {
+    title: 'Component/ClearableSelect',
+    component: ClearableSelect,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const Default: StoryObj<ClearableSelectProps> = {
+    render: (args) => (
+        <div class='flex justify-center px-4 py-16'>
+            <ClearableSelect {...args} />
+        </div>
+    ),
+    args: {
+        items: ['firstOption', 'secondOption'],
+        onChange: fn(),
+    },
+    play: async ({ canvasElement, step }) => {
+        await step('Show default placeholder', async () => {
+            await expectOptionSelected(canvasElement, 'Select an option');
+        });
+    },
+};
+
+export const UseInitialSelectedItem: StoryObj<ClearableSelectProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        initiallySelectedItem: 'firstOption',
+    },
+    play: async ({ canvasElement, step }) => {
+        await step('Show initiallySelectedItem', async () => {
+            await expectOptionSelected(canvasElement, 'firstOption');
+        });
+    },
+};
+
+export const SwitchToOption: StoryObj<ClearableSelectProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Select an option', async () => {
+            await userEvent.selectOptions(getSelectElement(canvas), 'firstOption');
+            await expectOptionSelected(canvasElement, 'firstOption');
+        });
+    },
+};
+
+export const ClearOption: StoryObj<ClearableSelectProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        initiallySelectedItem: 'firstOption',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Clear the selected option', async () => {
+            await userEvent.click(canvas.getByRole('button', { name: '×' }));
+            await expectOptionSelected(canvasElement, 'Select an option');
+        });
+    },
+};
+
+const getSelectElement = (canvas: ReturnType<typeof within>) => {
+    return canvas.getByRole('combobox');
+};

package/src/preact/components/clearable-select.tsx

@@ -0,0 +1,76 @@
+import { type ChangeEvent } from 'preact/compat';
+import { useEffect, useState } from 'preact/hooks';
+
+import { type WithClassName } from '../shared/WithClassName/WithClassName';
+import { DeleteIcon } from '../shared/icons/DeleteIcon';
+
+export const undefinedValue = '__undefined__';
+
+export type ClearableSelectProps = {
+    items: string[];
+    initiallySelectedItem?: string | null;
+    onChange?: (item: string | null) => void;
+    placeholderText?: string;
+    value?: string | null;
+    selectClassName?: string;
+};
+
+export function ClearableSelect({
+    items,
+    initiallySelectedItem,
+    onChange,
+    placeholderText,
+    className,
+    value,
+    selectClassName,
+}: WithClassName<ClearableSelectProps>) {
+    const [selectedOption, setSelectedOption] = useState<string | null>(initiallySelectedItem ?? null);
+
+    useEffect(() => {
+        if (value !== undefined) {
+            setSelectedOption(value);
+        }
+    }, [value]);
+
+    const handleClear = () => {
+        setSelectedOption(null);
+        if (onChange) {
+            onChange(null);
+        }
+    };
+
+    const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+        const newValue = event.currentTarget.value;
+        setSelectedOption(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+
+    return (
+        <div className={`relative inline min-w-24 ${className}`}>
+            <select
+                className={`w-full select select-bordered pr-14 ${selectClassName}`}
+                value={selectedOption ?? undefinedValue}
+                onChange={handleChange}
+            >
+                <option value={undefinedValue} disabled>
+                    {placeholderText ?? 'Select an option'}
+                </option>
+                {items.map((item) => (
+                    <option key={item} value={item}>
+                        {item}
+                    </option>
+                ))}
+            </select>
+            {selectedOption && (
+                <button
+                    onClick={handleClear}
+                    className='absolute right-10 top-1/2 -translate-y-1/2 bg-transparent border-0 cursor-pointer'
+                >
+                    <DeleteIcon />
+                </button>
+            )}
+        </div>
+    );
+}