@genspectrum/dashboard-components 0.3.0 → 0.3.1

package/custom-elements.json

@@ -483,7 +483,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const submitButton = () => canvas.getByRole('button', { name: 'Submit' }); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await userEvent.click(submitButton()); await expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>18/}'); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await userEvent.click(submitButton()); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', }, }), ); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await userEvent.click(submitButton()); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }, }), ); }); }, }"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>18/}'); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', }, }), ); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }, }), ); }); }, }"
         }
       ],
       "exports": [
@@ -574,7 +574,7 @@
               "type": {
                 "text": "CustomEvent<Record<string, string>>"
               },
-              "description": "Fired when the field is submitted with a valid location value. The `details` of this event contain an object with all `fields` as keys and the corresponding values as values, if they are not `undefined`. Example: ``` { continent: \"Asia\", country: \"China\", city: \"Beijing\" } ```",
+              "description": "Fired when a value from the datalist is selected or when a valid value is typed into the field. The `details` of this event contain an object with all `fields` as keys and the corresponding values as values, if they are not `undefined`. Example: ``` { continent: \"Asia\", country: \"China\", city: \"Beijing\" } ```",
               "name": "gs-location-changed"
             }
           ],

package/dist/dashboard-components.js

@@ -2617,19 +2617,6 @@ html {
     }
   }
 
-  .btn-outline.btn-primary:hover {
-    --tw-text-opacity: 1;
-    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  }
-
-  @supports (color: color-mix(in oklab, black, black)) {
-
-    .btn-outline.btn-primary:hover {
-      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    }
-  }
-
   .btn-disabled:hover,
     .btn[disabled]:hover,
     .btn:disabled:hover {
@@ -3099,34 +3086,12 @@ input.tab:checked + .tab-content,
     background-color: var(--btn-color, var(--fallback-b2));
     border-color: var(--btn-color, var(--fallback-b2));
   }
-
-  .btn-primary {
-    --btn-color: var(--fallback-p);
-  }
-}
-@supports (color: color-mix(in oklab, black, black)) {
-
-  .btn-outline.btn-primary.btn-active {
-    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-  }
 }
 .btn:focus-visible {
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
 }
-.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  outline-color: var(--fallback-p,oklch(var(--p)/1));
-}
-@supports (color: oklch(0% 0 0)) {
-
-  .btn-primary {
-    --btn-color: var(--p);
-  }
-}
 .btn.glass {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -3151,14 +3116,6 @@ input.tab:checked + .tab-content,
   border-color: transparent;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
 }
-.btn-outline.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
-}
-.btn-outline.btn-primary.btn-active {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-}
 .btn.btn-disabled,
   .btn[disabled],
   .btn:disabled {
@@ -4309,9 +4266,6 @@ input.tab:checked + .tab-content,
 .me-1 {
   margin-inline-end: 0.25rem;
 }
-.ml-1 {
-  margin-left: 0.25rem;
-}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -7723,7 +7677,7 @@ const LocationFilterInner = ({ initialValue, fields }) => {
   const lapis = P(LapisUrlContext);
   const [value, setValue] = p(initialValue ?? "");
   const [unknownLocation, setUnknownLocation] = p(false);
-  const formRef = F(null);
+  const divRef = F(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -7732,35 +7686,27 @@ const LocationFilterInner = ({ initialValue, fields }) => {
     return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   const onInput = (event) => {
-    if (event.target instanceof HTMLInputElement) {
-      const inputValue = event.target.value;
-      setValue(inputValue);
-      if (unknownLocation) {
-        const eventDetail = parseLocation(inputValue, fields);
-        if (hasMatchingEntry(data, eventDetail)) {
-          setUnknownLocation(false);
-        }
-      }
-    }
-  };
-  const submit = (event) => {
     var _a;
-    event.preventDefault();
-    const eventDetail = parseLocation(value, fields);
+    const inputValue = event.currentTarget.value;
+    setValue(inputValue);
+    if (inputValue.trim() === value.trim()) {
+      return;
+    }
+    const eventDetail = parseLocation(inputValue, fields);
     if (hasMatchingEntry(data, eventDetail)) {
-      setUnknownLocation(false);
-      (_a = formRef.current) == null ? void 0 : _a.dispatchEvent(
+      (_a = divRef.current) == null ? void 0 : _a.dispatchEvent(
         new CustomEvent("gs-location-changed", {
           detail: eventDetail,
           bubbles: true,
           composed: true
         })
       );
+      setUnknownLocation(false);
     } else {
       setUnknownLocation(true);
     }
   };
-  return /* @__PURE__ */ u$1("form", { class: "flex w-full", onSubmit: submit, ref: formRef, children: [
+  return /* @__PURE__ */ u$1("div", { class: "flex w-full", ref: divRef, children: [
     /* @__PURE__ */ u$1(
       "input",
       {
@@ -7774,8 +7720,7 @@ const LocationFilterInner = ({ initialValue, fields }) => {
     /* @__PURE__ */ u$1("datalist", { id: "countries", children: data == null ? void 0 : data.map((v2) => {
       const value2 = fields.map((field) => v2[field]).filter((value3) => value3 !== null).join(" / ");
       return /* @__PURE__ */ u$1("option", { value: value2 }, value2);
-    }) }),
-    /* @__PURE__ */ u$1("button", { class: "btn btn-primary ml-1", type: "submit", children: "Submit" })
+    }) })
   ] });
 };
 const parseLocation = (location, fields) => {