DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update headlessui (#212)

Browse Source
This commit is contained in:
Razboy20
2024-05-20 16:18:34 -05:00
committed by GitHub
parent 3684ee5e9b
commit 88c0061187
8 changed files with 475 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -24,7 +24,7 @@
"prepare": "husky"
},
"dependencies": {
"@headlessui/react": "^1.7.18",
"@headlessui/react": "^2.0.3",
"@hello-pangea/dnd": "^16.5.0",
"@unocss/vite": "^0.58.6",
"@vitejs/plugin-react": "^4.2.1",

724
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

36
src/views/components/common/Dialog.tsx
View File

@@ -1,5 +1,12 @@
import type { TransitionRootProps } from '@headlessui/react';
import { Dialog as HDialog, Transition } from '@headlessui/react';
import {
Description,
Dialog as HDialog,
DialogPanel,
DialogTitle,
Transition,
TransitionChild,
} from '@headlessui/react';
import clsx from 'clsx';
import type { PropsWithChildren } from 'react';
import React, { Fragment } from 'react';
@@ -10,7 +17,6 @@ export interface _DialogProps {
className?: string;
title?: JSX.Element;
description?: JSX.Element;
initialFocusHidden?: boolean;
}
/**
@@ -22,17 +28,12 @@ export type DialogProps = _DialogProps & Omit<TransitionRootProps<typeof HDialog
* A reusable popup component that can be used to display content on the page
*/
export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Element {
const { children, className, open, initialFocusHidden, ...rest } = props;
const initialFocusHiddenRef = React.useRef<HTMLDivElement>(null);
if (initialFocusHidden) {
rest.initialFocus = initialFocusHiddenRef;
}
const { children, className, open, ...rest } = props;
return (
<Transition show={open} as={HDialog} {...rest}>
<ExtensionRoot>
<Transition.Child
<TransitionChild
as={Fragment}
enter='transition duration-300 motion-reduce:duration-150 ease-out'
enterFrom='opacity-0'
@@ -42,8 +43,8 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
leaveTo='opacity-0'
>
<div className={clsx('fixed inset-0 z-50 bg-slate-700/35')} />
</Transition.Child>
<Transition.Child
</TransitionChild>
<TransitionChild
as={Fragment}
enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
enterFrom='transform-gpu scale-95 opacity-0'
@@ -53,21 +54,18 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
leaveTo='transform-gpu scale-95 opacity-0'
>
<div className='fixed inset-0 z-50 flex items-center justify-center'>
<HDialog.Panel
<DialogPanel
className={clsx(
'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%)] mt-[calc(100vw-100%)]',
className
)}
>
{initialFocusHidden && <div className='hidden' ref={initialFocusHiddenRef} />}
{props.title && <HDialog.Title as={Fragment}>{props.title}</HDialog.Title>}
{props.description && (
<HDialog.Description as={Fragment}>{props.description}</HDialog.Description>
)}
{props.title && <DialogTitle as={Fragment}>{props.title}</DialogTitle>}
{props.description && <Description as={Fragment}>{props.description}</Description>}
{children}
</HDialog.Panel>
</DialogPanel>
</div>
</Transition.Child>
</TransitionChild>
</ExtensionRoot>
</Transition>
);

1
src/views/components/common/DialogProvider/DialogProvider.tsx
View File

@@ -91,7 +91,6 @@ export default function DialogProvider(props: { children: ReactNode }): JSX.Elem
description={infoUnwrapped.description}
appear
show={show}
initialFocusHidden={infoUnwrapped.initialFocusHidden}
className={infoUnwrapped.className}
>
<div className='mt-0.75 w-full flex justify-end gap-2.5'>{buttons}</div>

10
src/views/components/common/Prompt.tsx
View File

@@ -1,4 +1,4 @@
import { Dialog, Transition } from '@headlessui/react';
import { Dialog, Transition, TransitionChild } from '@headlessui/react';
import type { ReactElement } from 'react';
import React from 'react';
@@ -28,7 +28,7 @@ function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialo
return (
<Transition appear show={isOpen} as={React.Fragment}>
<Dialog as='div' onClose={onClose} className='relative z-50'>
<Transition.Child
<TransitionChild
as={React.Fragment}
enter='ease-out duration-200'
enterFrom='opacity-0'
@@ -38,9 +38,9 @@ function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialo
leaveTo='opacity-0'
>
<div className='fixed inset-0 bg-black bg-opacity-50' aria-hidden='true' />
</Transition.Child>
</TransitionChild>
<Transition.Child
<TransitionChild
as={React.Fragment}
enter='ease-out duration-200'
enterFrom='opacity-0 scale-95'
@@ -56,7 +56,7 @@ function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialo
<div className='flex items-center justify-end gap-2'>{children}</div>
</Dialog.Panel>
</div>
</Transition.Child>
</TransitionChild>
</Dialog>
</Transition>
);

9
src/views/components/common/ScheduleDropdown.tsx
View File

@@ -1,4 +1,4 @@
import { Disclosure, Transition } from '@headlessui/react';
import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react';
import Text from '@views/components/common/Text/Text';
import useSchedules from '@views/hooks/useSchedules';
import React from 'react';
@@ -25,7 +25,7 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
<Disclosure defaultOpen={props.defaultOpen}>
{({ open }) => (
<>
<Disclosure.Button className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
<DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
<div className='flex-1'>
<Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
{(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
@@ -42,9 +42,10 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
<Text className='text-ut-burntorange text-2xl! font-normal!'>
{open ? <DropdownArrowDown /> : <DropdownArrowUp />}
</Text>
</Disclosure.Button>
</DisclosureButton>
<Transition
as='div'
className='contain-paint max-h-55 origin-top overflow-auto transition-all duration-400 ease-in-out-expo'
enterFrom='transform scale-98 opacity-0 max-h-0!'
enterTo='transform scale-100 opacity-100 max-h-55'
@@ -52,7 +53,7 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
leaveFrom='transform scale-100 opacity-100 max-h-55'
leaveTo='transform scale-98 opacity-0 max-h-0!'
>
<Disclosure.Panel className='px-3.5 pb-2.5 pt-2'>{props.children}</Disclosure.Panel>
<DisclosurePanel className='px-3.5 pb-2.5 pt-2'>{props.children}</DisclosurePanel>
</Transition>
</>
)}

1
src/views/contexts/DialogContext.ts
View File

@@ -13,7 +13,6 @@ export interface DialogInfo {
description?: JSX.Element;
className?: string;
buttons?: JSX.Element | CloseWrapper<JSX.Element>;
initialFocusHidden?: boolean;
onClose?: () => void;
}

2
unocss.config.ts
View File

@@ -10,7 +10,7 @@ export default defineConfig({
rules: [
[
'btn-transition',
{ transition: 'color 180ms, border-color 150ms, background-color 150ms, box-shadow 0ms, transform 50ms' },
{ transition: 'color 180ms, border-color 150ms, background-color 150ms, box-shadow 50ms, transform 50ms' },
],
[
'ring-offset-0',