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 {children}; }; From baaee2da43bd01867c4120f1abab450aaf7f7de8 Mon Sep 17 00:00:00 2001 From: Marcelo Welter <60479103+alowelter@users.noreply.github.com> Date: Wed, 20 Aug 2025 21:42:18 -0300 Subject: [PATCH 2/5] fix: replace defaultProps with default parameters TabPanel --- src/components/TabPanel.jsx | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/src/components/TabPanel.jsx b/src/components/TabPanel.jsx index 30fdcbbc72..c933bb0d67 100644 --- a/src/components/TabPanel.jsx +++ b/src/components/TabPanel.jsx @@ -2,11 +2,6 @@ import React from 'react'; import cx from 'clsx'; const DEFAULT_CLASS = 'react-tabs__tab-panel'; -const defaultProps = { - className: DEFAULT_CLASS, - forceRender: false, - selectedClassName: `${DEFAULT_CLASS}--selected`, -}; /* Left for TS migration @@ -23,20 +18,16 @@ const propTypes = { selectedClassName: PropTypes.string, }; */ -const TabPanel = (props) => { - const { - children, - className, - forceRender, - id, - selected, - selectedClassName, - ...attributes - } = { - ...defaultProps, - ...props, - }; +const TabPanel = ({ + children, + className = DEFAULT_CLASS, + forceRender = false, + selectedClassName = `${DEFAULT_CLASS}--selected`, + id, + selected, + ...attributes +}) => { return (
Date: Wed, 20 Aug 2025 21:43:20 -0300 Subject: [PATCH 3/5] fix: replace defaultProps with default parameters TabList --- src/components/TabList.jsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/TabList.jsx b/src/components/TabList.jsx index c3de9888fb..90b0dacf72 100644 --- a/src/components/TabList.jsx +++ b/src/components/TabList.jsx @@ -1,10 +1,6 @@ import React from 'react'; import cx from 'clsx'; -const defaultProps = { - className: 'react-tabs__tab-list', -}; - /* Left for TS migration const propTypes = { @@ -15,12 +11,12 @@ const propTypes = { PropTypes.object, ]), };*/ -const TabList = (props) => { - const { children, className, ...attributes } = { - ...defaultProps, - ...props, - }; +const TabList = ({ + children, + className = 'react-tabs__tab-list', + ...attributes +}) => { return (