remove direct polymorphic() calls (#2195)

iTwin · Aug 20, 2024 · 867dc52 · 867dc52
1 parent 1d3e2e5
commit 867dc52
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 42 deletions.
diff --git a/packages/itwinui-react/src/core/List/ListItem.tsx b/packages/itwinui-react/src/core/List/ListItem.tsx
@@ -68,21 +68,21 @@ export type ListItemOwnProps = {
 
 // ----------------------------------------------------------------------------
 
-const ListItemIcon = polymorphic('iui-list-item-icon');
+const ListItemIcon = polymorphic.div('iui-list-item-icon');
 if (process.env.NODE_ENV === 'development') {
   ListItemIcon.displayName = 'ListItem.Icon';
 }
 
 // ----------------------------------------------------------------------------
 
-const ListItemContent = polymorphic('iui-list-item-content');
+const ListItemContent = polymorphic.div('iui-list-item-content');
 if (process.env.NODE_ENV === 'development') {
   ListItemContent.displayName = 'ListItem.Content';
 }
 
 // ----------------------------------------------------------------------------
 
-const ListItemDescription = polymorphic('iui-list-item-description');
+const ListItemDescription = polymorphic.div('iui-list-item-description');
 if (process.env.NODE_ENV === 'development') {
   ListItemDescription.displayName = 'ListItem.Description';
 }

diff --git a/packages/itwinui-react/src/core/Menu/MenuDivider.tsx b/packages/itwinui-react/src/core/Menu/MenuDivider.tsx
@@ -19,7 +19,7 @@ import { polymorphic } from '../../utils/index.js';
  *   ]}
  * </Menu>
  */
