From 24080010c9a1dcd877492b28994140bd66ddc69c Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 22 Jun 2026 10:17:07 +0800
Subject: [PATCH] chore(deps): bump base-ui to v1.6.0 (#37663)
---
packages/dify-ui/src/autocomplete/index.tsx | 6 ++---
packages/dify-ui/src/button/index.tsx | 2 +-
packages/dify-ui/src/collapsible/index.tsx | 2 +-
packages/dify-ui/src/combobox/index.tsx | 8 +++----
packages/dify-ui/src/context-menu/index.tsx | 2 +-
packages/dify-ui/src/dialog/index.tsx | 7 +++---
packages/dify-ui/src/dropdown-menu/index.tsx | 2 +-
.../src/file-tree/__tests__/index.spec.tsx | 2 +-
packages/dify-ui/src/file-tree/index.tsx | 4 ++--
.../src/number-field/__tests__/index.spec.tsx | 4 ++--
.../src/number-field/index.stories.tsx | 5 ----
packages/dify-ui/src/number-field/index.tsx | 4 ++--
packages/dify-ui/src/overlay-shared.ts | 2 +-
.../dify-ui/src/pagination/index.stories.tsx | 8 -------
packages/dify-ui/src/pagination/index.tsx | 2 +-
.../src/scroll-area/__tests__/index.spec.tsx | 8 +++++++
.../dify-ui/src/scroll-area/index.stories.tsx | 2 +-
packages/dify-ui/src/scroll-area/index.tsx | 2 +-
.../src/segmented-control/index.stories.tsx | 6 -----
packages/dify-ui/src/select/index.tsx | 6 ++---
packages/dify-ui/src/tooltip/index.tsx | 2 +-
pnpm-lock.yaml | 24 +++++++++----------
pnpm-workspace.yaml | 2 +-
23 files changed, 50 insertions(+), 62 deletions(-)
diff --git a/packages/dify-ui/src/autocomplete/index.tsx b/packages/dify-ui/src/autocomplete/index.tsx
index b362a9450fd..4d115024ab1 100644
--- a/packages/dify-ui/src/autocomplete/index.tsx
+++ b/packages/dify-ui/src/autocomplete/index.tsx
@@ -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: {
diff --git a/packages/dify-ui/src/button/index.tsx b/packages/dify-ui/src/button/index.tsx
index 2181b880a55..0d36d7d1510 100644
--- a/packages/dify-ui/src/button/index.tsx
+++ b/packages/dify-ui/src/button/index.tsx
@@ -131,7 +131,7 @@ export function Button({
{children}
{loading && (
)}
diff --git a/packages/dify-ui/src/collapsible/index.tsx b/packages/dify-ui/src/collapsible/index.tsx
index 550584d5da1..73f54c4d2cc 100644
--- a/packages/dify-ui/src/collapsible/index.tsx
+++ b/packages/dify-ui/src/collapsible/index.tsx
@@ -35,7 +35,7 @@ export function CollapsibleTrigger({
return (
{children}
-
+
)
}
diff --git a/packages/dify-ui/src/dialog/index.tsx b/packages/dify-ui/src/dialog/index.tsx
index 5162a1a35af..9e08da21e58 100644
--- a/packages/dify-ui/src/dialog/index.tsx
+++ b/packages/dify-ui/src/dialog/index.tsx
@@ -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
@@ -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 (
-
+
{children}
-
+
)
}
diff --git a/packages/dify-ui/src/dropdown-menu/index.tsx b/packages/dify-ui/src/dropdown-menu/index.tsx
index 9f873a88ae1..7cb585dab3d 100644
--- a/packages/dify-ui/src/dropdown-menu/index.tsx
+++ b/packages/dify-ui/src/dropdown-menu/index.tsx
@@ -191,7 +191,7 @@ export function DropdownMenuSubTrigger({
{...props}
>
{children}
-
+
)
}
diff --git a/packages/dify-ui/src/file-tree/__tests__/index.spec.tsx b/packages/dify-ui/src/file-tree/__tests__/index.spec.tsx
index 1734189df1f..3475b2f5b1e 100644
--- a/packages/dify-ui/src/file-tree/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/file-tree/__tests__/index.spec.tsx
@@ -77,7 +77,7 @@ describe('FileTree', () => {
const screen = await render()
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)]')
diff --git a/packages/dify-ui/src/file-tree/index.tsx b/packages/dify-ui/src/file-tree/index.tsx
index f3e42e7a41f..b085fc5c79b 100644
--- a/packages/dify-ui/src/file-tree/index.tsx
+++ b/packages/dify-ui/src/file-tree/index.tsx
@@ -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,
),
}
diff --git a/packages/dify-ui/src/number-field/__tests__/index.spec.tsx b/packages/dify-ui/src/number-field/__tests__/index.spec.tsx
index c05b46eb900..d130be6413a 100644
--- a/packages/dify-ui/src/number-field/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/number-field/__tests__/index.spec.tsx
@@ -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: {
diff --git a/packages/dify-ui/src/number-field/index.stories.tsx b/packages/dify-ui/src/number-field/index.stories.tsx
index 3d85b42c096..284148c56ff 100644
--- a/packages/dify-ui/src/number-field/index.stories.tsx
+++ b/packages/dify-ui/src/number-field/index.stories.tsx
@@ -207,11 +207,6 @@ export const States: Story = {
),
- parameters: {
- a11y: {
- test: 'todo',
- },
- },
}
function ControlledDemo() {
diff --git a/packages/dify-ui/src/number-field/index.tsx b/packages/dify-ui/src/number-field/index.tsx
index 2ff6fb53c08..f5babeea95e 100644
--- a/packages/dify-ui/src/number-field/index.tsx
+++ b/packages/dify-ui/src/number-field/index.tsx
@@ -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: {
diff --git a/packages/dify-ui/src/overlay-shared.ts b/packages/dify-ui/src/overlay-shared.ts
index d6d3a05b9d0..2d90dd372af 100644
--- a/packages/dify-ui/src/overlay-shared.ts
+++ b/packages/dify-ui/src/overlay-shared.ts
@@ -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]'
diff --git a/packages/dify-ui/src/pagination/index.stories.tsx b/packages/dify-ui/src/pagination/index.stories.tsx
index 6ffab6bfee9..47beccaf95f 100644
--- a/packages/dify-ui/src/pagination/index.stories.tsx
+++ b/packages/dify-ui/src/pagination/index.stories.tsx
@@ -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: () => ,
parameters: {
- a11y: {
- test: 'todo',
- },
docs: {
description: {
story: 'Pagination rows with default, hover-like, focused, page-size, and skeleton examples.',
diff --git a/packages/dify-ui/src/pagination/index.tsx b/packages/dify-ui/src/pagination/index.tsx
index 386017828cc..4e5ebf2877c 100644
--- a/packages/dify-ui/src/pagination/index.tsx
+++ b/packages/dify-ui/src/pagination/index.tsx
@@ -355,7 +355,7 @@ export function PaginationPageJump({
return (
{
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',
)
})
})
diff --git a/packages/dify-ui/src/scroll-area/index.stories.tsx b/packages/dify-ui/src/scroll-area/index.stories.tsx
index 27f427eb69f..fa32ae048ca 100644
--- a/packages/dify-ui/src/scroll-area/index.stories.tsx
+++ b/packages/dify-ui/src/scroll-area/index.stories.tsx
@@ -366,7 +366,7 @@ export const AppSidebar: Story = {
))}
-
+
diff --git a/packages/dify-ui/src/scroll-area/index.tsx b/packages/dify-ui/src/scroll-area/index.tsx
index 1adea78ee35..fec7daa574d 100644
--- a/packages/dify-ui/src/scroll-area/index.tsx
+++ b/packages/dify-ui/src/scroll-area/index.tsx
@@ -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',
)
diff --git a/packages/dify-ui/src/segmented-control/index.stories.tsx b/packages/dify-ui/src/segmented-control/index.stories.tsx
index ead9931898b..f2b6f9cc1f5 100644
--- a/packages/dify-ui/src/segmented-control/index.stories.tsx
+++ b/packages/dify-ui/src/segmented-control/index.stories.tsx
@@ -113,9 +113,6 @@ export const DesignSpec: Story = {
),
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 = {
),
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.',
diff --git a/packages/dify-ui/src/select/index.tsx b/packages/dify-ui/src/select/index.tsx
index 046afccf3b3..6667f06770f 100644
--- a/packages/dify-ui/src/select/index.tsx
+++ b/packages/dify-ui/src/select/index.tsx
@@ -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 (
)
@@ -207,7 +207,7 @@ export function SelectItemIndicator({
}: Omit) {
return (
diff --git a/packages/dify-ui/src/tooltip/index.tsx b/packages/dify-ui/src/tooltip/index.tsx
index 36f9fd0f51d..359fb532e83 100644
--- a/packages/dify-ui/src/tooltip/index.tsx
+++ b/packages/dify-ui/src/tooltip/index.tsx
@@ -62,7 +62,7 @@ export function TooltipContent({
>
=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'
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 8aaafed7267..0971ce8a1f5 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -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