Fix(web-react): Fix types in Dropdown #DS-1221

lmc-eu · Jun 3, 2024 · 4c88e55 · 4c88e55
1 parent 08cc0fc
commit 4c88e55
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx b/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx
@@ -1,21 +1,16 @@
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
-import { StyleProps } from '../../types';
+import { DropdownTriggerProps } from '../../types';
 import { useDropdownContext } from './DropdownContext';
 import { useDropdownAriaProps } from './useDropdownAriaProps';
 import { useDropdownStyleProps } from './useDropdownStyleProps';
 
-interface DropdownTriggerProps extends StyleProps {
-  elementType?: ElementType | string;
-  children: string | React.ReactNode | ((props: { isOpen: boolean }) => React.ReactNode);
-}
-
 const defaultProps = {
   elementType: 'button',
 };
 
-export const DropdownTrigger = (props: DropdownTriggerProps) => {
+export const DropdownTrigger = <T extends ElementType = 'button'>(props: DropdownTriggerProps<T>) => {
   const propsWithDefaults = { ...defaultProps, ...props };
   const { elementType = 'button', children, ...rest } = propsWithDefaults;
   const { id, isOpen, onToggle, fullWidthMode, triggerRef } = useDropdownContext();

diff --git a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
@@ -204,7 +204,6 @@ const ModalDefault = () => {
               provident unde. Eveniet, iste, molestiae?
             </p>
             <Dropdown id="dropdown-in-modal" isOpen={isDropdownOpen} onToggle={handleDropdownToggle}>
-              {/* @ts-expect-error -- TS2322: Property color does not exist on type … */}
               <DropdownTrigger elementType={Button} color="secondary">
                 Dropdown
               </DropdownTrigger>

diff --git a/packages/web-react/src/types/dropdown.ts b/packages/web-react/src/types/dropdown.ts
@@ -1,4 +1,4 @@
-import { LegacyRef } from 'react';
+import { ComponentPropsWithRef, ElementType, LegacyRef, ReactNode } from 'react';
 import { Booleanish, ChildrenProps, ClickEvent, PlacementDictionaryType, StyleProps } from './shared';
 
 export const DropdownFullWidthModes = {
@@ -10,7 +10,7 @@ export const DropdownFullWidthModes = {
 export type DropdownFullWidthModeKeys = keyof typeof DropdownFullWidthModes;
 export type DropdownFullWidthMode = (typeof DropdownFullWidthModes)[DropdownFullWidthModeKeys];
 
-export type DropdownTriggerProps = {
+export type DropdownTriggerRenderProps = {
   onClick: (event: ClickEvent) => void;
   className?: string | undefined;
   'aria-expanded': Booleanish;
@@ -20,7 +20,7 @@ export type DropdownTriggerProps = {
 
 export type DropdownRenderProps = {
   isOpen: boolean;
-  trigger: DropdownTriggerProps;
+  trigger: DropdownTriggerRenderProps;
 };
 
 export interface DropdownProps extends ChildrenProps, StyleProps {
@@ -41,3 +41,9 @@ export interface SpiritDropdownProps extends DropdownProps, ChildrenProps {
 }
 
 export interface UncontrolledDropdownProps extends ChildrenProps, Omit<SpiritDropdownProps, 'isOpen' | 'onToggle'> {}
+
+export type DropdownTriggerProps<E extends ElementType> = {
+  elementType?: E;
+  children: string | ReactNode | ((props: { isOpen: boolean }) => ReactNode);
+} & ComponentPropsWithRef<E> &
+  StyleProps;