@docusaurus/theme-classic 0.0.0-5428 → 0.0.0-5430

package/lib/theme/Layout/Provider/index.js

@@ -8,7 +8,6 @@ import React from 'react';
 import {composeProviders} from '@docusaurus/theme-common';
 import {
   ColorModeProvider,
-  TabGroupChoiceProvider,
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   ScrollControllerProvider,
@@ -18,7 +17,6 @@ import {
 const Provider = composeProviders([
   ColorModeProvider,
   AnnouncementBarProvider,
-  TabGroupChoiceProvider,
   ScrollControllerProvider,
   DocsPreferredVersionContextProvider,
   PluginHtmlClassNameProvider,

package/lib/theme/Tabs/index.js

@@ -4,168 +4,25 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {
-  cloneElement,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, {cloneElement} from 'react';
 import clsx from 'clsx';
-import {useHistory, useLocation} from '@docusaurus/router';
-import {duplicates, useEvent} from '@docusaurus/theme-common';
 import {
   useScrollPositionBlocker,
-  useTabGroupChoice,
+  useTabs,
 } from '@docusaurus/theme-common/internal';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import styles from './styles.module.css';
-// A very rough duck type, but good enough to guard against mistakes while
-// allowing customization
-function isTabItem(comp) {
-  return 'value' in comp.props;
-}
-function getSearchKey({queryString = false, groupId}) {
-  if (typeof queryString === 'string') {
-    return queryString;
-  }
-  if (queryString === false) {
-    return undefined;
-  }
-  if (queryString === true && !groupId) {
-    throw new Error(
-      `Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".`,
-    );
-  }
-  return groupId;
-}
-function useTabQueryString({queryString = false, groupId}) {
-  // TODO not re-render optimized
-  // See https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api
-  const location = useLocation();
-  const history = useHistory();
-  const searchKey = getSearchKey({queryString, groupId});
-  const get = useCallback(() => {
-    if (!searchKey) {
-      return undefined;
-    }
-    return new URLSearchParams(location.search).get(searchKey);
-  }, [searchKey, location.search]);
-  const set = useCallback(
-    (newTabValue) => {
-      if (!searchKey) {
-        return; // no-op
-      }
-      const searchParams = new URLSearchParams(location.search);
-      searchParams.set(searchKey, newTabValue);
-      history.replace({...location, search: searchParams.toString()});
-    },
-    [searchKey, history, location],
-  );
-  return {get, set};
-}
-function TabsComponent(props) {
-  const {
-    lazy,
-    block,
-    defaultValue: defaultValueProp,
-    values: valuesProp,
-    groupId,
-    className,
-    queryString = false,
-  } = props;
-  const children = React.Children.map(props.children, (child) => {
-    if (isValidElement(child) && isTabItem(child)) {
-      return child;
-    }
-    // child.type.name will give non-sensical values in prod because of
-    // minification, but we assume it won't throw in prod.
-    throw new Error(
-      `Docusaurus error: Bad <Tabs> child <${
-        // @ts-expect-error: guarding against unexpected cases
-        typeof child.type === 'string' ? child.type : child.type.name
-      }>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`,
-    );
-  });
-  const tabQueryString = useTabQueryString({queryString, groupId});
-  const values =
-    valuesProp ??
-    // Only pick keys that we recognize. MDX would inject some keys by default
-    children.map(({props: {value, label, attributes}}) => ({
-      value,
-      label,
-      attributes,
-    }));
-  const dup = duplicates(values, (a, b) => a.value === b.value);
-  if (dup.length > 0) {
-    throw new Error(
-      `Docusaurus error: Duplicate values "${dup
-        .map((a) => a.value)
-        .join(', ')}" found in <Tabs>. Every value needs to be unique.`,
-    );
-  }
-  // Warn user about passing incorrect defaultValue as prop.
-  if (
-    defaultValueProp !== null &&
-    defaultValueProp !== undefined &&
-    !values.some((a) => a.value === defaultValueProp)
-  ) {
-    throw new Error(
-      `Docusaurus error: The <Tabs> has a defaultValue "${defaultValueProp}" but none of its children has the corresponding value. Available values are: ${values
-        .map((a) => a.value)
-        .join(
-          ', ',
-        )}. If you intend to show no default tab, use defaultValue={null} instead.`,
-    );
-  }
-  const {
-    ready: tabGroupChoicesReady,
-    tabGroupChoices,
-    setTabGroupChoices,
-  } = useTabGroupChoice();
-  const defaultValue =
-    defaultValueProp !== undefined
-      ? defaultValueProp
-      : children.find((child) => child.props.default)?.props.value ??
-        children[0].props.value;
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
+function TabList({className, block, selectedValue, selectValue, tabValues}) {
   const tabRefs = [];
   const {blockElementScrollPositionUntilNextRender} =
     useScrollPositionBlocker();
-  // Lazily restore the appropriate tab selected value
-  // We can't read queryString/localStorage on first render
-  // It would trigger a React SSR/client hydration mismatch
-  const restoreTabSelectedValue = useEvent(() => {
-    // wait for localStorage values to be set (initially empty object :s)
-    if (tabGroupChoicesReady) {
-      // querystring value > localStorage value
-      const valueToRestore =
-        tabQueryString.get() ?? (groupId && tabGroupChoices[groupId]);
-      const isValid =
-        valueToRestore &&
-        values.some((value) => value.value === valueToRestore);
-      if (isValid) {
-        setSelectedValue(valueToRestore);
-      }
-    }
-  });
-  useEffect(() => {
-    // wait for localStorage values to be set (initially empty object :s)
-    if (tabGroupChoicesReady) {
-      restoreTabSelectedValue();
-    }
-  }, [tabGroupChoicesReady, restoreTabSelectedValue]);
   const handleTabChange = (event) => {
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = values[newTabIndex].value;
+    const newTabValue = tabValues[newTabIndex].value;
     if (newTabValue !== selectedValue) {
       blockElementScrollPositionUntilNextRender(newTab);
-      setSelectedValue(newTabValue);
-      tabQueryString.set(newTabValue);
-      if (groupId != null) {
-        setTabGroupChoices(groupId, String(newTabValue));
-      }
+      selectValue(newTabValue);
     }
   };
   const handleKeydown = (event) => {
@@ -191,60 +48,67 @@ function TabsComponent(props) {
     focusElement?.focus();
   };
   return (
-    <div className={clsx('tabs-container', styles.tabList)}>
-      <ul
-        role="tablist"
-        aria-orientation="horizontal"
-        className={clsx(
-          'tabs',
-          {
-            'tabs--block': block,
-          },
-          className,
-        )}>
-        {values.map(({value, label, attributes}) => (
-          <li
-            role="tab"
-            tabIndex={selectedValue === value ? 0 : -1}
-            aria-selected={selectedValue === value}
-            key={value}
-            ref={(tabControl) => tabRefs.push(tabControl)}
-            onKeyDown={handleKeydown}
-            onClick={handleTabChange}
-            {...attributes}
-            className={clsx(
-              'tabs__item',
-              styles.tabItem,
-              attributes?.className,
-              {
-                'tabs__item--active': selectedValue === value,
-              },
-            )}>
-            {label ?? value}
-          </li>
-        ))}
-      </ul>
-
-      {lazy ? (
-        cloneElement(
-          children.filter(
-            (tabItem) => tabItem.props.value === selectedValue,
-          )[0],
-          {className: 'margin-top--md'},
-        )
-      ) : (
-        <div className="margin-top--md">
-          {children.map((tabItem, i) =>
-            cloneElement(tabItem, {
-              key: i,
-              hidden: tabItem.props.value !== selectedValue,
-            }),
-          )}
-        </div>
+    <ul
+      role="tablist"
+      aria-orientation="horizontal"
+      className={clsx(
+        'tabs',
+        {
+          'tabs--block': block,
+        },
+        className,
+      )}>
+      {tabValues.map(({value, label, attributes}) => (
+        <li
+          // TODO extract TabListItem
+          role="tab"
+          tabIndex={selectedValue === value ? 0 : -1}
+          aria-selected={selectedValue === value}
+          key={value}
+          ref={(tabControl) => tabRefs.push(tabControl)}
+          onKeyDown={handleKeydown}
+          onClick={handleTabChange}
+          {...attributes}
+          className={clsx('tabs__item', styles.tabItem, attributes?.className, {
+            'tabs__item--active': selectedValue === value,
+          })}>
+          {label ?? value}
+        </li>
+      ))}
+    </ul>
+  );
+}
+function TabContent({lazy, children, selectedValue}) {
+  if (lazy) {
+    const selectedTabItem = children.find(
+      (tabItem) => tabItem.props.value === selectedValue,
+    );
+    if (!selectedTabItem) {
+      // fail-safe or fail-fast? not sure what's best here
+      return null;
+    }
+    return cloneElement(selectedTabItem, {className: 'margin-top--md'});
+  }
+  return (
+    <div className="margin-top--md">
+      {children.map((tabItem, i) =>
+        cloneElement(tabItem, {
+          key: i,
+          hidden: tabItem.props.value !== selectedValue,
+        }),
       )}
     </div>
   );
 }
+function TabsComponent(props) {
+  const tabs = useTabs(props);
+  return (
+    <div className={clsx('tabs-container', styles.tabList)}>
+      <TabList {...props} {...tabs} />
+      <TabContent {...props} {...tabs} />
+    </div>
+  );
+}
 export default function Tabs(props) {
   const isBrowser = useIsBrowser();
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5428",
+  "version": "0.0.0-5430",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5428",
-    "@docusaurus/mdx-loader": "0.0.0-5428",
-    "@docusaurus/module-type-aliases": "0.0.0-5428",
-    "@docusaurus/plugin-content-blog": "0.0.0-5428",
-    "@docusaurus/plugin-content-docs": "0.0.0-5428",
-    "@docusaurus/plugin-content-pages": "0.0.0-5428",
-    "@docusaurus/theme-common": "0.0.0-5428",
-    "@docusaurus/theme-translations": "0.0.0-5428",
-    "@docusaurus/types": "0.0.0-5428",
-    "@docusaurus/utils": "0.0.0-5428",
-    "@docusaurus/utils-common": "0.0.0-5428",
-    "@docusaurus/utils-validation": "0.0.0-5428",
+    "@docusaurus/core": "0.0.0-5430",
+    "@docusaurus/mdx-loader": "0.0.0-5430",
+    "@docusaurus/module-type-aliases": "0.0.0-5430",
+    "@docusaurus/plugin-content-blog": "0.0.0-5430",
+    "@docusaurus/plugin-content-docs": "0.0.0-5430",
+    "@docusaurus/plugin-content-pages": "0.0.0-5430",
+    "@docusaurus/theme-common": "0.0.0-5430",
+    "@docusaurus/theme-translations": "0.0.0-5430",
+    "@docusaurus/types": "0.0.0-5430",
+    "@docusaurus/utils": "0.0.0-5430",
+    "@docusaurus/utils-common": "0.0.0-5430",
+    "@docusaurus/utils-validation": "0.0.0-5430",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "71631dbc003d6fe7844c6fd9211327c11f8c6f7a"
+  "gitHead": "2758916f72e969d3a8e3ae28dcd6203cfcf3600b"
 }

package/src/theme/Layout/Provider/index.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import {composeProviders} from '@docusaurus/theme-common';
 import {
   ColorModeProvider,
-  TabGroupChoiceProvider,
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   ScrollControllerProvider,
@@ -21,7 +20,6 @@ import type {Props} from '@theme/Layout/Provider';
 const Provider = composeProviders([
   ColorModeProvider,
   AnnouncementBarProvider,
-  TabGroupChoiceProvider,
   ScrollControllerProvider,
   DocsPreferredVersionContextProvider,
   PluginHtmlClassNameProvider,

package/src/theme/Tabs/index.tsx

@@ -5,181 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {
-  cloneElement,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useState,
-  type ReactElement,
-} from 'react';
+import React, {cloneElement} from 'react';
 import clsx from 'clsx';
-import {useHistory, useLocation} from '@docusaurus/router';
-import {duplicates, useEvent} from '@docusaurus/theme-common';
 import {
   useScrollPositionBlocker,
-  useTabGroupChoice,
+  useTabs,
 } from '@docusaurus/theme-common/internal';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import type {Props as TabItemProps} from '@theme/TabItem';
 import type {Props} from '@theme/Tabs';
 import styles from './styles.module.css';
 
-// A very rough duck type, but good enough to guard against mistakes while
-// allowing customization
-function isTabItem(
-  comp: ReactElement<object>,
-): comp is ReactElement<TabItemProps> {
-  return 'value' in comp.props;
-}
-
-function getSearchKey({
-  queryString = false,
-  groupId,
-}: Pick<Props, 'queryString' | 'groupId'>) {
-  if (typeof queryString === 'string') {
-    return queryString;
-  }
-  if (queryString === false) {
-    return undefined;
-  }
-  if (queryString === true && !groupId) {
-    throw new Error(
-      `Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".`,
-    );
-  }
-  return groupId;
-}
-
-function useTabQueryString({
-  queryString = false,
-  groupId,
-}: Pick<Props, 'queryString' | 'groupId'>) {
-  // TODO not re-render optimized
-  // See https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api
-  const location = useLocation();
-  const history = useHistory();
-
-  const searchKey = getSearchKey({queryString, groupId});
-
-  const get = useCallback(() => {
-    if (!searchKey) {
-      return undefined;
-    }
-    return new URLSearchParams(location.search).get(searchKey);
-  }, [searchKey, location.search]);
-
-  const set = useCallback(
-    (newTabValue: string) => {
-      if (!searchKey) {
-        return; // no-op
-      }
-      const searchParams = new URLSearchParams(location.search);
-      searchParams.set(searchKey, newTabValue);
-      history.replace({...location, search: searchParams.toString()});
-    },
-    [searchKey, history, location],
-  );
-
-  return {get, set};
-}
-
-function TabsComponent(props: Props): JSX.Element {
-  const {
-    lazy,
-    block,
-    defaultValue: defaultValueProp,
-    values: valuesProp,
-    groupId,
-    className,
-    queryString = false,
-  } = props;
-  const children = React.Children.map(props.children, (child) => {
-    if (isValidElement(child) && isTabItem(child)) {
-      return child;
-    }
-    // child.type.name will give non-sensical values in prod because of
-    // minification, but we assume it won't throw in prod.
-    throw new Error(
-      `Docusaurus error: Bad <Tabs> child <${
-        // @ts-expect-error: guarding against unexpected cases
-        typeof child.type === 'string' ? child.type : child.type.name
-      }>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`,
-    );
-  });
-  const tabQueryString = useTabQueryString({queryString, groupId});
-  const values =
-    valuesProp ??
-    // Only pick keys that we recognize. MDX would inject some keys by default
-    children.map(({props: {value, label, attributes}}) => ({
-      value,
-      label,
-      attributes,
-    }));
-  const dup = duplicates(values, (a, b) => a.value === b.value);
-  if (dup.length > 0) {
-    throw new Error(
-      `Docusaurus error: Duplicate values "${dup
-        .map((a) => a.value)
-        .join(', ')}" found in <Tabs>. Every value needs to be unique.`,
-    );
-  }
-
-  // Warn user about passing incorrect defaultValue as prop.
-  if (
-    defaultValueProp !== null &&
-    defaultValueProp !== undefined &&
-    !values.some((a) => a.value === defaultValueProp)
-  ) {
-    throw new Error(
-      `Docusaurus error: The <Tabs> has a defaultValue "${defaultValueProp}" but none of its children has the corresponding value. Available values are: ${values
-        .map((a) => a.value)
-        .join(
-          ', ',
-        )}. If you intend to show no default tab, use defaultValue={null} instead.`,
-    );
-  }
-
-  const {
-    ready: tabGroupChoicesReady,
-    tabGroupChoices,
-    setTabGroupChoices,
-  } = useTabGroupChoice();
-  const defaultValue =
-    defaultValueProp !== undefined
-      ? defaultValueProp
-      : children.find((child) => child.props.default)?.props.value ??
-        children[0]!.props.value;
-
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
+function TabList({
+  className,
+  block,
+  selectedValue,
+  selectValue,
+  tabValues,
+}: Props & ReturnType<typeof useTabs>) {
   const tabRefs: (HTMLLIElement | null)[] = [];
   const {blockElementScrollPositionUntilNextRender} =
     useScrollPositionBlocker();
 
-  // Lazily restore the appropriate tab selected value
-  // We can't read queryString/localStorage on first render
-  // It would trigger a React SSR/client hydration mismatch
-  const restoreTabSelectedValue = useEvent(() => {
-    // wait for localStorage values to be set (initially empty object :s)
-    if (tabGroupChoicesReady) {
-      // querystring value > localStorage value
-      const valueToRestore =
-        tabQueryString.get() ?? (groupId && tabGroupChoices[groupId]);
-      const isValid =
-        valueToRestore &&
-        values.some((value) => value.value === valueToRestore);
-      if (isValid) {
-        setSelectedValue(valueToRestore);
-      }
-    }
-  });
-  useEffect(() => {
-    // wait for localStorage values to be set (initially empty object :s)
-    if (tabGroupChoicesReady) {
-      restoreTabSelectedValue();
-    }
-  }, [tabGroupChoicesReady, restoreTabSelectedValue]);
-
   const handleTabChange = (
     event:
       | React.FocusEvent<HTMLLIElement>
@@ -188,15 +34,11 @@ function TabsComponent(props: Props): JSX.Element {
   ) => {
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = values[newTabIndex]!.value;
+    const newTabValue = tabValues[newTabIndex]!.value;
 
     if (newTabValue !== selectedValue) {
       blockElementScrollPositionUntilNextRender(newTab);
-      setSelectedValue(newTabValue);
-      tabQueryString.set(newTabValue);
-      if (groupId != null) {
-        setTabGroupChoices(groupId, String(newTabValue));
-      }
+      selectValue(newTabValue);
     }
   };
 
@@ -226,61 +68,79 @@ function TabsComponent(props: Props): JSX.Element {
   };
 
   return (
-    <div className={clsx('tabs-container', styles.tabList)}>
-      <ul
-        role="tablist"
-        aria-orientation="horizontal"
-        className={clsx(
-          'tabs',
-          {
-            'tabs--block': block,
-          },
-          className,
-        )}>
-        {values.map(({value, label, attributes}) => (
-          <li
-            role="tab"
-            tabIndex={selectedValue === value ? 0 : -1}
-            aria-selected={selectedValue === value}
-            key={value}
-            ref={(tabControl) => tabRefs.push(tabControl)}
-            onKeyDown={handleKeydown}
-            onClick={handleTabChange}
-            {...attributes}
-            className={clsx(
-              'tabs__item',
-              styles.tabItem,
-              attributes?.className as string,
-              {
-                'tabs__item--active': selectedValue === value,
-              },
-            )}>
-            {label ?? value}
-          </li>
-        ))}
-      </ul>
+    <ul
+      role="tablist"
+      aria-orientation="horizontal"
+      className={clsx(
+        'tabs',
+        {
+          'tabs--block': block,
+        },
+        className,
+      )}>
+      {tabValues.map(({value, label, attributes}) => (
+        <li
+          // TODO extract TabListItem
+          role="tab"
+          tabIndex={selectedValue === value ? 0 : -1}
+          aria-selected={selectedValue === value}
+          key={value}
+          ref={(tabControl) => tabRefs.push(tabControl)}
+          onKeyDown={handleKeydown}
+          onClick={handleTabChange}
+          {...attributes}
+          className={clsx(
+            'tabs__item',
+            styles.tabItem,
+            attributes?.className as string,
+            {
+              'tabs__item--active': selectedValue === value,
+            },
+          )}>
+          {label ?? value}
+        </li>
+      ))}
+    </ul>
+  );
+}
 
-      {lazy ? (
-        cloneElement(
-          children.filter(
-            (tabItem) => tabItem.props.value === selectedValue,
-          )[0]!,
-          {className: 'margin-top--md'},
-        )
-      ) : (
-        <div className="margin-top--md">
-          {children.map((tabItem, i) =>
-            cloneElement(tabItem, {
-              key: i,
-              hidden: tabItem.props.value !== selectedValue,
-            }),
-          )}
-        </div>
+function TabContent({
+  lazy,
+  children,
+  selectedValue,
+}: Props & ReturnType<typeof useTabs>) {
+  if (lazy) {
+    const selectedTabItem = children.find(
+      (tabItem) => tabItem.props.value === selectedValue,
+    );
+    if (!selectedTabItem) {
+      // fail-safe or fail-fast? not sure what's best here
+      return null;
+    }
+    return cloneElement(selectedTabItem, {className: 'margin-top--md'});
+  }
+  return (
+    <div className="margin-top--md">
+      {children.map((tabItem, i) =>
+        cloneElement(tabItem, {
+          key: i,
+          hidden: tabItem.props.value !== selectedValue,
+        }),
       )}
     </div>
   );
 }
 
+function TabsComponent(props: Props): JSX.Element {
+  const tabs = useTabs(props);
+  return (
+    <div className={clsx('tabs-container', styles.tabList)}>
+      <TabList {...props} {...tabs} />
+      <TabContent {...props} {...tabs} />
+    </div>
+  );
+}
+
 export default function Tabs(props: Props): JSX.Element {
   const isBrowser = useIsBrowser();
   return (

package/src/theme-classic.d.ts

@@ -1232,39 +1232,17 @@ declare module '@theme/Mermaid' {
 }
 
 declare module '@theme/TabItem' {
-  import type {ReactNode} from 'react';
+  import type {TabItemProps} from '@docusaurus/theme-common/internal';
 
-  export interface Props {
-    readonly children: ReactNode;
-    readonly value: string;
-    readonly default?: boolean;
-    readonly label?: string;
-    readonly hidden?: boolean;
-    readonly className?: string;
-    readonly attributes?: {[key: string]: unknown};
-  }
+  export interface Props extends TabItemProps {}
 
   export default function TabItem(props: Props): JSX.Element;
 }
 
 declare module '@theme/Tabs' {
-  import type {ReactElement} from 'react';
-  import type {Props as TabItemProps} from '@theme/TabItem';
+  import type {TabsProps} from '@docusaurus/theme-common/internal';
 
-  export interface Props {
-    readonly lazy?: boolean;
-    readonly block?: boolean;
-    readonly children: readonly ReactElement<TabItemProps>[];
-    readonly defaultValue?: string | null;
-    readonly values?: readonly {
-      value: string;
-      label?: string;
-      attributes?: {[key: string]: unknown};
-    }[];
-    readonly groupId?: string;
-    readonly className?: string;
-    readonly queryString?: string | boolean;
-  }
+  export interface Props extends TabsProps {}
 
   export default function Tabs(props: Props): JSX.Element;
 }