Merge branch 'main' into fix-light

.github/workflows/release-package.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 20
       - run: npm ci
       - run: npm test
 
@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 20
           registry-url: https://npm.pkg.github.com/
       - run: npm ci
       - run: npm publish

.github/workflows/release-please.yaml

@@ -0,0 +1,23 @@
+name: release-please
+
+on:
+    push:
+      branches: [main]
+
+permissions:
+    contents: write
+    pull-requests: write
+
+jobs:
+    release-please:
+      runs-on: ubuntu-latest
+      steps:
+        - uses: google-github-actions/release-please-action@v4
+          with:
+            # this assumes that you have created a personal access token
+            # (PAT) and configured it as a GitHub action secret named
+            # `RELEASE_PLEASE_TOKEN` (this secret name is not important).
+            token: ${{ secrets.RELEASE_PLEASE_TOKEN }}
+            # this is a built-in strategy in release-please, see "Action Inputs"
+            # for more options
+            release-type: node

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.7",
+  "version": "1.0.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/tabs/Tabs.tsx

@@ -1,12 +1,12 @@
 import React, {
-  useState,
   Children,
   cloneElement,
   ReactNode,
   isValidElement,
   ReactElement,
   HtmlHTMLAttributes,
 } from 'react';
+import { useControlledState } from '@react-stately/utils';
 import { Text } from '../content';
 import { css } from '@emotion/react';
 import { Orientation } from '../types/orientation';
@@ -112,6 +112,10 @@ function parseTabList(children: ReactNode): Tab[] {
 export type TabsProps = {
   children: ReactNode[];
   className?: string;
+  /**
+   * If specified, the index of the selected tab is controlled by the parent component rather than the internal state.
+   */
+  index?: number;
   onChange?: (index: number) => void;
   /**
    * The orientation of the tabs. Defaults to horizontal
@@ -127,16 +131,21 @@ export type TabsProps = {
 export function Tabs({
   children,
   className,
+  index,
   onChange,
   orientation = 'horizontal',
   extra,
 }: TabsProps) {
   // Filter out the nulls from the children so that tabs can be mounted conditionally
   children = Children.toArray(children).filter(child => child);
   const tabs = parseTabList(children);
-  // Initialize the selected tab to the first non-hidden tab
-  const [selectedIndex, setSelectedIndex] = useState<number>(
-    tabs.findIndex(tab => !tab.hidden)
+
+  // Initialize the selected tab to the first non-hidden tab if there is no controlled value provided
+  const defaultValue = tabs.findIndex(tab => !tab.hidden);
+  const [selectedIndex, setSelectedIndex] = useControlledState(
+    index,
+    defaultValue,
+    onChange
   );
   return (
     <div
@@ -159,7 +168,6 @@ export function Tabs({
               onClick={e => {
                 e.preventDefault();
                 setSelectedIndex(index);
-                onChange && onChange(index);
               }}
               {...tab?.tabListItemProps}
             >