@bento-core/facet-filter 1.0.1-ccdihub.25 → 1.0.1-ccdihub.27

package/dist/FacetFilterView.js

@@ -10,6 +10,7 @@ var _FacetFilterStyle = _interopRequireDefault(require("./FacetFilterStyle"));
 var _FacetSectionView = _interopRequireDefault(require("./components/section/FacetSectionView"));
 var _ReduxFacetView = _interopRequireDefault(require("./components/facet/ReduxFacetView"));
 var _FilterItems = _interopRequireDefault(require("./components/inputs/FilterItems"));
+var _ReduxSearchFacetView = _interopRequireDefault(require("./components/facet/ReduxSearchFacetView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable arrow-body-style */
 /* eslint-disable padded-blocks */
@@ -18,7 +19,8 @@ const BentoFacetFilter = _ref => {
   let {
     sideBarSections,
     CustomFacetSection,
-    CustomFacetView
+    CustomFacetView,
+    queryParams
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sideBarSections.map((section, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Divider, {
     variant: "middle",
@@ -26,14 +28,24 @@ const BentoFacetFilter = _ref => {
   }), /*#__PURE__*/_react.default.createElement(_FacetSectionView.default, {
     section: section,
     CustomSection: CustomFacetSection
-  }, section.items.map(facet => /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
-    facet: facet,
-    CustomView: CustomFacetView
-  }, /*#__PURE__*/_react.default.createElement(_core.List, {
-    className: "List_".concat(facet.label)
-  }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
-    facet: facet
-  }))))))));
+  }, section.items.map(facet => {
+    if (facet.search) {
+      return /*#__PURE__*/_react.default.createElement(_ReduxSearchFacetView.default, {
+        facet: facet,
+        queryParams: queryParams,
+        CustomView: CustomFacetView
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
+      facet: facet,
+      queryParams: queryParams,
+      CustomView: CustomFacetView
+    }, /*#__PURE__*/_react.default.createElement(_core.List, {
+      className: "List_".concat(facet.label)
+    }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+      facet: facet
+    })));
+  })))));
 };
 var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);
 exports.default = _default;

package/dist/components/facet/FacetModal.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
+var _core = require("@material-ui/core");
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _styles = require("@material-ui/core/styles");
+var _ModalStyle = _interopRequireDefault(require("./ModalStyle"));
+var _ModalFilterItems = _interopRequireDefault(require("../inputs/ModalFilterItems"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const resetIcon = {
+  src: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/bento/images/icons/svgs/Clear-icon.svg',
+  alt: 'Reset icon',
+  size: '12 px'
+};
+const ModalView = _ref => {
+  let {
+    classes,
+    facet,
+    sortBy,
+    searchText,
+    open,
+    onClose,
+    onClearFacetSection,
+    onSearchTextChange,
+    onSortChange,
+    queryParams
+  } = _ref;
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr), {
+      replace: true
+    });
+    onSortChange(null);
+    onClearFacetSection(facet);
+  };
+  return /*#__PURE__*/_react.default.createElement(_core.Modal, {
+    open: open,
+    onClose: onClose,
+    "aria-labelledby": "".concat(facet.datafield, "-search-modal")
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    className: classes.modalBody
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.header
+  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    id: "modal-modal-title",
+    className: classes.modalTitle
+  }, "".concat(facet.label, " Facet Search")), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    "aria-label": "close",
+    onClick: onClose,
+    className: classes.closeButton,
+    sx: theme => ({
+      position: 'absolute',
+      right: 8,
+      top: 8,
+      color: theme.palette.grey[500]
+    })
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, {
+    fontSize: "small"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.searchContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.searchInputbox
+  }, "Search ".concat(facet.label)), /*#__PURE__*/_react.default.createElement("input", {
+    className: classes.searchBox,
+    value: searchText,
+    type: "text",
+    placeholder: "e.g. A1CF, CREB3L1, PIK3CA",
+    onChange: e => onSearchTextChange(facet.datafield, e.target.value)
+  }), /*#__PURE__*/_react.default.createElement(_core.Button, {
+    variant: "outlined",
+    onClick: () => onSearchTextChange(facet.datafield, ''),
+    className: classes.resetIcon
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: resetIcon.src,
+    height: resetIcon.size,
+    width: resetIcon.size,
+    alt: resetIcon.alt
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.itemContainer
+  }, /*#__PURE__*/_react.default.createElement(_ModalFilterItems.default, {
+    searchText: searchText,
+    facet: facet,
+    sortBy: sortBy,
+    onClearSection: onClearSection,
+    onSortChange: onSortChange,
+    queryParams: queryParams
+  }))));
+};
+var _default = (0, _styles.withStyles)(_ModalStyle.default)(ModalView);
+exports.default = _default;

