bright-components 10.2.3 → 10.2.4

package/.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+    "eslint.format.enable": true,
+    "editor.renderWhitespace": "all",
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true,
+    "cSpell.words": [
+        "autobind",
+        "brighthr",
+        "cronersupplieddocuments",
+        "firstname",
+        "Formik",
+        "lastname",
+        "pathnames",
+        "pendo",
+        "previewable",
+        "selectall",
+        "tailwindcss",
+        "testid",
+        "testprops"
+    ]
+}

package/dist/components/ResponsiveTabs/index.js

@@ -108,7 +108,7 @@ const ResponsiveTabs = _ref => {
   } = _ref,
       rest = _objectWithoutProperties(_ref, ["tabs", "defaultIndex", "children", "autoTabWidth", "onSelected"]);
 
-  const [index, setIndex] = (0, _react.useState)(defaultIndex || 0);
+  const [index, setIndex] = (0, _react.useState)(defaultIndex < children.length ? defaultIndex : 0);
 
   const onSelectChange = (event, tabs) => {
     const names = tabs.map(tab => tab.name);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bright-components",
-	"version": "10.2.3",
+	"version": "10.2.4",
 	"private": false,
 	"main": "./dist",
 	"repository": {

package/src/components/ResponsiveTabs/index.js

@@ -94,7 +94,9 @@ const ResponsiveTabs = ({
 	onSelected,
 	...rest
 }) => {
-	const [index, setIndex] = useState(defaultIndex || 0);
+	const [index, setIndex] = useState(
+		defaultIndex < children.length ? defaultIndex : 0
+	);
 
 	const onSelectChange = (event, tabs) => {
 		const names = tabs.map(tab => tab.name);

package/src/components/ResponsiveTabs/test.js

@@ -7,6 +7,20 @@ import ResponsiveTabs from '.';
 jest.mock('react-ga');
 
 describe('<ResponsiveTabs />', () => {
+	it('should handle when defaultIndex is larger than the amount of tabs', () => {
+		const { getByRole, getAllByRole } = render(
+			<ResponsiveTabs defaultIndex={3}>
+				<TabPanel name="One">One</TabPanel>
+				<TabPanel name="Two">Two</TabPanel>
+			</ResponsiveTabs>
+		);
+
+		expect(getByRole('combobox')).toBeInTheDocument();
+		expect(getAllByRole('option')).toHaveLength(2);
+
+		// doesn't throw an error is good
+	});
+
 	it('should render a dropdown for selecting tabs on mobile', () => {
 		const { getByRole, getAllByRole } = render(
 			<ResponsiveTabs>