@purpurds/tabs 7.6.1 → 7.7.0

package/src/tab-content.tsx

@@ -1,17 +1,11 @@
-import React, {
-  type ComponentPropsWithoutRef,
-  type ForwardedRef,
-  forwardRef,
-  isValidElement,
-  type ReactElement,
-  type ReactNode,
-} from "react";
+import React, { forwardRef, isValidElement, type ReactElement, type ReactNode } from "react";
+import type { BaseProps } from "@purpurds/common-types";
 import { Content } from "@radix-ui/react-tabs";
 import c from "classnames/bind";
 
 import styles from "./tab-content.module.scss";
 
-export type TabContentProps = {
+export type TabContentProps = Omit<BaseProps, "children"> & {
   /**
    * Content to be rendered inside a `button` element.
    * Only pass ReactNodes that are valid as children of a `button`, such as plain text,
@@ -26,36 +20,19 @@ export type TabContentProps = {
    * If true, the inactive tab content will not be rendered.
    */
   disableForceMount?: boolean;
-  "data-testid"?: string;
+  children: ReactNode;
 };
 
-export type TabContentPropsWithChildren = ComponentPropsWithoutRef<"div"> &
-  TabContentProps & {
-    children: ReactNode;
-  };
-
 const cx = c.bind(styles);
 const rootClassName = "purpur-tab-content";
 
-export const TabContent = forwardRef(
-  (
-    {
-      children,
-      tabId,
-      "data-testid": dataTestId,
-      className,
-      disableForceMount,
-      ...props
-    }: TabContentPropsWithChildren,
-    ref: ForwardedRef<HTMLDivElement>
-  ) => (
+export const TabContent = forwardRef<HTMLDivElement, TabContentProps>(
+  ({ children, tabId, "data-testid": dataTestId, className, disableForceMount, ...props }, ref) => (
     <Content
       ref={ref}
-      className={cx([
-        rootClassName,
-        className,
-        { [`${rootClassName}--force-mount`]: !disableForceMount },
-      ])}
+      className={cx(rootClassName, className, {
+        [`${rootClassName}--force-mount`]: !disableForceMount,
+      })}
       data-testid={dataTestId}
       value={tabId}
       forceMount={!disableForceMount || undefined}

package/src/tab-header.tsx

@@ -38,7 +38,7 @@ export const TabHeader = forwardRef(
   ) => (
     <Trigger
       id={`${tabId}-trigger`}
-      className={cx([rootClassName, `${rootClassName}--${variant}${negative ? "-negative" : ""}`])}
+      className={cx(rootClassName, `${rootClassName}--${variant}${negative ? "-negative" : ""}`)}
       value={tabId}
       data-testid={dataTestId}
       data-index={index}

package/src/tabs.tsx

@@ -1,4 +1,11 @@
-import React, { Children, type ReactElement, useEffect, useRef, useState } from "react";
+import React, {
+  Children,
+  type HTMLAttributes,
+  type ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { Icon } from "@purpurds/icon";
 import { chevronLeft } from "@purpurds/icon/assets/chevron-left";
 import { chevronRight } from "@purpurds/icon/assets/chevron-right";
@@ -34,7 +41,7 @@ type TabsProps = {
    * */
   animateHeight?: boolean;
   "data-testid"?: string;
-} & Pick<React.HTMLAttributes<HTMLDivElement>, "style" | "className">;
+} & Pick<HTMLAttributes<HTMLDivElement>, "style" | "className">;
 
 const cx = c.bind(styles);
 const rootClassName = "purpur-tabs";
@@ -102,12 +109,12 @@ export const Tabs: TabsCmp<TabsProps> = ({
   const sideScrollAdjustmentSize = 200;
   const isLineVariant = variant === "line";
 
-  const classNames = cx([
+  const classNames = cx(
     rootClassName,
     `${rootClassName}--${variant}${negative ? "-negative" : ""}`,
     { [`${rootClassName}--fullWidth`]: fullWidth },
-    className,
-  ]);
+    className
+  );
 
   const tabIds = Children.map(tabContentChildren, ({ props: { tabId } }) => tabId);
 
@@ -249,7 +256,7 @@ export const Tabs: TabsCmp<TabsProps> = ({
       {...props}
     >
       <div className={cx(`${rootClassName}__container`)}>
-        <div className={cx([`${rootClassName}__wrapper`, scrollClasses])}>
+        <div className={cx(`${rootClassName}__wrapper`, scrollClasses)}>
           <List
             ref={(el) => {
               tabList.current = el;

package/src/tabs.utils.ts

@@ -1,6 +1,8 @@
-import { type TabContent } from "./tab-content";
+import type { FunctionComponent } from "react";
 
-export type TabsCmp<P> = React.FunctionComponent<P> & {
+import type { TabContent } from "./tab-content";
+
+export type TabsCmp<P> = FunctionComponent<P> & {
   Content: typeof TabContent;
 };