-export const MenuDivider = polymorphic('iui-menu-divider', {
+export const MenuDivider = polymorphic.div('iui-menu-divider', {
   role: 'separator',
 });
 if (process.env.NODE_ENV === 'development') {

diff --git a/packages/itwinui-react/src/core/Overlay/Overlay.tsx b/packages/itwinui-react/src/core/Overlay/Overlay.tsx
@@ -52,14 +52,14 @@ if (process.env.NODE_ENV === 'development') {
 
 // --------------------------------------------------------------------------------
 
-const OverlayOverlay = polymorphic('iui-overlay');
+const OverlayOverlay = polymorphic.div('iui-overlay');
 if (process.env.NODE_ENV === 'development') {
   OverlayOverlay.displayName = 'Overlay.Overlay';
 }
 
 // --------------------------------------------------------------------------------
 
-const OverlayWrapper = polymorphic('iui-overlay-wrapper');
+const OverlayWrapper = polymorphic.div('iui-overlay-wrapper');
 if (process.env.NODE_ENV === 'development') {
   OverlayWrapper.displayName = 'Overlay.Wrapper';
 }

diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx
@@ -186,7 +186,7 @@ if (process.env.NODE_ENV === 'development') {
 // ----------------------------------------------------------------------------
 // Tile.ThumbnailArea component
 
-const TileThumbnailArea = polymorphic('iui-tile-thumbnail');
+const TileThumbnailArea = polymorphic.div('iui-tile-thumbnail');
 if (process.env.NODE_ENV === 'development') {
   TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
 }
@@ -234,15 +234,15 @@ if (process.env.NODE_ENV === 'development') {
 // ----------------------------------------------------------------------------
 // Tile.QuickAction component
 
-const TileQuickAction = polymorphic('iui-tile-thumbnail-quick-action');
+const TileQuickAction = polymorphic.div('iui-tile-thumbnail-quick-action');
 if (process.env.NODE_ENV === 'development') {
   TileQuickAction.displayName = 'Tile.QuickAction';
 }
 
 // ----------------------------------------------------------------------------
 // Tile.TypeIndicator component
 
-const TileTypeIndicator = polymorphic('iui-tile-thumbnail-type-indicator');
+const TileTypeIndicator = polymorphic.div('iui-tile-thumbnail-type-indicator');
 if (process.env.NODE_ENV === 'development') {
   TileTypeIndicator.displayName = 'Tile.TypeIndicator';
 }
@@ -274,7 +274,9 @@ if (process.env.NODE_ENV === 'development') {
 // ----------------------------------------------------------------------------
 // Tile.BadgeContainer component
 
-const TileBadgeContainer = polymorphic('iui-tile-thumbnail-badge-container');
+const TileBadgeContainer = polymorphic.div(
+  'iui-tile-thumbnail-badge-container',
+);
 if (process.env.NODE_ENV === 'development') {
   TileBadgeContainer.displayName = 'Tile.BadgeContainer';
 }
@@ -349,23 +351,23 @@ if (process.env.NODE_ENV === 'development') {
 // ----------------------------------------------------------------------------
 // Tile.ContentArea component
 
-const TileContentArea = polymorphic('iui-tile-content');
+const TileContentArea = polymorphic.div('iui-tile-content');
 if (process.env.NODE_ENV === 'development') {
   TileContentArea.displayName = 'Tile.ContentArea';
 }
 
 // ----------------------------------------------------------------------------
 // Tile.Description component
 
-const TileDescription = polymorphic('iui-tile-description');
+const TileDescription = polymorphic.div('iui-tile-description');
 if (process.env.NODE_ENV === 'development') {
   TileDescription.displayName = 'Tile.Description';
 }
 
 // ----------------------------------------------------------------------------
 // Tile.Metadata component
 
-const TileMetadata = polymorphic('iui-tile-metadata');
+const TileMetadata = polymorphic.div('iui-tile-metadata');
 if (process.env.NODE_ENV === 'development') {
   TileMetadata.displayName = 'Tile.Metadata';
 }
@@ -425,7 +427,7 @@ if (process.env.NODE_ENV === 'development') {
 // ----------------------------------------------------------------------------
 // Tile.Buttons component
 
-const TileButtons = polymorphic('iui-tile-buttons');
+const TileButtons = polymorphic.div('iui-tile-buttons');
 if (process.env.NODE_ENV === 'development') {
   TileButtons.displayName = 'Tile.Buttons';
 }

diff --git a/packages/itwinui-react/src/core/TransferList/TransferList.tsx b/packages/itwinui-react/src/core/TransferList/TransferList.tsx
@@ -20,7 +20,7 @@ import { Label } from '../Label/Label.js';
 // ----------------------------------------------------------------------------
 // TransferListComponent
 
-const TransferListComponent = polymorphic('iui-transfer-list-wrapper');
+const TransferListComponent = polymorphic.div('iui-transfer-list-wrapper');
 if (process.env.NODE_ENV === 'development') {
   TransferListComponent.displayName = 'TransferList';
 }
@@ -226,7 +226,7 @@ if (process.env.NODE_ENV === 'development') {
 // ----------------------------------------------------------------------------
 // TransferList.Toolbar component
 
-const TransferListToolbar = polymorphic('iui-transfer-list-toolbar', {
+const TransferListToolbar = polymorphic.div('iui-transfer-list-toolbar', {
   role: 'toolbar',
 });
 if (process.env.NODE_ENV === 'development') {

diff --git a/packages/itwinui-react/src/utils/functions/polymorphic.test.tsx b/packages/itwinui-react/src/utils/functions/polymorphic.test.tsx
@@ -5,24 +5,6 @@
 import { render } from '@testing-library/react';
 import { polymorphic } from './polymorphic.js';
 
-it('should work when called directly', () => {
-  const MyDiv = polymorphic('my-div');
-
-  const { container: container1 } = render(<MyDiv data-testid='foo'>🍏</MyDiv>);
-  const el1 = container1.querySelector('div.my-div') as HTMLElement;
-  expect(el1).toHaveTextContent('🍏');
-  expect(el1).toHaveAttribute('data-testid', 'foo');
-
-  const { container: container2 } = render(
-    <MyDiv as='span' data-testid='bar'>
-      🥭
-    </MyDiv>,
-  );
-  const el2 = container2.querySelector('span.my-div') as HTMLElement;
-  expect(el2).toHaveTextContent('🥭');
-  expect(el2).toHaveAttribute('data-testid', 'bar');
-});
-
 it('should work when called as property', () => {
   const MyButton = polymorphic.button('my-button');
 

diff --git a/packages/itwinui-react/src/utils/functions/polymorphic.tsx b/packages/itwinui-react/src/utils/functions/polymorphic.tsx
@@ -49,25 +49,21 @@ const _base = <As extends keyof JSX.IntrinsicElements = 'div'>(
 /**
  * Utility to create a type-safe polymorphic component with a simple class.
  *
- * Can be called directly or as a property of the `polymorphic` object.
- * In both cases, returns a component that:
+ * Should be called as a property of the `polymorphic` object.
+ * Returns a component that:
  * - uses CSS-modules scoped classes
  * - supports `as` prop with default element
  * - forwards ref and spreads rest props
  * - adds and merges CSS classes
  * - adds tabIndex to interactive elements (Safari workaround)
  *
  * @example
- * const MyPolyDiv = polymorphic('my-poly-div');
- * <MyPolyDiv>...</MyPolyDiv>;
- *
- * @example
  * const MyPolyButton = polymorphic.button('my-poly-button', { type: 'button' });
  * <MyPolyButton as='a' href='#'>...</MyPolyButton>;
  *
  * @private
  */
-export const polymorphic = new Proxy(_base('div'), {
+export const polymorphic = new Proxy({} as never, {
   get: (target, prop) => {
     if (typeof prop === 'string') {
       // eslint-disable-next-line -- string is as far as we can narrow it down
@@ -76,7 +72,7 @@ export const polymorphic = new Proxy(_base('div'), {
     }
     return Reflect.get(target, prop);
   },
-}) as ReturnType<typeof _base> & {
+}) as {
   [key in keyof JSX.IntrinsicElements]: ReturnType<typeof _base<key>>;
 };