opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-06-22 19:21:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(deps): bump base-ui to v1.6.0 (#37663)

Browse Source
This commit is contained in:
yyh 2026-06-22 10:17:07 +08:00 committed by GitHub
parent 3a3ad6ad7c
commit 24080010c9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 50 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dify-ui/src/autocomplete/index.tsx
View File

@ -145,9 +145,9 @@ const autocompleteControlVariants = cva(
{
variants: {
size: {
small: 'mr-1 size-4',
medium: 'mr-1.5 size-5',
large: 'mr-2 size-5',
small: 'me-1 size-4',
medium: 'me-1.5 size-5',
large: 'me-2 size-5',
},
},
defaultVariants: {

2
packages/dify-ui/src/button/index.tsx
View File

@ -131,7 +131,7 @@ export function Button({
{children}
{loading && (
<i
className="ml-1 i-ri-loader-2-line size-3 animate-spin motion-reduce:animate-none"
className="ms-1 i-ri-loader-2-line size-3 animate-spin motion-reduce:animate-none"
aria-hidden="true"
/>
)}

2
packages/dify-ui/src/collapsible/index.tsx
View File

@ -35,7 +35,7 @@ export function CollapsibleTrigger({
return (
<BaseCollapsible.Trigger
className={cn(
'group flex min-h-8 w-full touch-manipulation items-center justify-between gap-2 rounded-lg px-2.5 text-left system-sm-medium text-text-secondary outline-hidden select-none',
'group flex min-h-8 w-full touch-manipulation items-center justify-between gap-2 rounded-lg px-2.5 text-start system-sm-medium text-text-secondary outline-hidden select-none',
'hover:not-data-disabled:bg-components-panel-on-panel-item-bg-hover hover:not-data-disabled:text-text-primary',
'focus-visible:ring-2 focus-visible:ring-state-accent-solid',
'data-panel-open:text-text-primary',

8
packages/dify-ui/src/combobox/index.tsx
View File

@ -50,7 +50,7 @@ const comboboxItemClassName = [
const comboboxTriggerVariants = cva(
[
'group/combobox-trigger flex w-full min-w-0 items-center border-0 bg-components-input-bg-normal text-left text-components-input-text-filled outline-hidden transition-colors',
'group/combobox-trigger flex w-full min-w-0 items-center border-0 bg-components-input-bg-normal text-start text-components-input-text-filled outline-hidden transition-colors',
'hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt data-popup-open:bg-state-base-hover-alt',
'focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:ring-inset',
'data-placeholder:text-components-input-text-placeholder',
@ -207,9 +207,9 @@ const comboboxControlVariants = cva(
{
variants: {
size: {
small: 'mr-1 size-4',
medium: 'mr-1.5 size-5',
large: 'mr-2 size-5',
small: 'me-1 size-4',
medium: 'me-1.5 size-5',
large: 'me-2 size-5',
},
},
defaultVariants: {

2
packages/dify-ui/src/context-menu/index.tsx
View File

@ -219,7 +219,7 @@ export function ContextMenuSubTrigger({
{...props}
>
{children}
<span aria-hidden className="ml-auto i-ri-arrow-right-s-line size-4 shrink-0 text-text-tertiary" />
<span aria-hidden className="ms-auto i-ri-arrow-right-s-line size-4 shrink-0 text-text-tertiary" />
</BaseContextMenu.SubmenuTrigger>
)
}

7
packages/dify-ui/src/dialog/index.tsx
View File

@ -8,7 +8,6 @@ export const Dialog = BaseDialog.Root
export const DialogTrigger = BaseDialog.Trigger
export const DialogTitle = BaseDialog.Title
export const DialogDescription = BaseDialog.Description
export const DialogPortal = BaseDialog.Portal
type DialogCloseButtonProps = Omit<BaseDialog.Close.Props, 'children'>
@ -22,7 +21,7 @@ export function DialogCloseButton({
aria-label={ariaLabel}
{...props}
className={cn(
'absolute top-6 right-6 z-10 flex h-5 w-5 cursor-pointer items-center justify-center rounded-2xl hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
'absolute top-6 end-6 z-10 flex h-5 w-5 cursor-pointer items-center justify-center rounded-2xl hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
>
@ -45,7 +44,7 @@ export function DialogContent({
backdropProps,
}: DialogContentProps) {
return (
<DialogPortal>
<BaseDialog.Portal>
<BaseDialog.Backdrop
{...backdropProps}
className={cn(
@ -63,6 +62,6 @@ export function DialogContent({
>
{children}
</BaseDialog.Popup>
</DialogPortal>
</BaseDialog.Portal>
)
}

2
packages/dify-ui/src/dropdown-menu/index.tsx
View File

@ -191,7 +191,7 @@ export function DropdownMenuSubTrigger({
{...props}
>
{children}
<span aria-hidden className="ml-auto i-ri-arrow-right-s-line size-4 shrink-0 text-text-tertiary" />
<span aria-hidden className="ms-auto i-ri-arrow-right-s-line size-4 shrink-0 text-text-tertiary" />
</Menu.SubmenuTrigger>
)
}

2
packages/dify-ui/src/file-tree/__tests__/index.spec.tsx
View File

@ -77,7 +77,7 @@ describe('FileTree', () => {
const screen = await render(<TestFileTree />)
await expect.element(screen.getByLabelText('Project files')).toHaveClass('gap-px', 'p-1')
await expect.element(screen.getByRole('button', { name: 'button.tsx' })).toHaveClass('h-6', 'rounded-md', 'pl-2', 'pr-1.5', 'data-[selected]:bg-state-base-active')
await expect.element(screen.getByRole('button', { name: 'button.tsx' })).toHaveClass('h-6', 'rounded-md', 'ps-2', 'pe-1.5', 'data-[selected]:bg-state-base-active')
await expect.element(screen.getByText('button.tsx')).toHaveClass('group-data-[selected]/file-tree-row:system-sm-medium', 'group-data-[selected]/file-tree-row:text-text-primary')
await expect.element(screen.getByText('README.md')).toHaveAttribute('data-label', 'README.md')
await expect.element(screen.getByText('README.md')).toHaveClass('after:content-[attr(data-label)]')

4
packages/dify-ui/src/file-tree/index.tsx
View File

@ -36,7 +36,7 @@ function fileTreeRowClassName({
className?: string
}) {
return cn(
'group/file-tree-row relative flex h-6 w-full min-w-0 cursor-pointer items-center rounded-md pl-2 pr-1.5 text-left outline-hidden select-none',
'group/file-tree-row relative flex h-6 w-full min-w-0 cursor-pointer items-center rounded-md ps-2 pe-1.5 text-start outline-hidden select-none',
'hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-state-accent-solid',
'data-[selected]:bg-state-base-active',
'data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent',
@ -361,7 +361,7 @@ export function FileTreeBadge({
}: FileTreeBadgeProps) {
const defaultProps: useRender.ElementProps<'span'> = {
className: cn(
'ml-1 inline-flex min-w-4 shrink-0 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 system-2xs-medium-uppercase text-text-tertiary',
'ms-1 inline-flex min-w-4 shrink-0 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 system-2xs-medium-uppercase text-text-tertiary',
className,
),
}

4
packages/dify-ui/src/number-field/__tests__/index.spec.tsx
View File

@ -133,8 +133,8 @@ describe('NumberField wrapper', () => {
describe('Unit and controls', () => {
it.each([
['medium', 'pr-2'],
['large', 'pr-2.5'],
['medium', 'pe-2'],
['large', 'pe-2.5'],
] as const)('should apply the %s unit spacing variant', async (size, spacingClass) => {
const screen = await renderNumberField({
unitProps: {

5
packages/dify-ui/src/number-field/index.stories.tsx
View File

@ -207,11 +207,6 @@ export const States: Story = {
</FieldRoot>
</div>
),
parameters: {
a11y: {
test: 'todo',
},
},
}
function ControlledDemo() {

4
packages/dify-ui/src/number-field/index.tsx
View File

@ -100,8 +100,8 @@ export const numberFieldUnitVariants = cva(
{
variants: {
size: {
medium: 'pr-2',
large: 'pr-2.5',
medium: 'pe-2',
large: 'pe-2.5',
},
},
defaultVariants: {

2
packages/dify-ui/src/overlay-shared.ts
View File

@ -2,7 +2,7 @@ export type OverlayItemVariant = 'default' | 'destructive'
export const overlayRowClassName = 'mx-1 flex h-8 cursor-pointer select-none items-center gap-1 rounded-lg px-2 outline-hidden data-highlighted:bg-state-base-hover data-disabled:cursor-not-allowed data-disabled:opacity-30'
export const overlayDestructiveClassName = 'data-[variant=destructive]:text-text-destructive data-[variant=destructive]:data-highlighted:bg-state-destructive-hover'
export const overlayIndicatorClassName = 'ml-auto flex shrink-0 items-center text-text-accent'
export const overlayIndicatorClassName = 'ms-auto flex shrink-0 items-center text-text-accent'
export const overlayLabelClassName = 'px-3 pb-0.5 pt-1 text-text-tertiary system-xs-medium-uppercase'
export const overlaySeparatorClassName = 'my-1 h-px bg-divider-subtle'
export const overlayPopupBaseClassName = 'max-h-(--available-height) overflow-y-auto overflow-x-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur py-1 text-sm text-text-secondary shadow-lg outline-hidden focus:outline-hidden focus-visible:outline-hidden backdrop-blur-[5px]'

8
packages/dify-ui/src/pagination/index.stories.tsx
View File

@ -87,19 +87,11 @@ export const Playground: Story = {
await userEvent.click(canvas.getByRole('button', { name: '50' }))
await expect(canvas.getByRole('button', { name: '50' })).toHaveAttribute('aria-pressed', 'true')
},
parameters: {
a11y: {
test: 'todo',
},
},
}
export const DesignSpec: Story = {
render: () => <DesignSpecDemo />,
parameters: {
a11y: {
test: 'todo',
},
docs: {
description: {
story: 'Pagination rows with default, hover-like, focused, page-size, and skeleton examples.',

2
packages/dify-ui/src/pagination/index.tsx
View File

@ -355,7 +355,7 @@ export function PaginationPageJump({
return (
<span
data-page-summary={`${pagination.page}/${pagination.totalPages}`}
className="inline-grid h-7 system-xs-medium tabular-nums after:invisible after:col-start-1 after:row-start-1 after:py-1.5 after:pr-3 after:pl-2 after:content-[attr(data-page-summary)]"
className="inline-grid h-7 system-xs-medium tabular-nums after:invisible after:col-start-1 after:row-start-1 after:py-1.5 after:pe-3 after:ps-2 after:content-[attr(data-page-summary)]"
>
<NumberField
key={pagination.page}

8
packages/dify-ui/src/scroll-area/__tests__/index.spec.tsx
View File

@ -120,6 +120,7 @@ describe('scroll-area wrapper', () => {
await expect.element(screen.getByTestId('scroll-area-vertical-scrollbar')).toHaveAttribute('data-orientation', 'vertical')
await expect.element(screen.getByTestId('scroll-area-vertical-scrollbar')).toHaveAttribute('data-dify-scrollbar')
await expect.element(screen.getByTestId('scroll-area-vertical-scrollbar')).toHaveClass(
'group/scrollbar',
'flex',
'overflow-clip',
'p-1',
@ -144,6 +145,9 @@ describe('scroll-area wrapper', () => {
'transition-[background-color]',
'motion-reduce:transition-none',
'data-[orientation=vertical]:w-1',
'group-data-hovering/scrollbar:bg-state-base-handle-hover',
'data-scrolling:bg-state-base-handle-hover',
'active:bg-state-base-handle-hover',
)
})
@ -153,6 +157,7 @@ describe('scroll-area wrapper', () => {
await expect.element(screen.getByTestId('scroll-area-horizontal-scrollbar')).toHaveAttribute('data-orientation', 'horizontal')
await expect.element(screen.getByTestId('scroll-area-horizontal-scrollbar')).toHaveAttribute('data-dify-scrollbar')
await expect.element(screen.getByTestId('scroll-area-horizontal-scrollbar')).toHaveClass(
'group/scrollbar',
'flex',
'overflow-clip',
'p-1',
@ -177,6 +182,9 @@ describe('scroll-area wrapper', () => {
'transition-[background-color]',
'motion-reduce:transition-none',
'data-[orientation=horizontal]:h-1',
'group-data-hovering/scrollbar:bg-state-base-handle-hover',
'data-scrolling:bg-state-base-handle-hover',
'active:bg-state-base-handle-hover',
)
})
})

2
packages/dify-ui/src/scroll-area/index.stories.tsx
View File

@ -366,7 +366,7 @@ export const AppSidebar: Story = {
))}
</VerticalContent>
</ScrollAreaViewport>
<ScrollAreaScrollbar className="data-[orientation=vertical]:my-2 data-[orientation=vertical]:me-1">
<ScrollAreaScrollbar>
<ScrollAreaThumb />
</ScrollAreaScrollbar>
</ScrollAreaRoot>

2
packages/dify-ui/src/scroll-area/index.tsx
View File

@ -36,7 +36,7 @@ const scrollAreaThumbClassName = cn(
'data-[orientation=vertical]:w-1',
'data-[orientation=horizontal]:h-1',
'group-data-hovering/scrollbar:bg-state-base-handle-hover',
'group-data-scrolling/scrollbar:bg-state-base-handle-hover',
'data-scrolling:bg-state-base-handle-hover',
'active:bg-state-base-handle-hover',
)

6
packages/dify-ui/src/segmented-control/index.stories.tsx
View File

@ -113,9 +113,6 @@ export const DesignSpec: Story = {
</div>
),
parameters: {
a11y: {
test: 'todo',
},
docs: {
description: {
story: 'Figma node 2473:9851: segmented control examples with text+icon and icon-only rows, with and without outer padding.',
@ -171,9 +168,6 @@ export const DataAttributeStates: Story = {
</div>
),
parameters: {
a11y: {
test: 'todo',
},
docs: {
description: {
story: '`SegmentedControlItem` gets `data-pressed` and `data-disabled` from Base UI Toggle. Accent, neutral, and multiple-selection examples are composed through props and className.',

6
packages/dify-ui/src/select/index.tsx
View File

@ -22,7 +22,7 @@ export const SelectGroup = BaseSelect.Group
const selectTriggerVariants = cva(
[
'group flex w-full items-center border-0 bg-components-input-bg-normal text-left text-components-input-text-filled outline-hidden',
'group flex w-full items-center border-0 bg-components-input-bg-normal text-start text-components-input-text-filled outline-hidden',
'hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt data-popup-open:bg-state-base-hover-alt',
'focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:ring-inset',
'data-placeholder:text-components-input-text-placeholder',
@ -195,7 +195,7 @@ export function SelectItemText({
}: BaseSelect.ItemText.Props) {
return (
<BaseSelect.ItemText
className={cn('mr-1 min-w-0 grow truncate px-1', className)}
className={cn('me-1 min-w-0 grow truncate px-1', className)}
{...props}
/>
)
@ -207,7 +207,7 @@ export function SelectItemIndicator({
}: Omit<BaseSelect.ItemIndicator.Props, 'children'>) {
return (
<BaseSelect.ItemIndicator
className={cn('ml-auto flex shrink-0 items-center text-text-accent', className)}
className={cn('ms-auto flex shrink-0 items-center text-text-accent', className)}
{...props}
>
<span className="i-ri-check-line h-4 w-4" aria-hidden />

2
packages/dify-ui/src/tooltip/index.tsx
View File

@ -62,7 +62,7 @@ export function TooltipContent({
>
<BaseTooltip.Popup
className={cn(
'max-w-[300px] rounded-md bg-components-panel-bg px-3 py-2 text-left system-xs-regular wrap-break-word text-text-tertiary shadow-lg',
'max-w-[300px] rounded-md bg-components-panel-bg px-3 py-2 text-start system-xs-regular wrap-break-word text-text-tertiary shadow-lg',
'origin-(--transform-origin) transition-opacity data-ending-style:opacity-0 data-instant:transition-none data-starting-style:opacity-0 motion-reduce:transition-none',
className,
)}

24
pnpm-lock.yaml generated
View File

@ -16,8 +16,8 @@ catalogs:
specifier: 9.0.0
version: 9.0.0
'@base-ui/react':
specifier: 1.5.0
version: 1.5.0
specifier: 1.6.0
version: 1.6.0
'@chromatic-com/storybook':
specifier: 5.2.1
version: 5.2.1
@ -864,7 +864,7 @@ importers:
devDependencies:
'@base-ui/react':
specifier: 'catalog:'
version: 1.5.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
version: 1.6.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
'@chromatic-com/storybook':
specifier: 'catalog:'
version: 5.2.1(storybook@10.4.4(@testing-library/dom@10.4.1)(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(@voidzero-dev/vite-plus-core@0.1.24(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.22.4)(typescript@6.0.3)(yaml@2.9.0))(esbuild@0.28.1)(happy-dom@20.10.3)(jiti@2.7.0)(tsx@4.22.4)(typescript@6.0.3)(yaml@2.9.0)))
@ -1038,7 +1038,7 @@ importers:
version: 1.32.1(@amplitude/rrweb@2.0.0-alpha.40)
'@base-ui/react':
specifier: 'catalog:'
version: 1.5.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
version: 1.6.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
'@emoji-mart/data':
specifier: 'catalog:'
version: 1.2.1
@ -1829,8 +1829,8 @@ packages:
resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
engines: {node: '>=6.9.0'}
'@base-ui/react@1.5.0':
resolution: {integrity: sha512-z1gSAlced1yY+iM+mHDEtIkD8UI3Ebs52MuBPxvV6f5hRutk+xvCH/wuB7hDqDzK9JG5FoMz5nhrqtSs1wjt1A==}
'@base-ui/react@1.6.0':
resolution: {integrity: sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@date-fns/tz': ^1.2.0
@ -1846,8 +1846,8 @@ packages:
date-fns:
optional: true
'@base-ui/utils@0.2.9':
resolution: {integrity: sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw==}
'@base-ui/utils@0.3.1':
resolution: {integrity: sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg==}
peerDependencies:
'@types/react': ^17 || ^18 || ^19
react: ^17 || ^18 || ^19
@ -10176,10 +10176,10 @@ snapshots:
'@babel/helper-string-parser': 7.29.7
'@babel/helper-validator-identifier': 7.29.7
'@base-ui/react@1.5.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
'@base-ui/react@1.6.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
dependencies:
'@babel/runtime': 7.29.2
'@base-ui/utils': 0.2.9(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
'@base-ui/utils': 0.3.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
'@floating-ui/react-dom': 2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
'@floating-ui/utils': 0.2.11
react: 19.2.7
@ -10188,7 +10188,7 @@ snapshots:
optionalDependencies:
'@types/react': 19.2.17
'@base-ui/utils@0.2.9(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
'@base-ui/utils@0.3.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
dependencies:
'@babel/runtime': 7.29.2
'@floating-ui/utils': 0.2.11
@ -19321,7 +19321,7 @@ time:
'@amplitude/analytics-browser@2.44.1': '2026-06-11T23:28:53.586Z'
'@amplitude/plugin-session-replay-browser@1.32.1': '2026-06-13T00:09:40.086Z'
'@antfu/eslint-config@9.0.0': '2026-05-11T06:18:58.474Z'
'@base-ui/react@1.5.0': '2026-05-19T13:22:48.843Z'
'@base-ui/react@1.6.0': '2026-06-18T12:04:15.326Z'
'@chromatic-com/storybook@5.2.1': '2026-05-14T07:49:29.364Z'
'@cucumber/cucumber@13.0.0': '2026-06-02T07:10:03.122Z'
'@egoist/tailwindcss-icons@1.9.2': '2026-01-31T10:48:44.594Z'

2
pnpm-workspace.yaml
View File

@ -54,7 +54,7 @@ catalog:
'@amplitude/analytics-browser': 2.44.1
'@amplitude/plugin-session-replay-browser': 1.32.1
'@antfu/eslint-config': 9.0.0
'@base-ui/react': 1.5.0
'@base-ui/react': 1.6.0
'@chromatic-com/storybook': 5.2.1
'@cucumber/cucumber': 13.0.0
'@egoist/tailwindcss-icons': 1.9.2