From b38a2cfb58feb79b3baff10eff19e21480da1563 Mon Sep 17 00:00:00 2001 From: WK Date: Fri, 17 Oct 2025 10:41:49 +0800 Subject: [PATCH 01/12] fix(theme): tab cursor (#5816) * fix(theme): remove inset-0 for tab cursor * chore(deps): bump theme peerDep * chore: add changeset --- .changeset/famous-panthers-rush.md | 6 ++++++ packages/components/tabs/package.json | 2 +- packages/core/theme/src/components/tabs.ts | 6 +----- 3 files changed, 8 insertions(+), 6 deletions(-) create mode 100644 .changeset/famous-panthers-rush.md diff --git a/.changeset/famous-panthers-rush.md b/.changeset/famous-panthers-rush.md new file mode 100644 index 0000000000..6625412cf0 --- /dev/null +++ b/.changeset/famous-panthers-rush.md @@ -0,0 +1,6 @@ +--- +"@heroui/tabs": patch +"@heroui/theme": patch +--- + +fix tab cursor (#5790, #5809) diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json index 84a2b34391..74f965d8f5 100644 --- a/packages/components/tabs/package.json +++ b/packages/components/tabs/package.json @@ -37,7 +37,7 @@ "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0", "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1", - "@heroui/theme": ">=2.4.22", + "@heroui/theme": ">=2.4.23", "@heroui/system": ">=2.4.18" }, "dependencies": { diff --git a/packages/core/theme/src/components/tabs.ts b/packages/core/theme/src/components/tabs.ts index 848abcbe54..f2da25d21c 100644 --- a/packages/core/theme/src/components/tabs.ts +++ b/packages/core/theme/src/components/tabs.ts @@ -85,12 +85,9 @@ const tabs = tv({ }, variants: { variant: { - solid: { - cursor: "inset-0", - }, + solid: {}, light: { tabList: "bg-transparent dark:bg-transparent", - cursor: "inset-0", }, underlined: { tabList: "bg-transparent dark:bg-transparent", @@ -98,7 +95,6 @@ const tabs = tv({ }, bordered: { tabList: "bg-transparent dark:bg-transparent border-medium border-default-200 shadow-xs", - cursor: "inset-0", }, }, color: { From 2922b35644d8136d593ce08cccf9c78c08d00e0f Mon Sep 17 00:00:00 2001 From: WK Date: Sun, 19 Oct 2025 11:35:18 +0800 Subject: [PATCH 02/12] fix(autocomplete): close button display on mobile (#5827) * fix(autocomplete): close button display on mobile * refactor(autocomplete): disable isClearable if isDisabled is true --- .changeset/four-candles-applaud.md | 5 +++++ packages/components/autocomplete/src/use-autocomplete.ts | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/four-candles-applaud.md diff --git a/.changeset/four-candles-applaud.md b/.changeset/four-candles-applaud.md new file mode 100644 index 0000000000..9dfdb90abc --- /dev/null +++ b/.changeset/four-candles-applaud.md @@ -0,0 +1,5 @@ +--- +"@heroui/autocomplete": patch +--- + +fix close button display in autocomplete on mobile (#5826) diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index 8133444cd4..8e4987575d 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/packages/components/autocomplete/src/use-autocomplete.ts @@ -154,9 +154,11 @@ export function useAutocomplete(originalProps: UseAutocomplete const isClearable = originalProps.disableClearable !== undefined ? !originalProps.disableClearable - : originalProps.isReadOnly + : originalProps.isDisabled ? false - : originalProps.isClearable; + : originalProps.isReadOnly + ? false + : originalProps.isClearable; const { ref, From 328c57d8ea4d27306a7001bb702a1c018953ed0c Mon Sep 17 00:00:00 2001 From: Nikhil Shrivastava Date: Tue, 21 Oct 2025 08:33:12 +0530 Subject: [PATCH 03/12] fix(heroui-table): update virtualization examples to use @heroui/react imports (#5833) --- .../table/virtualization-custom-max-table-height.raw.jsx | 2 +- .../components/table/virtualization-custom-row-height.raw.jsx | 2 +- .../components/table/virtualization-ten-thousand.raw.jsx | 2 +- apps/docs/content/components/table/virtualization.raw.jsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/docs/content/components/table/virtualization-custom-max-table-height.raw.jsx b/apps/docs/content/components/table/virtualization-custom-max-table-height.raw.jsx index 407c0b2c6b..ead80e1807 100644 --- a/apps/docs/content/components/table/virtualization-custom-max-table-height.raw.jsx +++ b/apps/docs/content/components/table/virtualization-custom-max-table-height.raw.jsx @@ -1,4 +1,4 @@ -import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react"; +import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@heroui/react"; function generateRows(count) { return Array.from({length: count}, (_, index) => ({ diff --git a/apps/docs/content/components/table/virtualization-custom-row-height.raw.jsx b/apps/docs/content/components/table/virtualization-custom-row-height.raw.jsx index 4a879b9d84..ddb983c1bd 100644 --- a/apps/docs/content/components/table/virtualization-custom-row-height.raw.jsx +++ b/apps/docs/content/components/table/virtualization-custom-row-height.raw.jsx @@ -1,4 +1,4 @@ -import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react"; +import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@heroui/react"; function generateRows(count) { return Array.from({length: count}, (_, index) => ({ diff --git a/apps/docs/content/components/table/virtualization-ten-thousand.raw.jsx b/apps/docs/content/components/table/virtualization-ten-thousand.raw.jsx index ace1cb27e8..42d45eb8f1 100644 --- a/apps/docs/content/components/table/virtualization-ten-thousand.raw.jsx +++ b/apps/docs/content/components/table/virtualization-ten-thousand.raw.jsx @@ -1,4 +1,4 @@ -import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react"; +import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@heroui/react"; function generateRows(count) { return Array.from({length: count}, (_, index) => ({ diff --git a/apps/docs/content/components/table/virtualization.raw.jsx b/apps/docs/content/components/table/virtualization.raw.jsx index 2b5de4c41a..ca77ef9d74 100644 --- a/apps/docs/content/components/table/virtualization.raw.jsx +++ b/apps/docs/content/components/table/virtualization.raw.jsx @@ -1,4 +1,4 @@ -import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react"; +import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@heroui/react"; function generateRows(count) { return Array.from({length: count}, (_, index) => ({ From 17829618591d723beea665a7c56d9c45a112e24c Mon Sep 17 00:00:00 2001 From: Vishesh Verma <144326375+Vishesh-Verma-07@users.noreply.github.com> Date: Mon, 27 Oct 2025 23:29:58 +0530 Subject: [PATCH 04/12] fix(spinner): spinner animation (#5815) * fix(components/spinner): restore linear rotation (fix #5794) * fix(spinner): add patch changeset for spinner delay fix * fix(spinner): restore linear rotation for spinner variant (fix #5794) * chore: apply Prettier and ESLint fixes to animation util * chore(theme): lint * chore(changeset): update msg & add issue number * chore(changeset): include theme package * chore(spinner): bump theme peerDependencies --------- Co-authored-by: WK --- .changeset/large-wasps-decide.md | 6 ++++++ packages/components/spinner/package.json | 2 +- packages/core/theme/src/components/spinner.ts | 1 - packages/core/theme/src/utilities/animation.ts | 3 ++- 4 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 .changeset/large-wasps-decide.md diff --git a/.changeset/large-wasps-decide.md b/.changeset/large-wasps-decide.md new file mode 100644 index 0000000000..99d175134b --- /dev/null +++ b/.changeset/large-wasps-decide.md @@ -0,0 +1,6 @@ +--- +"@heroui/spinner": patch +"@heroui/theme": patch +--- + +Fix spinner animation (#5794) diff --git a/packages/components/spinner/package.json b/packages/components/spinner/package.json index e1ca0665d4..289662ac48 100644 --- a/packages/components/spinner/package.json +++ b/packages/components/spinner/package.json @@ -38,7 +38,7 @@ "peerDependencies": { "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0", - "@heroui/theme": ">=2.4.17" + "@heroui/theme": ">=2.4.23" }, "dependencies": { "@heroui/system-rsc": "workspace:*", diff --git a/packages/core/theme/src/components/spinner.ts b/packages/core/theme/src/components/spinner.ts index eb319bb9dc..74778baa41 100644 --- a/packages/core/theme/src/components/spinner.ts +++ b/packages/core/theme/src/components/spinner.ts @@ -24,7 +24,6 @@ const spinner = tv({ dots: "relative rounded-full mx-auto", spinnerBars: [ "absolute", - "animate-fade-out", "rounded-full", "w-[25%]", "h-[8%]", diff --git a/packages/core/theme/src/utilities/animation.ts b/packages/core/theme/src/utilities/animation.ts index 2437f43290..9ff52ea3f1 100644 --- a/packages/core/theme/src/utilities/animation.ts +++ b/packages/core/theme/src/utilities/animation.ts @@ -1,8 +1,9 @@ export default { /** Animation Utilities */ ".spinner-bar-animation": { + animation: "fade-out 1.2s linear infinite", "animation-delay": "calc(-1.2s + (0.1s * var(--bar-index)))", - transform: "rotate(calc(30deg * var(--bar-index)))translate(140%)", + transform: "rotate(calc(30deg * var(--bar-index))) translate(140%)", }, ".spinner-dot-animation": { "animation-delay": "calc(250ms * var(--dot-index))", From 27fec2db3c865c1ddfc25285985a46bfd4099c83 Mon Sep 17 00:00:00 2001 From: Vilas Chauvhan <50195101+villAsh@users.noreply.github.com> Date: Sat, 1 Nov 2025 16:03:02 +0530 Subject: [PATCH 05/12] fix(docs): codeblock flickering issue (#5849) * fix: updated codeblock component to prevent flicker when scrolling * fix(codeblock): revert className and style handling * fix(codeblock): clean up className handling and remove unnecessary styles * chore(docs): format --------- Co-authored-by: WK Wong --- apps/docs/components/docs/components/codeblock.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx index 2d6b941ff1..7d7c86000f 100644 --- a/apps/docs/components/docs/components/codeblock.tsx +++ b/apps/docs/components/docs/components/codeblock.tsx @@ -124,16 +124,10 @@ const CodeBlockHighlight = ({ preRef.current = element; } }} - className={clsx( - className, - classNameProp, - `language-${codeLang}`, - "max-w-full contents", - { - "flex-col": isMultiLine, - "overflow-x-scroll scrollbar-hide": hideScrollBar, - }, - )} + className={clsx(className, classNameProp, `language-${codeLang}`, "max-w-full", { + "flex-col": isMultiLine, + "overflow-x-scroll scrollbar-hide": hideScrollBar, + })} data-language={language} style={style} > From bdd37b4b08cc12dc3c93f031aa639148257d06d6 Mon Sep 17 00:00:00 2001 From: KumJungMin <37934668+KumJungMin@users.noreply.github.com> Date: Sun, 2 Nov 2025 21:51:42 +0900 Subject: [PATCH 06/12] fix(number-input): include labelPlacement in dependency array (#5866) * fix(number-input): include labelPlacement in dependency array for useNumberInput * test(number-input): add tests for labelPlacement with HeroUIProvider context * test(number-input): ensure labelPlacement prop takes precedence over HeroUIProvider context * docs(number-input): add changeset * chore(changeset): add issue number --------- Co-authored-by: WK --- .changeset/brave-laws-enjoy.md | 5 ++++ .../__tests__/number-input.test.tsx | 29 +++++++++++++++++++ .../number-input/src/use-number-input.ts | 10 ++++++- 3 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 .changeset/brave-laws-enjoy.md diff --git a/.changeset/brave-laws-enjoy.md b/.changeset/brave-laws-enjoy.md new file mode 100644 index 0000000000..4dffac7aeb --- /dev/null +++ b/.changeset/brave-laws-enjoy.md @@ -0,0 +1,5 @@ +--- +"@heroui/number-input": patch +--- + +allow inheriting labelPlacement from HeroUIProvider (#5845) diff --git a/packages/components/number-input/__tests__/number-input.test.tsx b/packages/components/number-input/__tests__/number-input.test.tsx index d11fbdc61a..f7c8a21ae1 100644 --- a/packages/components/number-input/__tests__/number-input.test.tsx +++ b/packages/components/number-input/__tests__/number-input.test.tsx @@ -5,6 +5,7 @@ import {render, fireEvent, act} from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import {useForm} from "react-hook-form"; import {Form} from "@heroui/form"; +import {HeroUIProvider} from "@heroui/system"; import {NumberInput} from "../src"; @@ -680,4 +681,32 @@ describe("NumberInput with React Hook Form", () => { }); }); }); + + describe("NumberInput with HeroUIProvider context", () => { + it("should inherit labelPlacement from HeroUIProvider", () => { + const {container} = render( + + + , + ); + + const label = container.querySelector("label"); + + expect(label).toBeTruthy(); + expect(label?.className).toMatch(/translate-y.*100%/); + }); + + it("should prioritize labelPlacement prop over HeroUIProvider context", () => { + const {container} = render( + + + , + ); + + const label = container.querySelector("label"); + + expect(label).toBeTruthy(); + expect(label?.className).not.toMatch(/translate-y.*100%/); + }); + }); }); diff --git a/packages/components/number-input/src/use-number-input.ts b/packages/components/number-input/src/use-number-input.ts index 04d74cf810..651115046e 100644 --- a/packages/components/number-input/src/use-number-input.ts +++ b/packages/components/number-input/src/use-number-input.ts @@ -234,10 +234,18 @@ export function useNumberInput(originalProps: UseNumberInputProps) { numberInput({ ...variantProps, isInvalid, + labelPlacement, isClearable, disableAnimation, }), - [objectToDeps(variantProps), isInvalid, isClearable, hasStartContent, disableAnimation], + [ + objectToDeps(variantProps), + isInvalid, + labelPlacement, + isClearable, + hasStartContent, + disableAnimation, + ], ); const handleKeyDown = useCallback( From 6a3b02773dbca20da7b2528ed4931ef91032a531 Mon Sep 17 00:00:00 2001 From: Anusha Chaturvedi <68815162+anusha-c18@users.noreply.github.com> Date: Mon, 3 Nov 2025 10:29:52 +0530 Subject: [PATCH 07/12] fix(docs): increase sidebar text contrast to meet WCAG AA accessibility (#5819) --- apps/docs/components/docs/toc.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/components/docs/toc.tsx b/apps/docs/components/docs/toc.tsx index f8ef8a2aa4..2b747875a6 100644 --- a/apps/docs/components/docs/toc.tsx +++ b/apps/docs/components/docs/toc.tsx @@ -89,7 +89,7 @@ export const DocsToc: FC = ({headings}) => { className={clsx( "transition-colors", "font-normal", - "flex items-center text-tiny font-normal text-default-500 dark:text-default-300", + "flex items-center text-tiny font-normal text-default-500", "data-[active=true]:text-foreground", "dark:data-[active=true]:text-foreground", "before:content-['']", From 0344123c1397c34633bd143d06f8ff3ba67a4f4d Mon Sep 17 00:00:00 2001 From: Mahdi Mohammadi Date: Mon, 3 Nov 2025 20:09:34 +0330 Subject: [PATCH 08/12] fix(docs): submenu selected item indicator (#5868) Co-authored-by: Mahdi --- apps/docs/components/docs/toc.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/docs/components/docs/toc.tsx b/apps/docs/components/docs/toc.tsx index 2b747875a6..6508046fad 100644 --- a/apps/docs/components/docs/toc.tsx +++ b/apps/docs/components/docs/toc.tsx @@ -87,6 +87,7 @@ export const DocsToc: FC = ({headings}) => {
  • Date: Sat, 15 Nov 2025 22:00:58 +0800 Subject: [PATCH 09/12] fix(docs): layoutColor.overlay (#5782) --- apps/docs/components/themes/constants.ts | 4 ++-- apps/docs/components/themes/templates/coffee.ts | 8 +++----- apps/docs/components/themes/templates/elegant.ts | 8 +++----- apps/docs/components/themes/templates/modern.ts | 8 +++----- apps/docs/components/themes/templates/retro.ts | 8 +++----- 5 files changed, 14 insertions(+), 22 deletions(-) diff --git a/apps/docs/components/themes/constants.ts b/apps/docs/components/themes/constants.ts index 5cc9846855..1e85d85114 100644 --- a/apps/docs/components/themes/constants.ts +++ b/apps/docs/components/themes/constants.ts @@ -39,7 +39,7 @@ export const initialLightTheme: ConfigColors = { foreground: colors.black, background: colors.white, focus: colors.blue[500], - overlay: colors.black, + overlay: colors.white, }, contentColor: { content1: colors.white, @@ -64,7 +64,7 @@ export const initialDarkTheme: ConfigColors = { foreground: colors.white, background: colors.black, focus: colors.blue[500], - overlay: colors.white, + overlay: colors.black, }, contentColor: { content1: colors.zinc[900], diff --git a/apps/docs/components/themes/templates/coffee.ts b/apps/docs/components/themes/templates/coffee.ts index de48f682e1..5b74e7f2e6 100644 --- a/apps/docs/components/themes/templates/coffee.ts +++ b/apps/docs/components/themes/templates/coffee.ts @@ -1,8 +1,6 @@ import type {Config} from "../types"; -import {colors} from "@heroui/theme"; - -import {initialLayout} from "../constants"; +import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants"; export const coffee: Config = { name: "coffee", @@ -20,7 +18,7 @@ export const coffee: Config = { layoutColor: { foreground: "#a27225", background: "#fffbf6", - overlay: colors.black, + overlay: initialLightTheme.layoutColor.overlay, focus: "#db924b", }, contentColor: { @@ -45,7 +43,7 @@ export const coffee: Config = { foreground: "#c59f60", background: "#20161F", focus: "#db924b", - overlay: colors.white, + overlay: initialDarkTheme.layoutColor.overlay, }, contentColor: { content1: "#2c1f2b", diff --git a/apps/docs/components/themes/templates/elegant.ts b/apps/docs/components/themes/templates/elegant.ts index df13289170..36f5f6faee 100644 --- a/apps/docs/components/themes/templates/elegant.ts +++ b/apps/docs/components/themes/templates/elegant.ts @@ -1,8 +1,6 @@ import type {Config} from "../types"; -import {colors} from "@heroui/theme"; - -import {initialLayout} from "../constants"; +import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants"; export const elegant: Config = { name: "elegant", @@ -20,7 +18,7 @@ export const elegant: Config = { layoutColor: { foreground: "#4a4a4a", background: "#ffffff", - overlay: colors.black, + overlay: initialLightTheme.layoutColor.overlay, focus: "#db924b", }, contentColor: { @@ -44,7 +42,7 @@ export const elegant: Config = { layoutColor: { foreground: "#b0b0b0", background: "#000000", - overlay: colors.white, + overlay: initialDarkTheme.layoutColor.overlay, focus: "#000000", }, contentColor: { diff --git a/apps/docs/components/themes/templates/modern.ts b/apps/docs/components/themes/templates/modern.ts index 5ef2afbf4d..10fae828b1 100644 --- a/apps/docs/components/themes/templates/modern.ts +++ b/apps/docs/components/themes/templates/modern.ts @@ -1,8 +1,6 @@ import type {Config} from "../types"; -import {colors} from "@heroui/theme"; - -import {initialLayout} from "../constants"; +import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants"; export const modern: Config = { name: "modern", @@ -20,7 +18,7 @@ export const modern: Config = { layoutColor: { foreground: "#4a3d77", background: "#f9f7fd", - overlay: colors.black, + overlay: initialLightTheme.layoutColor.overlay, focus: "#7828c8", }, contentColor: { @@ -44,7 +42,7 @@ export const modern: Config = { layoutColor: { foreground: "#d0aaff", background: "#1b1526", - overlay: colors.white, + overlay: initialDarkTheme.layoutColor.overlay, focus: "#9353d3", }, contentColor: { diff --git a/apps/docs/components/themes/templates/retro.ts b/apps/docs/components/themes/templates/retro.ts index 303d9eaecf..7452c914cb 100644 --- a/apps/docs/components/themes/templates/retro.ts +++ b/apps/docs/components/themes/templates/retro.ts @@ -1,8 +1,6 @@ import type {Config} from "../types"; -import {colors} from "@heroui/theme"; - -import {initialLayout} from "../constants"; +import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants"; export const retro: Config = { name: "retro", @@ -20,7 +18,7 @@ export const retro: Config = { layoutColor: { foreground: "#5A4A42", background: "#F4E8D1", - overlay: colors.black, + overlay: initialLightTheme.layoutColor.overlay, focus: "#FFD34E", }, contentColor: { @@ -44,7 +42,7 @@ export const retro: Config = { layoutColor: { foreground: "#000000", background: "#E1CA9E", - overlay: colors.white, + overlay: initialDarkTheme.layoutColor.overlay, focus: "#FFD34E", }, contentColor: { From 91e010fe3bd8e49653bd53c47e9955d8b11c1db2 Mon Sep 17 00:00:00 2001 From: Hayato Hasegawa Date: Sat, 15 Nov 2025 23:36:40 +0900 Subject: [PATCH 10/12] fix(ripple): resolve misalignment in RTL layouts by using transform (#5891) * fix(ripple): resolve misalignment in RTL layouts by using transform translate * chore(ripple): add changeset for ripple RTL layout fix * chore: add issue number --------- Co-authored-by: WK Wong --- .changeset/odd-jobs-vanish.md | 5 +++++ packages/components/ripple/src/ripple.tsx | 12 ++++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 .changeset/odd-jobs-vanish.md diff --git a/.changeset/odd-jobs-vanish.md b/.changeset/odd-jobs-vanish.md new file mode 100644 index 0000000000..6fc94866a4 --- /dev/null +++ b/.changeset/odd-jobs-vanish.md @@ -0,0 +1,5 @@ +--- +"@heroui/ripple": patch +--- + +fix resolve misalignment in RTL layouts by using transform translate (#5858) diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx index 58b8537e3c..08399b9105 100644 --- a/packages/components/ripple/src/ripple.tsx +++ b/packages/components/ripple/src/ripple.tsx @@ -28,10 +28,16 @@ const Ripple: FC = (props) => { = (props) => { overflow: "hidden", inset: 0, zIndex: 0, - top: ripple.y, - left: ripple.x, width: `${ripple.size}px`, height: `${ripple.size}px`, ...style, From fd9dd2a20c30beb4f46a8a6ab5d654ec7b9dbec1 Mon Sep 17 00:00:00 2001 From: Hayato Hasegawa Date: Sun, 16 Nov 2025 23:20:17 +0900 Subject: [PATCH 11/12] fix(theme): bordered focus styles take precedence over hover (#5893) * fix(theme): bordered focus styles take precedence over hover * chore(theme): update component focus styles to fix hover override * chore: bump @heroui/theme peer deps --------- Co-authored-by: WK Wong --- .changeset/popular-fishes-camp.md | 8 +++++ packages/components/input/package.json | 2 +- packages/components/number-input/package.json | 2 +- packages/components/select/package.json | 2 +- packages/core/theme/src/components/input.ts | 26 +++++++++++++--- .../core/theme/src/components/number-input.ts | 26 +++++++++++++--- packages/core/theme/src/components/select.ts | 31 ++++++++++++++++--- 7 files changed, 79 insertions(+), 18 deletions(-) create mode 100644 .changeset/popular-fishes-camp.md diff --git a/.changeset/popular-fishes-camp.md b/.changeset/popular-fishes-camp.md new file mode 100644 index 0000000000..b704f8fa29 --- /dev/null +++ b/.changeset/popular-fishes-camp.md @@ -0,0 +1,8 @@ +--- +"@heroui/button": patch +"@heroui/select": patch +"@heroui/input": patch +"@heroui/theme": patch +--- + +Fix bordered focus styles overridden by hover styles (#5585) diff --git a/packages/components/input/package.json b/packages/components/input/package.json index 3c445d3c1b..0c6f1e8002 100644 --- a/packages/components/input/package.json +++ b/packages/components/input/package.json @@ -36,7 +36,7 @@ "peerDependencies": { "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0", - "@heroui/theme": ">=2.4.19", + "@heroui/theme": ">=2.4.23", "@heroui/system": ">=2.4.18" }, "dependencies": { diff --git a/packages/components/number-input/package.json b/packages/components/number-input/package.json index 623a4a8df9..2a68f0688a 100644 --- a/packages/components/number-input/package.json +++ b/packages/components/number-input/package.json @@ -39,7 +39,7 @@ "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0", "@heroui/system": ">=2.4.18", - "@heroui/theme": ">=2.4.19" + "@heroui/theme": ">=2.4.23" }, "dependencies": { "@heroui/form": "workspace:*", diff --git a/packages/components/select/package.json b/packages/components/select/package.json index e2c1aff7fd..3a56bd29b5 100644 --- a/packages/components/select/package.json +++ b/packages/components/select/package.json @@ -35,7 +35,7 @@ }, "peerDependencies": { "@heroui/system": ">=2.4.18", - "@heroui/theme": ">=2.4.17", + "@heroui/theme": ">=2.4.23", "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1", "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0" diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts index fc8e8b9911..3c17216042 100644 --- a/packages/core/theme/src/components/input.ts +++ b/packages/core/theme/src/components/input.ts @@ -95,6 +95,7 @@ const input = tv({ "border-default-200", "data-[hover=true]:border-default-400", "group-data-[focus=true]:border-default-foreground", + "group-data-[focus=true]:data-[hover=true]:border-default-foreground", ], }, underlined: { @@ -449,7 +450,10 @@ const input = tv({ variant: "bordered", color: "primary", class: { - inputWrapper: "group-data-[focus=true]:border-primary", + inputWrapper: [ + "group-data-[focus=true]:border-primary", + "group-data-[focus=true]:data-[hover=true]:border-primary", + ], label: "text-primary", }, }, @@ -457,7 +461,10 @@ const input = tv({ variant: "bordered", color: "secondary", class: { - inputWrapper: "group-data-[focus=true]:border-secondary", + inputWrapper: [ + "group-data-[focus=true]:border-secondary", + "group-data-[focus=true]:data-[hover=true]:border-secondary", + ], label: "text-secondary", }, }, @@ -465,7 +472,10 @@ const input = tv({ variant: "bordered", color: "success", class: { - inputWrapper: "group-data-[focus=true]:border-success", + inputWrapper: [ + "group-data-[focus=true]:border-success", + "group-data-[focus=true]:data-[hover=true]:border-success", + ], label: "text-success", }, }, @@ -473,7 +483,10 @@ const input = tv({ variant: "bordered", color: "warning", class: { - inputWrapper: "group-data-[focus=true]:border-warning", + inputWrapper: [ + "group-data-[focus=true]:border-warning", + "group-data-[focus=true]:data-[hover=true]:border-warning", + ], label: "text-warning", }, }, @@ -481,7 +494,10 @@ const input = tv({ variant: "bordered", color: "danger", class: { - inputWrapper: "group-data-[focus=true]:border-danger", + inputWrapper: [ + "group-data-[focus=true]:border-danger", + "group-data-[focus=true]:data-[hover=true]:border-danger", + ], label: "text-danger", }, }, diff --git a/packages/core/theme/src/components/number-input.ts b/packages/core/theme/src/components/number-input.ts index 8445959f13..6e802dd56d 100644 --- a/packages/core/theme/src/components/number-input.ts +++ b/packages/core/theme/src/components/number-input.ts @@ -114,6 +114,7 @@ const numberInput = tv({ "border-default-200", "data-[hover=true]:border-default-400", "group-data-[focus=true]:border-default-foreground", + "group-data-[focus=true]:data-[hover=true]:border-default-foreground", ], }, underlined: { @@ -467,7 +468,10 @@ const numberInput = tv({ variant: "bordered", color: "primary", class: { - inputWrapper: "group-data-[focus=true]:border-primary", + inputWrapper: [ + "group-data-[focus=true]:border-primary", + "group-data-[focus=true]:data-[hover=true]:border-primary", + ], label: "text-primary", }, }, @@ -475,7 +479,10 @@ const numberInput = tv({ variant: "bordered", color: "secondary", class: { - inputWrapper: "group-data-[focus=true]:border-secondary", + inputWrapper: [ + "group-data-[focus=true]:border-secondary", + "group-data-[focus=true]:data-[hover=true]:border-secondary", + ], label: "text-secondary", }, }, @@ -483,7 +490,10 @@ const numberInput = tv({ variant: "bordered", color: "success", class: { - inputWrapper: "group-data-[focus=true]:border-success", + inputWrapper: [ + "group-data-[focus=true]:border-success", + "group-data-[focus=true]:data-[hover=true]:border-success", + ], label: "text-success", }, }, @@ -491,7 +501,10 @@ const numberInput = tv({ variant: "bordered", color: "warning", class: { - inputWrapper: "group-data-[focus=true]:border-warning", + inputWrapper: [ + "group-data-[focus=true]:border-warning", + "group-data-[focus=true]:data-[hover=true]:border-warning", + ], label: "text-warning", }, }, @@ -499,7 +512,10 @@ const numberInput = tv({ variant: "bordered", color: "danger", class: { - inputWrapper: "group-data-[focus=true]:border-danger", + inputWrapper: [ + "group-data-[focus=true]:border-danger", + "group-data-[focus=true]:data-[hover=true]:border-danger", + ], label: "text-danger", }, }, diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts index 8fba4e53d2..ac30720227 100644 --- a/packages/core/theme/src/components/select.ts +++ b/packages/core/theme/src/components/select.ts @@ -82,6 +82,7 @@ const select = tv({ "data-[hover=true]:border-default-400", "data-[open=true]:border-default-foreground", "data-[focus=true]:border-default-foreground", + "data-[focus=true]:data-[hover=true]:border-default-foreground", ], value: "group-data-[has-value=true]:text-default-foreground", clearButton: "mb-4", @@ -445,7 +446,11 @@ const select = tv({ variant: "bordered", color: "primary", class: { - trigger: ["data-[open=true]:border-primary", "data-[focus=true]:border-primary"], + trigger: [ + "data-[open=true]:border-primary", + "data-[focus=true]:border-primary", + "data-[focus=true]:data-[hover=true]:border-primary", + ], label: "text-primary", }, }, @@ -453,7 +458,11 @@ const select = tv({ variant: "bordered", color: "secondary", class: { - trigger: ["data-[open=true]:border-secondary", "data-[focus=true]:border-secondary"], + trigger: [ + "data-[open=true]:border-secondary", + "data-[focus=true]:border-secondary", + "data-[focus=true]:data-[hover=true]:border-secondary", + ], label: "text-secondary", }, }, @@ -461,7 +470,11 @@ const select = tv({ variant: "bordered", color: "success", class: { - trigger: ["data-[open=true]:border-success", "data-[focus=true]:border-success"], + trigger: [ + "data-[open=true]:border-success", + "data-[focus=true]:border-success", + "data-[focus=true]:data-[hover=true]:border-success", + ], label: "text-success", }, }, @@ -469,7 +482,11 @@ const select = tv({ variant: "bordered", color: "warning", class: { - trigger: ["data-[open=true]:border-warning", "data-[focus=true]:border-warning"], + trigger: [ + "data-[open=true]:border-warning", + "data-[focus=true]:border-warning", + "data-[focus=true]:data-[hover=true]:border-warning", + ], label: "text-warning", }, }, @@ -477,7 +494,11 @@ const select = tv({ variant: "bordered", color: "danger", class: { - trigger: ["data-[open=true]:border-danger", "data-[focus=true]:border-danger"], + trigger: [ + "data-[open=true]:border-danger", + "data-[focus=true]:border-danger", + "data-[focus=true]:data-[hover=true]:border-danger", + ], label: "text-danger", }, }, From e3e6b862bd138a2368d350bbfd5fb8b233ede1f6 Mon Sep 17 00:00:00 2001 From: anupam mediratta Date: Tue, 18 Nov 2025 07:43:14 +0000 Subject: [PATCH 12/12] fix: resolve medium vulnerability javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal Automatically generated security fix --- packages/storybook/.storybook/main.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts index 9de42c8be4..7b12443d96 100644 --- a/packages/storybook/.storybook/main.ts +++ b/packages/storybook/.storybook/main.ts @@ -44,7 +44,9 @@ const config: StorybookConfig = { }; function getAbsolutePath(value) { - return dirname(require.resolve(join(value, "package.json"))); + // Sanitize the value to prevent path traversal attacks + const sanitizedValue = value.replace(/\.\./g, '').replace(/[/\\]/g, ''); + return dirname(require.resolve(join(sanitizedValue, "package.json"))); } export default config;