@bento-core/facet-filter 1.0.1-CDS.8 → 1.0.1-CDS.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/facet/FacetModal.js +3 -2
  2. package/dist/components/facet/FacetStyle.js +11 -8
  3. package/dist/components/facet/SearchFacetView.js +52 -5
  4. package/dist/components/inputs/FilterItemStyle.js +0 -11
  5. package/dist/components/inputs/SearchFilterItems.js +5 -14
  6. package/package.json +2 -2
  7. package/src/components/facet/FacetModal.js +9 -2
  8. package/src/components/facet/FacetStyle.js +11 -8
  9. package/src/components/facet/SearchFacetView.js +94 -36
  10. package/src/components/inputs/FilterItemStyle.js +0 -11
  11. package/src/components/inputs/SearchFilterItems.js +7 -18
package/dist/components/facet/FacetModal.js CHANGED
@@ -35,7 +35,7 @@ const ModalView = _ref => {
35
35
  return /*#__PURE__*/_react.default.createElement(_core.Modal, {
36
36
  open: open,
37
37
  onClose: onClose,
38
- "aria-labelledby": "".concat(facet.datafield, "-search-modal")
38
+ "aria-label": "".concat(facet.datafield, "-search-modal")
39
39
  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
40
40
  className: classes.modalBody
41
41
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -64,7 +64,8 @@ const ModalView = _ref => {
64
64
  value: searchText,
65
65
  type: "text",
66
66
  placeholder: facet.searchPlaceholder ? facet.searchPlaceholder : 'e.g. Sarcoma, Neoplasm',
67
- onChange: e => onSearchTextChange(facet.datafield, e.target.value)
67
+ onChange: e => onSearchTextChange(facet.datafield, e.target.value),
68
+ "aria-label": "Search within ".concat(facet.section, " facet")
68
69
  }), /*#__PURE__*/_react.default.createElement(_core.Button, {
69
70
  variant: "outlined",
70
71
  onClick: () => onSearchTextChange(facet.datafield, ''),
package/dist/components/facet/FacetStyle.js CHANGED
@@ -89,9 +89,9 @@ var _default = () => ({
89
89
  fontSize: '11px',
90
90
  fontFamily: 'Nunito',
91
91
  width: 'calc(100% - 26px)',
92
- height: '24px',
92
+ height: '30px',
93
93
  marginTop: '12px',
94
- borderRadius: '8px',
94
+ borderRadius: '5px',
95
95
  background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
96
96
  marginLeft: '6px',
97
97
  border: '1px solid',
@@ -101,22 +101,25 @@ var _default = () => ({
101
101
  fontSize: '11px',
102
102
  fontFamily: 'Nunito',
103
103
  width: 'calc(100% - 26px)',
104
- height: '24px',
104
+ height: '30px',
105
105
  marginTop: '12px',
106
- borderRadius: '8px',
106
+ borderRadius: '5px',
107
107
  marginLeft: '6px',
108
108
  border: '1px solid',
109
109
  padding: '5px'
110
110
  },
111
111
  expandedDisplayButton: {
112
- background: '#4D889E',
112
+ backgroundColor: '#477C90 !important',
113
113
  color: 'white',
114
- width: '222px',
114
+ width: 'calc(100% - 26px)',
115
115
  height: '30px',
116
116
  marginTop: '5px',
117
117
  marginBottom: '5px',
118
- borderRadius: '8px',
119
- fontSize: '11px'
118
+ marginLeft: '6px',
119
+ borderRadius: '5px',
120
+ fontSize: '12px',
121
+ fontWeight: '600',
122
+ top: '8px'
120
123
  },
121
124
  clearTextButton: {
122
125
  padding: '0px',
package/dist/components/facet/SearchFacetView.js CHANGED
@@ -15,6 +15,8 @@ var _FilterItems = _interopRequireDefault(require("../inputs/FilterItems"));
15
15
  var _SearchFilterItems = _interopRequireDefault(require("../inputs/SearchFilterItems"));
16
16
  var _Sort = require("../../utils/Sort");
17
17
  var _clearIcon = _interopRequireDefault(require("./assets/clearIcon.svg"));
18
+ var _ReduxSearchCheckbox = _interopRequireDefault(require("../inputs/checkbox/ReduxSearchCheckbox"));
19
+ var _ReduxFacetModal = _interopRequireDefault(require("./ReduxFacetModal"));
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
21
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
20
22
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,6 +25,25 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
23
25
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
24
26
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
25
27
  function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
28
+ const searchItems = (items, searchText) => {
29
+ let matchedItems = [];
30
+ const keyList = searchText.toUpperCase().split(',').filter(item => item.trim() !== '');
31
+ if (keyList.length === 0) {
32
+ matchedItems = items;
33
+ } else {
34
+ for (let i = 0; i < items.length; i += 1) {
35
+ const item = items[i];
36
+ for (let j = 0; j < keyList.length; j += 1) {
37
+ const key = keyList[j].trim();
38
+ if (key === '' || item.group.toUpperCase().includes(key)) {
39
+ matchedItems.push(item);
40
+ break;
41
+ }
42
+ }
43
+ }
44
+ }
45
+ return matchedItems;
46
+ };
26
47
  const SearchFacetView = _ref => {
27
48
  let {
28
49
  classes,
@@ -35,6 +56,7 @@ const SearchFacetView = _ref => {
35
56
  CustomView
36
57
  } = _ref;
37
58
  const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
59
+ const [open, setOpen] = (0, _react.useState)(false);
38
60
  const onExpandFacet = () => setExpand(!expand);
39
61
  const onClearSection = () => {
40
62
  onSortChange(facet.datafield, null);
@@ -46,14 +68,32 @@ const SearchFacetView = _ref => {
46
68
  */
47
69
  const {
48
70
  type,
49
- facetValues
71
+ facetValues,
72
+ datafield,
73
+ section
50
74
  } = facet;
51
75
  const selectedItems = facetValues && facetValues.filter(item => item && item.isChecked);
52
76
  const displayFacet = _objectSpread({}, facet);
53
77
  displayFacet.facetValues = selectedItems;
54
78
  const isActiveFacet = [...selectedItems].length > 0;
55
79
  const limitCheckBoxCount = (facet === null || facet === void 0 ? void 0 : facet.showCheckboxCount) || 5;
56
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Accordion, {
80
+ const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
81
+ sortBy
82
+ }));
83
+ const checkedItems = sortFilters.filter(item => item.isChecked).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxSearchCheckbox.default, {
84
+ checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
85
+ index,
86
+ section
87
+ }),
88
+ datafield: datafield,
89
+ facet: facet
90
+ }));
91
+ const newUncheckedFullList = searchItems(sortFilters.filter(item => !item.isChecked), searchText);
92
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReduxFacetModal.default, {
93
+ facet: facet,
94
+ open: open,
95
+ onClose: () => setOpen(false)
96
+ }), /*#__PURE__*/_react.default.createElement(_core.Accordion, {
57
97
  square: true,
58
98
  expanded: expand,
59
99
  onChange: onExpandFacet,
@@ -73,14 +113,15 @@ const SearchFacetView = _ref => {
73
113
  className: classes.NonSortGroup
74
114
  }, /*#__PURE__*/_react.default.createElement("span", {
75
115
  className: classes.NonSortGroupItem
76
- }, "No data for this field")), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
116
+ }, "No data for this field")), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
77
117
  className: classes.searchContainer
78
118
  }, /*#__PURE__*/_react.default.createElement("input", {
79
119
  className: searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox,
80
120
  value: searchText,
81
121
  type: "text",
82
122
  placeholder: facet.searchPlaceholder ? facet.searchPlaceholder : 'e.g. Sarcoma, Neoplasm',
83
- onChange: e => onSearchTextChange(facet.datafield, e.target.value)
123
+ onChange: e => onSearchTextChange(facet.datafield, e.target.value),
124
+ "aria-label": "Search within ".concat(facet.section, " facet")
84
125
  }), searchText && searchText.trim() !== '' && /*#__PURE__*/_react.default.createElement(_core.IconButton, {
85
126
  "aria-label": "close",
86
127
  onClick: () => onSearchTextChange(facet.datafield, ''),
@@ -93,7 +134,13 @@ const SearchFacetView = _ref => {
93
134
  })
94
135
  }, /*#__PURE__*/_react.default.createElement(_Close.default, {
95
136
  fontSize: "small"
96
- }))), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
137
+ }))), !facet.disableSearchModal && /*#__PURE__*/_react.default.createElement("div", {
138
+ className: classes.searchContainer
139
+ }, /*#__PURE__*/_react.default.createElement(_core.Button, {
140
+ variant: "text",
141
+ className: classes.expandedDisplayButton,
142
+ onClick: () => setOpen(!open)
143
+ }, "VIEW EXPANDED DISPLAY (".concat(checkedItems.length + newUncheckedFullList.length, ")")))), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
97
144
  className: classes.sortGroup
