refactor: remove unnecessary props types (#4530)

* refactor(docs): remove string type as it is included in ReactNode

* refactor: remove unnecessary types

* feat(changeset): add changeset

* chore: remove changeset

* refactor: remove null since ReactNode unions it already

apps/docs/content/docs/components/accordion.mdx

@@ -327,19 +327,19 @@ Here's an example of how to customize the accordion styles:
   data={[
     {
       attribute: "children",
-      type: "ReactNode | string",
+      type: "ReactNode",
       description: "The content of the component.",
       default: "-"
     },
     {
       attribute: "title",
-      type: "ReactNode | string",
+      type: "ReactNode",
       description: "The accordion item title.",
       default: "-"
     },
     {
       attribute: "subtitle",
-      type: "ReactNode | string",
+      type: "ReactNode",
       description: "The accordion item subtitle.",
       default: "-"
     },

apps/docs/content/docs/components/navbar.mdx

@@ -412,7 +412,7 @@ When the `NavbarItem` is active, it will have a `data-active` attribute. You can
   data={[
     {
       attribute: "icon",
-      type: "ReactNode | ((isOpen: boolean | undefined) => ReactNode | null)",
+      type: "ReactNode | ((isOpen: boolean | undefined) => ReactNode)",
       description: "The icon to render as the navbar menu toggle.",
       default: "-"
     },

packages/components/accordion/src/accordion-item.tsx

@@ -40,7 +40,7 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
 
   const willChange = useWillChange();
 
-  const indicatorContent = useMemo<ReactNode | null>(() => {
+  const indicatorContent = useMemo<ReactNode>(() => {
     if (typeof indicator === "function") {
       return indicator({indicator: <ChevronIcon />, isOpen, isDisabled});
     }

packages/components/accordion/src/base/accordion-item-base.tsx

@@ -33,15 +33,15 @@ export interface Props<T extends object = {}>
   /**
    * The content of the component.
    */
-  children?: ReactNode | null;
+  children?: ReactNode;
   /**
    * The accordion item title.
    */
-  title?: ReactNode | string;
+  title?: ReactNode;
   /**
    * The accordion item subtitle.
    */
-  subtitle?: ReactNode | string;
+  subtitle?: ReactNode;
   /**
    * The accordion item `expanded` indicator, it's usually an arrow icon.
    * If you pass a function, NextUI will expose the current indicator and the open status,

packages/components/listbox/src/base/listbox-item-base.tsx

@@ -25,15 +25,15 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"li", T>, "childre
   /**
    * The content of the component.
    */
-  children?: ReactNode | null;
+  children?: ReactNode;
   /**
    * The listbox item title.
    */
-  title?: ReactNode | string;
+  title?: ReactNode;
   /**
    * The listbox item subtitle.
    */
-  description?: ReactNode | string;
+  description?: ReactNode;
   /**
    * The listbox item start content.
    */

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

@@ -29,7 +29,7 @@ const ListboxItem = (props: ListboxItemProps) => {
     getSelectedIconProps,
   } = useListboxItem(props);
 
-  const selectedContent = useMemo<ReactNode | null>(() => {
+  const selectedContent = useMemo<ReactNode>(() => {
     const defaultIcon = (
       <ListboxSelectedIcon disableAnimation={disableAnimation} isSelected={isSelected} />
     );

packages/components/menu/src/base/menu-item-base.tsx

@@ -25,19 +25,19 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"li", T>, "childre
   /**
    * The content of the component.
    */
-  children?: ReactNode | null;
+  children?: ReactNode;
   /**
    * The menu item title.
    */
-  title?: ReactNode | string;
+  title?: ReactNode;
   /**
    * The menu item subtitle.
    */
-  description?: ReactNode | string;
+  description?: ReactNode;
   /**
    * The menu item keyboard shortcut.
    */
-  shortcut?: ReactNode | string;
+  shortcut?: ReactNode;
   /**
    * The menu item start content.
    */

packages/components/menu/src/menu-item.tsx

@@ -32,7 +32,7 @@ const MenuItem = (props: MenuItemProps) => {
     getSelectedIconProps,
   } = useMenuItem(props);
 
-  const selectedContent = useMemo<ReactNode | null>(() => {
+  const selectedContent = useMemo<ReactNode>(() => {
     const defaultIcon = (
       <MenuSelectedIcon disableAnimation={disableAnimation} isSelected={isSelected} />
     );

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

@@ -24,7 +24,7 @@ export interface UseSnippetProps extends Omit<HTMLNextUIProps, "onCopy">, Snippe
    * The content of the snippet.
    * if `string[]` is passed, it will be rendered as a multi-line snippet.
    */
-  children?: React.ReactNode | string | string[];
+  children?: React.ReactNode | string[];
   /**
    * The symbol to show before the snippet.
    * @default "$"

packages/components/tabs/src/base/tab-item-base.ts

@@ -4,11 +4,11 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"button", T>, "chi
   /**
    * The content of the component.
    */
-  children?: ReactNode | null;
+  children?: ReactNode;
   /**
    * The title of the component.
    */
-  title?: ReactNode | null;
+  title?: ReactNode;
   /**
    *  A string representation of the item's contents. Use this when the title is not readable.
    *  This will be used as native `title` attribute.

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

@@ -17,11 +17,11 @@ interface Props {
   /**
    * The user name.
    */
-  name: ReactNode | string;
+  name: ReactNode;
   /**
    * The user information, like email, phone, etc.
    */
-  description?: ReactNode | string;
+  description?: ReactNode;
   /**
    * Whether the user can be focused.
    * @default false