package/dist/components/facet/FacetStyle.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _Search_Icon = _interopRequireDefault(require("./assets/Search_Icon.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = () => ({
   expansionPanelDetailsRoot: {
     display: 'block'
@@ -32,9 +34,9 @@ var _default = () => ({
   sortGroup: {
     paddingTop: '10px',
     marginBottom: '5px',
-    borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    marginLeft: '-5px'
+    marginLeft: '-5px',
+    borderTop: 'none'
   },
   sortGroupIcon: {
     cursor: 'pointer',
@@ -77,6 +79,33 @@ var _default = () => ({
     cursor: 'pointer',
     fontSize: '10px',
     width: '100%'
+  },
+  searchContainer: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  searchBox: {
+    fontSize: '11px',
+    fontFamily: 'Nunito',
+    width: '245px',
+    height: '24px',
+    marginTop: '12px',
+    marginBottom: '5px',
+    borderRadius: '8px',
+    background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
+    marginLeft: '6px',
+    border: '1px solid',
+    padding: '5px'
+  },
+  expandedDisplayButton: {
+    background: '#4D889E',
+    color: 'white',
+    width: '222px',
+    height: '30px',
+    marginTop: '5px',
+    marginBottom: '5px',
+    borderRadius: '8px',
+    fontSize: '11px'
   }
 });
 exports.default = _default;

package/dist/components/facet/FacetView.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
@@ -27,10 +29,13 @@ const FacetView = _ref => {
     facet,
     onClearFacetSection,
     onClearSliderSection,
-    CustomView
+    CustomView,
+    queryParams
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(false);
   const onExpandFacet = () => setExpand(!expand);
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
 
   /**
   * expand section incase of active local search
@@ -47,6 +52,13 @@ const FacetView = _ref => {
     setSortBy(type);
   };
   const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr), {
+      replace: true
+    });
     setSortBy(null);
     if (facet.type === _Types.InputTypes.SLIDER) {
       onClearSliderSection(facet);
@@ -116,11 +128,13 @@ const FacetView = _ref => {
     }
   }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: facet,
+    queryParams: queryParams,
     sortBy: sortBy
   })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
     id: "filter_Items"
   }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
-    facet: displayFacet
+    facet: displayFacet,
+    queryParams: queryParams
   }))), !expand && selectedItems.length > limitCheckBoxCount && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.showMore,
     onClick: onExpandFacet

package/dist/components/facet/ModalStyle.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Search_Icon = _interopRequireDefault(require("./assets/Search_Icon.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = () => ({
+  header: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '55px'
+  },
+  closeButton: {
+    marginLeft: '769px',
+    position: 'absolute'
+  },
+  resetIcon: {
+    marginLeft: '10px',
+    minWidth: '5px',
+    width: '5px',
+    borderRadius: '9px',
+    height: '30px'
+  },
+  modalTitle: {
+    fontFamily: 'Poppins',
+    fontSize: '19px',
+    fontWeight: '400',
+    lineHeight: '21px',
+    letterSpacing: '0.02em',
+    textAlign: 'center',
+    color: '#000000'
+  },
+  modalBody: {
+    position: 'absolute',
+    top: '5%',
+    left: '25%',
+    width: '836px',
+    height: '671px',
+    background: '#FFFFFF',
+    border: '1px solid #505050',
+    borderRadius: '40px',
+    overflow: 'hidden'
+  },
+  searchContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderTop: '3px solid #939393',
+    borderBottom: '3px solid #939393',
+    height: '51px'
+  },
+  searchInputbox: {
+    marginRight: '10px',
+    fontFamily: 'Poppins',
+    fontSize: '18px',
+    fontWeight: '600',
+    lineHeight: '27px',
+    letterSpacing: '-0.02em',
+    textAlign: 'left',
+    color: '#7A437A'
+  },
+  searchBox: {
+    fontSize: '12px',
+    fontWeight: '400',
+    fontFamily: 'Nunito',
+    width: '437px',
+    height: '28px',
+    marginTop: '5px',
+    marginBottom: '5px',
+    borderRadius: '8px',
+    background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
+    border: '1.5px solid #646464'
+  },
+  highlight: {
+    color: '#b2c6d6'
+  },
+  sortGroup: {
+    paddingTop: '10px',
+    marginBottom: '5px',
+    borderTop: '1px solid #B1B1B1',
+    textAlign: 'left',
+    marginLeft: '-5px'
+  },
+  sortGroupIcon: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '12px',
+    marginLeft: '24px'
+  },
+  sortGroupItem: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '32px'
+  },
+  NonSortGroup: {
+    marginBottom: '5px',
+    borderTop: '1px solid #B1B1B1',
+    textAlign: 'left',
+    paddingLeft: '10px'
+  },
+  NonSortGroupItem: {
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '32px'
+  },
+  sortGroupItemCounts: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '5px'
+  },
+  itemContainer: {}
+});
+exports.default = _default;

package/dist/components/facet/ReduxFacetModal.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _Actions = require("../../store/actions/Actions");
+var _FacetModal = _interopRequireDefault(require("./FacetModal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import FacetView from './FacetView';
+
+const ReduxFacetModal = props => /*#__PURE__*/_react.default.createElement(_FacetModal.default, props);
+const mapStateToProps = (state, ownProps) => ({
+  searchText: state.statusReducer.searchState[ownProps.facet.datafield] || '',
+  sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null
+});
+const mapDispatchToProps = dispatch => ({
+  onClearFacetSection: facet => {
+    dispatch((0, _Actions.clearFacetSection)(facet));
+  },
+  onSearchTextChange: (datafield, searchText) => {
+    dispatch((0, _Actions.searchTextChange)(datafield, searchText));
+  },
+  onSortChange: (datafield, sortBy) => {
+    dispatch((0, _Actions.sortChange)(datafield, sortBy));
+  }
+});
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxFacetModal);
+exports.default = _default;

package/dist/components/facet/ReduxSearchFacetView.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _Actions = require("../../store/actions/Actions");
+var _SearchFacetView = _interopRequireDefault(require("./SearchFacetView"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import FacetView from './FacetView';
+
+const ReduxSearchFacetView = props => /*#__PURE__*/_react.default.createElement(_SearchFacetView.default, props);
+const mapStateToProps = (state, ownProps) => {
+  var _state$statusReducer;
+  return {
+    searchText: ((_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.searchState[ownProps.facet.datafield]) || '',
+    sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null
+  };
+};
+const mapDispatchToProps = dispatch => ({
+  onClearFacetSection: facet => {
+    dispatch((0, _Actions.clearFacetSection)(facet));
+  },
+  onClearSliderSection: facet => {
+    dispatch((0, _Actions.clearSliderSection)(facet));
+  },
+  onSearchTextChange: (datafield, searchText) => {
+    dispatch((0, _Actions.searchTextChange)(datafield, searchText));
+  },
+  onSortChange: (datafield, sortBy) => {
+    dispatch((0, _Actions.sortChange)(datafield, sortBy));
+  }
+});
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxSearchFacetView);
+exports.default = _default;

package/dist/components/facet/SearchFacetView.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
+var _core = require("@material-ui/core");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
+var _Types = require("../inputs/Types");
+var _FacetStyle = _interopRequireDefault(require("./FacetStyle"));
+var _FilterItems = _interopRequireDefault(require("../inputs/FilterItems"));
+var _SearchFilterItems = _interopRequireDefault(require("../inputs/SearchFilterItems"));
+var _Sort = require("../../utils/Sort");
+var _clearIcon = _interopRequireDefault(require("./assets/clearIcon.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+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); }
+const SearchFacetView = _ref => {
+  let {
+    classes,
+    facet,
+    searchText,
+    sortBy,
+    onClearFacetSection,
+    onSearchTextChange,
+    onSortChange,
+    CustomView,
+    queryParams
+  } = _ref;
+  const [expand, setExpand] = (0, _react.useState)(false);
+  const onExpandFacet = () => setExpand(!expand);
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr), {
+      replace: true
+    });
+    onSortChange(facet.datafield, null);
+    onClearFacetSection(facet);
+  };
+
+  /**
+   * display checked items on facet collapse
+   */
+  const {
+    type,
+    facetValues
+  } = facet;
+  const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
+  const displayFacet = _objectSpread({}, facet);
+  displayFacet.facetValues = selectedItems;
+  const isActiveFacet = [...selectedItems].length > 0;
+  const limitCheckBoxCount = (facet === null || facet === void 0 ? void 0 : facet.showCheckboxCount) || 5;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Accordion, {
+    square: true,
+    expanded: expand,
+    onChange: onExpandFacet,
+    classes: {
+      root: classes.expansionPanelsideBarItem
+    },
+    id: facet.section
+  }, CustomView ? /*#__PURE__*/_react.default.createElement(CustomView, {
+    facet: facet,
+    facetClasses: isActiveFacet ? "activeFacet".concat(facet.section) : "inactiveFacet".concat(facet.section)
+  }) : /*#__PURE__*/_react.default.createElement(_AccordionSummaryView.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    id: "filterGroup_ ".concat(facet.datafield, "\n                ").concat(facet.label),
+    className: (0, _clsx.default)(classes.subSectionSummaryText, {
+      ["activeFacet".concat(facet.section)]: isActiveFacet
+    })
+  }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.NonSortGroup
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.NonSortGroupItem
+  }, "No data for this field")), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.searchContainer
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    className: classes.searchBox,
+    value: searchText,
+    type: "text",
+    placeholder: "e.g. Sarcoma, Neoplasm",
+    onChange: e => onSearchTextChange(facet.datafield, e.target.value)
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.sortGroup
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.sortGroupIcon
+  }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    style: {
+      fontSize: 10
+    },
+    onClick: onClearSection
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _clearIcon.default,
+    height: 12,
+    width: 12,
+    alt: "clear-icon"
+  }))), facet.type === _Types.InputTypes.CHECKBOX && facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _clsx.default)(classes.sortGroupItem, {
+      [classes.highlight]: sortBy === _Sort.sortType.ALPHABET
+    }),
+    onClick: () => {
+      onSortChange(_Sort.sortType.ALPHABET);
+    }
+  }, "Sort alphabetically"), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _clsx.default)(classes.sortGroupItemCounts, {
+      [classes.highlight]: sortBy === _Sort.sortType.NUMERIC
+    }),
+    onClick: () => {
+      onSortChange(_Sort.sortType.NUMERIC);
+    }
+  }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
+    searchText: searchText,
+    facet: facet,
+    queryParams: queryParams,
+    sortBy: sortBy
+  })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
+    id: "filter_Items"
+  }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+    facet: displayFacet,
+    queryParams: queryParams
+  }))), !expand && selectedItems.length > limitCheckBoxCount && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.showMore,
+    onClick: onExpandFacet
+  }, "...expand to see all selections"));
+};
+var _default = (0, _core.withStyles)(_FacetStyle.default)(SearchFacetView);
+exports.default = _default;