98
145
  }, /*#__PURE__*/_react.default.createElement("span", {
99
146
  className: classes.sortGroupIcon
package/dist/components/inputs/FilterItemStyle.js CHANGED
@@ -63,17 +63,6 @@ var _default = () => ({
63
63
  display: 'flex',
64
64
  justifyContent: 'center',
65
65
  height: '54px'
66
- },
67
- expandedDisplayButton: {
68
- backgroundColor: '#4D889E !important',
69
- color: 'white',
70
- width: '222px',
71
- height: '24px',
72
- marginTop: '5px',
73
- marginBottom: '5px',
74
- borderRadius: '8px',
75
- fontSize: '11px',
76
- top: '10px'
77
66
  }
78
67
  });
79
68
  exports.default = _default;
package/dist/components/inputs/SearchFilterItems.js CHANGED
@@ -9,7 +9,6 @@ var _core = require("@material-ui/core");
9
9
  var _ReduxSearchCheckbox = _interopRequireDefault(require("./checkbox/ReduxSearchCheckbox"));
10
10
  var _Sort = require("../../utils/Sort");
11
11
  var _FilterItemStyle = _interopRequireDefault(require("./FilterItemStyle"));
12
- var _ReduxFacetModal = _interopRequireDefault(require("../facet/ReduxFacetModal"));
13
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
13
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
14
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -50,7 +49,6 @@ const SearchFilterItems = _ref => {
50
49
  } = facet;
51
50
  const initialItemSize = 20;
52
51
  const [displayCount, setDisplayCount] = (0, _react.useState)(initialItemSize);
53
- const [open, setOpen] = (0, _react.useState)(false);
54
52
  const scrollableRef = (0, _react.useRef)(null);
55
53
  const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
56
54
  sortBy
@@ -89,21 +87,14 @@ const SearchFilterItems = _ref => {
89
87
  }
90
88
  }
