diff --git a/packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap b/packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap index 079036beeb..c4e5239faf 100644 --- a/packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap +++ b/packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap @@ -2103,77 +2103,44 @@ exports[`Storyshots Components/BundleAssets default 1`] = `
-
- -
+
-
-
-
- -
+ + + + + Filters (19/19) + + +
-

- Entry type -

-
+ />
@@ -2181,246 +2148,281 @@ exports[`Storyshots Components/BundleAssets default 1`] = ` className="filterLabel" > - Entry + Changed
- -
-
-
+
- - - Chunk - - -
-
- +
+
- - - Asset - - -
-
-
-
-

+ + Initial + + +

+
- File type - -
-
- +
+
- - - CSS - - + + + Asset + + +
- -
-
-
+
- - - IMG - - -
-
- +
+
- - - Media - - -
-
- +
+
- - - Fonts - - -
-
- +
+
- - - HTML - - -
-
- +
+
- - - Other - - + + + Fonts + + +
+
+ +
+
+ +
-
-
+ +
@@ -3881,77 +3883,44 @@ exports[`Storyshots Components/BundleAssets empty baseline 1`] = `
-
- -
+
-
-
-
- -
+ + + + + Filters (19/19) + + +
-

- Entry type -

-
+ />
@@ -3961,244 +3930,279 @@ exports[`Storyshots Components/BundleAssets empty baseline 1`] = ` - Entry + Changed
- -
-
-
+
- - - Chunk - - -
-
- +
+
- - - Asset - - -
-
-
-
-

+ + Initial + + +

+
- File type - -
-
- +
+
- - - CSS - - + + + Asset + + +
- -
-
-
+
- - - IMG - - -
-
- +
+
- - - Media - - -
-
- +
+
- - - Fonts - - -
-
- +
+
- - - HTML - - -
-
- +
+
- - - Other - - + + + Fonts + + +
+
+ +
+
+ +
-
-
+ +
@@ -6281,77 +6285,44 @@ exports[`Storyshots Components/BundleAssets multiple jobs 1`] = `
-
- -
+
-
-
-
- -
+ + + + + Filters (6/20) + + +
-

- Entry type -

-
+ />
@@ -6361,244 +6332,279 @@ exports[`Storyshots Components/BundleAssets multiple jobs 1`] = ` - Entry + Changed
- -
-
-
+
- - - Chunk - - -
-
- +
+
- - - Asset - - -
-
-
-
-

+ + Initial + + +

+
- File type - -
-
- +
+
- - - CSS - - + + + Asset + + +
- -
-
-
+
- - - IMG - - -
-
- +
+
- - - Media - - -
-
- +
+
- - - Fonts - - -
-
- +
+
- - - HTML - - -
-
- +
+
- - - Other - - + + + Fonts + + +
+
+ +
+
+ +
-
-
+ +
@@ -7404,77 +7410,44 @@ exports[`Storyshots Components/BundleAssets not predictive 1`] = `
-
- -
+
-
-
-
- -
+ + + + + Filters (1/1) + + +
-

- Entry type -

-
+ />
@@ -7484,244 +7457,279 @@ exports[`Storyshots Components/BundleAssets not predictive 1`] = ` - Entry + Changed
- -
-
-
+
- - - Chunk - - -
-
- +
+
- - - Asset - - -
-
-
-
-

+ + Initial + + +

+
- File type - -
-
- +
+
- - - CSS - - + + + Asset + + +
- -
-
-
+
- - - IMG - - -
-
- +
+
- - - Media - - -
-
- +
+
- - - Fonts - - -
-
- +
+
- - - HTML - - -
-
- +
+
- - - Other - - + + + Fonts + + +
+
+ +
+
+ +
-
-
+ +
@@ -9407,67 +9415,69 @@ exports[`Storyshots Components/BundleChunkModules default 1`] = ` > vendor (id: 1) -
- -
-
+ + + + + Filters (533/533) + + +
-
-
-
- + +
vendor (id: 1) -
- -
-
+ + + + + Filters (533/533) + + +
-
-
-
- + +
vendor (id: 1) -
- -
-
+ + + + + Filters (23/533) + + +
-
-
-
- + +
main (id: 0) -
- -
-
+ + + + + Filters (23/23) + + +
-
-
-
- + +
vendor (id: 1) -
- -
-
+ + + + + Filters (533/533) + + +
-
-
-
- + +
main, (id: 0) -
- -
-
+ + + + + Filters (23/23) + + +
-
-
-
- + +
vendor, (id: 1) -
- -
-
+ + + + + Filters (533/533) + + +
-
-
-
- + +
main (id: 0) -
- -
-
+ + + + + Filters (16/26) + + +
-
-
-
- + +
vendor (id: 1) -
- -
-
+ + + + + Filters (23/533) + + +
-
-
-
- + +
(id: 0) -
- -
-
+ + + + + Filters (16/26) + + +
-
-
-
- + +
(id: 1) -
- -
-
+ + + + + Filters (23/533) + + +
-
-
-
- + +
-
- -
+
-
-
-
- -
+ + + + + Filters (6/20) + + +
-

- Entry type -

-
+ />
@@ -315007,244 +315004,279 @@ exports[`Storyshots Prototypes/BundlePage assets 1`] = ` - Entry + Changed
- -
-
-
+
- - - Chunk - - -
-
- +
+
- - - Asset - - -
-
-
-
-

