accept renderer properties in separate prop

Author: stomita

src/scripts/Tabs.tsx

@@ -106,32 +106,37 @@ export type TabItemRendererProps = {
   menuIcon?: string;
   eventKey?: TabKey;
   activeKey?: TabKey;
+  activeTabRef?: Ref<HTMLAnchorElement>;
+  children?: ReactNode;
   onTabClick?: (eventKey: TabKey) => void;
   onTabKeyDown?: (
     eventKey: TabKey,
     e: React.KeyboardEvent<HTMLAnchorElement>
   ) => void;
 };
 
-const DefaultTabItemRenderer: FC<TabItemRendererProps> = (props) => {
+const DefaultTabItemRenderer: FC = (props) => {
   const el = React.Children.only(props.children);
   return React.isValidElement(el) ? el : <>{el}</>;
 };
 
 /**
  *
  */
-export type TabItemProps = {
-  tabItemRenderer?: ComponentType<TabItemRendererProps>;
+export type TabItemProps<RendererProps extends TabItemRendererProps> = {
+  tabItemRenderer?: ComponentType<RendererProps>;
+  rendererProps?: Omit<RendererProps, keyof TabItemRendererProps>;
 } & Omit<
   TabItemRendererProps,
-  'type' | 'activeKey' | 'onTabClick' | 'onTabKeyDown'
+  'type' | 'activeKey' | 'activeTabRef' | 'onTabClick' | 'onTabKeyDown'
 >;
 
 /**
  *
  */
-const TabItem: FC<TabItemProps> = (props) => {
+const TabItem = <RendererProps extends TabItemRendererProps>(
+  props: TabItemProps<RendererProps>
+) => {
   const { title, eventKey, menu, menuIcon } = props;
   const { type, activeTabRef } = useContext(TabsContext);
   const activeKey = useContext(TabsActiveKeyContext);
@@ -153,14 +158,21 @@ const TabItem: FC<TabItemProps> = (props) => {
   const tabLinkClassName = `slds-tabs_${type}__link`;
   const {
     tabItemRenderer: TabItemRenderer = DefaultTabItemRenderer,
+    rendererProps,
     ...rprops
   } = props;
+  const itemRendererProps = {
+    ...rendererProps,
+    ...rprops,
+    type,
+    activeKey,
+    activeTabRef,
+    onTabClick,
+    onTabKeyDown,
+  } as RendererProps;
   return (
     <li className={tabItemClassName} role='presentation'>
-      <TabItemRenderer
-        {...rprops}
-        {...{ type, activeKey, onTabClick, onTabKeyDown }}
-      >
+      <TabItemRenderer {...itemRendererProps}>
         <span className='react-slds-tab-item-content'>
           <a
             className={tabLinkClassName}
@@ -210,12 +222,17 @@ const TabNav: FC = (props) => {
 /**
  *
  */
-export type TabProps = {
+export type TabProps<RendererProps> = {
   className?: string;
   eventKey?: TabKey;
-} & TabItemProps;
+  children?: ReactNode;
+} & TabItemProps<RendererProps>;
 
-export const Tab: FC<TabProps> = (props) => {
+export const Tab = <
+  RendererProps extends TabItemRendererProps = TabItemRendererProps
+>(
+  props: TabProps<RendererProps>
+) => {
   const { className, eventKey, children } = props;
   const activeKey = useContext(TabsActiveKeyContext);
   return (

stories/Tabs.stories.tsx

@@ -18,7 +18,7 @@ function createMenu() {
 /**
  *
  */
-function CustomTabItemContent(props: TabItemRendererProps) {
+function CustomTabItemContent(props: TabItemRendererProps & { icon: string }) {
   const {
     activeKey,
     activeTabRef,
@@ -44,7 +44,7 @@ function CustomTabItemContent(props: TabItemRendererProps) {
         onTabKeyDown && eventKey != null && onTabKeyDown(eventKey, e)
       }
     >
-      <Icon icon={icon as string} size='small' />
+      <Icon icon={icon} size='small' />
       <span className='slds-p-horizontal_x-small'>{title}</span>
     </a>
   );
@@ -199,24 +199,30 @@ export const CustomTabItem: ComponentStoryObj<typeof Tabs> = {
       <Tab
         eventKey='1'
         title='Tab 1'
-        icon='standard:account'
         tabItemRenderer={CustomTabItemContent}
+        rendererProps={{
+          icon: 'standard:account',
+        }}
       >
         This is in tab #1
       </Tab>
       <Tab
         eventKey='2'
         title='Tab 2'
-        icon='standard:contact'
         tabItemRenderer={CustomTabItemContent}
+        rendererProps={{
+          icon: 'standard:contact',
+        }}
       >
         This is in tab #2
       </Tab>
       <Tab
         eventKey='3'
         title='Tab 3'
-        icon='standard:opportunity'
         tabItemRenderer={CustomTabItemContent}
+        rendererProps={{
+          icon: 'standard:opportunity',
+        }}
       >
         This is in tab #3
       </Tab>