Merge branch 'canary' into fix/form-validation-default-native

.changeset/angry-boxes-wonder.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/listbox": patch
+---
+
+fix listbox section items prop in html element (#4277)

.changeset/chilled-files-serve.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/calendar": patch
+---
+
+remove unnecessary fragment in calendar (#4358, #4068)

.changeset/cyan-donkeys-swim.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/input-otp": patch
+"@nextui-org/shared-utils": patch
+---
+
+Fix virtual keyboard to display the keys based on allowedKeys(#4408)

.changeset/lemon-cheetahs-grow.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/use-aria-multiselect": patch
+"@nextui-org/select": patch
+---
+
+fixed validationBehavior=native showing browser ui error for select component (#3913)
+fixed select not committing error message when validationBehavior=native

.changeset/nasty-dolls-tease.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input-otp": patch
+---
+
+fixed isRequired not showing error when validationBehavior=native is not explicitly set

.changeset/smart-oranges-peel.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/navbar": patch
+---
+
+
+Resolving the issue preventing the navbar from opening(#4345)

apps/docs/content/docs/components/select.mdx

@@ -376,7 +376,6 @@ the popover and listbox components.
 - Keyboard support for opening the listbox using the arrow keys, including automatically focusing the first or last item accordingly.
 - Typeahead to allow selecting options by typing text, even without opening the listbox.
 - Browser autofill integration via a hidden native `<select>` element.
-- Support for mobile form navigation via software keyboard.
 - Mobile screen reader listbox dismissal support.
 
 <Spacer y={4} />

packages/components/calendar/src/calendar-base.tsx

@@ -152,11 +152,9 @@ export function CalendarBase(props: CalendarBaseProps) {
           data-slot="content"
         >
           <AnimatePresence custom={direction} initial={false} mode="popLayout">
-            <>
-              <MotionConfig transition={transition}>
-                <LazyMotion features={domAnimation}>{calendarContent}</LazyMotion>
-              </MotionConfig>
-            </>
+            <MotionConfig transition={transition}>
+              <LazyMotion features={domAnimation}>{calendarContent}</LazyMotion>
+            </MotionConfig>
           </AnimatePresence>
         </ResizablePanel>
       )}

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

@@ -4,6 +4,7 @@ import * as React from "react";
 import {render, renderHook, screen} from "@testing-library/react";
 import {Controller, useForm} from "react-hook-form";
 import userEvent, {UserEvent} from "@testing-library/user-event";
+import {Form} from "@nextui-org/form";
 
 import {InputOtp} from "../src";
 
@@ -185,6 +186,45 @@ describe("InputOtp Component", () => {
   });
 });
 
+describe("Validation", () => {
+  let user: UserEvent;
+
+  beforeAll(() => {
+    user = userEvent.setup();
+  });
+
+  it("supports isRequired when validationBehavior=native", async () => {
+    const {getByTestId} = render(
+      <Form validationBehavior="native">
+        <InputOtp isRequired data-testid="base" length={4} />
+        <button data-testid="submit" type="submit" />
+        <button data-testid="reset" type="reset" />
+      </Form>,
+    );
+
+    const inputOtpBase = getByTestId("base");
+
+    expect(inputOtpBase).toHaveAttribute("aria-required", "true");
+    expect(inputOtpBase).not.toHaveAttribute("data-invalid");
+
+    const submitButton = getByTestId("submit");
+
+    await user.click(submitButton);
+
+    expect(inputOtpBase).toHaveAttribute("data-invalid", "true");
+    const errorMessage = document.querySelector("[data-slot='error-message']");
+
+    expect(errorMessage).toBeInTheDocument();
+
+    const resetButton = getByTestId("reset");
+
+    await user.click(resetButton);
+
+    expect(inputOtpBase).not.toHaveAttribute("data-invalid");
+    expect(errorMessage).not.toBeInTheDocument();
+  });
+});
+
 describe("InputOtp with react-hook-form", () => {
   let user: UserEvent;
 

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

@@ -13,7 +13,7 @@ import {
 } from "@nextui-org/system";
 import {inputOtp} from "@nextui-org/theme";
 import {filterDOMProps, ReactRef, useDOMRef} from "@nextui-org/react-utils";
-import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
+import {clsx, dataAttr, objectToDeps, isPatternNumeric} from "@nextui-org/shared-utils";
 import {useCallback, useMemo} from "react";
 import {chain, mergeProps, useFormReset} from "@react-aria/utils";
 import {AriaTextFieldProps} from "@react-types/textfield";
@@ -120,6 +120,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
     containerClassName,
     noScriptCSSFallback,
     onChange,
+    inputMode,
     ...otherProps
   } = props;
 
@@ -158,7 +159,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
   });
 
   useFormReset(inputRef, value, setValue);
-  useFormValidation(props, validationState, inputRef);
+  useFormValidation({...props, validationBehavior}, validationState, inputRef);
 
   const {
     isInvalid: isAriaInvalid,
@@ -237,22 +238,24 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
         minLength: minLength ?? length,
         textAlign,
         ref: inputRef,
-        name: name,
-        value: value,
+        name,
+        value,
         autoFocus,
         onChange: setValue,
         onBlur: chain(focusProps.onBlur, props?.onBlur),
-        onComplete: onComplete,
+        onComplete,
         pushPasswordManagerStrategy,
         pasteTransformer,
         noScriptCSSFallback,
+        inputMode: inputMode ?? (isPatternNumeric(allowedKeys) ? "numeric" : "text"),
         containerClassName: slots.wrapper?.({class: clsx(classNames?.wrapper, containerClassName)}),
         ...props,
       };
 
       return otpProps;
     },
     [
+      inputMode,
       isRequired,
       isDisabled,
       isReadOnly,

packages/components/listbox/src/listbox-section.tsx

@@ -51,6 +51,9 @@ const ListboxSection = forwardRef<"li", ListboxSectionProps>(
       // the title props is already inside the rendered prop
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       title,
+      // removed items from props to avoid show in html element
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      items,
       ...otherProps
     },
     _,

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

@@ -161,6 +161,11 @@ export function useNavbar(originalProps: UseNavbarProps) {
     ref: domRef,
     onResize: () => {
       const currentWidth = domRef.current?.offsetWidth;
+      const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+
+      if (currentWidth && currentWidth + scrollWidth == prevWidth.current) {
+        return;
+      }
 
       if (currentWidth !== prevWidth.current) {
         updateWidth();