@genspectrum/dashboard-components 0.4.1 → 0.4.2

package/custom-elements.json

@@ -521,7 +521,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 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.mock.calls.at(-1)[0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); 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', }, }), ); }); }, }"
+          "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 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 () => { await userEvent.type(inputField(), 'Asia'); await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); 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": [
@@ -863,7 +863,7 @@
           "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 userEvent.type(inputField(), '{backspace>9/}'); }); 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 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: '', }, }"
         }
       ],
       "exports": [

package/dist/dashboard-components.js

@@ -7795,11 +7795,11 @@ const LocationFilterInner = ({ initialValue, fields }) => {
     var _a;
     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)) {
       (_a = divRef.current) == null ? void 0 : _a.dispatchEvent(
         new CustomEvent("gs-location-changed", {
           detail: eventDetail,
@@ -7830,9 +7830,13 @@ const LocationFilterInner = ({ initialValue, fields }) => {
   ] });
 };
 const parseLocation = (location, fields) => {
+  if (location === "") {
+    return fields.reduce((acc, field) => ({ ...acc, [field]: void 0 }), {});
+  }
   const fieldValues = location.split("/").map((part) => part.trim());
   return fields.reduce((acc, field, i2) => ({ ...acc, [field]: fieldValues[i2] }), {});
 };
+const hasAllUndefined = (obj) => Object.values(obj).every((value) => value === void 0);
 const hasMatchingEntry = (data, eventDetail) => {
   if (data === null) {
     return false;
@@ -7901,10 +7905,10 @@ const TextInputInner = ({
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
   const onInput = () => {
-    var _a, _b;
-    const value = (_a = inputRef.current) == null ? void 0 : _a.value;
+    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)) {
-      (_b = inputRef.current) == null ? void 0 : _b.dispatchEvent(
+      (_c = inputRef.current) == null ? void 0 : _c.dispatchEvent(
         new CustomEvent("gs-text-input-changed", {
           detail: { [lapisField]: value },
           bubbles: true,
@@ -7915,7 +7919,7 @@ const TextInputInner = ({
   };
   const isValidValue = (value) => {
     if (value === void 0) {
-      return false;
+      return true;
     }
     return data.includes(value);
   };