Skip to content

Commit

Permalink
chore(website): address headlessui v2 deprecation warnings due to ren…
Browse files Browse the repository at this point in the history 
…amings
  • Loading branch information
@corneliusroemer
corneliusroemer committed Jun 29, 2024
1 parent 7e61ace commit cda4d69
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 28 deletions.
10 changes: 5 additions & 5 deletions website/src/components/Navigation/DocsMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Disclosure } from '@headlessui/react';
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
import type { MDXInstance } from 'astro';
import React from 'react';

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

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

<div className='hidden sm:block'>
<ul className='list-none m-0 p-0'>
Expand Down
18 changes: 9 additions & 9 deletions website/src/components/ReviewPage/ReviewPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Menu } from '@headlessui/react';
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
import Pagination from '@mui/material/Pagination';
import { type ChangeEvent, type FC, useState } from 'react';

Expand Down Expand Up @@ -220,15 +220,15 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
<div className='flex justify-end items-center gap-3 mt-auto '>
{finishedCount > 0 && (
<Menu as='div' className=' inline-block text-left'>
<Menu.Button className='border rounded-md p-1 bg-primary-600 text-white px-2'>
<MenuButton className='border rounded-md p-1 bg-primary-600 text-white px-2'>
<BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
Discard sequences
<IwwaArrowDown className='inline-block ml-1 w-3 h-3 -mt-0.5' />
</Menu.Button>
<Menu.Items className='origin-top-right absolute z-50 bg-white'>
</MenuButton>
<MenuItems className='origin-top-right absolute z-50 bg-white'>
<div className='py-1'>
{errorCount > 0 && showErrors && (
<Menu.Item>
<MenuItem>
<button
className={menuItemClassName}
onClick={() =>
Expand All @@ -247,9 +247,9 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
<BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
Discard {errorCount} sequence{errorCount > 1 ? 's' : ''} with errors
</button>
</Menu.Item>
</MenuItem>
)}
<Menu.Item>
<MenuItem>
<button
className={menuItemClassName}
onClick={() =>
Expand All @@ -267,9 +267,9 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
<BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
Discard all {finishedCount} processed sequences
</button>
</Menu.Item>
</MenuItem>
</div>
</Menu.Items>
</MenuItems>
</Menu>
)}
{processedCount > 0 && (
Expand Down
16 changes: 8 additions & 8 deletions website/src/components/SearchPage/fields/AutoCompleteField.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Combobox } from '@headlessui/react';
import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react';
import { useEffect, useMemo, useState, useRef, forwardRef } from 'react';

import { TextField } from './TextField.tsx';
Expand Down Expand Up @@ -87,7 +87,7 @@ export const AutoCompleteField = ({
return (
<Combobox value={fieldValue} onChange={(value) => setAFieldValue(field.name, value)}>
<div className='relative'>
<Combobox.Input
<ComboboxInput
className='w-full py-2 pl-3 text-sm leading-5
text-gray-900 border border-gray-300 rounded-md focus:outline-none
focus:ring-2 focus:ring-blue-500 focus:border-blue-500
Expand Down Expand Up @@ -116,16 +116,16 @@ export const AutoCompleteField = ({
</svg>
</button>
)}
<Combobox.Button
<ComboboxButton
className='absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none'
ref={buttonRef}
>
<svg className='w-5 h-5 text-gray-400' fill='currentColor' viewBox='0 0 20 20'>
<path d='M7 7l3-3 3 3m0 6l-3 3-3-3' />
</svg>
</Combobox.Button>
</ComboboxButton>

<Combobox.Options
<ComboboxOptions
className='absolute z-20 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm
min-h-32
'
Expand All @@ -136,7 +136,7 @@ export const AutoCompleteField = ({
<div className='px-4 py-2 text-gray-500'>No options available</div>
) : (
filteredOptions.map((option) => (
<Combobox.Option
<ComboboxOption
key={option.option}
className={({ active }) =>
`relative cursor-default select-none py-2 pl-10 pr-4 ${
Expand Down Expand Up @@ -168,10 +168,10 @@ export const AutoCompleteField = ({
)}
</>
)}
</Combobox.Option>
</ComboboxOption>
))
)}
</Combobox.Options>
</ComboboxOptions>
</div>
</Combobox>
);
Expand Down
12 changes: 6 additions & 6 deletions website/src/components/SearchPage/fields/MutationField.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Combobox, Transition } from '@headlessui/react';
import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions, Transition } from '@headlessui/react';
import { type FC, Fragment, useMemo, useState } from 'react';
import * as React from 'react';

Expand Down Expand Up @@ -226,7 +226,7 @@ export const MutationField: FC<MutationFieldProps> = ({ referenceGenomesSequence
>
Mutations
</label>
<Combobox.Input
<ComboboxInput
onFocus={() => setHasFocus(true)}
onBlur={() => setHasFocus(false)}
placeholder={hasFocus ? '' : selectedOptions.length === 0 ? 'Mutations' : 'Enter mutation'}
Expand All @@ -246,9 +246,9 @@ export const MutationField: FC<MutationFieldProps> = ({ referenceGenomesSequence
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<Combobox.Options className='absolute w-full z-20 py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
<ComboboxOptions className='absolute w-full z-20 py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
{options.map((option, index) => (
<Combobox.Option
<ComboboxOption
key={index}
value={option}
className={({ active }) =>
Expand All @@ -260,9 +260,9 @@ export const MutationField: FC<MutationFieldProps> = ({ referenceGenomesSequence
{option.text}
</span>
)}
</Combobox.Option>
</ComboboxOption>
))}
</Combobox.Options>
</ComboboxOptions>
</Transition>
</div>
</Combobox>
Expand Down

0 comments on commit cda4d69

Please sign in to comment.