chore(docs): updated docusaurus to v2.3.0 (#3145)

www/docs/src/theme/Tabs/index.js

@@ -1,105 +1,33 @@
-import React, {cloneElement, isValidElement, useEffect, useState} from 'react';
+import React, {cloneElement, useEffect} from 'react';
+import clsx from 'clsx';
 import {
   useScrollPositionBlocker,
-  useTabGroupChoice,
+  useTabs,
 } from '@docusaurus/theme-common/internal';
-
-import clsx from 'clsx';
-import {duplicates} from '@docusaurus/theme-common';
-import styles from './styles.module.css';
 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 TabsComponent(props) {
-  const {
-    lazy,
-    block,
-    defaultValue: defaultValueProp,
-    values: valuesProp,
-    groupId,
-    className,
-    isCodeTabs = false,
-    codeTitle
-  } = 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 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.`,
-    );
-  }
-  // When defaultValueProp is null, don't show a default tab
-  const defaultValue =
-    defaultValueProp === null
-      ? defaultValueProp
-      : defaultValueProp ??
-        children.find((child) => child.props.default)?.props.value ??
-        children[0].props.value;
-  if (defaultValue !== null && !values.some((a) => a.value === defaultValue)) {
-    throw new Error(
-      `Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" 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 {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
+//ADDED: isCodeTabs and codeTitle props
+function TabList({className, block, selectedValue, selectValue, tabValues, isCodeTabs = false, codeTitle}) {
   const tabRefs = [];
   const {blockElementScrollPositionUntilNextRender} =
     useScrollPositionBlocker();
-  if (groupId != null) {
-    const relevantTabGroupChoice = tabGroupChoices[groupId];
-    if (
-      relevantTabGroupChoice != null &&
-      relevantTabGroupChoice !== selectedValue &&
-      values.some((value) => value.value === relevantTabGroupChoice)
-    ) {
-      setSelectedValue(relevantTabGroupChoice);
-    }
-  }
   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);
-      if (groupId != null) {
-        setTabGroupChoices(groupId, String(newTabValue));
-      }
+      selectValue(newTabValue);
     }
   };
   const handleKeydown = (event) => {
     let focusElement = null;
     switch (event.key) {
+      case 'Enter': {
+        handleTabChange(event);
+        break;
+      }
       case 'ArrowRight': {
         const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
         focusElement = tabRefs[nextTab] ?? tabRefs[0];
@@ -115,65 +43,77 @@ function TabsComponent(props) {
     }
     focusElement?.focus();
   };
-  return (
-    <div className={clsx('tabs-container', styles.tabList)}>
-      <div className={`tablist-wrapper ${isCodeTabs ? 'code-header' : ''}`}>
-        {isCodeTabs && <span className='code-title'>{codeTitle}</span>}
-        <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}
-              onFocus={handleTabChange}
-              onClick={handleTabChange}
-              {...attributes}
-              className={clsx(
-                'tabs__item',
-                styles.tabItem,
-                attributes?.className,
-                {
-                  'tabs__item--active': selectedValue === value,
-                },
-              )}>
-              {label ?? value}
-            </li>
-          ))}
-        </ul>
-      </div>
 
-      {lazy ? (
-        cloneElement(
-          children.filter(
-            (tabItem) => tabItem.props.value === selectedValue,
-          )[0],
-        )
-      ) : (
-        <div>
-          {children.map((tabItem, i) =>
-            cloneElement(tabItem, {
-              key: i,
-              hidden: tabItem.props.value !== selectedValue,
-            }),
-          )}
-        </div>
+  //ADDED: div wrapper to ul
+  //ADDED: span with code-title class
+  return (
+    <div  className={`tablist-wrapper ${isCodeTabs ? 'code-header' : ''}`}>
+      {isCodeTabs && <span className='code-title'>{codeTitle}</span>}
+      <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>
+    </div>
+  );
+}
+
+//CHANGED: Removed margin-top--md class
+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);
+  }
+  return (
+    <div>
+      {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();
 
@@ -182,8 +122,9 @@ export default function Tabs(props) {
       //set the default
       window.localStorage.setItem('docusaurus.tab.npm2yarn', 'yarn')
     }
-  }, [])
+  }, []);
 
+  // ADDED: wrapper div + isCodeTabs prop
   return (
     <div className={`tabs-wrapper ${props.wrapperClassName || ''} ${props.groupId === 'npm2yarn' ? 'code-tabs' : ''}`}>
       <TabsComponent