91
89
  };
92
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReduxFacetModal.default, {
93
- facet: facet,
94
- open: open,
95
- onClose: () => setOpen(false)
96
- }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), /*#__PURE__*/_react.default.createElement("div", {
90
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), /*#__PURE__*/_react.default.createElement("div", {
97
91
  ref: scrollableRef,
98
92
  className: classes.itemsContainer,
99
93
  onScroll: handleScroll
100
- }, uncheckedItems)), !facet.disableSearchModal && /*#__PURE__*/_react.default.createElement("div", {
101
- className: classes.searchContainer
102
- }, /*#__PURE__*/_react.default.createElement(_core.Button, {
103
- variant: "text",
104
- className: classes.expandedDisplayButton,
105
- onClick: () => setOpen(!open)
106
- }, "VIEW EXPANDED DISPLAY (".concat(checkedItems.length + newUncheckedFullList.length, ")"))));
94
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
95
+ ,
96
+ tabIndex: 0
97
+ }, uncheckedItems)));
107
98
  };
108
99
  var _default = (0, _core.withStyles)(_FilterItemStyle.default)(SearchFilterItems);
109
100
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/facet-filter",
3
- "version": "1.0.1-CDS.8",
3
+ "version": "1.0.1-CDS.9",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -25,5 +25,5 @@
25
25
  },
26
26
  "author": "CTOS Bento Team",
27
27
  "license": "ISC",
28
- "gitHead": "ca5d70a6c4f195a6bf5c7fc15cc5b118eec78173"
28
+ "gitHead": "6bc40f91debaf2bb81cd650f032bc44c9c5d44d8"
29
29
  }
