@genspectrum/dashboard-components 0.12.0 → 0.12.1

package/custom-elements.json

@@ -1096,11 +1096,11 @@
         },
         {
           "kind": "variable",
-          "name": "FiresEvent",
+          "name": "FiresEvents",
           "type": {
             "text": "StoryObj<Required<TextInputProps>>"
           },
-          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-input'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-text-input-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ host: undefined, }); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo', }, }), ); }); }, args: { ...Default.args, initialValue: '', }, }"
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-input'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-text-input-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); }); await step('Verify event is fired with correct detail', async () => { await waitFor(() => { expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); await step('Empty input', async () => { inputField().blur(); await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ host: undefined, }); }); }, args: { ...Default.args, initialValue: '', }, }"
         }
       ],
       "exports": [
@@ -1122,9 +1122,9 @@
         },
         {
           "kind": "js",
-          "name": "FiresEvent",
+          "name": "FiresEvents",
           "declaration": {
-            "name": "FiresEvent",
+            "name": "FiresEvents",
             "module": "src/web-components/input/gs-text-input.stories.ts"
           }
         }

package/dist/components.d.ts

@@ -1263,10 +1263,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1274,7 +1271,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1282,11 +1279,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1294,7 +1287,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1302,10 +1295,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1313,7 +1303,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1321,10 +1311,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1332,7 +1319,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1340,10 +1327,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1351,7 +1335,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1359,7 +1343,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1367,7 +1351,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1375,7 +1359,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1383,7 +1367,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1391,7 +1375,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1399,7 +1383,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1407,7 +1391,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1415,7 +1399,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1423,7 +1407,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1431,7 +1419,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1439,7 +1427,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1447,7 +1438,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1455,7 +1446,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1463,7 +1457,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1471,7 +1465,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1479,7 +1476,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1487,7 +1484,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1495,7 +1495,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/components.js

