Merge branch 'nextui-org:canary' into canary

Author: PentSec

.changeset/chilly-rules-marry.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+label placement with file input type (#4364)

.changeset/many-kiwis-pretend.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/alert": patch
+"@nextui-org/theme": patch
+---
+
+Fix #4382 `hideIconWrapper` property wasn't removing the borded on `Alert` component

.changeset/old-peas-cheat.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+menu base use overflow-clip to fix listbox section sticky (#4335)

.changeset/polite-dingos-call.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/alert": patch
+---
+
+fix alert slots & variantProps import (#4336)

.changeset/silent-jars-grow.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input-otp": patch
+---
+
+Change ensures that the input value does not accept any disallowed characters when the value prop contains them (#4329)

.changeset/two-ghosts-search.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/alert": patch
+---
+
+replace decrepate onClick in Alert

packages/components/alert/src/alert.tsx

@@ -24,7 +24,7 @@ const iconMap = {
 
 export type AlertColor = keyof typeof iconMap;
 
-export interface AlertProps extends Omit<UseAlertProps, "hasDescription"> {}
+export interface AlertProps extends Omit<UseAlertProps, "hasContent"> {}
 
 const Alert = forwardRef<"div", AlertProps>((props, ref) => {
   const {
@@ -73,7 +73,7 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
           aria-label="Close"
           radius="full"
           variant="light"
-          onClick={handleClose}
+          onPress={handleClose}
           {...(getCloseButtonProps() as ButtonProps)}
         >
           <CloseIcon height={20} width={20} />

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

@@ -1,9 +1,8 @@
 import type {ButtonProps} from "@nextui-org/button";
+import type {AlertSlots, AlertVariantProps, SlotsToClasses} from "@nextui-org/theme";
 
 import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
-import {AlertSlots, SlotsToClasses} from "@nextui-org/theme";
 import {filterDOMProps, ReactRef, useDOMRef} from "@nextui-org/react-utils";
-import {AlertVariantProps} from "@nextui-org/theme/src/components/alert";
 import {ReactNode, useCallback, useMemo} from "react";
 import {mergeProps} from "@react-aria/utils";
 import {alert} from "@nextui-org/theme";
@@ -125,7 +124,7 @@ export function useAlert(originalProps: UseAlertProps) {
   }, [setIsVisible, onClose]);
 
   const slots = useMemo(
-    () => alert({hasDescription: !isEmpty(description), ...variantProps}),
+    () => alert({hasContent: !isEmpty(description) || !isEmpty(children), ...variantProps}),
     [description, objectToDeps(variantProps)],
   );
 

packages/components/alert/stories/alert.stories.tsx

@@ -189,7 +189,7 @@ const CustomStylesTemplate = (args) => {
           color={color}
           title="The documents you requested are ready to be viewed"
         >
-          <div className="flex items-center gap-1 mt-3">
+          <div className="flex items-center gap-1">
             <Button
               className="bg-background text-default-700 font-medium border-1 shadow-small"
               size="sm"
@@ -226,6 +226,14 @@ export const WithDescription = {
   },
 };
 
+export const WithoutIconWrapper = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    hideIconWrapper: true,
+  },
+};
+
 export const Color = {
   render: ColorTemplate,
   args: {

packages/components/button/__tests__/button-group.test.tsx

@@ -26,7 +26,7 @@ describe("ButtonGroup", () => {
     const handler = jest.fn();
     const wrapper = render(
       <ButtonGroup isDisabled={true}>
-        <Button disableRipple data-testid="button-test" onClick={handler}>
+        <Button disableRipple data-testid="button-test" onPress={handler}>
           action
         </Button>
       </ButtonGroup>,

packages/components/button/stories/button.stories.tsx

@@ -82,7 +82,7 @@ const StateTemplate = (args: ButtonProps) => {
       {...args}
       aria-label={isOpen ? "Close" : "Open"}
       aria-pressed={isOpen}
-      onClick={handlePress}
+      onPress={handlePress}
     >
       {isOpen ? "Close" : "Open"}
     </Button>

packages/components/card/__tests__/card.test.tsx

@@ -41,15 +41,15 @@ describe("Card", () => {
     expect(onPress).toHaveBeenCalled();
   });
 
-  it("should trigger onClick function", async () => {
-    const onClick = jest.fn();
-    const {getByRole} = render(<Card disableRipple isPressable onClick={onClick} />);
+  it("should trigger onPress function", async () => {
+    const onPress = jest.fn();
+    const {getByRole} = render(<Card disableRipple isPressable onPress={onPress} />);
 
     const button = getByRole("button");
 
     await user.click(button);
 
-    expect(onClick).toHaveBeenCalled();
+    expect(onPress).toHaveBeenCalled();
   });
 
   it("should render correctly when nested", () => {

packages/components/dropdown/stories/dropdown.stories.tsx

@@ -148,7 +148,7 @@ const Template = ({
       <Button>{label}</Button>
     </DropdownTrigger>
     <DropdownMenu aria-label="Actions" color={color} variant={variant}>
-      <DropdownItem key="new" onClick={() => alert("New file")}>
+      <DropdownItem key="new" onPress={() => alert("New file")}>
         New file
       </DropdownItem>
       <DropdownItem key="copy">Copy link</DropdownItem>

packages/components/input-otp/__tests__/input-otp.test.tsx

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom";
 
 import * as React from "react";
 import {render, renderHook, screen} from "@testing-library/react";
-import {useForm} from "react-hook-form";
+import {Controller, useForm} from "react-hook-form";
 import userEvent, {UserEvent} from "@testing-library/user-event";
 
 import {InputOtp} from "../src";
@@ -250,4 +250,38 @@ describe("InputOtp with react-hook-form", () => {
 
     expect(onSubmit).toHaveBeenCalledTimes(1);
   });
+
+  it("should work correctly wiht react-hook-form controller", async () => {
+    const {result} = renderHook(() =>
+      useForm({
+        defaultValues: {
+          withController: "",
+        },
+      }),
+    );
+
+    const {control} = result.current;
+
+    render(
+      <form>
+        <Controller
+          control={control}
+          name="withController"
+          render={({field}) => <InputOtp length={4} {...field} data-testid="input-otp" />}
+        />
+      </form>,
+    );
+
+    const inputOtp = screen.getByTestId("input-otp");
+    const input = inputOtp.querySelector("input");
+
+    if (!input) {
+      throw new Error("Input not found");
+    }
+
+    await user.click(input);
+    await user.type(input, "1nj23aa4");
+
+    expect(input).toHaveAttribute("value", "1234");
+  });
 });

packages/components/input-otp/src/use-input-otp.ts

@@ -119,6 +119,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
     pasteTransformer,
     containerClassName,
     noScriptCSSFallback,
+    onChange,
     ...otherProps
   } = props;
 
@@ -209,6 +210,14 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
           }),
           filterDOMProps(props),
         ),
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+          const val = e.target?.value;
+          const regex = new RegExp(allowedKeys);
+
+          if (regex.test(val)) {
+            onChange?.(e);
+          }
+        },
       };
     },
     [baseDomRef, slots, baseStyles, isDisabled, isInvalid, isRequired, isReadOnly, value, length],

packages/components/input-otp/stories/input-otp.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 import {button, inputOtp} from "@nextui-org/theme";
-import {useForm} from "react-hook-form";
+import {Controller, useForm} from "react-hook-form";
 import {ValidationResult} from "@react-types/shared";
 import {Button} from "@nextui-org/button";
 import {Form} from "@nextui-org/form";
@@ -177,6 +177,49 @@ const WithReactHookFormTemplate = (args) => {
   );
 };
 
+const WithReactHookFormControllerTemplate = (args) => {
+  const {
+    handleSubmit,
+    control,
+    formState: {errors},
+  } = useForm({
+    defaultValues: {
+      otp: "",
+    },
+  });
+
+  const onSubmit = (data) => {
+    alert(JSON.stringify(data));
+  };
+
+  return (
+    <form className="flex flex-col gap-4 w-full max-w-[300px]" onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="otp"
+        render={({field}) => (
+          <InputOtp
+            {...field}
+            errorMessage={errors.otp && errors.otp.message}
+            isInvalid={!!errors.otp}
+            {...args}
+          />
+        )}
+        rules={{
+          required: "OTP is required",
+          minLength: {
+            value: 4,
+            message: "Please enter a valid OTP",
+          },
+        }}
+      />
+      <Button className="max-w-fit" type="submit" variant="flat">
+        Verify OTP
+      </Button>
+    </form>
+  );
+};
+
 const ServerValidationTemplate = (args) => {
   const [serverErrors, setServerErrors] = React.useState({});
 
@@ -337,6 +380,14 @@ export const WithReactHookForm = {
   },
 };
 
+export const WithReactHookFormController = {
+  render: WithReactHookFormControllerTemplate,
+  args: {
+    ...defaultProps,
+    length: 4,
+  },
+};
+
 export const CustomWithClassNames = {
   render: Template,
   args: {

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

@@ -13,7 +13,7 @@ import {useFocusRing} from "@react-aria/focus";
 import {input} from "@nextui-org/theme";
 import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
 import {useFocusWithin, useHover, usePress} from "@react-aria/interactions";
-import {clsx, dataAttr, isEmpty, objectToDeps, safeAriaLabel, warn} from "@nextui-org/shared-utils";
+import {clsx, dataAttr, isEmpty, objectToDeps, safeAriaLabel} from "@nextui-org/shared-utils";
 import {useControlledState} from "@react-stately/utils";
 import {useMemo, Ref, useCallback, useState} from "react";
 import {chain, mergeProps} from "@react-aria/utils";
@@ -228,19 +228,6 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   const isInvalid = validationState === "invalid" || isAriaInvalid;
 
   const labelPlacement = useMemo<InputVariantProps["labelPlacement"]>(() => {
-    if (isFileTypeInput) {
-      // if `labelPlacement` is not defined, choose `outside` instead
-      // since the default value `inside` is not supported in file input
-      if (!originalProps.labelPlacement) return "outside";
-
-      // throw a warning if `labelPlacement` is `inside`
-      // and change it to `outside`
-      if (originalProps.labelPlacement === "inside") {
-        warn("Input with file type doesn't support inside label. Converting to outside ...");
-
-        return "outside";
-      }
-    }
     if ((!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && !label) {
       return "outside";
     }

packages/components/link/stories/link.stories.tsx

@@ -58,7 +58,7 @@ const PressableTemplate = (args: LinkProps) => {
   };
 
   return (
-    <Link {...args} onClick={handlePress}>
+    <Link {...args} onPress={handlePress}>
       {isOpen ? "Open" : "Close"}
     </Link>
   );

packages/components/listbox/stories/listbox.stories.tsx

@@ -174,7 +174,7 @@ const Template = ({color, variant, ...args}: ListboxProps) => (
     onAction={(key: Key) => alert(key)}
     {...args}
   >
-    <ListboxItem key="new" onClick={() => alert("[onClick] New file")}>
+    <ListboxItem key="new" onPress={() => alert("[onPress] New file")}>
       New file
     </ListboxItem>
     <ListboxItem key="copy">Copy link</ListboxItem>

packages/components/menu/stories/menu.stories.tsx

@@ -45,7 +45,7 @@ const defaultProps = {
 
 const Template = ({color, variant, ...args}: MenuProps) => (
   <Menu aria-label="Actions" color={color} variant={variant} onAction={alert} {...args}>
-    <MenuItem key="new" onClick={() => alert("[onClick] New file")}>
+    <MenuItem key="new" onPress={() => alert("[onPress] New file")}>
       New file
     </MenuItem>
     <MenuItem key="copy">Copy link</MenuItem>

packages/core/theme/src/components/alert.ts

@@ -29,7 +29,7 @@ const alert = tv({
     title: "text-small w-full font-medium block text-inherit leading-5",
     description: "pl-[1px] text-small font-normal text-inherit",
     closeButton: "relative text-inherit translate-x-1 -translate-y-1",
-    iconWrapper: "flex-none relative w-9 h-9 rounded-full",
+    iconWrapper: "flex-none relative w-9 h-9 rounded-full grid place-items-center",
     alertIcon: "fill-current w-6 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
   },
   variants: {
@@ -76,13 +76,13 @@ const alert = tv({
     hideIconWrapper: {
       true: {
         base: "gap-x-0",
-        iconWrapper: "!bg-transparent !shadow-none",
+        iconWrapper: "!bg-transparent !shadow-none !border-none",
       },
     },
-    hasDescription: {
+    hasContent: {
       false: {
         base: "items-start",
-        mainWrapper: "justify-center",
+        mainWrapper: "justify-center items-center",
       },
     },
   },

packages/core/theme/src/components/menu.ts

@@ -11,7 +11,7 @@ import {dataFocusVisibleClasses} from "../utils";
  */
 const menu = tv({
   slots: {
-    base: "w-full relative flex flex-col gap-1 p-1 overflow-hidden",
+    base: "w-full relative flex flex-col gap-1 p-1 overflow-clip",
     list: "w-full flex flex-col gap-0.5 outline-none",
     emptyContent: [
       "h-10",