@genspectrum/dashboard-components 0.4.1 → 0.4.2

package/dist/genspectrum-components.d.ts

@@ -767,20 +767,20 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/locationFilter/location-filter.tsx

@@ -51,11 +51,11 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
     const onInput = (event: JSXInternal.TargetedInputEvent<HTMLInputElement>) => {
         const inputValue = event.currentTarget.value;
         setValue(inputValue);
-        if (inputValue.trim() === value.trim()) {
+        if (inputValue.trim() === value.trim() && inputValue !== '') {
             return;
         }
         const eventDetail = parseLocation(inputValue, fields);
-        if (hasMatchingEntry(data, eventDetail)) {
+        if (hasAllUndefined(eventDetail) || hasMatchingEntry(data, eventDetail)) {
             divRef.current?.dispatchEvent(
                 new CustomEvent('gs-location-changed', {
                     detail: eventDetail,
@@ -92,10 +92,17 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
 };
 
 const parseLocation = (location: string, fields: string[]) => {
+    if (location === '') {
+        return fields.reduce((acc, field) => ({ ...acc, [field]: undefined }), {});
+    }
     const fieldValues = location.split('/').map((part) => part.trim());
+
     return fields.reduce((acc, field, i) => ({ ...acc, [field]: fieldValues[i] }), {});
 };
 
+const hasAllUndefined = (obj: Record<string, string | undefined>) =>
+    Object.values(obj).every((value) => value === undefined);
+
 const hasMatchingEntry = (data: Record<string, string>[] | null, eventDetail: Record<string, string>) => {
     if (data === null) {
         return false;

package/src/preact/textInput/text-input.tsx

@@ -56,7 +56,7 @@ export const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
     }
 
     const onInput = () => {
-        const value = inputRef.current?.value;
+        const value = inputRef.current?.value === '' ? undefined : inputRef.current?.value;
 
         if (isValidValue(value)) {
             inputRef.current?.dispatchEvent(
@@ -71,7 +71,7 @@ export const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
 
     const isValidValue = (value: string | undefined) => {
         if (value === undefined) {
-            return false;
+            return true;
         }
         return data.includes(value);
     };

package/src/web-components/input/gs-location-filter.stories.ts

@@ -185,7 +185,16 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
         await step('Input invalid location', async () => {
             await userEvent.type(inputField(), 'Not / A / Location');
             await expect(listenerMock).not.toHaveBeenCalled();
+        });
+
+        await step('Empty input', async () => {
             await userEvent.type(inputField(), '{backspace>18/}');
+            await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({
+                region: undefined,
+                country: undefined,
+                division: undefined,
+                location: undefined,
+            });
         });
 
         await step('Select Asia', async () => {

package/src/web-components/input/gs-text-input.stories.ts

@@ -118,7 +118,13 @@ export const FiresEvent: StoryObj<Required<TextInputProps>> = {
         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 () => {