@@ -10,7 +10,7 @@ import { v as views, n as namedLapisFilterSchema, s as sequenceTypeSchema, l as
 import { autoUpdate, computePosition, offset, shift, flip } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
-import Leaflet from "leaflet";
+import { map, geoJson } from "leaflet";
 import * as topojson from "topojson-client";
 import flatpickr from "flatpickr";
 /**
@@ -8617,7 +8617,7 @@ function getDatasets$2(fields, maxNumberOfBars, data) {
       ]
     };
   }
-  const map = /* @__PURE__ */ new Map();
+  const map2 = /* @__PURE__ */ new Map();
   const countsOfEachBar = /* @__PURE__ */ new Map();
   for (const row of sortedData) {
     const yValue = row[fields[0]];
@@ -8627,17 +8627,17 @@ function getDatasets$2(fields, maxNumberOfBars, data) {
     }
     const yAxisKey = String(yValue);
     const secondaryKey = String(secondaryValue);
-    if (!map.has(secondaryKey)) {
-      map.set(secondaryKey, []);
+    if (!map2.has(secondaryKey)) {
+      map2.set(secondaryKey, []);
     }
-    (_a = map.get(secondaryKey)) == null ? void 0 : _a.push({
+    (_a = map2.get(secondaryKey)) == null ? void 0 : _a.push({
       y: yAxisKey,
       x: row.count,
       proportion: row.proportion
     });
     countsOfEachBar.set(yAxisKey, (countsOfEachBar.get(yAxisKey) ?? 0) + row.count);
   }
-  const datasets2 = Array.from(map.entries()).map(sortAndTruncateYAxisKeys(countsOfEachBar, maxNumberOfBars)).map(([key, value], index) => ({
+  const datasets2 = Array.from(map2.entries()).map(sortAndTruncateYAxisKeys(countsOfEachBar, maxNumberOfBars)).map(([key, value], index) => ({
     borderWidth: 1,
     backgroundColor: singleGraphColorRGBAById(index, 0.3),
     borderColor: singleGraphColorRGBAById(index),
@@ -9259,13 +9259,13 @@ class Map2dBase {
   }
 }
 class Map2dView {
-  constructor(map) {
-    this.keysFirstAxis = new Map(map.keysFirstAxis);
-    this.keysSecondAxis = new Map(map.keysSecondAxis);
-    if (map instanceof Map2dView) {
-      this.baseMap = map.baseMap;
+  constructor(map2) {
+    this.keysFirstAxis = new Map(map2.keysFirstAxis);
+    this.keysSecondAxis = new Map(map2.keysSecondAxis);
+    if (map2 instanceof Map2dView) {
+      this.baseMap = map2.baseMap;
     }
-    this.baseMap = map;
+    this.baseMap = map2;
   }
   serializeFirstAxis(key) {
     return this.baseMap.serializeFirstAxis(key);
@@ -10489,7 +10489,7 @@ const SequencesByLocationMap = ({
     if (!ref.current) {
       return;
     }
-    const leafletMap = Leaflet.map(ref.current, {
+    const leafletMap = map(ref.current, {
       scrollWheelZoom: enableMapNavigation,
       zoomControl: enableMapNavigation,
       keyboard: enableMapNavigation,
@@ -10498,7 +10498,7 @@ const SequencesByLocationMap = ({
       zoom,
       center: [offsetY, offsetX]
     });
-    Leaflet.geoJson(locations, {
+    geoJson(locations, {
       style: (feature) => {
         var _a;
         return {
@@ -14561,7 +14561,16 @@ LocationFilterComponent = __decorateClass$3([
 async function fetchAutocompleteList(lapis, field, signal) {
   const fetchAggregatedOperator = new FetchAggregatedOperator({}, [field]);
   const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
-  return data.map((item) => item[field]);
+  return data.map((item) => item[field]).sort();
+}
+class TextInputChangedEvent extends CustomEvent {
+  constructor(detail) {
+    super("gs-text-input-changed", {
+      detail,
+      bubbles: true,
+      composed: true
+    });
+  }
 }
 const textInputInnerPropsSchema = z$2.object({
   lapisField: z$2.string().min(1),
@@ -14576,9 +14585,8 @@ const TextInput = (props) => {
   const size = { width, height: "3rem" };
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, layout: "horizontal", componentProps: props, schema: textInputPropsSchema, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(TextInputInner, { ...innerProps }) }) });
 };
-const TextInputInner = ({ lapisField, placeholderText, initialValue }) => {
+const TextInputInner = ({ initialValue, lapisField, placeholderText }) => {
   const lapis = x$1(LapisUrlContext);
-  const inputRef = A$1(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -14589,39 +14597,143 @@ const TextInputInner = ({ lapisField, placeholderText, initialValue }) => {
   if (data === null) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  const onInput = () => {
-    var _a, _b, _c;
-    const value = ((_a = inputRef.current) == null ? void 0 : _a.value) === "" ? void 0 : (_b = inputRef.current) == null ? void 0 : _b.value;
-    if (isValidValue(value)) {
-      (_c = inputRef.current) == null ? void 0 : _c.dispatchEvent(
-        new CustomEvent("gs-text-input-changed", {
-          detail: { [lapisField]: value },
-          bubbles: true,
-          composed: true
-        })
-      );
+  return /* @__PURE__ */ u$1(
+    TextSelector,
+    {
+      lapisField,
+      initialValue,
+      placeholderText,
+      data
     }
-  };
-  const isValidValue = (value) => {
-    if (value === void 0) {
+  );
+};
+const TextSelector = ({
+  lapisField,
+  initialValue,
+  placeholderText,
+  data
+}) => {
+  var _a;
+  const [items, setItems] = h(data.filter((item) => filterByInputValue2(item, initialValue)));
+  const divRef = A$1(null);
+  const shadowRoot = ((_a = divRef.current) == null ? void 0 : _a.shadowRoot) ?? void 0;
+  const environment = shadowRoot !== void 0 ? {
+    addEventListener: window.addEventListener.bind(window),
+    removeEventListener: window.removeEventListener.bind(window),
+    document: shadowRoot.ownerDocument,
+    Node: window.Node
+  } : void 0;
+  function filterByInputValue2(item, inputValue2) {
+    if (inputValue2 === void 0 || inputValue2 === null || inputValue2 === "") {
       return true;
     }
-    return data.includes(value);
+    return item == null ? void 0 : item.toLowerCase().includes((inputValue2 == null ? void 0 : inputValue2.toLowerCase()) || "");
+  }
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+    selectedItem,
+    inputValue,
+    selectItem,
+    setInputValue,
+    closeMenu
+  } = useCombobox({
+    onInputValueChange({ inputValue: inputValue2 }) {
+      setItems(data.filter((item) => filterByInputValue2(item, inputValue2)));
+    },
+    onSelectedItemChange({ selectedItem: selectedItem2 }) {
+      var _a2;
+      if (selectedItem2 !== null) {
+        (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new TextInputChangedEvent({ [lapisField]: selectedItem2 }));
+      }
+    },
+    items,
+    itemToString(item) {
+      return item ?? "";
+    },
+    initialSelectedItem: initialValue,
+    environment
+  });
+  const onInputBlur = () => {
+    var _a2;
+    if (inputValue === "") {
+      (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new TextInputChangedEvent({ [lapisField]: void 0 }));
+      selectItem(null);
+    } else if (inputValue !== selectedItem) {
+      setInputValue(selectedItem ?? "");
+    }
   };
-  return /* @__PURE__ */ u$1(Fragment, { children: [
+  const clearInput = () => {
+    var _a2;
+    (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new TextInputChangedEvent({ [lapisField]: void 0 }));
+    selectItem(null);
+  };
+  const buttonRef = A$1(null);
+  return /* @__PURE__ */ u$1("div", { ref: divRef, className: "relative w-full", children: [
+    /* @__PURE__ */ u$1("div", { className: "w-full flex flex-col gap-1", children: /* @__PURE__ */ u$1(
+      "div",
+      {
+        className: "flex gap-0.5 input input-bordered min-w-32",
+        onBlur: (event) => {
+          if (event.relatedTarget != buttonRef.current) {
+            closeMenu();
+          }
+        },
+        children: [
+          /* @__PURE__ */ u$1(
+            "input",
+            {
+              placeholder: placeholderText,
+              className: "w-full p-1.5",
+              ...getInputProps(),
+              onBlur: onInputBlur
+            }
+          ),
+          /* @__PURE__ */ u$1(
+            "button",
+            {
+              "aria-label": "clear selection",
+              className: `px-2 ${inputValue === "" && "hidden"}`,
+              type: "button",
+              onClick: clearInput,
+              tabIndex: -1,
+              children: "×"
+            }
+          ),
+          /* @__PURE__ */ u$1(
+            "button",
+            {
+              "aria-label": "toggle menu",
+              className: "px-2",
+              type: "button",
+              ...getToggleButtonProps(),
+              ref: buttonRef,
+              children: isOpen ? /* @__PURE__ */ u$1(Fragment, { children: "↑" }) : /* @__PURE__ */ u$1(Fragment, { children: "↓" })
+            }
+          )
+        ]
+      }
+    ) }),
     /* @__PURE__ */ u$1(
-      "input",
+      "ul",
       {
-        type: "text",
-        class: "input input-bordered w-full",
-        placeholder: placeholderText ?? lapisField,
-        onInput,
-        ref: inputRef,
-        list: lapisField,
-        value: initialValue
+        className: `absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32  ${!(isOpen && items.length > 0) && "hidden"}`,
+        ...getMenuProps(),
+        children: isOpen && items.map((item, index) => /* @__PURE__ */ u$1(
+          "li",
+          {
+            className: `${highlightedIndex === index && "bg-blue-300"} ${selectedItem !== null} py-2 px-3 shadow-sm flex flex-col`,
+            ...getItemProps({ item, index }),
+            children: /* @__PURE__ */ u$1("span", { children: item })
+          },
+          item
+        ))
       }
-    ),
-    /* @__PURE__ */ u$1("datalist", { id: lapisField, children: data.map((item) => /* @__PURE__ */ u$1("option", { value: item }, item)) })
+    )
   ] });
 };
 var __defProp$2 = Object.defineProperty;