From c4e63bc1674eec84c0d2113695f5fb2291989875 Mon Sep 17 00:00:00 2001 From: AkaraChen Date: Tue, 29 Oct 2024 14:56:22 +0800 Subject: [PATCH] build: update headlessui --- web/app/account/avatar.tsx | 22 ++-- .../app/annotation/header-opts/index.tsx | 13 +-- .../app/create-app-dialog/newAppDialog.tsx | 21 ++-- web/app/components/base/dialog/index.tsx | 24 ++-- web/app/components/base/drawer/index.tsx | 62 ++++++----- .../new-feature-panel/dialog-wrapper.tsx | 20 ++-- .../text-to-speech/param-config-content.tsx | 42 +++---- web/app/components/base/modal/index.tsx | 27 ++--- .../workspace-selector/index.tsx | 16 ++- web/app/components/base/popover/index.tsx | 14 +-- web/app/components/base/select/index.tsx | 47 ++++---- web/app/components/base/select/locale.tsx | 37 +++---- web/app/components/develop/code.tsx | 14 +-- .../header/account-dropdown/index.tsx | 51 +++++---- .../workplace-selector/index.tsx | 11 +- .../data-source-notion/operate/index.tsx | 23 ++-- .../members-page/operation/index.tsx | 19 ++-- .../header/account-setting/menu-dialog.tsx | 15 ++- .../provider-added-card/priority-selector.tsx | 15 ++- .../components/header/app-selector/index.tsx | 21 ++-- .../header/nav/nav-selector/index.tsx | 27 +++-- web/package.json | 4 +- web/pnpm-lock.yaml | 103 ++++++++++++++++-- 23 files changed, 358 insertions(+), 290 deletions(-) diff --git a/web/app/account/avatar.tsx b/web/app/account/avatar.tsx index 4d8082b410..f069436757 100644 --- a/web/app/account/avatar.tsx +++ b/web/app/account/avatar.tsx @@ -1,14 +1,13 @@ 'use client' import { useTranslation } from 'react-i18next' -import { Fragment } from 'react' import { useRouter } from 'next/navigation' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import Avatar from '@/app/components/base/avatar' import { logout } from '@/service/common' import { useAppContext } from '@/context/app-context' import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general' -export interface IAppSelector { +export type IAppSelector = { isMobile: boolean } @@ -35,7 +34,7 @@ export default function AppSelector() { ({ open }) => ( <>
- - +
- - +
@@ -73,8 +71,8 @@ export default function AppSelector() {
- - + +
handleLogout()}>
{t('common.userProfile.logout')}
- - + + ) diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx index ebbb4acef1..599388cbe5 100644 --- a/web/app/components/app/annotation/header-opts/index.tsx +++ b/web/app/components/app/annotation/header-opts/index.tsx @@ -1,6 +1,6 @@ 'use client' import type { FC } from 'react' -import React, { Fragment, useEffect, useState } from 'react' +import React, { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { RiAddLine, @@ -9,7 +9,7 @@ import { useContext } from 'use-context-selector' import { useCSVDownloader, } from 'react-papaparse' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react' import Button from '../../../base/button' import AddAnnotationModal from '../add-annotation-modal' import type { AnnotationItemBasic } from '../type' @@ -87,13 +87,12 @@ const HeaderOptions: FC = ({ {t('appAnnotation.table.header.bulkImport')} - + {t('appAnnotation.table.header.bulkExport')} - + = ({ leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - = ({ - + diff --git a/web/app/components/app/create-app-dialog/newAppDialog.tsx b/web/app/components/app/create-app-dialog/newAppDialog.tsx index 21459773a6..dbd2551be9 100644 --- a/web/app/components/app/create-app-dialog/newAppDialog.tsx +++ b/web/app/components/app/create-app-dialog/newAppDialog.tsx @@ -1,6 +1,6 @@ -import { Fragment, useCallback } from 'react' +import { useCallback } from 'react' import type { ReactNode } from 'react' -import { Dialog, Transition } from '@headlessui/react' +import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react' import cn from '@/utils/classnames' type DialogProps = { @@ -18,10 +18,10 @@ const NewAppDialog = ({ }: DialogProps) => { const close = useCallback(() => onClose?.(), [onClose]) return ( - + -
- +
- - + {children} - - + +
diff --git a/web/app/components/base/dialog/index.tsx b/web/app/components/base/dialog/index.tsx index e74e6319c8..148a3da151 100644 --- a/web/app/components/base/dialog/index.tsx +++ b/web/app/components/base/dialog/index.tsx @@ -1,6 +1,6 @@ -import { Fragment, useCallback } from 'react' +import { useCallback } from 'react' import type { ElementType, ReactNode } from 'react' -import { Dialog, Transition } from '@headlessui/react' +import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react' import classNames from '@/utils/classnames' // https://headlessui.com/react/dialog @@ -32,10 +32,9 @@ const CustomDialog = ({ }: DialogProps) => { const close = useCallback(() => onClose?.(), [onClose]) return ( - + -
- +
- - + {Boolean(title) && ( - {title} - + )}
{children} @@ -74,8 +72,8 @@ const CustomDialog = ({ {footer}
)} - - + +
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx index c2285b5c53..e8f9f86468 100644 --- a/web/app/components/base/drawer/index.tsx +++ b/web/app/components/base/drawer/index.tsx @@ -1,5 +1,5 @@ 'use client' -import { Dialog } from '@headlessui/react' +import { Description, Dialog, DialogPanel, DialogTitle } from '@headlessui/react' import { useTranslation } from 'react-i18next' import { XMarkIcon } from '@heroicons/react/24/outline' import Button from '../button' @@ -46,37 +46,39 @@ export default function Drawer({ >
{/* mask */} - -
- <> - {title && - {title} - } - {showClose && - - } - {description && {description}} - {children} - - {footer || (footer === null - ? null - :
- - -
)} -
+ +
+ <> + {title && + {title} + } + {showClose && + + } + {description && {description}} + {children} + + {footer || (footer === null + ? null + :
+ + +
)} +
+
) diff --git a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx index e2b03faad2..11b1e53695 100644 --- a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx +++ b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx @@ -1,6 +1,6 @@ -import { Fragment, useCallback } from 'react' +import { useCallback } from 'react' import type { ReactNode } from 'react' -import { Dialog, Transition } from '@headlessui/react' +import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react' import cn from '@/utils/classnames' type DialogProps = { @@ -20,10 +20,9 @@ const DialogWrapper = ({ }: DialogProps) => { const close = useCallback(() => onClose?.(), [onClose]) return ( - + -
- +
- - + {children} - - + +
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx index 360ea8a72a..e3b3b746de 100644 --- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx +++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx @@ -1,11 +1,11 @@ 'use client' import useSWR from 'swr' import produce from 'immer' -import React, { Fragment } from 'react' +import React from 'react' import { usePathname } from 'next/navigation' import { useTranslation } from 'react-i18next' import { RiCloseLine } from '@remixicon/react' -import { Listbox, Transition } from '@headlessui/react' +import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react' import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid' import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks' import type { Item } from '@/app/components/base/select' @@ -92,7 +92,7 @@ const VoiceParamConfig = ({ }} >
- {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder} @@ -103,21 +103,22 @@ const VoiceParamConfig = ({ aria-hidden="true" /> - + - {languages.map((item: Item) => ( - - `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : '' + className={({ focus }) => + `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${focus ? 'bg-gray-100' : '' }` } value={item} @@ -138,9 +139,9 @@ const VoiceParamConfig = ({ )} )} - + ))} - +
@@ -160,7 +161,7 @@ const VoiceParamConfig = ({ }} >
- {voiceItem?.name ?? localVoicePlaceholder} @@ -170,21 +171,22 @@ const VoiceParamConfig = ({ aria-hidden="true" /> - + - {voiceItems?.map((item: Item) => ( - - `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : '' + className={({ focus }) => + `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${focus ? 'bg-gray-100' : '' }` } value={item} @@ -204,9 +206,9 @@ const VoiceParamConfig = ({ )} )} - + ))} - +
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx index 9a80fc0486..152ca51bed 100644 --- a/web/app/components/base/modal/index.tsx +++ b/web/app/components/base/modal/index.tsx @@ -1,5 +1,4 @@ -import { Dialog, Transition } from '@headlessui/react' -import { Fragment } from 'react' +import { Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react' import { XMarkIcon } from '@heroicons/react/24/outline' import classNames from '@/utils/classnames' // https://headlessui.com/react/dialog @@ -28,10 +27,9 @@ export default function Modal({ overflowVisible = false, }: IModal) { return ( - + -
- +
- - - {title && {title} - } - {description && + } + {description && {description} - } + } {closable &&
} {children} - - + +
diff --git a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx index 66227d4f4d..a96146a934 100644 --- a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx +++ b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx @@ -1,7 +1,6 @@ 'use client' import { useTranslation } from 'react-i18next' -import { Fragment } from 'react' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import NotionIcon from '../../notion-icon' import s from './index.module.css' import cn from '@/utils/classnames' @@ -25,7 +24,7 @@ export default function WorkspaceSelector({ { ({ open }) => ( <> - + {currentWorkspace?.workspace_name}
{currentWorkspace?.pages.length}
- + - { items.map(item => ( - +
onSelect(item.workspace_id)} @@ -70,11 +68,11 @@ export default function WorkspaceSelector({ {item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
- + )) } - + ) diff --git a/web/app/components/base/popover/index.tsx b/web/app/components/base/popover/index.tsx index 8dd20efd7c..40afd58d2c 100644 --- a/web/app/components/base/popover/index.tsx +++ b/web/app/components/base/popover/index.tsx @@ -1,5 +1,5 @@ -import { Popover, Transition } from '@headlessui/react' -import { Fragment, cloneElement, useRef } from 'react' +import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react' +import { cloneElement, useRef } from 'react' import s from './style.module.css' import cn from '@/utils/classnames' @@ -60,7 +60,7 @@ export default function CustomPopover({ onMouseEnter: () => onMouseEnter(open), })} > - {btnElement} - - - + + )} - + diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx index 690d068f0d..c8567a9115 100644 --- a/web/app/components/base/select/index.tsx +++ b/web/app/components/base/select/index.tsx @@ -1,7 +1,7 @@ 'use client' import type { FC } from 'react' -import React, { Fragment, useEffect, useState } from 'react' -import { Combobox, Listbox, Transition } from '@headlessui/react' +import React, { useEffect, useState } from 'react' +import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react' import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid' import { useTranslation } from 'react-i18next' import classNames from '@/utils/classnames' @@ -26,7 +26,7 @@ export type Item = { name: string } & Record -export interface ISelectProps { +export type ISelectProps = { className?: string wrapperClassName?: string renderTrigger?: (value: Item | null) => JSX.Element | null @@ -99,7 +99,7 @@ const Select: FC = ({
{allowSearch - ? { if (!disabled) @@ -107,28 +107,29 @@ const Select: FC = ({ }} displayValue={(item: Item) => item?.name} /> - : { if (!disabled) setOpen(!open) } } className={classNames(`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200`, optionClassName)}>
{selectedItem?.name}
- } - } + { if (!disabled) setOpen(!open) } }> {open ? : } - +
{filteredItems.length > 0 && ( - + {filteredItems.map((item: Item) => ( - @@ -159,9 +160,9 @@ const Select: FC = ({ )} )} - + ))} - + )}
@@ -208,9 +209,9 @@ const SimpleSelect: FC = ({ }} >
- {renderTrigger && {renderTrigger(selectedItem)}} + {renderTrigger && {renderTrigger(selectedItem)}} {!renderTrigger && ( - + {selectedItem?.name ?? localPlaceholder} {(selectedItem && !notClearable) @@ -232,24 +233,24 @@ const SimpleSelect: FC = ({ /> )} - + )} {!disabled && ( - + {items.map((item: Item) => ( - + className={({ focus }) => classNames( - `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''}`, + `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${focus ? 'bg-gray-100' : ''}`, optionClassName, ) } @@ -274,9 +275,9 @@ const SimpleSelect: FC = ({ )} )} - + ))} - + )}
@@ -284,7 +285,7 @@ const SimpleSelect: FC = ({ ) } -interface PortalSelectProps { +type PortalSelectProps = { value: string | number onSelect: (value: Item) => void items: Item[] diff --git a/web/app/components/base/select/locale.tsx b/web/app/components/base/select/locale.tsx index 8b89c66950..2e8a85725f 100644 --- a/web/app/components/base/select/locale.tsx +++ b/web/app/components/base/select/locale.tsx @@ -1,6 +1,5 @@ 'use client' -import { Menu, Transition } from '@headlessui/react' -import { Fragment } from 'react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { GlobeAltIcon } from '@heroicons/react/24/outline' type ISelectProps = { @@ -21,17 +20,16 @@ export default function Select({
- +
- +
{items.map((item) => { - return - {({ active }) => ( + return + {({ focus }) => ( )} - + })}
- +
@@ -77,12 +75,11 @@ export function InputSelect({
- + {item?.name} - +
- +
{items.map((item) => { - return - {({ active }) => ( + return + {({ focus }) => ( )} - + })}
- +
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx index c1fbaa1cf8..1715b72c8b 100644 --- a/web/app/components/develop/code.tsx +++ b/web/app/components/develop/code.tsx @@ -7,7 +7,7 @@ import { useRef, useState, } from 'react' -import { Tab } from '@headlessui/react' +import { Tab, TabList, TabPanel, TabPanels } from '@headlessui/react' import { Tag } from './tag' import classNames from '@/utils/classnames' @@ -161,7 +161,7 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) { )} {hasTabs && ( - + {Children.map(children, (child, childIndex) => ( ))} - + )} ) @@ -189,13 +189,13 @@ function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsPro if (hasTabs) { return ( - + {Children.map(children, child => ( - + {child} - + ))} - + ) } diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx index 22819f7de0..641a05cf16 100644 --- a/web/app/components/header/account-dropdown/index.tsx +++ b/web/app/components/header/account-dropdown/index.tsx @@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation' import { useContext } from 'use-context-selector' import { RiArrowDownSLine } from '@remixicon/react' import Link from 'next/link' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import Indicator from '../indicator' import AccountAbout from '../account-about' import { mailToSupport } from '../utils/util' @@ -59,7 +59,7 @@ export default function AppSelector({ isMobile }: IAppSelector) { ({ open }) => ( <>
- } - +
- - +
@@ -99,9 +98,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
{userProfile.email}
- +
- + {t('common.account.account')}
- - + +
setShowAccountSettingModal({ payload: 'members' })}>
{t('common.userProfile.settings')}
- - {canEmailSupport && + + {canEmailSupport && {t('common.userProfile.emailSupport')} - } - + } + {t('common.userProfile.communityFeedback')} - - + + {t('common.userProfile.community')} - - + + {t('common.userProfile.helpCenter')} - - + + {t('common.userProfile.roadmap')} - + { document?.body?.getAttribute('data-public-site-about') !== 'hide' && ( - +
setAboutVisible(true)}>
{t('common.userProfile.about')}
@@ -172,11 +171,11 @@ export default function AppSelector({ isMobile }: IAppSelector) {
- + ) } - +
handleLogout()}>
- - + + ) diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx index 4d21ccdb59..0808a74846 100644 --- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx +++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx @@ -1,7 +1,7 @@ import { Fragment } from 'react' import { useContext } from 'use-context-selector' import { useTranslation } from 'react-i18next' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react' import { RiArrowDownSLine } from '@remixicon/react' import cn from '@/utils/classnames' import { switchWorkspace } from '@/service/common' @@ -34,7 +34,7 @@ const WorkplaceSelector = () => { { ({ open }) => ( <> - {
{currentWorkspace?.name[0].toLocaleUpperCase()}
{currentWorkspace?.name}
- + { leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - { )) } - + ) diff --git a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx index c6c8b9ec39..d48179c9e6 100644 --- a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx +++ b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx @@ -8,7 +8,7 @@ import { RiMoreFill, RiStickyNoteAddLine, } from '@remixicon/react' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common' import Toast from '@/app/components/base/toast' @@ -54,11 +54,10 @@ export default function Operate({ { ({ open }) => ( <> - + - + -
- +
- - + +
{t('common.dataSource.notion.sync')}
- + - +
{t('common.dataSource.notion.remove')}
- - + + ) diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx index e1fe25cb96..563756e001 100644 --- a/web/app/components/header/account-setting/members-page/operation/index.tsx +++ b/web/app/components/header/account-setting/members-page/operation/index.tsx @@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next' import { Fragment, useMemo } from 'react' import { useContext } from 'use-context-selector' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline' import s from './index.module.css' import { useProviderContext } from '@/context/provider-context' @@ -79,7 +79,7 @@ const Operation = ({ { ({ open }) => ( <> - {RoleMap[member.role] || RoleMap.normal} - + - { roleList.map(role => ( - +
handleUpdateMemberRole(role)}> { role === member.role @@ -122,11 +121,11 @@ const Operation = ({
{t(`common.members.${toHump(role)}Tip`)}
- + )) } - +
@@ -136,8 +135,8 @@ const Operation = ({
- - + + ) diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx index 19639488da..268e89da2c 100644 --- a/web/app/components/header/account-setting/menu-dialog.tsx +++ b/web/app/components/header/account-setting/menu-dialog.tsx @@ -1,7 +1,7 @@ -import { Fragment, useCallback, useEffect } from 'react' +import { useCallback, useEffect } from 'react' import type { ReactNode } from 'react' import { RiCloseLine } from '@remixicon/react' -import { Dialog, Transition } from '@headlessui/react' +import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react' import Button from '@/app/components/base/button' import cn from '@/utils/classnames' @@ -33,12 +33,11 @@ const MenuDialog = ({ }, [close]) return ( - + {}}>
- - +
{children} - - + +
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx index 7e44011ead..757a706ff6 100644 --- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx +++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx @@ -1,6 +1,6 @@ import { Fragment } from 'react' import type { FC } from 'react' -import { Popover, Transition } from '@headlessui/react' +import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react' import { useTranslation } from 'react-i18next' import { RiCheckLine, @@ -31,7 +31,7 @@ const Selector: FC = ({ return ( - + { ({ open }) => ( ) } - + - +
{t('common.modelProvider.card.priorityUse')}
{ options.map(option => ( - +
onSelect(option.key)} @@ -62,11 +61,11 @@ const Selector: FC = ({
{option.text}
{value === option.key && }
- + )) }
- + ) diff --git a/web/app/components/header/app-selector/index.tsx b/web/app/components/header/app-selector/index.tsx index 38451f2605..68d14aed36 100644 --- a/web/app/components/header/app-selector/index.tsx +++ b/web/app/components/header/app-selector/index.tsx @@ -1,8 +1,8 @@ 'use client' import { useTranslation } from 'react-i18next' -import { Fragment, useState } from 'react' +import { useState } from 'react' import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { useRouter } from 'next/navigation' import Indicator from '../indicator' import type { AppDetailResponse } from '@/models/app' @@ -30,7 +30,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
- +
- { appItems.map((app: AppDetailResponse) => ( - +
router.push(`/app/${app.id}/${isCurrentWorkspaceEditor ? 'configuration' : 'overview'}`) }> @@ -75,11 +74,11 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
{app.name}
- + )) } )} - {isCurrentWorkspaceEditor && + {isCurrentWorkspaceEditor &&
setShowNewAppDialog(true)}>
{t('common.menus.newApp')}
- + } - + {({ open }) => ( <> - @@ -66,8 +66,8 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }: className={cn('shrink-0 w-3 h-3 ml-1 opacity-50 group-hover:opacity-100', open && '!opacity-100')} aria-hidden="true" /> - - + { navs.map(nav => ( - +
{ if (curNav?.id === nav.id) return @@ -112,12 +112,12 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }: {nav.name}
- + )) } {!isApp && isCurrentWorkspaceEditor && ( - +
onCreate('')} className={cn( 'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100', )}> @@ -126,13 +126,13 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
{createText}
- + )} {isApp && isCurrentWorkspaceEditor && ( {({ open }) => ( <> - +
{createText}
- + -
@@ -172,13 +171,13 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }: {t('app.importDSL')}
- + )} )} - + )} diff --git a/web/package.json b/web/package.json index 162209c05b..eb1a3299ff 100644 --- a/web/package.json +++ b/web/package.json @@ -29,7 +29,7 @@ "@emoji-mart/data": "^1.2.1", "@floating-ui/react": "^0.25.2", "@formatjs/intl-localematcher": "^0.5.6", - "@headlessui/react": "^1.7.13", + "@headlessui/react": "^2.2.0", "@heroicons/react": "^2.0.16", "@hookform/resolvers": "^3.3.4", "@lexical/react": "^0.18.0", @@ -153,9 +153,9 @@ "eslint": "^9.13.0", "eslint-config-next": "^15.0.0", "eslint-plugin-react-hooks": "^5.0.0", - "husky": "^9.1.6", "eslint-plugin-react-refresh": "^0.4.13", "eslint-plugin-storybook": "^0.10.1", + "husky": "^9.1.6", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "lint-staged": "^15.2.10", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 8ecd62395f..510ea192f1 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -29,8 +29,8 @@ importers: specifier: ^0.5.6 version: 0.5.6 '@headlessui/react': - specifier: ^1.7.13 - version: 1.7.19(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + specifier: ^2.2.0 + version: 2.2.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@heroicons/react': specifier: ^2.0.16 version: 2.1.5(react@18.2.0) @@ -1433,6 +1433,12 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' + '@floating-ui/react@0.26.25': + resolution: {integrity: sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + '@floating-ui/utils@0.1.6': resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==} @@ -1442,12 +1448,12 @@ packages: '@formatjs/intl-localematcher@0.5.6': resolution: {integrity: sha512-roz1+Ba5e23AHX6KUAWmLEyTRZegM5YDuxuvkHCyK3RJddf/UXB2f+s7pOMm9ktfPGla0g+mQXOn5vsuYirnaA==} - '@headlessui/react@1.7.19': - resolution: {integrity: sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==} + '@headlessui/react@2.2.0': + resolution: {integrity: sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==} engines: {node: '>=10'} peerDependencies: - react: ^16 || ^17 || ^18 - react-dom: ^16 || ^17 || ^18 + react: ^18 || ^19 || ^19.0.0-rc + react-dom: ^18 || ^19 || ^19.0.0-rc '@heroicons/react@2.1.5': resolution: {integrity: sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==} @@ -1981,6 +1987,37 @@ packages: webpack-plugin-serve: optional: true + '@react-aria/focus@3.18.4': + resolution: {integrity: sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0 + + '@react-aria/interactions@3.22.4': + resolution: {integrity: sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0 + + '@react-aria/ssr@3.9.6': + resolution: {integrity: sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==} + engines: {node: '>= 12'} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0 + + '@react-aria/utils@3.25.3': + resolution: {integrity: sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0 + + '@react-stately/utils@3.10.4': + resolution: {integrity: sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0 + + '@react-types/shared@3.25.0': + resolution: {integrity: sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0 + '@reactflow/background@11.3.14': resolution: {integrity: sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==} peerDependencies: @@ -9353,6 +9390,14 @@ snapshots: react-dom: 18.2.0(react@18.2.0) tabbable: 6.2.0 + '@floating-ui/react@0.26.25(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + dependencies: + '@floating-ui/react-dom': 2.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@floating-ui/utils': 0.2.8 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tabbable: 6.2.0 + '@floating-ui/utils@0.1.6': {} '@floating-ui/utils@0.2.8': {} @@ -9361,10 +9406,12 @@ snapshots: dependencies: tslib: 2.8.0 - '@headlessui/react@1.7.19(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + '@headlessui/react@2.2.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: + '@floating-ui/react': 0.26.25(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@react-aria/focus': 3.18.4(react@18.2.0) + '@react-aria/interactions': 3.22.4(react@18.2.0) '@tanstack/react-virtual': 3.10.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0) - client-only: 0.0.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -10001,6 +10048,46 @@ snapshots: type-fest: 2.19.0 webpack-hot-middleware: 2.26.1 + '@react-aria/focus@3.18.4(react@18.2.0)': + dependencies: + '@react-aria/interactions': 3.22.4(react@18.2.0) + '@react-aria/utils': 3.25.3(react@18.2.0) + '@react-types/shared': 3.25.0(react@18.2.0) + '@swc/helpers': 0.5.5 + clsx: 2.1.1 + react: 18.2.0 + + '@react-aria/interactions@3.22.4(react@18.2.0)': + dependencies: + '@react-aria/ssr': 3.9.6(react@18.2.0) + '@react-aria/utils': 3.25.3(react@18.2.0) + '@react-types/shared': 3.25.0(react@18.2.0) + '@swc/helpers': 0.5.5 + react: 18.2.0 + + '@react-aria/ssr@3.9.6(react@18.2.0)': + dependencies: + '@swc/helpers': 0.5.5 + react: 18.2.0 + + '@react-aria/utils@3.25.3(react@18.2.0)': + dependencies: + '@react-aria/ssr': 3.9.6(react@18.2.0) + '@react-stately/utils': 3.10.4(react@18.2.0) + '@react-types/shared': 3.25.0(react@18.2.0) + '@swc/helpers': 0.5.5 + clsx: 2.1.1 + react: 18.2.0 + + '@react-stately/utils@3.10.4(react@18.2.0)': + dependencies: + '@swc/helpers': 0.5.5 + react: 18.2.0 + + '@react-types/shared@3.25.0(react@18.2.0)': + dependencies: + react: 18.2.0 + '@reactflow/background@11.3.14(@types/react@18.2.79)(immer@9.0.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@reactflow/core': 11.11.4(@types/react@18.2.79)(immer@9.0.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)