package/dist/components/facet/assets/Search_Icon.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.4134 1C3.43007 1 1 3.43007 1 6.4134C1 9.39672 3.43007 11.8268 6.4134 11.8268C7.71072 11.8268 8.90214 11.3661 9.83589 10.6014L13.0681 13.8336C13.118 13.8855 13.1777 13.927 13.2438 13.9556C13.3099 13.9841 13.3811 13.9992 13.4531 14C13.5251 14.0007 13.5966 13.9871 13.6632 13.9598C13.7299 13.9326 13.7905 13.8924 13.8414 13.8414C13.8924 13.7905 13.9326 13.7299 13.9598 13.6632C13.9871 13.5966 14.0007 13.5251 14 13.4531C13.9992 13.3811 13.9841 13.3099 13.9556 13.2438C13.927 13.1777 13.8855 13.118 13.8336 13.0681L10.6014 9.83589C11.3661 8.90214 11.8268 7.71072 11.8268 6.4134C11.8268 3.43007 9.39672 1 6.4134 1ZM6.4134 2.08268C8.8116 2.08268 10.7441 4.0152 10.7441 6.4134C10.7441 8.8116 8.8116 10.7441 6.4134 10.7441C4.0152 10.7441 2.08268 8.8116 2.08268 6.4134C2.08268 4.0152 4.0152 2.08268 6.4134 2.08268Z" fill="#4D889E" stroke="#4D889E"/>
+</svg>

