@react-stately/tabs 3.0.3 → 3.1.0

package/dist/main.js

@@ -1,5 +1,5 @@
-var $2jh56$reactstatelylist = require("@react-stately/list");
-var $2jh56$react = require("react");
+var $7iSyh$reactstatelylist = require("@react-stately/list");
+var $7iSyh$react = require("react");
 
 function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
@@ -20,34 +20,39 @@ function $parcel$exportWildcard(dest, source) {
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-var $c990352501f33d9e$exports = {};
+var $817f925d289daf81$exports = {};
 
-$parcel$export($c990352501f33d9e$exports, "useTabListState", () => $c990352501f33d9e$export$4ba071daf4e486);
+$parcel$export($817f925d289daf81$exports, "useTabListState", () => $817f925d289daf81$export$4ba071daf4e486);
 
 
-function $c990352501f33d9e$export$4ba071daf4e486(props) {
-    let state = $2jh56$reactstatelylist.useSingleSelectListState({
+function $817f925d289daf81$export$4ba071daf4e486(props) {
+    let state = $7iSyh$reactstatelylist.useSingleSelectListState({
         ...props,
         suppressTextValueWarning: true
     });
-    $2jh56$react.useEffect(()=>{
-        // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
-        let selectedKey = state.selectedKey;
-        if (state.selectionManager.isEmpty || !state.collection.getItem(selectedKey)) {
-            selectedKey = state.collection.getFirstKey();
-            state.selectionManager.replaceSelection(selectedKey);
-        }
-        if (state.selectionManager.focusedKey == null) state.selectionManager.setFocusedKey(selectedKey);
-    }, [
-        state.selectionManager,
-        state.selectedKey,
-        state.collection
-    ]);
+    let { selectionManager: selectionManager , collection: collection , selectedKey: currentSelectedKey  } = state;
+    let lastSelectedKey = $7iSyh$react.useRef(currentSelectedKey);
+    // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
+    let selectedKey = currentSelectedKey;
+    if (selectionManager.isEmpty || !collection.getItem(selectedKey)) {
+        selectedKey = collection.getFirstKey();
+        // loop over tabs until we find one that isn't disabled and select that
+        while(state.disabledKeys.has(selectedKey) && selectedKey !== collection.getLastKey())selectedKey = collection.getKeyAfter(selectedKey);
+        // if this check is true, then every item is disabled, it makes more sense to default to the first key than the last
+        if (state.disabledKeys.has(selectedKey) && selectedKey === collection.getLastKey()) selectedKey = collection.getFirstKey();
+        // directly set selection because replace/toggle selection won't consider disabled keys
+        selectionManager.setSelectedKeys([
+            selectedKey
+        ]);
+    }
+    // If the tablist doesn't have focus and the selected key changes or if there isn't a focused key yet, change focused key to the selected key if it exists.
+    if (selectionManager.focusedKey == null || !selectionManager.isFocused && selectedKey !== lastSelectedKey.current) selectionManager.setFocusedKey(selectedKey);
+    lastSelectedKey.current = selectedKey;
     return state;
 }
 
 
-$parcel$exportWildcard(module.exports, $c990352501f33d9e$exports);
+$parcel$exportWildcard(module.exports, $817f925d289daf81$exports);
 
 
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;SCuBgB,uCAAe,CAAmB,KAAsB,EAAmB,CAAC;IAC1F,GAAG,CAAC,KAAK,GAAG,gDAAwB,CAAI,CAAC;WACpC,KAAK;QACR,wBAAwB,EAAE,IAAI;IAChC,CAAC;IAED,sBAAS,KAAO,CAAC;QACf,EAA0H,AAA1H,wHAA0H;QAC1H,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW;QACnC,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,KAAK,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC;YAC7E,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW;YAC1C,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,WAAW;QACrD,CAAC;QAED,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,UAAU,IAAI,IAAI,EAC3C,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,WAAW;IAEpD,CAAC,EAAE,CAAC;QAAA,KAAK,CAAC,gBAAgB;QAAE,KAAK,CAAC,WAAW;QAAE,KAAK,CAAC,UAAU;IAAA,CAAC;IAEhE,MAAM,CAAC,KAAK;AACd,CAAC","sources":["packages/@react-stately/tabs/src/index.ts","packages/@react-stately/tabs/src/useTabListState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useTabListState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';\nimport {TabListProps} from '@react-types/tabs';\nimport {useEffect} from 'react';\n\n\nexport interface TabListState<T> extends SingleSelectListState<T> {}\n\n/**\n * Provides state management for a Tabs component. Tabs include a TabList which tracks\n * which tab is currently selected and displays the content associated with that Tab in a TabPanel.\n */\nexport function useTabListState<T extends object>(props: TabListProps<T>): TabListState<T> {\n  let state = useSingleSelectListState<T>({\n    ...props,\n    suppressTextValueWarning: true\n  });\n\n  useEffect(() => {\n    // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)\n    let selectedKey = state.selectedKey;\n    if (state.selectionManager.isEmpty || !state.collection.getItem(selectedKey)) {\n      selectedKey = state.collection.getFirstKey();\n      state.selectionManager.replaceSelection(selectedKey);\n    }\n\n    if (state.selectionManager.focusedKey == null) {\n      state.selectionManager.setFocusedKey(selectedKey);\n    }\n  }, [state.selectionManager, state.selectedKey, state.collection]);\n\n  return state;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;SCuBgB,uCAAe,CAAmB,KAAsB,EAAmB,CAAC;IAC1F,GAAG,CAAC,KAAK,GAAG,gDAAwB,CAAI,CAAC;WACpC,KAAK;QACR,wBAAwB,EAAE,IAAI;IAChC,CAAC;IAED,GAAG,CAAC,CAAC,mBACH,gBAAgB,eAChB,UAAU,GACV,WAAW,EAAE,kBAAkB,EACjC,CAAC,GAAG,KAAK;IAET,GAAG,CAAC,eAAe,GAAG,mBAAM,CAAC,kBAAkB;IAC/C,EAA0H,AAA1H,wHAA0H;IAC1H,GAAG,CAAC,WAAW,GAAG,kBAAkB;IACpC,EAAE,EAAE,gBAAgB,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC;QACjE,WAAW,GAAG,UAAU,CAAC,WAAW;QACpC,EAAuE,AAAvE,qEAAuE;cAChE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,KAAK,WAAW,KAAK,UAAU,CAAC,UAAU,GACjF,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,WAAW;QAElD,EAAoH,AAApH,kHAAoH;QACpH,EAAE,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,KAAK,WAAW,KAAK,UAAU,CAAC,UAAU,IAC9E,WAAW,GAAG,UAAU,CAAC,WAAW;QAEtC,EAAuF,AAAvF,qFAAuF;QACvF,gBAAgB,CAAC,eAAe,CAAC,CAAC;YAAA,WAAW;QAAA,CAAC;IAChD,CAAC;IAED,EAA2J,AAA3J,yJAA2J;IAC3J,EAAE,EAAE,gBAAgB,CAAC,UAAU,IAAI,IAAI,KAAM,gBAAgB,CAAC,SAAS,IAAI,WAAW,KAAK,eAAe,CAAC,OAAO,EAChH,gBAAgB,CAAC,aAAa,CAAC,WAAW;IAE5C,eAAe,CAAC,OAAO,GAAG,WAAW;IAErC,MAAM,CAAC,KAAK;AACd,CAAC","sources":["packages/@react-stately/tabs/src/index.ts","packages/@react-stately/tabs/src/useTabListState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useTabListState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';\nimport {TabListProps} from '@react-types/tabs';\nimport {useRef} from 'react';\n\n\nexport interface TabListState<T> extends SingleSelectListState<T> {}\n\n/**\n * Provides state management for a Tabs component. Tabs include a TabList which tracks\n * which tab is currently selected and displays the content associated with that Tab in a TabPanel.\n */\nexport function useTabListState<T extends object>(props: TabListProps<T>): TabListState<T> {\n  let state = useSingleSelectListState<T>({\n    ...props,\n    suppressTextValueWarning: true\n  });\n\n  let {\n    selectionManager,\n    collection,\n    selectedKey: currentSelectedKey\n  } = state;\n\n  let lastSelectedKey = useRef(currentSelectedKey);\n  // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)\n  let selectedKey = currentSelectedKey;\n  if (selectionManager.isEmpty || !collection.getItem(selectedKey)) {\n    selectedKey = collection.getFirstKey();\n    // loop over tabs until we find one that isn't disabled and select that\n    while (state.disabledKeys.has(selectedKey) && selectedKey !== collection.getLastKey()) {\n      selectedKey = collection.getKeyAfter(selectedKey);\n    }\n    // if this check is true, then every item is disabled, it makes more sense to default to the first key than the last\n    if (state.disabledKeys.has(selectedKey) && selectedKey === collection.getLastKey()) {\n      selectedKey = collection.getFirstKey();\n    }\n    // directly set selection because replace/toggle selection won't consider disabled keys\n    selectionManager.setSelectedKeys([selectedKey]);\n  }\n\n  // If the tablist doesn't have focus and the selected key changes or if there isn't a focused key yet, change focused key to the selected key if it exists.\n  if (selectionManager.focusedKey == null || (!selectionManager.isFocused && selectedKey !== lastSelectedKey.current)) {\n    selectionManager.setFocusedKey(selectedKey);\n  }\n  lastSelectedKey.current = selectedKey;\n\n  return state;\n}\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,37 +1,42 @@
-import {useSingleSelectListState as $a9c3b$useSingleSelectListState} from "@react-stately/list";
-import {useEffect as $a9c3b$useEffect} from "react";
+import {useSingleSelectListState as $ijHKZ$useSingleSelectListState} from "@react-stately/list";
+import {useRef as $ijHKZ$useRef} from "react";
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-var $ead76093e5740fb6$exports = {};
+var $76f919a04c5a7d14$exports = {};
 
-$parcel$export($ead76093e5740fb6$exports, "useTabListState", () => $ead76093e5740fb6$export$4ba071daf4e486);
+$parcel$export($76f919a04c5a7d14$exports, "useTabListState", () => $76f919a04c5a7d14$export$4ba071daf4e486);
 
 
-function $ead76093e5740fb6$export$4ba071daf4e486(props) {
-    let state = $a9c3b$useSingleSelectListState({
+function $76f919a04c5a7d14$export$4ba071daf4e486(props) {
+    let state = $ijHKZ$useSingleSelectListState({
         ...props,
         suppressTextValueWarning: true
     });
-    $a9c3b$useEffect(()=>{
-        // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
-        let selectedKey = state.selectedKey;
-        if (state.selectionManager.isEmpty || !state.collection.getItem(selectedKey)) {
-            selectedKey = state.collection.getFirstKey();
-            state.selectionManager.replaceSelection(selectedKey);
-        }
-        if (state.selectionManager.focusedKey == null) state.selectionManager.setFocusedKey(selectedKey);
-    }, [
-        state.selectionManager,
-        state.selectedKey,
-        state.collection
-    ]);
+    let { selectionManager: selectionManager , collection: collection , selectedKey: currentSelectedKey  } = state;
+    let lastSelectedKey = $ijHKZ$useRef(currentSelectedKey);
+    // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
+    let selectedKey = currentSelectedKey;
+    if (selectionManager.isEmpty || !collection.getItem(selectedKey)) {
+        selectedKey = collection.getFirstKey();
+        // loop over tabs until we find one that isn't disabled and select that
+        while(state.disabledKeys.has(selectedKey) && selectedKey !== collection.getLastKey())selectedKey = collection.getKeyAfter(selectedKey);
+        // if this check is true, then every item is disabled, it makes more sense to default to the first key than the last
+        if (state.disabledKeys.has(selectedKey) && selectedKey === collection.getLastKey()) selectedKey = collection.getFirstKey();
+        // directly set selection because replace/toggle selection won't consider disabled keys
+        selectionManager.setSelectedKeys([
+            selectedKey
+        ]);
+    }
+    // If the tablist doesn't have focus and the selected key changes or if there isn't a focused key yet, change focused key to the selected key if it exists.
+    if (selectionManager.focusedKey == null || !selectionManager.isFocused && selectedKey !== lastSelectedKey.current) selectionManager.setFocusedKey(selectedKey);
+    lastSelectedKey.current = selectedKey;
     return state;
 }
 
 
 
 
-export {$ead76093e5740fb6$export$4ba071daf4e486 as useTabListState};
+export {$76f919a04c5a7d14$export$4ba071daf4e486 as useTabListState};
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;SCuBgB,uCAAe,CAAmB,KAAsB,EAAmB,CAAC;IAC1F,GAAG,CAAC,KAAK,GAAG,+BAAwB,CAAI,CAAC;WACpC,KAAK;QACR,wBAAwB,EAAE,IAAI;IAChC,CAAC;IAED,gBAAS,KAAO,CAAC;QACf,EAA0H,AAA1H,wHAA0H;QAC1H,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW;QACnC,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,KAAK,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC;YAC7E,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW;YAC1C,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,WAAW;QACrD,CAAC;QAED,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,UAAU,IAAI,IAAI,EAC3C,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,WAAW;IAEpD,CAAC,EAAE,CAAC;QAAA,KAAK,CAAC,gBAAgB;QAAE,KAAK,CAAC,WAAW;QAAE,KAAK,CAAC,UAAU;IAAA,CAAC;IAEhE,MAAM,CAAC,KAAK;AACd,CAAC","sources":["packages/@react-stately/tabs/src/index.ts","packages/@react-stately/tabs/src/useTabListState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useTabListState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';\nimport {TabListProps} from '@react-types/tabs';\nimport {useEffect} from 'react';\n\n\nexport interface TabListState<T> extends SingleSelectListState<T> {}\n\n/**\n * Provides state management for a Tabs component. Tabs include a TabList which tracks\n * which tab is currently selected and displays the content associated with that Tab in a TabPanel.\n */\nexport function useTabListState<T extends object>(props: TabListProps<T>): TabListState<T> {\n  let state = useSingleSelectListState<T>({\n    ...props,\n    suppressTextValueWarning: true\n  });\n\n  useEffect(() => {\n    // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)\n    let selectedKey = state.selectedKey;\n    if (state.selectionManager.isEmpty || !state.collection.getItem(selectedKey)) {\n      selectedKey = state.collection.getFirstKey();\n      state.selectionManager.replaceSelection(selectedKey);\n    }\n\n    if (state.selectionManager.focusedKey == null) {\n      state.selectionManager.setFocusedKey(selectedKey);\n    }\n  }, [state.selectionManager, state.selectedKey, state.collection]);\n\n  return state;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":";;;;;;;;;;;SCuBgB,uCAAe,CAAmB,KAAsB,EAAmB,CAAC;IAC1F,GAAG,CAAC,KAAK,GAAG,+BAAwB,CAAI,CAAC;WACpC,KAAK;QACR,wBAAwB,EAAE,IAAI;IAChC,CAAC;IAED,GAAG,CAAC,CAAC,mBACH,gBAAgB,eAChB,UAAU,GACV,WAAW,EAAE,kBAAkB,EACjC,CAAC,GAAG,KAAK;IAET,GAAG,CAAC,eAAe,GAAG,aAAM,CAAC,kBAAkB;IAC/C,EAA0H,AAA1H,wHAA0H;IAC1H,GAAG,CAAC,WAAW,GAAG,kBAAkB;IACpC,EAAE,EAAE,gBAAgB,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC;QACjE,WAAW,GAAG,UAAU,CAAC,WAAW;QACpC,EAAuE,AAAvE,qEAAuE;cAChE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,KAAK,WAAW,KAAK,UAAU,CAAC,UAAU,GACjF,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,WAAW;QAElD,EAAoH,AAApH,kHAAoH;QACpH,EAAE,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,KAAK,WAAW,KAAK,UAAU,CAAC,UAAU,IAC9E,WAAW,GAAG,UAAU,CAAC,WAAW;QAEtC,EAAuF,AAAvF,qFAAuF;QACvF,gBAAgB,CAAC,eAAe,CAAC,CAAC;YAAA,WAAW;QAAA,CAAC;IAChD,CAAC;IAED,EAA2J,AAA3J,yJAA2J;IAC3J,EAAE,EAAE,gBAAgB,CAAC,UAAU,IAAI,IAAI,KAAM,gBAAgB,CAAC,SAAS,IAAI,WAAW,KAAK,eAAe,CAAC,OAAO,EAChH,gBAAgB,CAAC,aAAa,CAAC,WAAW;IAE5C,eAAe,CAAC,OAAO,GAAG,WAAW;IAErC,MAAM,CAAC,KAAK;AACd,CAAC","sources":["packages/@react-stately/tabs/src/index.ts","packages/@react-stately/tabs/src/useTabListState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useTabListState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';\nimport {TabListProps} from '@react-types/tabs';\nimport {useRef} from 'react';\n\n\nexport interface TabListState<T> extends SingleSelectListState<T> {}\n\n/**\n * Provides state management for a Tabs component. Tabs include a TabList which tracks\n * which tab is currently selected and displays the content associated with that Tab in a TabPanel.\n */\nexport function useTabListState<T extends object>(props: TabListProps<T>): TabListState<T> {\n  let state = useSingleSelectListState<T>({\n    ...props,\n    suppressTextValueWarning: true\n  });\n\n  let {\n    selectionManager,\n    collection,\n    selectedKey: currentSelectedKey\n  } = state;\n\n  let lastSelectedKey = useRef(currentSelectedKey);\n  // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)\n  let selectedKey = currentSelectedKey;\n  if (selectionManager.isEmpty || !collection.getItem(selectedKey)) {\n    selectedKey = collection.getFirstKey();\n    // loop over tabs until we find one that isn't disabled and select that\n    while (state.disabledKeys.has(selectedKey) && selectedKey !== collection.getLastKey()) {\n      selectedKey = collection.getKeyAfter(selectedKey);\n    }\n    // if this check is true, then every item is disabled, it makes more sense to default to the first key than the last\n    if (state.disabledKeys.has(selectedKey) && selectedKey === collection.getLastKey()) {\n      selectedKey = collection.getFirstKey();\n    }\n    // directly set selection because replace/toggle selection won't consider disabled keys\n    selectionManager.setSelectedKeys([selectedKey]);\n  }\n\n  // If the tablist doesn't have focus and the selected key changes or if there isn't a focused key yet, change focused key to the selected key if it exists.\n  if (selectionManager.focusedKey == null || (!selectionManager.isFocused && selectedKey !== lastSelectedKey.current)) {\n    selectionManager.setFocusedKey(selectedKey);\n  }\n  lastSelectedKey.current = selectedKey;\n\n  return state;\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;AAiBA,8BAA8B,CAAC,CAAE,SAAQ,sBAAsB,CAAC,CAAC;CAAG;AAEpE;;;GAGG;AACH,gCAAgC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAoBzF","sources":["packages/@react-stately/tabs/src/packages/@react-stately/tabs/src/useTabListState.ts","packages/@react-stately/tabs/src/packages/@react-stately/tabs/src/index.ts","packages/@react-stately/tabs/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useTabListState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;AAiBA,8BAA8B,CAAC,CAAE,SAAQ,sBAAsB,CAAC,CAAC;CAAG;AAEpE;;;GAGG;AACH,gCAAgC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAoCzF","sources":["packages/@react-stately/tabs/src/packages/@react-stately/tabs/src/useTabListState.ts","packages/@react-stately/tabs/src/packages/@react-stately/tabs/src/index.ts","packages/@react-stately/tabs/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useTabListState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/tabs",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,15 +18,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-stately/list": "^3.4.3",
-    "@react-stately/utils": "^3.4.1",
-    "@react-types/tabs": "^3.0.3"
+    "@react-stately/list": "^3.5.0",
+    "@react-stately/utils": "^3.5.0",
+    "@react-types/tabs": "^3.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "404d41859b7d6f56201d7fc01bd9f22ae3512937"
+  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
 }

package/src/useTabListState.ts

@@ -12,7 +12,7 @@
 
 import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
 import {TabListProps} from '@react-types/tabs';
-import {useEffect} from 'react';
+import {useRef} from 'react';
 
 
 export interface TabListState<T> extends SingleSelectListState<T> {}
@@ -27,18 +27,34 @@ export function useTabListState<T extends object>(props: TabListProps<T>): TabLi
     suppressTextValueWarning: true
   });
 
-  useEffect(() => {
-    // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
-    let selectedKey = state.selectedKey;
-    if (state.selectionManager.isEmpty || !state.collection.getItem(selectedKey)) {
-      selectedKey = state.collection.getFirstKey();
-      state.selectionManager.replaceSelection(selectedKey);
-    }
+  let {
+    selectionManager,
+    collection,
+    selectedKey: currentSelectedKey
+  } = state;
 
-    if (state.selectionManager.focusedKey == null) {
-      state.selectionManager.setFocusedKey(selectedKey);
+  let lastSelectedKey = useRef(currentSelectedKey);
+  // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
+  let selectedKey = currentSelectedKey;
+  if (selectionManager.isEmpty || !collection.getItem(selectedKey)) {
+    selectedKey = collection.getFirstKey();
+    // loop over tabs until we find one that isn't disabled and select that
+    while (state.disabledKeys.has(selectedKey) && selectedKey !== collection.getLastKey()) {
+      selectedKey = collection.getKeyAfter(selectedKey);
+    }
+    // if this check is true, then every item is disabled, it makes more sense to default to the first key than the last
+    if (state.disabledKeys.has(selectedKey) && selectedKey === collection.getLastKey()) {
+      selectedKey = collection.getFirstKey();
     }
-  }, [state.selectionManager, state.selectedKey, state.collection]);
+    // directly set selection because replace/toggle selection won't consider disabled keys
+    selectionManager.setSelectedKeys([selectedKey]);
+  }
+
+  // If the tablist doesn't have focus and the selected key changes or if there isn't a focused key yet, change focused key to the selected key if it exists.
+  if (selectionManager.focusedKey == null || (!selectionManager.isFocused && selectedKey !== lastSelectedKey.current)) {
+    selectionManager.setFocusedKey(selectedKey);
+  }
+  lastSelectedKey.current = selectedKey;
 
   return state;
 }