v2.4.8

.changeset/witty-socks-bathe.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+add missing `data-[hover=true]:` for ghost button with danger color

apps/docs/app/examples/perf/page.tsx

@@ -106,7 +106,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           // dark theme
           "dark:bg-zinc-900",
           "dark:border-zinc-800",

apps/docs/components/marketing/hero/floating-components.tsx

@@ -110,7 +110,6 @@ export const FloatingComponents: React.FC<{}> = () => {
             content="Developers love Next.js"
             isOpen={!isTablet}
             placement="top"
-            shouldBlockScroll={false}
             style={{
               zIndex: 39,
             }}

apps/docs/components/theme-switch.tsx

@@ -57,7 +57,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
               "bg-transparent",
               "rounded-lg",
               "flex items-center justify-center",
-              "group-data-[selected=true]/toggle:bg-transparent",
+              "group-data-[selected=true]:bg-transparent",
               "!text-default-600 dark:!text-default-500",
               "pt-px",
               "px-0",

apps/docs/content/components/input/custom-styles.ts

@@ -52,8 +52,8 @@ export default function App() {
             "backdrop-saturate-200",
             "hover:bg-default-200/70",
             "dark:hover:bg-default/70",
-            "group-data-[focus=true]/input:bg-default-200/50",
-            "dark:group-data-[focus=true]/input:bg-default/60",
+            "group-data-[focus=true]:bg-default-200/50",
+            "dark:group-data-[focus=true]:bg-default/60",
             "!cursor-text",
           ],
         }}

apps/docs/content/components/select/custom-styles.ts

@@ -212,7 +212,7 @@ export default function App() {
       className="max-w-xs"
       variant="bordered"
       classNames={{
-        label: "group-data-[filled=true]/select:-translate-y-5",
+        label: "group-data-[filled=true]:-translate-y-5",
         trigger: "min-h-16",
         listboxWrapper: "max-h-[400px]",
       }}

apps/docs/content/components/switch/custom-styles.ts

@@ -11,12 +11,12 @@ export default function App() {
         ),
         wrapper: "p-0 h-4 overflow-visible",
         thumb: cn("w-6 h-6 border-2 shadow-lg",
-          "group-data-[hover=true]/toggle:border-primary",
+          "group-data-[hover=true]:border-primary",
           //selected
-          "group-data-[selected=true]/toggle:ml-6",
+          "group-data-[selected=true]:ml-6",
           // pressed
-          "group-data-[pressed=true]/toggle:w-7",
-          "group-data-[selected]:group-data-[pressed]/toggle:ml-4",
+          "group-data-[pressed=true]:w-7",
+          "group-data-[selected]:group-data-[pressed]:ml-4",
         ),
       }}
     >

apps/docs/content/customization/custom-variants/slots-component.ts

@@ -47,7 +47,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           "dark:bg-zinc-900",
           "dark:border-zinc-800",
           "dark:data-[hover=true]:bg-zinc-900",

apps/docs/content/docs/customization/custom-variants.mdx

@@ -133,7 +133,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           // dark theme
           "dark:bg-zinc-900",
           "dark:border-zinc-800",

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/accordion
 
