nextui
nextui copied to clipboard
[Feature Request] Fix type of 'title' prop in AutocompleteSection component
Is your feature request related to a problem? Please describe.
I've encountered an issue where Typescript says that providing a ReactNode type for the title
property in the AutocompleteSection
component is an error. But everything works fine when I pass a non-string.
Here's the error message:
Type 'Element' is not assignable to type 'string | (ReactElement<any, string | JSXElementConstructor<any>> & string) | (Iterable<ReactNode> & string) | (ReactPortal & string) | (Promise<...> & string) | undefined'.ts(2322)
collections.d.ts(45, 3): The expected type comes from property 'title' which is declared here on type 'IntrinsicAttributes & ListboxSectionBaseProps<object>'
Describe the solution you'd like
As a developer I expect not to see errors like this
Describe alternatives you've considered
So I propose to extend the SectionProps
generic types with another one called OmitKeys
, with 'children'
by default (for backwards compatibility) and add another argument to ListboxSectionBaseProps - 'children' | 'title'
, to exclude the title: string
type inherited from HTMLAttributes.
After this fix, the title type will be ReactNode
only (which also includes string
), and nothing will change in other places where SectionProps was used.
diff --git a/packages/utilities/aria-utils/src/collections/section.ts b/packages/utilities/aria-utils/src/collections/section.ts
--- packages/utilities/aria-utils/src/collections/section.ts
+++ packages/utilities/aria-utils/src/collections/section.ts
@@ -5,6 +5,6 @@
/**
* A modified version of the SectionProps from @react-types/shared, with the addition of the NextUI props.
*
*/
-export type SectionProps<Type extends As = "div", T extends object = {}> = BaseSectionProps<T> &
- Omit<HTMLNextUIProps<Type>, "children">;
+export type SectionProps<Type extends As = "div", T extends object = {}, OmitKeys extends string = "children"> = BaseSectionProps<T> &
+ Omit<HTMLNextUIProps<Type>, OmitKeys>;
diff --git a/packages/components/listbox/src/base/listbox-section-base.tsx b/packages/components/listbox/src/base/listbox-section-base.tsx
--- packages/components/listbox/src/base/listbox-section-base.tsx
+++ packages/components/listbox/src/base/listbox-section-base.tsx
@@ -4,9 +4,9 @@
import {DividerProps} from "@nextui-org/divider";
import {ListboxItemProps} from "../listbox-item";
-export interface ListboxSectionBaseProps<T extends object = {}> extends SectionProps<"ul", T> {
+export interface ListboxSectionBaseProps<T extends object = {}> extends SectionProps<"ul", T, 'children' | 'title'> {
/**
* The listbox section classNames.
*/
classNames?: SlotsToClasses<ListboxSectionSlots>;
Screenshots or Videos
https://github.com/user-attachments/assets/a184e7e5-3281-4049-9957-9c108180d8ec