fix: pnpm-lock & typing issues

.changeset/wise-kangaroos-wonder.md

@@ -0,0 +1,11 @@
+---
+"@nextui-org/checkbox": patch
+"@nextui-org/input": patch
+"@nextui-org/navbar": patch
+"@nextui-org/radio": patch
+"@nextui-org/select": patch
+"@nextui-org/use-aria-multiselect": patch
+"@nextui-org/use-aria-press": patch
+---
+
+Fixed typing issues

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

@@ -145,7 +145,7 @@ const MyInput = forwardRef((props, ref) => {
           {innerWrapper}
         </div>
         {description && <div {...getDescriptionProps()}>{description}</div>}
-        {errorMessage && <div {...getErrorMessageProps()}>{errorMessage}</div>}
+        {errorMessage && <div {...getErrorMessageProps()}>{errorMessage as React.ReactNode}</div>}
       </Component>
     </div>
   );

packages/components/checkbox/src/checkbox-group.tsx

@@ -26,7 +26,7 @@ const CheckboxGroup = forwardRef<"div", CheckboxGroupProps>((props, ref) => {
         <CheckboxGroupProvider value={context}>{children}</CheckboxGroupProvider>
       </div>
       {errorMessage ? (
-        <div {...getErrorMessageProps()}>{errorMessage}</div>
+        <div {...getErrorMessageProps()}>{errorMessage as React.ReactNode}</div>
       ) : description ? (
         <div {...getDescriptionProps()}>{description}</div>
       ) : null}

packages/components/input/src/input.tsx

@@ -47,7 +47,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
     return (
       <div {...getHelperWrapperProps()}>
         {errorMessage ? (
-          <div {...getErrorMessageProps()}>{errorMessage}</div>
+          <div {...getErrorMessageProps()}>{errorMessage as React.ReactNode}</div>
         ) : description ? (
           <div {...getDescriptionProps()}>{description}</div>
         ) : null}

packages/components/input/src/textarea.tsx

@@ -145,7 +145,7 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
         {hasHelper ? (
           <div {...getHelperWrapperProps()}>
             {errorMessage ? (
-              <div {...getErrorMessageProps()}>{errorMessage}</div>
+              <div {...getErrorMessageProps()}>{errorMessage as React.ReactNode}</div>
             ) : description ? (
               <div {...getDescriptionProps()}>{description}</div>
             ) : null}

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

@@ -115,7 +115,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
 
   const [inputValue, setInputValue] = useControlledState<string | undefined>(
     props.value,
-    props.defaultValue,
+    props.defaultValue ?? "",
     handleValueChange,
   );
 
@@ -152,6 +152,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
       ),
       inputElementType: isMultiline ? "textarea" : "input",
       onChange: setInputValue,
+      autoCapitalize: undefined,
     },
     domRef,
   );

packages/components/input/stories/input.stories.tsx

@@ -450,7 +450,7 @@ const CustomWithHooksTemplate = (args: InputProps) => {
           {innerWrapper}
         </div>
         {description && <div {...getDescriptionProps()}>{description}</div>}
-        {errorMessage && <div {...getErrorMessageProps()}>{errorMessage}</div>}
+        {errorMessage && <div {...getErrorMessageProps()}>{errorMessage as React.ReactNode}</div>}
       </Component>
     </div>
   );

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

@@ -123,7 +123,7 @@ export function useNavbar(originalProps: UseNavbarProps) {
 
   const [isMenuOpen, setIsMenuOpen] = useControlledState<boolean | undefined>(
     isMenuOpenProp,
-    isMenuDefaultOpen,
+    isMenuDefaultOpen ?? false,
     handleMenuOpenChange,
   );
 

packages/components/radio/src/radio-group.tsx

@@ -27,7 +27,7 @@ const RadioGroup = forwardRef<"div", RadioGroupProps>((props, ref) => {
         <RadioGroupProvider value={context}>{children}</RadioGroupProvider>
       </div>
       {errorMessage ? (
-        <div {...getErrorMessageProps()}>{errorMessage}</div>
+        <div {...getErrorMessageProps()}>{errorMessage as React.ReactNode}</div>
       ) : description ? (
         <div {...getDescriptionProps()}>{description}</div>
       ) : null}

packages/components/select/src/select.tsx

@@ -57,7 +57,7 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
     return (
       <div {...getHelperWrapperProps()}>
         {errorMessage ? (
-          <div {...getErrorMessageProps()}>{errorMessage}</div>
+          <div {...getErrorMessageProps()}>{errorMessage as React.ReactNode}</div>
         ) : description ? (
           <div {...getDescriptionProps()}>{description}</div>
         ) : null}

packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts

@@ -23,7 +23,7 @@ export interface MultiSelectProps<T>
     Omit<InputBase, "isReadOnly">,
     DOMProps,
     HelpTextProps,
-    Validation,
+    Validation<T>,
     LabelableProps,
     TextInputBase,
     Omit<MultipleSelection, "none">,

packages/hooks/use-aria-press/src/index.ts

@@ -49,6 +49,8 @@ const LINK_CLICKED = Symbol("linkClicked");
  * Handles press interactions across mouse, touch, keyboard, and screen readers.
  * It normalizes behavior across browsers and platforms, and handles many nuances
  * of dealing with pointer and keyboard events.
+ *
+ * @deprecated use `usePress` instead from `react-aria`
  */
 export function usePress(props: PressHookProps): PressResult {
   let {
@@ -82,40 +84,42 @@ export function usePress(props: PressHookProps): PressResult {
 
   let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
 
-  let triggerPressStart = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
-    let state = ref.current;
+  let triggerPressStart = useEffectEvent(
+    (originalEvent: EventBase, pointerType: PointerType | null) => {
+      let state = ref.current;
 
-    if (isDisabled || state.didFirePressStart) {
-      return;
-    }
+      if (isDisabled || state.didFirePressStart || !pointerType) {
+        return false;
+      }
 
-    let shouldStopPropagation = true;
+      let shouldStopPropagation = true;
 
-    state.isTriggeringEvent = true;
-    if (onPressStart) {
-      let event = new PressEvent("pressstart", pointerType, originalEvent);
+      state.isTriggeringEvent = true;
+      if (onPressStart) {
+        let event = new PressEvent("pressstart", pointerType, originalEvent);
 
-      onPressStart(event);
-      shouldStopPropagation = event.shouldStopPropagation;
-    }
+        onPressStart(event);
+        shouldStopPropagation = event.shouldStopPropagation;
+      }
 
-    if (onPressChange) {
-      onPressChange(true);
-    }
+      if (onPressChange) {
+        onPressChange(true);
+      }
 
-    state.isTriggeringEvent = false;
-    state.didFirePressStart = true;
-    setPressed(true);
+      state.isTriggeringEvent = false;
+      state.didFirePressStart = true;
+      setPressed(true);
 
-    return shouldStopPropagation;
-  });
+      return shouldStopPropagation;
+    },
+  );
 
   let triggerPressEnd = useEffectEvent(
-    (originalEvent: EventBase, pointerType: PointerType, wasPressed = true) => {
+    (originalEvent: EventBase, pointerType: PointerType | null, wasPressed = true) => {
       let state = ref.current;
 
-      if (!state.didFirePressStart) {
-        return;
+      if (!state.didFirePressStart || !pointerType) {
+        return false;
       }
 
       state.ignoreClickAfterPress = true;
@@ -150,25 +154,27 @@ export function usePress(props: PressHookProps): PressResult {
     },
   );
 
-  let triggerPressUp = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
-    let state = ref.current;
+  let triggerPressUp = useEffectEvent(
+    (originalEvent: EventBase, pointerType: PointerType | null) => {
+      let state = ref.current;
 
-    if (isDisabled) {
-      return;
-    }
+      if (isDisabled || !pointerType) {
+        return false;
+      }
 
-    if (onPressUp) {
-      state.isTriggeringEvent = true;
-      let event = new PressEvent("pressup", pointerType, originalEvent);
+      if (onPressUp) {
+        state.isTriggeringEvent = true;
+        let event = new PressEvent("pressup", pointerType, originalEvent);
 
-      onPressUp(event);
-      state.isTriggeringEvent = false;
+        onPressUp(event);
+        state.isTriggeringEvent = false;
 
-      return event.shouldStopPropagation;
-    }
+        return event.shouldStopPropagation;
+      }
 
-    return true;
-  });
+      return true;
+    },
+  );
 
   let cancel = useEffectEvent((e: EventBase) => {
     let state = ref.current;
@@ -446,7 +452,7 @@ export function usePress(props: PressHookProps): PressResult {
         } else if (state.isOverTarget) {
           state.isOverTarget = false;
           triggerPressEnd(createEvent(state.target, e as EventBase), state.pointerType, false);
-          cancelOnPointerExit(e);
+          cancelOnPointerExit(e as EventBase);
         }
       };
 
@@ -475,7 +481,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       let onPointerCancel = (e: PointerEvent) => {
-        cancel(e);
+        cancel(e as EventBase);
       };
 
       pressProps.onDragStart = (e) => {
@@ -709,7 +715,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       let onScroll = (e: Event) => {
-        if (state.isPressed && (e.target as Element).contains(state.target)) {
+        if (state.isPressed && state.target && (e.target as Element).contains(state.target)) {
           cancel({
             currentTarget: state.target,
             shiftKey: false,