+ + Initial + + +

+
- File type - -
-
- +
+
- - - CSS - - + + + Asset + + +
- -
-
-
+
- - - IMG - - -
-
- +
+
- - - Media - - -
-
- +
+
- - - Fonts - - -
-
- +
+
- - - HTML - - -
-
- +
+
- - - Other - - + + + Fonts + + +
+
+ +
+
+ +
-
- + +
@@ -316678,67 +316710,69 @@ exports[`Storyshots Prototypes/BundlePage modules 1`] = ` > main (id: 0) -
- -
-
+ + + + + Filters (16/26) + + +
-
-
-
- + +
vendor (id: 1) -
- -
-
+ + + + + Filters (23/533) + + +
-
-
-
- + +
-
- -
-
+ + + + + Filters + + + -
-
- -
-
- -
-

- File types -

-
+ />
@@ -329954,15 +329937,15 @@ exports[`Storyshots UI/TableFilters default 1`] = ` - CSS + Changed
@@ -329973,23 +329956,78 @@ exports[`Storyshots UI/TableFilters default 1`] = ` className="filterLabel" > - JSS + Entrypoint
+
+
+

+ File types +

+
+
+ +
+
+ +
+
-
- + +
`; @@ -330005,98 +330043,44 @@ exports[`Storyshots UI/TableFilters disable options 1`] = ` } } > -
- -
-
+ + + + + Filters + + + -
-
- -
-
- -
-

- File types -

-
+ />
@@ -330104,17 +330088,18 @@ exports[`Storyshots UI/TableFilters disable options 1`] = ` className="filterLabel" > - CSS + Changed
@@ -330125,23 +330110,78 @@ exports[`Storyshots UI/TableFilters disable options 1`] = ` className="filterLabel" > - JSS + Entrypoint
+
+
+

+ File types +

+
+
+ +
+
+ +
+
-
- + +
`; diff --git a/packages/ui/src/ui/table-filters/index.js b/packages/ui/src/ui/table-filters/index.js index 8aac162fb4..e87d17050f 100644 --- a/packages/ui/src/ui/table-filters/index.js +++ b/packages/ui/src/ui/table-filters/index.js @@ -1,4 +1,4 @@ -import { filterContainer } from './table-filters.container'; +import { tableFiltersContainer } from './table-filters.container'; import { TableFilters as TableFiltersComponent } from './table-filters'; -export const TableFilters = filterContainer(TableFiltersComponent); +export const TableFilters = tableFiltersContainer(TableFiltersComponent); diff --git a/packages/ui/src/ui/table-filters/table-filters.container.jsx b/packages/ui/src/ui/table-filters/table-filters.container.jsx index 492f5dc098..fb3960623b 100644 --- a/packages/ui/src/ui/table-filters/table-filters.container.jsx +++ b/packages/ui/src/ui/table-filters/table-filters.container.jsx @@ -1,3 +1,4 @@ +/* global document */ import React from 'react'; import PropTypes from 'prop-types'; import OutsideClickHandler from 'react-outside-click-handler'; @@ -22,7 +23,7 @@ const getInitialValues = (key, filters) => { return {}; }; -export const filterContainer = (BaseComponent) => class FilterContainer extends React.Component { +export const tableFiltersContainer = (BaseComponent) => class TableFiltersContainer extends React.Component { static defaultProps = { onChange: null, } @@ -64,20 +65,26 @@ export const filterContainer = (BaseComponent) => class FilterContainer extends return newState; }) - toggleOpen = () => this.setState(({ open }) => ({ + dropdownToggle = () => this.setState(({ open }) => ({ open: !open, })) dropdownClose = () => this.setState({ open: false }) render() { + // Disable outsideClickHandler when not running in a browser + const disableOutsideClickHandler = typeof document === 'undefined'; + return ( - + ); diff --git a/packages/ui/src/ui/table-filters/table-filters.jsx b/packages/ui/src/ui/table-filters/table-filters.jsx index 6c0219d356..eeb52ecc4f 100644 --- a/packages/ui/src/ui/table-filters/table-filters.jsx +++ b/packages/ui/src/ui/table-filters/table-filters.jsx @@ -79,7 +79,7 @@ export const TableFilters = (props) => { values, filters, toggleFilter, - toggleOpen, + dropdownToggle, } = props; const onCheckboxChange = ({ target }) => toggleFilter(target.name, target.checked); @@ -92,7 +92,7 @@ export const TableFilters = (props) => { glyph="filter" as="button" type="button" - onClick={toggleOpen} + onClick={dropdownToggle} > {label} @@ -116,5 +116,5 @@ TableFilters.propTypes = { values: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types filters: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types toggleFilter: PropTypes.func.isRequired, - toggleOpen: PropTypes.func.isRequired, + dropdownToggle: PropTypes.func.isRequired, };