LG-4724: Export prop types which are already wrapped in the polymorphic types (re-created) (#2613)

Kræn Hansen · web-flow · commit a3d63cb951a4 · 2025-01-07T16:54:24.000Z
* Export prop types already wrapped in polymorphic types

* Adding a changeset

* Add explicit type-parameter to event-handlers
diff --git a/.changeset/grumpy-moose-exercise.md b/.changeset/grumpy-moose-exercise.md
@@ -0,0 +1,9 @@
+---
+'@leafygreen-ui/input-option': patch
+'@leafygreen-ui/search-input': patch
+'@leafygreen-ui/split-button': patch
+'@leafygreen-ui/card': patch
+'@leafygreen-ui/menu': patch
+---
+
+Export prop types for components already wrapped in polymorphic types
diff --git a/packages/card/src/Card/Card.tsx b/packages/card/src/Card/Card.tsx
@@ -9,12 +9,12 @@ import {
 } from '@leafygreen-ui/polymorphic';
 
 import { colorSet, containerStyle } from './styles';
-import { CardProps, ContentStyle } from './types';
+import { ContentStyle, InternalCardProps } from './types';
 
 /**
  * Cards are used to organize information into consumable chunks.
  */
-export const Card = InferredPolymorphic<CardProps, 'div'>(
+export const Card = InferredPolymorphic<InternalCardProps, 'div'>(
   (
     {
       as = 'div' as PolymorphicAs,
diff --git a/packages/card/src/Card/types.ts b/packages/card/src/Card/types.ts
@@ -1,4 +1,8 @@
 import { DarkModeProps } from '@leafygreen-ui/lib';
+import {
+  InferredPolymorphicProps,
+  PolymorphicAs,
+} from '@leafygreen-ui/polymorphic';
 
 export const ContentStyle = {
   None: 'none',
@@ -7,7 +11,7 @@ export const ContentStyle = {
 
 export type ContentStyle = (typeof ContentStyle)[keyof typeof ContentStyle];
 
-export interface CardProps extends DarkModeProps {
+export interface InternalCardProps extends DarkModeProps {
   /**
    * Determines whether the Card should be styled as clickable.
    *
@@ -23,3 +27,7 @@ export interface CardProps extends DarkModeProps {
    */
   title?: string;
 }
+
+// External only
+export type CardProps<TAsProp extends PolymorphicAs = 'div'> =
+  InferredPolymorphicProps<TAsProp, InternalCardProps>;
diff --git a/packages/input-option/src/InputOption/InputOption.tsx b/packages/input-option/src/InputOption/InputOption.tsx
@@ -15,9 +15,9 @@ import {
   getInputOptionWedge,
   inputOptionClassName,
 } from './InputOption.style';
-import { InputOptionProps } from './InputOption.types';
+import { InternalInputOptionProps } from './InputOption.types';
 
-export const InputOption = Polymorphic<InputOptionProps>(
+export const InputOption = Polymorphic<InternalInputOptionProps>(
   (
     {
       as = 'li' as PolymorphicAs,
diff --git a/packages/input-option/src/InputOption/InputOption.types.ts b/packages/input-option/src/InputOption/InputOption.types.ts
@@ -1,5 +1,6 @@
 import { AriaLabelPropsWithChildren } from '@leafygreen-ui/a11y';
 import { DarkModeProps } from '@leafygreen-ui/lib';
+import { PolymorphicAs, PolymorphicProps } from '@leafygreen-ui/polymorphic';
 
 /**
  * TERMINOLOGY
@@ -55,6 +56,10 @@ export interface BaseInputOptionProps {
   isInteractive?: boolean;
 }
 
-export type InputOptionProps = DarkModeProps &
+export type InternalInputOptionProps = DarkModeProps &
   AriaLabelPropsWithChildren &
   BaseInputOptionProps;
+
+// External only
+export type InputOptionProps<TAsProp extends PolymorphicAs = 'li'> =
+  PolymorphicProps<TAsProp, InternalInputOptionProps>;
diff --git a/packages/menu/src/MenuItem/InternalMenuItemContent.tsx b/packages/menu/src/MenuItem/InternalMenuItemContent.tsx
@@ -20,11 +20,11 @@ import {
   getMenuItemStyles,
   getNestedMenuItemStyles,
 } from './MenuItem.styles';
-import { MenuItemProps, Variant } from './MenuItem.types';
+import { InternalMenuItemProps, Variant } from './MenuItem.types';
 
 export type InternalMenuItemContentProps = InferredPolymorphicProps<
   PolymorphicAs,
-  MenuItemProps
+  InternalMenuItemProps
 > & {
   index: number;
 };
diff --git a/packages/menu/src/MenuItem/MenuItem.tsx b/packages/menu/src/MenuItem/MenuItem.tsx
@@ -9,9 +9,9 @@ import { MenuDescendantsContext } from '../MenuContext';
 
 import { InternalMenuItemContent } from './InternalMenuItemContent';
 import { menuItemClassName, menuItemContainerStyles } from './MenuItem.styles';
-import { MenuItemProps } from './MenuItem.types';
+import { InternalMenuItemProps } from './MenuItem.types';
 
-export const MenuItem = InferredPolymorphic<MenuItemProps, 'button'>(
+export const MenuItem = InferredPolymorphic<InternalMenuItemProps, 'button'>(
   (
     { as, disabled = false, active = false, onClick, ...rest },
     fwdRef: React.Ref<any>,
diff --git a/packages/menu/src/MenuItem/MenuItem.types.ts b/packages/menu/src/MenuItem/MenuItem.types.ts
@@ -1,5 +1,10 @@
 import { ReactElement, ReactNode } from 'react';
 
+import {
+  InferredPolymorphicProps,
+  PolymorphicAs,
+} from '@leafygreen-ui/polymorphic';
+
 const Variant = {
   Default: 'default',
   Destructive: 'destructive',
@@ -9,7 +14,7 @@ type Variant = (typeof Variant)[keyof typeof Variant];
 
 export { Variant };
 
-export interface MenuItemProps {
+export interface InternalMenuItemProps {
   /**
    * Determines whether or not the MenuItem is disabled.
    */
@@ -54,3 +59,7 @@ export interface MenuItemProps {
   // TODO: codemod to remove `size` props from existing implementations
   size?: 'default' | 'large';
 }
+
+// External only
+export type MenuItemProps<TAsProp extends PolymorphicAs = 'button'> =
+  InferredPolymorphicProps<TAsProp, InternalMenuItemProps>;
diff --git a/packages/menu/src/SubMenu/SubMenu.tsx b/packages/menu/src/SubMenu/SubMenu.tsx
@@ -97,7 +97,9 @@ export const SubMenu = InferredPolymorphic<InternalSubMenuProps, 'button'>(
     const submenuTriggerRef = useRef<HTMLButtonElement>(null);
     const subMenuHeight = useChildrenHeight(submenuRef, [open]);
 
-    const handleClick: MouseEventHandler = e => {
+    const handleClick: MouseEventHandler<
+      HTMLAnchorElement & HTMLButtonElement
+    > = e => {
       if (onClick || rest.href) {
         if (!disabled) {
           onClick?.(e);
diff --git a/packages/menu/src/SubMenu/SubMenu.types.ts b/packages/menu/src/SubMenu/SubMenu.types.ts
@@ -51,7 +51,5 @@ export interface InternalSubMenuProps
 }
 
 // External only
-export type SubMenuProps = InferredPolymorphicProps<
-  PolymorphicAs,
-  InternalSubMenuProps
->;
+export type SubMenuProps<TAsProp extends PolymorphicAs = 'button'> =
+  InferredPolymorphicProps<TAsProp, InternalSubMenuProps>;
diff --git a/packages/search-input/src/SearchResult/SearchResult.tsx b/packages/search-input/src/SearchResult/SearchResult.tsx
@@ -4,9 +4,12 @@ import { InputOption, InputOptionContent } from '@leafygreen-ui/input-option';
 import { getNodeTextContent } from '@leafygreen-ui/lib';
 import { InferredPolymorphic, PolymorphicAs } from '@leafygreen-ui/polymorphic';
 
-import { SearchResultProps } from './SearchResult.types';
+import { InternalSearchResultProps } from './SearchResult.types';
 
-export const SearchResult = InferredPolymorphic<SearchResultProps, 'li'>(
+export const SearchResult = InferredPolymorphic<
+  InternalSearchResultProps,
+  'li'
+>(
   (
     {
       as = 'li' as PolymorphicAs,
diff --git a/packages/search-input/src/SearchResult/SearchResult.types.ts b/packages/search-input/src/SearchResult/SearchResult.types.ts
@@ -2,8 +2,12 @@ import React from 'react';
 
 import { BaseInputOptionProps } from '@leafygreen-ui/input-option';
 import { DarkModeProps } from '@leafygreen-ui/lib';
+import {
+  InferredPolymorphicProps,
+  PolymorphicAs,
+} from '@leafygreen-ui/polymorphic';
 
-export type SearchResultProps = DarkModeProps &
+export type InternalSearchResultProps = DarkModeProps &
   Omit<BaseInputOptionProps, 'showWedge' | 'active' | 'isInteractive'> & {
     /**
      * The value of the result
@@ -20,3 +24,7 @@ export type SearchResultProps = DarkModeProps &
      */
     onClick?: React.MouseEventHandler;
   };
+
+// External only
+export type SearchResultProps<TAsProp extends PolymorphicAs = 'li'> =
+  InferredPolymorphicProps<TAsProp, InternalSearchResultProps>;
diff --git a/packages/split-button/src/Menu/Menu.tsx b/packages/split-button/src/Menu/Menu.tsx
@@ -79,7 +79,10 @@ export const Menu = ({
   useBackdropClick(handleClose, [buttonRef, menuRef], open);
 
   const renderMenuItems = useMemo(() => {
-    const onMenuItemClick = (e: MouseEvent, menuItem: MenuItemType) => {
+    const onMenuItemClick = (
+      e: MouseEvent<HTMLAnchorElement & HTMLButtonElement>,
+      menuItem: MenuItemType,
+    ) => {
       handleClose();
       menuItem.props.onClick?.(e);
       onChange?.(e);
@@ -90,7 +93,8 @@ export const Menu = ({
         return React.cloneElement(menuItem, {
           active: false,
           key: `menuItem-${menuItem.key}`,
-          onClick: (e: MouseEvent) => onMenuItemClick(e, menuItem),
+          onClick: (e: MouseEvent<HTMLAnchorElement & HTMLButtonElement>) =>
+            onMenuItemClick(e, menuItem),
         });
       } else {
         console.warn(
diff --git a/packages/split-button/src/SplitButton/SplitButton.tsx b/packages/split-button/src/SplitButton/SplitButton.tsx
@@ -19,9 +19,17 @@ import {
   buttonContainerStyles,
   buttonThemeStyles,
 } from './SplitButton.styles';
-import { Align, Justify, SplitButtonProps, Variant } from './SplitButton.types';
+import {
+  Align,
+  InternalSplitButtonProps,
+  Justify,
+  Variant,
+} from './SplitButton.types';
 
-export const SplitButton = InferredPolymorphic<SplitButtonProps, 'button'>(
+export const SplitButton = InferredPolymorphic<
+  InternalSplitButtonProps,
+  'button'
+>(
   (
     {
       darkMode: darkModeProp,
diff --git a/packages/split-button/src/SplitButton/SplitButton.types.ts b/packages/split-button/src/SplitButton/SplitButton.types.ts
@@ -120,7 +120,7 @@ export interface MenuProps extends SelectedMenuProps {
   onChange?: MouseEventHandler;
 }
 
-export interface SplitButtonProps
+export interface InternalSplitButtonProps
   extends DarkModeProps,
     ButtonProps,
     MenuProps {
@@ -136,3 +136,7 @@ export interface SplitButtonProps
    */
   label: string;
 }
+
+// External only
+export type SplitButtonProps<TAsProp extends PolymorphicAs = 'button'> =
+  InferredPolymorphicProps<TAsProp, InternalSplitButtonProps>;

Original file line number	Diff line number	Diff line change
`@@ -9,12 +9,12 @@ import {`
`9`	`9`	`} from '@leafygreen-ui/polymorphic';`
`10`	`10`
`11`	`11`	`import { colorSet, containerStyle } from './styles';`
`12`		`-import { CardProps, ContentStyle } from './types';`
	`12`	`+import { ContentStyle, InternalCardProps } from './types';`
`13`	`13`
`14`	`14`	`/**`
`15`	`15`	`* Cards are used to organize information into consumable chunks.`
`16`	`16`	`*/`
`17`		`-export const Card = InferredPolymorphic<CardProps, 'div'>(`
	`17`	`+export const Card = InferredPolymorphic<InternalCardProps, 'div'>(`
`18`	`18`	`(`
`19`	`19`	`{`
`20`	`20`	`as = 'div' as PolymorphicAs,`
Original file line number	Diff line number	Diff line change
`@@ -15,9 +15,9 @@ import {`
`15`	`15`	`getInputOptionWedge,`
`16`	`16`	`inputOptionClassName,`
`17`	`17`	`} from './InputOption.style';`
`18`		`-import { InputOptionProps } from './InputOption.types';`
	`18`	`+import { InternalInputOptionProps } from './InputOption.types';`
`19`	`19`
`20`		`-export const InputOption = Polymorphic<InputOptionProps>(`
	`20`	`+export const InputOption = Polymorphic<InternalInputOptionProps>(`
`21`	`21`	`(`
`22`	`22`	`{`
`23`	`23`	`as = 'li' as PolymorphicAs,`
Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,5 @@ export interface InternalSubMenuProps`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`// External only`
`54`		`-export type SubMenuProps = InferredPolymorphicProps<`
`55`		`- PolymorphicAs,`
`56`		`- InternalSubMenuProps`
`57`		`->;`
	`54`	`+export type SubMenuProps<TAsProp extends PolymorphicAs = 'button'> =`
	`55`	`+ InferredPolymorphicProps<TAsProp, InternalSubMenuProps>;`