package/src/components/facet/FacetModal.js CHANGED
@@ -37,7 +37,7 @@ const ModalView = ({
37
37
  <Modal
38
38
  open={open}
39
39
  onClose={onClose}
40
- aria-labelledby={`${facet.datafield}-search-modal`}
40
+ aria-label={`${facet.datafield}-search-modal`}
41
41
  >
42
42
  <Box className={classes.modalBody}>
43
43
  <div className={classes.header}>
@@ -60,7 +60,14 @@ const ModalView = ({
60
60
  </div>
61
61
  <div className={classes.searchContainer}>
62
62
  <div className={classes.searchInputbox}>{`Search ${facet.label}`}</div>
63
- <input className={classes.searchBox} value={searchText} type="text" placeholder={facet.searchPlaceholder ? facet.searchPlaceholder : 'e.g. Sarcoma, Neoplasm'} onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)} />
63
+ <input
64
+ className={classes.searchBox}
65
+ value={searchText}
66
+ type="text"
67
+ placeholder={facet.searchPlaceholder ? facet.searchPlaceholder : 'e.g. Sarcoma, Neoplasm'}
68
+ onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
69
+ aria-label={`Search within ${facet.section} facet`}
70
+ />
64
71
  <Button
65
72
  variant="outlined"
66
73
  onClick={() => onSearchTextChange(facet.datafield, '')}
package/src/components/facet/FacetStyle.js CHANGED
@@ -83,9 +83,9 @@ export default () => ({
83
83
  fontSize: '11px',
84
84
  fontFamily: 'Nunito',
85
85
  width: 'calc(100% - 26px)',
86
- height: '24px',
86
+ height: '30px',
87
87
  marginTop: '12px',
88
- borderRadius: '8px',
88
+ borderRadius: '5px',
89
89
  background: `url(${SearchIcon}) right 5px center no-repeat`,
90
90
  marginLeft: '6px',
91
91
  border: '1px solid',
@@ -95,22 +95,25 @@ export default () => ({
95
95
  fontSize: '11px',
96
96
  fontFamily: 'Nunito',
97
97
  width: 'calc(100% - 26px)',
98
- height: '24px',
98
+ height: '30px',
99
99
  marginTop: '12px',
100
- borderRadius: '8px',
100
+ borderRadius: '5px',
101
101
  marginLeft: '6px',
102
102
  border: '1px solid',
103
103
  padding: '5px',
104
104
  },
105
105
  expandedDisplayButton: {
106
- background: '#4D889E',
106
+ backgroundColor: '#477C90 !important',
107
107
  color: 'white',
108
- width: '222px',
108
+ width: 'calc(100% - 26px)',
109
109
  height: '30px',
110
110
  marginTop: '5px',
111
111
  marginBottom: '5px',
112
- borderRadius: '8px',
113
- fontSize: '11px',
112
+ marginLeft: '6px',
113
+ borderRadius: '5px',
114
+ fontSize: '12px',
115
+ fontWeight: '600',
116
+ top: '8px',
114
117
  },
115
118
  clearTextButton: {
116
119
  padding: '0px',
package/src/components/facet/SearchFacetView.js CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  withStyles,
6
6
  Icon,
7
7
  IconButton,
8
+ Button,
8
9
  } from '@material-ui/core';
9
10
  import CloseIcon from '@material-ui/icons/Close';
10
11
  import clsx from 'clsx';
@@ -13,8 +14,30 @@ import { InputTypes } from '../inputs/Types';
13
14
  import styles from './FacetStyle';
14
15
  import FilterItems from '../inputs/FilterItems';
15
16
  import SearchFilterItems from '../inputs/SearchFilterItems';
16
- import { sortType } from '../../utils/Sort';
17
+ import { sortType, sortBySection } from '../../utils/Sort';
17
18
  import clearIcon from './assets/clearIcon.svg';
19
+ import ReduxSearchCheckbox from '../inputs/checkbox/ReduxSearchCheckbox';
20
+ import ReduxFacetModal from './ReduxFacetModal';
21
+
22
+ const searchItems = (items, searchText) => {
23
+ let matchedItems = [];
24
+ const keyList = searchText.toUpperCase().split(',').filter((item) => item.trim() !== '');
25
+ if (keyList.length === 0) {
26
+ matchedItems = items;
27
+ } else {
28
+ for (let i = 0; i < items.length; i += 1) {
29
+ const item = items[i];
30
+ for (let j = 0; j < keyList.length; j += 1) {
31
+ const key = keyList[j].trim();
32
+ if (key === '' || item.group.toUpperCase().includes(key)) {
33
+ matchedItems.push(item);
34
+ break;
35
+ }
36
+ }
37
+ }
38
+ }
39
+ return matchedItems;
40
+ };
18
41
 
19
42
  const SearchFacetView = ({
20
43
  classes,
@@ -27,6 +50,7 @@ const SearchFacetView = ({
27
50
  CustomView,
28
51
  }) => {
29
52
  const [expand, setExpand] = useState(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
53
+ const [open, setOpen] = useState(false);
30
54
  const onExpandFacet = () => setExpand(!expand);
31
55
 
32
56
  const onClearSection = () => {
@@ -37,14 +61,36 @@ const SearchFacetView = ({
37
61
  /**
38
62
  * display checked items on facet collapse
39
63
  */
40
- const { type, facetValues } = facet;
64
+ const {
65
+ type, facetValues, datafield, section,
66
+ } = facet;
41
67
  const selectedItems = facetValues && facetValues.filter((item) => item && item.isChecked);
42
68
  const displayFacet = { ...facet };
43
69
  displayFacet.facetValues = selectedItems;
44
70
  const isActiveFacet = [...selectedItems].length > 0;
45
71
  const limitCheckBoxCount = facet?.showCheckboxCount || 5;
72
+
73
+ const sortFilters = sortBySection({ ...facet, sortBy });
74
+
75
+ const checkedItems = sortFilters.filter((item) => item.isChecked)
76
+ .map((item, index) => (
77
+ <ReduxSearchCheckbox
78
+ checkboxItem={{ ...item, index, section }}
79
+ datafield={datafield}
80
+ facet={facet}
81
+ />
82
+ ));
83
+
84
+ const newUncheckedFullList = searchItems(sortFilters.filter((item) => !item.isChecked),
85
+ searchText);
86
+
46
87
  return (
47
88
  <>
89
+ <ReduxFacetModal
90
+ facet={facet}
91
+ open={open}
92
+ onClose={() => setOpen(false)}
93
+ />
48
94
  <Accordion
49
95
  square
50
96
  expanded={expand}
@@ -58,8 +104,8 @@ const SearchFacetView = ({
58
104
  <CustomView
59
105
  facet={facet}
60
106
  facetClasses={
61
- isActiveFacet ? `activeFacet${facet.section}`
62
- : `inactiveFacet${facet.section}`
107
+ isActiveFacet ? `activeFacet${facet.section}`
108
+ : `inactiveFacet${facet.section}`
63
109
  }
64
110
  />
65
111
  ) : (
@@ -80,46 +126,58 @@ const SearchFacetView = ({
80
126
  {
81
127
  (facet.type !== InputTypes.SLIDER && facetValues.length === 0)
82
128
  && (
83
- <div className={classes.NonSortGroup}>
84
- <span
85
- className={classes.NonSortGroupItem}
86
- >
87
- No data for this field
88
- </span>
89
- </div>
129
+ <div className={classes.NonSortGroup}>
130
+ <span
131
+ className={classes.NonSortGroupItem}
132
+ >
133
+ No data for this field
134
+ </span>
135
+ </div>
90
136
  )
91
137
  }
92
138
  {
93
139
  (facetValues.length > 0)
94
140
  && (
95
- <div className={classes.searchContainer}>
96
- <input
97
- className={searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox}
98
- value={searchText}
99
- type="text"
100
- placeholder={facet.searchPlaceholder ? facet.searchPlaceholder : 'e.g. Sarcoma, Neoplasm'}
101
- onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
102
- />
141
+ <>
142
+ <div className={classes.searchContainer}>
143
+ <input
144
+ className={searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox}
145
+ value={searchText}
146
+ type="text"
147
+ placeholder={facet.searchPlaceholder ? facet.searchPlaceholder : 'e.g. Sarcoma, Neoplasm'}
148
+ onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
149
+ aria-label={`Search within ${facet.section} facet`}
150
+ />
151
+ {
152
+ searchText
153
+ && searchText.trim() !== ''
154
+ && (
155
+ <IconButton
156
+ aria-label="close"
157
+ onClick={() => onSearchTextChange(facet.datafield, '')}
158
+ className={classes.clearTextButton}
159
+ sx={(theme) => ({
160
+ position: 'absolute',
161
+ right: 7,
162
+ top: 7,
163
+ color: theme.palette.grey[500],
164
+ })}
165
+ >
166
+ <CloseIcon fontSize="small" />
167
+ </IconButton>
168
+ )
169
+ }
170
+ </div>
103
171
  {
104
- searchText
105
- && searchText.trim() !== ''
106
- && (
107
- <IconButton
108
- aria-label="close"
109
- onClick={() => onSearchTextChange(facet.datafield, '')}
110
- className={classes.clearTextButton}
111
- sx={(theme) => ({
112
- position: 'absolute',
113
- right: 7,
114
- top: 7,
115
- color: theme.palette.grey[500],
116
- })}
117
- >
118
- <CloseIcon fontSize="small" />
119
- </IconButton>
172
+ !facet.disableSearchModal && (
173
+ <div className={classes.searchContainer}>
174
+ <Button variant="text" className={classes.expandedDisplayButton} onClick={() => setOpen(!open)}>
175
+ {`VIEW EXPANDED DISPLAY (${checkedItems.length + newUncheckedFullList.length})`}
176
+ </Button>
177
+ </div>
120
178
  )
121
179
  }
122
- </div>
180
+ </>
123
181
  )
124
182
  }
125
183
  {
package/src/components/inputs/FilterItemStyle.js CHANGED
@@ -58,15 +58,4 @@ export default () => ({
58
58
  justifyContent: 'center',
59
59
  height: '54px',
60
60
  },
61
- expandedDisplayButton: {
62
- backgroundColor: '#4D889E !important',
63
- color: 'white',
64
- width: '222px',
65
- height: '24px',
66
- marginTop: '5px',
67
- marginBottom: '5px',
68
- borderRadius: '8px',
69
- fontSize: '11px',
70
- top: '10px',
71
- },
72
61
  });
package/src/components/inputs/SearchFilterItems.js CHANGED
@@ -3,12 +3,10 @@
3
3
  import React, { useEffect, useState, useRef } from 'react';
4
4
  import {
5
5
  withStyles,
6
- Button,
7
6
  } from '@material-ui/core';
8
7
  import ReduxSearchCheckbox from './checkbox/ReduxSearchCheckbox';
9
8
  import { sortBySection } from '../../utils/Sort';
10
9
  import styles from './FilterItemStyle';
11
- import ReduxFacetModal from '../facet/ReduxFacetModal';
12
10
 
13
11
  const searchItems = (items, searchText, facet) => {
14
12
  let matchedItems = [];
@@ -41,7 +39,6 @@ const SearchFilterItems = ({
41
39
  } = facet;
42
40
  const initialItemSize = 20;
43
41
  const [displayCount, setDisplayCount] = useState(initialItemSize);
44
- const [open, setOpen] = useState(false);
45
42
  const scrollableRef = useRef(null);
46
43
  const sortFilters = sortBySection({ ...facet, sortBy });
47
44
 
@@ -79,28 +76,20 @@ const SearchFilterItems = ({
79
76
 
80
77
  return (
81
78
  <>
82
- <ReduxFacetModal
83
- facet={facet}
84
- open={open}
85
- onClose={() => setOpen(false)}
86
- />
87
79
  <div>
88
80
  <div>
89
81
  {checkedItems}
90
82
  </div>
91
- <div ref={scrollableRef} className={classes.itemsContainer} onScroll={handleScroll}>
83
+ <div
84
+ ref={scrollableRef}
85
+ className={classes.itemsContainer}
86
+ onScroll={handleScroll}
87
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
88
+ tabIndex={0}
89
+ >
92
90
  {uncheckedItems}
93
91
  </div>
94
92
  </div>
95
- {
96
- !facet.disableSearchModal && (
97
- <div className={classes.searchContainer}>
98
- <Button variant="text" className={classes.expandedDisplayButton} onClick={() => setOpen(!open)}>
99
- {`VIEW EXPANDED DISPLAY (${checkedItems.length + newUncheckedFullList.length})`}
100
- </Button>
101
- </div>
102
- )
103
- }
104
93
  </>
105
94
  );
106
95
  };