bright-components 10.2.3 → 10.2.6

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,10 +108,18 @@ const ResponsiveTabs = _ref => {
   } = _ref,
       rest = _objectWithoutProperties(_ref, ["tabs", "defaultIndex", "children", "autoTabWidth", "onSelected"]);
 
-  const [index, setIndex] = (0, _react.useState)(defaultIndex || 0);
+  const tabs = tabsProp || _react.default.Children.map(children, child => {
+    return child && child.props && child.props.name ? {
+      name: child.props.name,
+      counter: child.props.counter
+    } : null;
+  });
+
+  const [index, setIndex] = (0, _react.useState)(defaultIndex < tabs.length ? defaultIndex : 0);
+
+  const onSelectChange = (event, _tabs) => {
+    const names = _tabs.map(tab => tab.name);
 
-  const onSelectChange = (event, tabs) => {
-    const names = tabs.map(tab => tab.name);
     const newIndex = names.indexOf(event.target.value);
     setIndex(newIndex);
   };
@@ -120,13 +128,6 @@ const ResponsiveTabs = _ref => {
     setIndex(newIndex);
   };
 
-  const tabs = tabsProp || _react.default.Children.map(children, child => {
-    return child && child.props && child.props.name ? {
-      name: child.props.name,
-      counter: child.props.counter
-    } : null;
-  });
-
   const DesktopTabList = autoTabWidth ? AutoWidthTabList : StyledTabList;
   return _react.default.createElement(_Tabs.default, _extends({
     selectedIndex: index
@@ -151,7 +152,7 @@ const ResponsiveTabs = _ref => {
         onSelected(i);
       }
     },
-    value: tabs[index].name
+    value: tabs == null ? void 0 : tabs[index].name
   }, tabs.map(_ref3 => {
     let {
       name,

package/dist/components/Typeahead/index.js

@@ -171,7 +171,7 @@ class Typeahead extends _react.default.Component {
     let nextIndex = highlightIndex;
     const isActionKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape', 'Tab'].includes(e.key);
 
-    if (!isActionKey) {
+    if (!isActionKey || !this.options[highlightIndex]) {
       return;
     }
 

package/package.json

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

package/src/components/ResponsiveTabs/index.js

@@ -94,18 +94,6 @@ const ResponsiveTabs = ({
 	onSelected,
 	...rest
 }) => {
-	const [index, setIndex] = useState(defaultIndex || 0);
-
-	const onSelectChange = (event, tabs) => {
-		const names = tabs.map(tab => tab.name);
-		const newIndex = names.indexOf(event.target.value);
-		setIndex(newIndex);
-	};
-
-	const onSelect = newIndex => {
-		setIndex(newIndex);
-	};
-
 	const tabs =
 		tabsProp ||
 		React.Children.map(children, child => {
@@ -117,6 +105,20 @@ const ResponsiveTabs = ({
 				: null;
 		});
 
+	const [index, setIndex] = useState(
+		defaultIndex < tabs.length ? defaultIndex : 0
+	);
+
+	const onSelectChange = (event, _tabs) => {
+		const names = _tabs.map(tab => tab.name);
+		const newIndex = names.indexOf(event.target.value);
+		setIndex(newIndex);
+	};
+
+	const onSelect = newIndex => {
+		setIndex(newIndex);
+	};
+
 	const DesktopTabList = autoTabWidth ? AutoWidthTabList : StyledTabList;
 
 	return (
@@ -140,7 +142,7 @@ const ResponsiveTabs = ({
 							onSelected(i);
 						}
 					}}
-					value={tabs[index].name}
+					value={tabs?.[index].name}
 				>
 					{tabs.map(({ name, counter = null }) => (
 						<Option key={name} value={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>

package/src/components/Typeahead/index.js

@@ -144,7 +144,7 @@ class Typeahead extends React.Component {
 			'Tab'
 		].includes(e.key);
 
-		if (!isActionKey) {
+		if (!isActionKey || !this.options[highlightIndex]) {
 			return;
 		}
 

package/src/components/Typeahead/test.js

@@ -228,6 +228,13 @@ describe('<Typeahead />', () => {
 			[firstOption, secondOption] = wrapper.getAllByRole('listitem');
 			expect(firstOption).not.toHaveStyleRule('background', '#D0EBFD');
 			expect(secondOption).toHaveStyleRule('background', '#D0EBFD');
+
+			fireEvent.keyDown(input, { key: 'ArrowUp' });
+			fireEvent.keyDown(input, { key: 'ArrowUp' });
+			fireEvent.keyDown(input, { key: 'ArrowUp' });
+
+			expect(firstOption).toHaveStyleRule('background', '#D0EBFD');
+			expect(secondOption).not.toHaveStyleRule('background', '#D0EBFD');
 		});
 
 		it('should highlight a new option on the up arrow key', () => {
@@ -284,5 +291,16 @@ describe('<Typeahead />', () => {
 
 			expect(scrollIntoView).not.toHaveBeenCalled();
 		});
+
+		it('should handle live updates to the list changing the length of the list', () => {
+			const input = wrapper.getByPlaceholderText('Search or select');
+
+			fireEvent.focus(input);
+
+			wrapper.rerender(<Typeahead {...props} options={[]} />);
+			fireEvent.keyDown(input, { key: 'Enter' });
+
+			expect(setSelected).toHaveBeenCalledTimes(0);
+		});
 	});
 });