+## 2.0.40
+
+### Patch Changes
+
+- Updated dependencies [[`229388422`](https://github.com/nextui-org/nextui/commit/2293884229541e363b1983fea88ba6e3bee6be14)]:
+  - @nextui-org/aria-utils@2.0.26
+  - @nextui-org/divider@2.0.32
+
 ## 2.0.39
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "2.0.39",
+  "version": "2.0.40",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",

packages/components/autocomplete/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/autocomplete
 
+## 2.1.7
+
+### Patch Changes
+
+- [#3759](https://github.com/nextui-org/nextui/pull/3759) [`229388422`](https://github.com/nextui-org/nextui/commit/2293884229541e363b1983fea88ba6e3bee6be14) Thanks [@wingkwong](https://github.com/wingkwong)! - rollback pr3467. rescheduled to v2.5.0.
+
+- Updated dependencies [[`4c01d1824`](https://github.com/nextui-org/nextui/commit/4c01d1824d4dde22d89232968a3a4c48fe04678f), [`229388422`](https://github.com/nextui-org/nextui/commit/2293884229541e363b1983fea88ba6e3bee6be14)]:
+  - @nextui-org/popover@2.1.29
+  - @nextui-org/aria-utils@2.0.26
+  - @nextui-org/button@2.0.38
+  - @nextui-org/input@2.2.5
+  - @nextui-org/listbox@2.1.27
+  - @nextui-org/scroll-shadow@2.1.20
+  - @nextui-org/spinner@2.0.34
+
 ## 2.1.6
 
 ### Patch Changes

packages/components/autocomplete/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/autocomplete",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"
@@ -41,6 +41,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
+    "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/button": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/listbox": "workspace:*",

packages/components/autocomplete/src/use-autocomplete.ts

@@ -18,6 +18,7 @@ import {chain, mergeProps} from "@react-aria/utils";
 import {ButtonProps} from "@nextui-org/button";
 import {AsyncLoadable, PressEvent} from "@react-types/shared";
 import {useComboBox} from "@react-aria/combobox";
+import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 interface Props<T> extends Omit<HTMLNextUIProps<"input">, keyof ComboBoxProps<T>> {
   /**
@@ -443,6 +444,9 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
           ),
         }),
       },
+      shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
+        ? popoverProps.shouldCloseOnInteractOutside
+        : (element: Element) => ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state),
       // when the popover is open, the focus should be on input instead of dialog
       // therefore, we skip dialog focus here
       disableDialogFocus: true,

packages/components/date-picker/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/date-picker
 
+## 2.1.8
+
+### Patch Changes
+
+- [#3759](https://github.com/nextui-org/nextui/pull/3759) [`229388422`](https://github.com/nextui-org/nextui/commit/2293884229541e363b1983fea88ba6e3bee6be14) Thanks [@wingkwong](https://github.com/wingkwong)! - rollback pr3467. rescheduled to v2.5.0.
+
+- Updated dependencies [[`4c01d1824`](https://github.com/nextui-org/nextui/commit/4c01d1824d4dde22d89232968a3a4c48fe04678f), [`229388422`](https://github.com/nextui-org/nextui/commit/2293884229541e363b1983fea88ba6e3bee6be14)]:
+  - @nextui-org/popover@2.1.29
+  - @nextui-org/aria-utils@2.0.26
+  - @nextui-org/button@2.0.38
+  - @nextui-org/calendar@2.0.12
+  - @nextui-org/date-input@2.1.4
+
 ## 2.1.7
 
 ### Patch Changes

packages/components/date-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-picker",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.",
   "keywords": [
     "date-picker"
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.5.4",
+    "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/button": "workspace:*",
     "@nextui-org/calendar": "workspace:*",
     "@nextui-org/date-input": "workspace:*",

packages/components/date-picker/src/use-date-picker.ts

@@ -15,6 +15,7 @@ import {useDatePickerState} from "@react-stately/datepicker";
 import {AriaDatePickerProps, useDatePicker as useAriaDatePicker} from "@react-aria/datepicker";
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
+import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 import {useDatePickerBase} from "./use-date-picker-base";
 
@@ -192,6 +193,9 @@ export function useDatePicker<T extends DateValue>({
           ),
         }),
       },
+      shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
+        ? popoverProps.shouldCloseOnInteractOutside
+        : (element: Element) => ariaShouldCloseOnInteractOutside(element, popoverTriggerRef, state),
     };
   };
 

packages/components/date-picker/src/use-date-range-picker.ts

@@ -21,6 +21,7 @@ import {useDateRangePicker as useAriaDateRangePicker} from "@react-aria/datepick
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
 import {dateRangePicker, dateInput, cn} from "@nextui-org/theme";
+import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 import {useDatePickerBase} from "./use-date-picker-base";
 interface Props<T extends DateValue>
@@ -214,6 +215,10 @@ export function useDateRangePicker<T extends DateValue>({
             props.className,
           ),
         }),
+        shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
+          ? popoverProps.shouldCloseOnInteractOutside
+          : (element: Element) =>
+              ariaShouldCloseOnInteractOutside(element, popoverTriggerRef, state),
       },
     } as PopoverProps;
   };

packages/components/dropdown/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/dropdown
 
+## 2.1.31
+
+### Patch Changes
+
+- [#3762](https://github.com/nextui-org/nextui/pull/3762) [`8fecb5afa`](https://github.com/nextui-org/nextui/commit/8fecb5afa9aabe73e32243ca313f97856da8aa08) Thanks [@wingkwong](https://github.com/wingkwong)! - fixed `_a2.find` is not a function (#3761)
+
+- [#3759](https://github.com/nextui-org/nextui/pull/3759) [`229388422`](https://github.com/nextui-org/nextui/commit/2293884229541e363b1983fea88ba6e3bee6be14) Thanks [@wingkwong](https://github.com/wingkwong)! - rollback pr3467. rescheduled to v2.5.0.
+
+- Updated dependencies [[`4c01d1824`](https://github.com/nextui-org/nextui/commit/4c01d1824d4dde22d89232968a3a4c48fe04678f), [`229388422`](https://github.com/nextui-org/nextui/commit/2293884229541e363b1983fea88ba6e3bee6be14)]:
+  - @nextui-org/popover@2.1.29
+  - @nextui-org/aria-utils@2.0.26
+  - @nextui-org/menu@2.0.30
+
 ## 2.1.30
 
 ### Patch Changes

packages/components/dropdown/__tests__/dropdown.test.tsx

@@ -796,7 +796,7 @@ describe("Keyboard interactions", () => {
     logSpy.mockRestore();
   });
 
-  it("should respect closeOnSelect setting of DropdownItem", async () => {
+  it("should respect closeOnSelect setting of DropdownItem (static)", async () => {
     const onOpenChange = jest.fn();
     const wrapper = render(
       <Dropdown onOpenChange={onOpenChange}>
@@ -831,4 +831,51 @@ describe("Keyboard interactions", () => {
       expect(onOpenChange).toBeCalledTimes(2);
     });
   });
+
+  it("should respect closeOnSelect setting of DropdownItem (dynamic)", async () => {
+    const onOpenChange = jest.fn();
+    const items = [
+      {
+        key: "new",
+        label: "New file",
+      },
+      {
+        key: "copy",
+        label: "Copy link",
+      },
+    ];
+    const wrapper = render(
+      <Dropdown onOpenChange={onOpenChange}>
+        <DropdownTrigger>
+          <Button data-testid="trigger-test">Trigger</Button>
+        </DropdownTrigger>
+        <DropdownMenu aria-label="Actions" items={items}>
+          {(item) => (
+            <DropdownItem key={item.key} closeOnSelect={item.key !== "new"}>
+              {item.label}
+            </DropdownItem>
+          )}
+        </DropdownMenu>
+      </Dropdown>,
+    );
+
+    let triggerButton = wrapper.getByTestId("trigger-test");
+
+    act(() => {
+      triggerButton.click();
+    });
+    expect(onOpenChange).toBeCalledTimes(1);
+
+    let menuItems = wrapper.getAllByRole("menuitem");
+
+    await act(async () => {
+      await userEvent.click(menuItems[0]);
+      expect(onOpenChange).toBeCalledTimes(1);
+    });
+
+    await act(async () => {
+      await userEvent.click(menuItems[1]);
+      expect(onOpenChange).toBeCalledTimes(2);
+    });
+  });
 });

packages/components/dropdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "2.1.30",
+  "version": "2.1.31",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"
@@ -41,6 +41,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
+    "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/menu": "workspace:*",
     "@nextui-org/popover": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",