diff --git a/lib/ui/package.json b/lib/ui/package.json
index 2c776f29a061..40176cdad273 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -16,7 +16,6 @@
"dependencies": {
"@hypnosphi/fuse.js": "^3.0.9",
"@storybook/components": "^3.2.7",
- "@storybook/react-fuzzy": "^0.4.0",
"babel-runtime": "^6.23.0",
"deep-equal": "^1.0.1",
"events": "^1.1.1",
@@ -30,6 +29,7 @@
"podda": "^1.2.2",
"prop-types": "^15.5.10",
"qs": "^6.4.0",
+ "react-fuzzy": "^0.4.1",
"react-icons": "^2.2.5",
"react-inspector": "^2.1.1",
"react-komposer": "^2.0.0",
diff --git a/lib/ui/src/modules/ui/components/search_box.js b/lib/ui/src/modules/ui/components/search_box.js
index 657618b55658..2a50d80769b4 100644
--- a/lib/ui/src/modules/ui/components/search_box.js
+++ b/lib/ui/src/modules/ui/components/search_box.js
@@ -2,7 +2,7 @@ import { document } from 'global';
import PropTypes from 'prop-types';
import React from 'react';
import ReactModal from 'react-modal';
-import FuzzySearch from '@storybook/react-fuzzy';
+import FuzzySearch from 'react-fuzzy';
import { baseFonts } from '@storybook/components';
@@ -48,11 +48,18 @@ const formatStories = stories => {
return formattedStories;
};
-const suggestionTemplate = (props, state, styles) =>
+const suggestionTemplate = (props, state, styles, clickHandler) =>
state.results.map((val, i) => {
const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
return (
-
+ // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+
clickHandler(i)}
+ >
{val.value}
{val.type === 'story' ? `in ${val.kind}` : 'Kind'}
diff --git a/lib/ui/src/modules/ui/components/search_box.test.js b/lib/ui/src/modules/ui/components/search_box.test.js
index 97915daedb91..9d54bf57a765 100644
--- a/lib/ui/src/modules/ui/components/search_box.test.js
+++ b/lib/ui/src/modules/ui/components/search_box.test.js
@@ -1,7 +1,7 @@
import { shallow } from 'enzyme';
import React from 'react';
import ReactModal from 'react-modal';
-import FuzzySearch from '@storybook/react-fuzzy';
+import FuzzySearch from 'react-fuzzy';
import SearchBox from './search_box';
@@ -95,5 +95,30 @@ describe('manager.ui.components.search_box', () => {
expect(onSelectStory).toHaveBeenCalledWith('b', 'a');
expect(onClose).toHaveBeenCalled();
});
+
+ test('should handle selecting a story with click', () => {
+ const stories = [
+ {
+ kind: 'a',
+ stories: ['b', 'c'],
+ },
+ ];
+ const onSelectStory = jest.fn();
+ const onClose = jest.fn();
+ const wrap = shallow(
+
+ );
+
+ const modal = wrap.find(FuzzySearch).dive();
+ modal.find('input').simulate('change', {
+ target: { value: 'b' },
+ });
+
+ const option = modal.findWhere(el => el.key() === 'b');
+ option.simulate('click');
+
+ expect(onSelectStory).toHaveBeenCalledWith('a', 'b');
+ expect(onClose).toHaveBeenCalled();
+ });
});
});
diff --git a/package.json b/package.json
index f26e56ad1492..824a05d649e6 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
"husky": "^0.14.3",
"jest": "^20.0.4",
"jest-enzyme": "^3.6.1",
- "lerna": "2.0.0",
+ "lerna": "2.1.0",
"lint-staged": "^4.0.2",
"lodash": "^4.17.4",
"nodemon": "^1.11.0",