Skip to content

Commit fa46446

Browse files
dependabot[bot]corneliusroemer
dependabot[bot]
and
corneliusroemer
authored
chore(deps): bump @headlessui/react from 1.7.19 to 2.1.1 in /website (#2200)
* chore(deps): bump @headlessui/react from 1.7.19 to 2.1.1 in /website Bumps [@headlessui/react](https://github.com/tailwindlabs/headlessui/tree/HEAD/packages/@headlessui-react) from 1.7.19 to 2.1.1. - [Release notes](https://github.com/tailwindlabs/headlessui/releases) - [Changelog](https://github.com/tailwindlabs/headlessui/blob/main/packages/@headlessui-react/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/headlessui/commits/@headlessui/[email protected]/packages/@headlessui-react) --- updated-dependencies: - dependency-name: "@headlessui/react" dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * chore(website): migrate headless ui to use DialogPanel instead of Dialog.Overlay See https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v1.6.0 for migration guide * chore(website): address Combobox nullable breaking change for headless-ui v2 see tailwindlabs/headlessui#3064 * chore(website): appease typescript for headlessui v2 upgrade for nullable combobox Headlessui v2 makes it necessary to handle null input for combobox. See tailwindlabs/headlessui#3064 * chore(website): address headlessui v2 deprecation warnings due to renamings * chore(website): use focus instead of deprecated active, headlessui v2 migration see https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.0.0#user-content-upgrading-from-v1 * chore(website): mock ResizeObserver, neccesary for headlessui v2 see tailwindlabs/headlessui#3268 * Use new `immediate` feature of headlessui v2 * Fix flaky test by waiting for modal to be removed * fix failing test by using userEvent.click instead of fireEvent.click * chore: address warnings/lints --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cornelius Roemer <[email protected]>
1 parent 8614ab0 commit fa46446

20 files changed

+194
-93
lines changed

‎website/commitlint.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = { extends: ['@commitlint/config-conventional'] };
1+
export default { extends: ['@commitlint/config-conventional'] };

‎website/package-lock.json

+110-20
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"@astrojs/mdx": "^3.1.2",
2424
"@astrojs/node": "^8.3.2",
2525
"@emotion/react": "^11.11.4",
26-
"@headlessui/react": "^1.7.19",
26+
"@headlessui/react": "^2.1.1",
2727
"@mui/material": "~5.14.20",
2828
"@mui/x-date-pickers": "^6.19.7",
2929
"@svgr/core": "^8.1.0",
@@ -90,6 +90,7 @@
9090
"msw": "^2.3.1",
9191
"prettier": "3.3.2",
9292
"prettier-plugin-astro": "^0.14.0",
93+
"resize-observer-polyfill": "^1.5.1",
9394
"sass": "^1.77.6",
9495
"tailwindcss": "^3.4.4",
9596
"typescript": "^5.5.2",

‎website/src/components/Navigation/DocsMenu.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Disclosure } from '@headlessui/react';
1+
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
22
import type { MDXInstance } from 'astro';
33
import React from 'react';
44

@@ -53,17 +53,17 @@ const DocsMenu: React.FC<DocsMenuProps> = ({ docsPages, currentPageUrl }) => {
5353
<div className='flex items-center justify-between px-4 py-3 bg-gray-100'>
5454
<div className='text-lg font-semibold text-primary-600'>Documentation</div>
5555
<div className='sm:hidden'>
56-
<Disclosure.Button className='text-primary-600 hover:text-primary-800 focus:outline-none'>
56+
<DisclosureButton className='text-primary-600 hover:text-primary-800 focus:outline-none'>
5757
{open ? (
5858
<XIcon className='w-6 h-6' aria-hidden='true' />
5959
) : (
6060
<MenuIcon className='w-6 h-6' aria-hidden='true' />
6161
)}
62-
</Disclosure.Button>
62+
</DisclosureButton>
6363
</div>
6464
</div>
6565

66-
<Disclosure.Panel className='sm:hidden'>
66+
<DisclosurePanel className='sm:hidden'>
6767
<ul className='list-none m-0 p-0'>
6868
{Object.entries(groupedPages).map(([dir, pages]) => (
6969
<li key={dir} className='border-b border-gray-200 last:border-0'>
@@ -87,7 +87,7 @@ const DocsMenu: React.FC<DocsMenuProps> = ({ docsPages, currentPageUrl }) => {
8787
</li>
8888
))}
8989
</ul>
90-
</Disclosure.Panel>
90+
</DisclosurePanel>
9191

9292
<div className='hidden sm:block'>
9393
<ul className='list-none m-0 p-0'>

‎website/src/components/ReviewPage/ReviewPage.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Menu } from '@headlessui/react';
1+
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
22
import Pagination from '@mui/material/Pagination';
33
import { type ChangeEvent, type FC, useState } from 'react';
44

@@ -220,15 +220,15 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
220220
<div className='flex justify-end items-center gap-3 mt-auto '>
221221
{finishedCount > 0 && (
222222
<Menu as='div' className=' inline-block text-left'>
223-
<Menu.Button className='border rounded-md p-1 bg-primary-600 text-white px-2'>
223+
<MenuButton className='border rounded-md p-1 bg-primary-600 text-white px-2'>
224224
<BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
225225
Discard sequences
226226
<IwwaArrowDown className='inline-block ml-1 w-3 h-3 -mt-0.5' />
227-
</Menu.Button>
228-
<Menu.Items className='origin-top-right absolute z-50 bg-white'>
227+
</MenuButton>
228+
<MenuItems className='origin-top-right absolute z-50 bg-white'>
229229
<div className='py-1'>
230230
{errorCount > 0 && showErrors && (
231-
<Menu.Item>
231+
<MenuItem>
232232
<button
233233
className={menuItemClassName}
234234
onClick={() =>
@@ -247,9 +247,9 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
247247
<BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
248248
Discard {errorCount} sequence{errorCount > 1 ? 's' : ''} with errors
249249
</button>
250-
</Menu.Item>
250+
</MenuItem>
251251
)}
252-
<Menu.Item>
252+
<MenuItem>
253253
<button
254254
className={menuItemClassName}
255255
onClick={() =>
@@ -267,9 +267,9 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
267267
<BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
268268
Discard all {finishedCount} processed sequences
269269
</button>
270-
</Menu.Item>
270+
</MenuItem>
271271
</div>
272-
</Menu.Items>
272+
</MenuItems>
273273
</Menu>
274274
)}
275275
{processedCount > 0 && (

‎website/src/components/SearchPage/CustomizeModal.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dialog, Transition } from '@headlessui/react';
1+
import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react';
22

33
const titleCaseWords = (str: string) => {
44
return str
@@ -52,16 +52,16 @@ export const CustomizeModal: React.FC<CustomizeModalProps> = ({
5252
<Transition appear show={isCustomizeModalOpen}>
5353
<Dialog as='div' className='fixed inset-0 z-50 overflow-y-auto' onClose={toggleCustomizeModal}>
5454
<div className='min-h-screen px-4 text-center'>
55-
<Dialog.Overlay className='fixed inset-0 bg-black opacity-30' />
55+
<div className='fixed inset-0 bg-black opacity-30' />
5656

5757
<span className='inline-block h-screen align-middle' aria-hidden='true'>
5858
&#8203;
5959
</span>
6060

61-
<div className='inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl text-sm'>
62-
<Dialog.Title as='h3' className='text-lg font-medium leading-6 text-gray-900'>
61+
<DialogPanel className='inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl text-sm'>
62+
<DialogTitle as='h3' className='text-lg font-medium leading-6 text-gray-900'>
6363
Customize {titleCaseWords(thingToCustomize)}s
64-
</Dialog.Title>
64+
</DialogTitle>
6565

6666
<div className='mt-4 text-gray-700 text-sm'>Toggle the visibility of {thingToCustomize}s</div>
6767

@@ -91,7 +91,7 @@ export const CustomizeModal: React.FC<CustomizeModalProps> = ({
9191
Close
9292
</button>
9393
</div>
94-
</div>
94+
</DialogPanel>
9595
</div>
9696
</Dialog>
9797
</Transition>

‎website/src/components/SearchPage/DownloadDialog/ActiveDownloadFilters.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@ export const ActiveDownloadFilters: FC<ActiveDownloadFiltersProps> = ({ lapisSea
1111
let filterValues = Object.entries(lapisSearchParameters)
1212
.filter((vals) => vals[1] !== undefined && vals[1] !== '')
1313
.filter(([name, val]) => !(Object.keys(hiddenFieldValues).includes(name) && hiddenFieldValues[name] === val))
14-
.map(([name, filterValue]) => ({ name, filterValue }));
14+
.map(([name, filterValue]) => ({ name, filterValue: filterValue !== null ? filterValue : '' }));
1515

1616
filterValues = filterValues.filter(({ filterValue }) => filterValue.length > 0);
17-
1817
if (filterValues.length === 0) {
1918
return null;
2019
}

‎website/src/components/SearchPage/SearchFullUI.spec.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable @typescript-eslint/explicit-member-accessibility */
22
/* eslint-disable @typescript-eslint/no-empty-function */
33
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4-
import { render, screen, waitFor } from '@testing-library/react';
4+
import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
55
import userEvent from '@testing-library/user-event';
66
import { beforeEach, describe, expect, it, vi } from 'vitest';
77

@@ -225,6 +225,7 @@ describe('SearchFullUI', () => {
225225
await userEvent.click(field1Checkbox);
226226
const closeButton = await screen.findByRole('button', { name: 'Close' });
227227
await userEvent.click(closeButton);
228+
await waitForElementToBeRemoved(() => screen.queryByText('Toggle the visibility of search fields'));
228229
expect(screen.queryByLabelText('Field 1')).not.toBeInTheDocument();
229230
});
230231

‎website/src/components/SearchPage/SearchFullUI.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,13 @@ import { getLapisUrl } from '../../config.ts';
1515
import { lapisClientHooks } from '../../services/serviceHooks.ts';
1616
import { pageSize } from '../../settings';
1717
import type { Group } from '../../types/backend.ts';
18-
import { type MetadataFilter, type Schema, type GroupedMetadataFilter, type FieldValues } from '../../types/config.ts';
18+
import {
19+
type MetadataFilter,
20+
type Schema,
21+
type GroupedMetadataFilter,
22+
type FieldValues,
23+
type SetAFieldValue,
24+
} from '../../types/config.ts';
1925
import { type OrderBy } from '../../types/lapis.ts';
2026
import type { ReferenceGenomesSequenceNames } from '../../types/referencesGenomes.ts';
2127
import type { ClientConfig } from '../../types/runtimeConfig.ts';
@@ -160,7 +166,7 @@ export const InnerSearchFullUI = ({
160166
return values;
161167
}, [state, hiddenFieldValues]);
162168

163-
const setAFieldValue = (fieldName: string, value: string | number) => {
169+
const setAFieldValue: SetAFieldValue = (fieldName, value) => {
164170
setState((prev: any) => {
165171
const newState = {
166172
...prev,

0 commit comments

Comments
 (0)