From e7cd79763048e7f0233f92a0c686635accc60ec3 Mon Sep 17 00:00:00 2001
From: Marcelo Welter <60479103+alowelter@users.noreply.github.com>
Date: Wed, 20 Aug 2025 21:41:05 -0300
Subject: [PATCH 1/5] fix: replace defaultProps with default parameters in Tabs
component
---
src/components/Tabs.jsx | 89 ++++++++++++++++++-----------------------
1 file changed, 38 insertions(+), 51 deletions(-)
diff --git a/src/components/Tabs.jsx b/src/components/Tabs.jsx
index 72f1f51248..e9dcbd68e7 100644
--- a/src/components/Tabs.jsx
+++ b/src/components/Tabs.jsx
@@ -10,39 +10,11 @@ import { getTabsCount } from '../helpers/count';
const MODE_CONTROLLED = 0;
const MODE_UNCONTROLLED = 1;
+
const propTypes = {
children: childrenPropType,
onSelect: onSelectPropType,
selectedIndex: selectedIndexPropType,
- /*
-Left for TS migration
- className: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.array,
- PropTypes.object,
- ]),
- defaultFocus: PropTypes.bool,
- defaultIndex: PropTypes.number,
- direction: PropTypes.oneOf(['rtl', 'ltr']),
- disabledTabClassName: PropTypes.string,
- disableUpDownKeys: PropTypes.bool,
- disableLeftRightKeys: PropTypes.bool,
- domRef: PropTypes.func,
- environment: PropTypes.object,
- focusTabOnClick: PropTypes.bool,
- forceRenderTabPanel: PropTypes.bool,
- selectedTabClassName: PropTypes.string,
- selectedTabPanelClassName: PropTypes.string,*/
-};
-const defaultProps = {
- defaultFocus: false,
- focusTabOnClick: true,
- forceRenderTabPanel: false,
- selectedIndex: null,
- defaultIndex: null,
- environment: null,
- disableUpDownKeys: false,
- disableLeftRightKeys: false,
};
const getModeFromProps = (props) => {
@@ -69,23 +41,24 @@ For more information about controlled and uncontrolled mode of react-tabs see ht
* focus: Because we never remove focus from the Tabs this state is only used to indicate that we should focus the current tab.
* It is initialized from the prop defaultFocus, and after the first render it is reset back to false. Later it can become true again when using keys to navigate the tabs.
*/
-const Tabs = (props) => {
- checkPropTypes(propTypes, props, 'prop', 'Tabs');
- const {
- children,
- defaultFocus,
- defaultIndex,
- focusTabOnClick,
- onSelect,
- ...attributes
- } = {
- ...defaultProps,
- ...props,
- };
+const Tabs = ({
+ children,
+ defaultFocus = false,
+ defaultIndex = null,
+ focusTabOnClick = true,
+ forceRenderTabPanel = false,
+ selectedIndex = null,
+ environment = null,
+ disableUpDownKeys = false,
+ disableLeftRightKeys = false,
+ onSelect,
+ ...attributes
+}) => {
+ checkPropTypes(propTypes, { children, onSelect, selectedIndex }, 'prop', 'Tabs');
const [focus, setFocus] = useState(defaultFocus);
- const [mode] = useState(getModeFromProps(attributes));
- const [selectedIndex, setSelectedIndex] = useState(
+ const [mode] = useState(getModeFromProps({ selectedIndex }));
+ const [selectedIndexState, setSelectedIndexState] = useState(
mode === MODE_UNCONTROLLED ? defaultIndex || 0 : null,
);
@@ -98,14 +71,14 @@ const Tabs = (props) => {
// Ensure that we handle removed tabs and don't let selectedIndex get out of bounds
const tabsCount = getTabsCount(children);
useEffect(() => {
- if (selectedIndex != null) {
+ if (selectedIndexState != null) {
const maxTabIndex = Math.max(0, tabsCount - 1);
- setSelectedIndex(Math.min(selectedIndex, maxTabIndex));
+ setSelectedIndexState(Math.min(selectedIndexState, maxTabIndex));
}
}, [tabsCount]);
}
- checkForIllegalModeChange(attributes, mode);
+ checkForIllegalModeChange({ selectedIndex }, mode);
const handleSelected = (index, last, event) => {
// Call change event handler
@@ -121,21 +94,35 @@ const Tabs = (props) => {
if (mode === MODE_UNCONTROLLED) {
// Update selected index
- setSelectedIndex(index);
+ setSelectedIndexState(index);
}
};
- let subProps = { ...props, ...attributes };
+ let subProps = {
+ children,
+ defaultFocus,
+ defaultIndex,
+ focusTabOnClick,
+ forceRenderTabPanel,
+ selectedIndex,
+ environment,
+ disableUpDownKeys,
+ disableLeftRightKeys,
+ onSelect,
+ ...attributes
+ };
subProps.focus = focus;
subProps.onSelect = handleSelected;
- if (selectedIndex != null) {
- subProps.selectedIndex = selectedIndex;
+ if (selectedIndexState != null) {
+ subProps.selectedIndex = selectedIndexState;
}
+
delete subProps.defaultFocus;
delete subProps.defaultIndex;
delete subProps.focusTabOnClick;
+
return