package/dist/components/inputs/FilterItemStyle.js

@@ -32,6 +32,48 @@ var _default = () => ({
     float: 'right',
     marginRight: '10px',
     marginTop: '5px'
+  },
+  itemsContainer: {
+    maxHeight: '400px',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    borderTop: '2px solid #AEAEAE',
+    borderBottom: '2px solid #AEAEAE',
+    marginRight: '-1px',
+    '&::-webkit-scrollbar': {
+      width: '12px',
+      backgroundColor: '#E9F0F4',
+      borderLeft: '0.5px solid #B1B1B1',
+      borderRight: '0.5px solid #B1B1B1'
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: '#CECECE',
+      border: '3px solid transparent',
+      borderRadius: '20px',
+      backgroundClip: 'content-box'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: '#477C90',
+      border: '3px solid transparent',
+      borderRadius: '20px',
+      backgroundClip: 'content-box'
+    }
+  },
+  searchContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    height: '54px'
+  },
+  expandedDisplayButton: {
+    backgroundColor: '#4D889E !important',
+    color: 'white',
+    width: '222px',
+    height: '24px',
+    marginTop: '5px',
+    marginBottom: '5px',
+    borderRadius: '8px',
+    fontSize: '11px',
+    top: '10px'
   }
 });
 exports.default = _default;

package/dist/components/inputs/FilterItems.js

@@ -18,6 +18,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 const FilterItems = _ref => {
   let {
     facet,
+    queryParams,
     sortBy
   } = _ref;
   const {
@@ -37,11 +38,13 @@ const FilterItems = _ref => {
             section
           }),
           datafield: datafield,
-          facet: facet
+          facet: facet,
+          queryParams: queryParams
         }));
       case _Types.InputTypes.SLIDER:
         return /*#__PURE__*/_react.default.createElement(_ReduxSlider.default, {
-          facet: facet
+          facet: facet,
+          queryParams: queryParams
         });
       default:
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);