@bento-core/facet-filter 1.0.1-popsci.1 → 1.0.1-popsci.3

package/README.md

@@ -95,8 +95,6 @@ export const facetsConfig = [{
     minLowerBound: 0,  
     maxUpperBound: 100,   
     quantifier: 'Years',
-    CustomLowerUpperBound: CustomLowerUpperBound, // Custom component for displaying lower and upper bounds
-    CustomSliderValue: CustomSliderValue, // Custom component for displaying slider value
 ].
 ```
 1. **apiForFiltering** refers to object key for retrieving name and subjects count from query response (DASHBOARD_QUERY)
@@ -246,66 +244,12 @@ className={clsx(classes.sectionSummaryText, classes[facetClasses])}
 ## 10  CLearAllFilterButton Component
 Bento Core provides 1. function to clear all active filters, 2. disable flag (true incase of no active filters). Client is responsible for defining view (custom html).
 ```
-import { ClearAllFiltersBtn, FacetFilter } from '@bento-core/facet-filter';
-import { getFilters } from '@bento-core/facet-filter';
+import { generateClearAllFilterBtn } from 'bento-core';
 
 const CustomClearAllFiltersBtn = ({ onClearAllFilters, disable }) => {
     //...custom component 1. bind onClearFilters fn
     // 2. disable flag to disable button
-} 
-  // get filter data
-  // filterState: state.statusReducer.filterState, (from reducer)
-  // const activeFilters = getFilters(filterState) // formating
-
-  <ClearAllFiltersBtn
-    Component={CustomClearAllFiltersBtn}
-    activeFilters={activeFilters}
-  />  
-```
-
-## 11  Facet Value Component
-```
-// response 
-// filterCaseCountByProgram: [{group: "COP", subjects: 301}]
-const {
-  name,
-  customName,
-  subjects,
-  customSubjects,
-  tooltip,
-} = checkboxItem;
-
-// 1. by default facet value component display group ("COP")
-// 2. set customName to display customize value
-// 3. by default facet value component display subjects (301)
-// 4. set customSubjects to display customize value or adjust correct field for subject count
-// 5. tooltip - provide text value to tooltip text
-
- /**
-   * Add Bento frontend filter count/subjects
-   * Add tootip text
-   */
-  const filterData = facetsConfig.reduce((acc, item) => {
-    const facetValues = searchData[item.apiPath];
-    if (!facetValues) {
-      return acc;
-    }
-    const subjectCounts = [...facetValues].map((checkbox) => {
-      const text = tooltipText[item.tooltipKey];
-      return {
-        ...checkbox,
-        customSubjects: checkbox.count,
-        tooltip: text ? text[checkbox.group] : undefined,
-      };
-    });
-    return { ...acc, [item.apiPath]: [...subjectCounts] };
-  }, {});
+}
 
-  <FacetFilter
-    data={filterData}
-    facetSectionConfig={facetSectionVariables}
-    facetsConfig={facetsConfig}
-    CustomFacetSection={CustomFacetSection}
-    CustomFacetView={CustomFacetView}
-  />
+const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn); 
 ```

package/dist/FacetFilterController.js

@@ -12,13 +12,13 @@ var _FacetFilterView = _interopRequireDefault(require("./FacetFilterView"));
 const _excluded = ["section"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const FacetFilterController = props => {
   /**
    * update checkbox state
@@ -29,8 +29,7 @@ const FacetFilterController = props => {
     filterState,
     data,
     facetsConfig,
-    facetSectionConfig,
-    tooltipText = {}
+    facetSectionConfig
   } = props;
   const updateFacetState = filterSections => {
     const updateSections = [...filterSections];
@@ -38,16 +37,9 @@ const FacetFilterController = props => {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach(sideBar => {
           if (sideBar.type === _Types.InputTypes.CHECKBOX && sideBar.datafield === key) {
-            const {
-              facetValues = []
-            } = sideBar;
-            const updateFacetVals = facetValues.map(item => {
-              const facetVal = item[sideBar.field];
-              return _objectSpread(_objectSpread({}, item), {}, {
-                isChecked: value[facetVal] ? value[facetVal] : false
-              });
+            sideBar.facetValues.forEach(item => {
+              item.isChecked = value[item.name] ? value[item.name] : false;
             });
-            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -57,13 +49,9 @@ const FacetFilterController = props => {
     } else {
       updateSections.forEach(sideBar => {
         if (sideBar.type === _Types.InputTypes.CHECKBOX) {
-          const {
-            facetValues = []
-          } = sideBar;
-          const updateFacetVals = facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
-            isChecked: false
-          }));
-          sideBar.facetValues = updateFacetVals;
+          sideBar.facetValues.forEach(item => {
+            item.isChecked = false;
+          });
         }
         /**
          * set default value for slider - on clear all filter
@@ -108,7 +96,6 @@ const FacetFilterController = props => {
    * Construct filter object
    * 1. add facet values to facets
    * 2. add 'name' key to each facet value
-   * 3. add '
    */
   const addFacetValues = facets => {
     const updateFacets = [];
@@ -118,13 +105,19 @@ const FacetFilterController = props => {
           facetValues: []
         });
         const {
+          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            updateFacet.facetValues = data[apiForFiltering];
+            const updateField = data[apiForFiltering].map(item => {
+              const addField = _objectSpread({}, item);
+              addField.name = item[field];
+              return addField;
+            });
+            updateFacet.facetValues = updateField;
           }
           /**
           * add object to facet values
@@ -147,7 +140,7 @@ const FacetFilterController = props => {
    * Generate facet sections state
    *
    */
-  const displayFacets = facetsConfig.filter(facet => facet.show);
+  const displayFacets = facetsConfig.filter(facet => facet.show).slice(0, 16);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/dist/FacetFilterStyle.js

@@ -25,7 +25,7 @@ var _default = () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   }
 });

package/dist/FacetFilterView.js

@@ -9,6 +9,7 @@ var _core = require("@material-ui/core");
 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"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable arrow-body-style */
 /* eslint-disable padded-blocks */
@@ -28,7 +29,11 @@ const BentoFacetFilter = _ref => {
   }, 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
+  }))))))));
 };
 var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);
 exports.default = _default;

package/dist/components/facet/FacetStyle.js

@@ -46,7 +46,7 @@ var _default = () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   },
   NonSortGroup: {
@@ -57,25 +57,25 @@ var _default = () => ({
   },
   NonSortGroupItem: {
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   },
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     float: 'right',
     marginRight: '10px',
     marginTop: '5px'
   },
   highlight: {
-    color: '#b2c6d6'
+    color: '#537A9D'
   },
   showMore: {
     textAlign: 'right',
     paddingRight: '5px',
     cursor: 'pointer',
-    fontSize: '10px',
+    fontSize: '11px',
     width: '100%'
   }
 });

package/dist/components/facet/FacetView.js

@@ -35,8 +35,8 @@ const FacetView = _ref => {
   const onExpandFacet = () => setExpand(!expand);
 
   /**
-  * expand section incase of active local search
-  */
+   * Expand section incase of active local search
+   */
   (0, _react.useEffect)(() => {
     if (autoComplete && autoComplete.length > 0 || upload && upload.length > 0) {
       setExpand(true);
@@ -82,11 +82,11 @@ const FacetView = _ref => {
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
+  }, 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")), (facet.type === _Types.InputTypes.SLIDER || facetValues.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
+  }, "No data for this field")), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.sortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.sortGroupIcon

package/dist/components/inputs/checkbox/CheckboxStyle.js

@@ -8,6 +8,12 @@ var _default = () => ({
   listItemGutters: {
     padding: '10px 20px 10px 0px'
   },
+  listItemRoot: {
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: 'rgba(0, 0, 0, 0.04)'
+    }
+  },
   checkboxRoot: {
     marginLeft: '5px',
     height: 12

package/dist/components/inputs/checkbox/CheckboxView.js

@@ -4,13 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@material-ui/core/styles");
 var _core = require("@material-ui/core");
+var _TouchRipple = _interopRequireDefault(require("@material-ui/core/ButtonBase/TouchRipple"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _icons = require("@material-ui/icons");
 var _CheckboxStyle = _interopRequireDefault(require("./CheckboxStyle"));
 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; }
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react/jsx-wrap-multilines */
@@ -29,23 +32,31 @@ const CheckBoxView = _ref => {
     facet
   } = _ref;
   const {
+    name,
+    subjects,
     isChecked = false,
     index,
     section,
-    tooltip
+    tooltip,
+    label
   } = checkboxItem;
-  const {
-    field = 'group',
-    count = 'subjects',
-    customCount = text => "(".concat(text, ")"),
-    defaultValue = ''
-  } = facet;
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
-  const checkedSection = "".concat(section).toLowerCase().replace(/\ /g, '_');
-  const name = checkboxItem[field] || defaultValue || 'N/A';
+  const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
+  const checkboxId = "checkbox_".concat(facet.label, "_").concat(name);
+  const rippleRef = (0, _react.useRef)(null);
+  const handleRippleStart = event => {
+    if (rippleRef.current) {
+      rippleRef.current.start(event);
+    }
+  };
+  const handleRippleStop = event => {
+    if (rippleRef.current) {
+      rippleRef.current.stop(event);
+    }
+  };
   const handleToggle = () => {
     const toggleCheckBoxItem = {
-      name: checkboxItem[field],
+      name: name,
       datafield: datafield,
       isChecked: !isChecked
     };
@@ -57,29 +68,39 @@ const CheckBoxView = _ref => {
       ["".concat(checkedSection, "NameUnChecked")]: !isChecked,
       ["".concat(checkedSection, "NameChecked")]: isChecked
     })
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, label ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    className: classes.checkboxLabel
+  }, label) : /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.checkboxName
   }, name));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.ListItem, {
+    component: "div",
     width: 1,
-    button: true,
     alignItems: "flex-start",
     onClick: handleToggle,
+    onMouseDown: handleRippleStart,
+    onMouseUp: handleRippleStop,
+    onMouseLeave: handleRippleStop,
     classes: {
-      gutters: classes.listItemGutters
+      gutters: classes.listItemGutters,
+      root: classes.listItemRoot
     },
     className: (0, _clsx.default)({
       ["".concat(checkedSection, "Checked").concat(indexType)]: isChecked
     })
   }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
-    id: "checkbox_".concat(facet.label, "_").concat(name),
+    id: checkboxId,
     icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
       style: {
         fontSize: 18
       },
       className: checkedSection
     }),
-    onClick: handleToggle,
+    inputProps: {
+      'aria-label': 'checkbox',
+      tabIndex: -1,
+      'aria-hidden': true
+    },
     checked: isChecked,
     checkedIcon: /*#__PURE__*/_react.default.createElement(_icons.CheckBox, {
       style: {
@@ -92,22 +113,25 @@ const CheckBoxView = _ref => {
     classes: {
       root: classes.checkboxRoot
     },
-    inputProps: {
-      'aria-label': 'Select'
+    style: {
+      pointerEvents: 'none'
     }
   }), tooltip ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
     id: datafield,
     title: tooltip
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: datafield
-  }, name)) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+  }, /*#__PURE__*/_react.default.createElement(LabelComponent, null))) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
     className: "".concat(checkedSection, "_md_space")
   }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: (0, _clsx.default)("".concat(checkedSection, "Subjects"), {
       ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
       ["".concat(checkedSection, "SubjectChecked")]: isChecked
     })
-  }, customCount(checkboxItem[count] || 0))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
+  }, "(".concat(subjects, ")")), /*#__PURE__*/_react.default.createElement(_TouchRipple.default, {
+    ref: rippleRef,
+    center: true
+  })), /*#__PURE__*/_react.default.createElement(_core.Divider, {
     style: {
       backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
       margin: '0px',

package/dist/components/inputs/slider/SliderView.js

@@ -29,9 +29,7 @@ const SliderView = _ref => {
     maxUpperBound,
     quantifier,
     datafield,
-    facetValues,
-    CustomLowerUpperBound,
-    CustomSliderValue
+    facetValues
   } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
@@ -104,24 +102,13 @@ const SliderView = _ref => {
       thumb: isValid() ? classes.thumb : classes.invalidThumb,
       track: isValid() ? classes.track : classes.invalidTrack
     }
-  })), typeof CustomLowerUpperBound === 'function' ? CustomLowerUpperBound({
-    minLowerBound,
-    maxUpperBound,
-    classes
-  }) : /*#__PURE__*/_react.default.createElement(_core.Box, {
+  })), /*#__PURE__*/_react.default.createElement(_core.Box, {
     className: classes.lowerUpperBound
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.lowerBound
   }, minLowerBound), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.upperBound
-  }, maxUpperBound))), typeof CustomSliderValue === 'function' ? CustomSliderValue({
-    sliderValue,
-    minLowerBound,
-    maxUpperBound,
-    isValid,
-    quantifier,
-    classes
-  }) : (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, maxUpperBound))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: isValid() ? classes.sliderText : classes.invalidSliderText
   }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
 };

package/dist/utils/Sort.js

@@ -46,30 +46,28 @@ const sortBySection = _ref => {
   let {
     facetValues,
     sort_type,
-    sortBy,
-    field,
-    count = 'subjects'
+    sortBy
   } = _ref;
   const sortfacetValues = [...facetValues];
   if (!sortfacetValues) {
     return facetValues;
   }
   if (sortBy === sortType.NUMERIC) {
-    sortfacetValues.sort((a, b) => b[count] - a[count]);
+    sortfacetValues.sort((a, b) => b.subjects - a.subjects);
   } else {
-    sortfacetValues.sort((a, b) => lowerCaseString(a[field]) > lowerCaseString(b[field]) || -(lowerCaseString(a[field]) < lowerCaseString(b[field])));
+    sortfacetValues.sort((a, b) => lowerCaseString(a.name) > lowerCaseString(b.name) || -(lowerCaseString(a.name) < lowerCaseString(b.name)));
   }
   if (sort_type === sortType.CUSTOM_NUMBER && sortBy !== sortType.NUMERIC) {
     sortfacetValues.sort((a, b) => {
-      const aNumbs = getNumberArray(a[field]);
-      const bNumbs = getNumberArray(b[field]);
+      const aNumbs = getNumberArray(a.name);
+      const bNumbs = getNumberArray(b.name);
       const aNumb = Number(aNumbs[0]);
       const bNumb = Number(bNumbs[0]);
       return aNumbs.length === bNumbs.length ? aNumb > bNumb : -(aNumb <= bNumb);
     });
   }
   if (sort_type === sortType.RANGE && sortBy !== sortType.NUMERIC) {
-    sortfacetValues.sort((a, b) => startIndex(a[field]) > startIndex(b[field]) || -(startIndex(a[field]) < startIndex(b[field])));
+    sortfacetValues.sort((a, b) => startIndex(a.name) > startIndex(b.name) || -(startIndex(a.name) < startIndex(b.name)));
   }
   /**
    * Display checked item always on top

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-popsci.1",
+  "version": "1.0.1-popsci.3",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -24,5 +24,6 @@
     "react-redux": "^7.2.1"
   },
   "author": "CTOS Bento Team",
-  "license": "ISC"
+  "license": "ISC",
+  "gitHead": "01a57a616fd8d9cc6ffca70907b17b16a1dc369f"
 }

package/src/FacetFilterController.js

@@ -25,7 +25,6 @@ const FacetFilterController = (props) => {
     data,
     facetsConfig,
     facetSectionConfig,
-    tooltipText = {},
   } = props;
 
   const updateFacetState = (filterSections) => {
@@ -34,15 +33,9 @@ const FacetFilterController = (props) => {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach((sideBar) => {
           if (sideBar.type === InputTypes.CHECKBOX && sideBar.datafield === key) {
-            const { facetValues = [] } = sideBar;
-            const updateFacetVals = facetValues.map((item) => {
-              const facetVal = item[sideBar.field];
-              return {
-                ...item,
-                isChecked: value[facetVal] ? value[facetVal] : false,
-              };
+            sideBar.facetValues.forEach((item) => {
+              item.isChecked = value[item.name] ? value[item.name] : false;
             });
-            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -52,12 +45,9 @@ const FacetFilterController = (props) => {
     } else {
       updateSections.forEach((sideBar) => {
         if (sideBar.type === InputTypes.CHECKBOX) {
-          const { facetValues = [] } = sideBar;
-          const updateFacetVals = facetValues.map((item) => ({
-            ...item,
-            isChecked: false,
-          }));
-          sideBar.facetValues = updateFacetVals;
+          sideBar.facetValues.forEach((item) => {
+            item.isChecked = false;
+          });
         }
         /**
          * set default value for slider - on clear all filter
@@ -93,7 +83,6 @@ const FacetFilterController = (props) => {
    * Construct filter object
    * 1. add facet values to facets
    * 2. add 'name' key to each facet value
-   * 3. add '
    */
   const addFacetValues = (facets) => {
     const updateFacets = [];
@@ -101,13 +90,19 @@ const FacetFilterController = (props) => {
       facets.forEach((facet) => {
         const updateFacet = { ...facet, facetValues: [] };
         const {
+          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering,
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            updateFacet.facetValues = data[apiForFiltering];
+            const updateField = data[apiForFiltering].map((item) => {
+              const addField = { ...item };
+              addField.name = item[field];
+              return addField;
+            });
+            updateFacet.facetValues = updateField;
           }
           /**
           * add object to facet values
@@ -130,7 +125,7 @@ const FacetFilterController = (props) => {
    * Generate facet sections state
    *
    */
-  const displayFacets = facetsConfig.filter((facet) => facet.show);
+  const displayFacets = facetsConfig.filter((facet) => facet.show).slice(0, 16);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/src/FacetFilterStyle.js

@@ -19,7 +19,7 @@ export default () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px',
   },
 });

package/src/FacetFilterView.js

@@ -3,11 +3,13 @@
 import React from 'react';
 import {
   Divider,
+  List,
   withStyles,
 } from '@material-ui/core';
 import styles from './FacetFilterStyle';
 import FacetSectionView from './components/section/FacetSectionView';
 import FacetView from './components/facet/ReduxFacetView';
+import FilterItems from './components/inputs/FilterItems';
 
 const BentoFacetFilter = ({
   sideBarSections,
@@ -31,7 +33,13 @@ const BentoFacetFilter = ({
                 <FacetView
                   facet={facet}
                   CustomView={CustomFacetView}
-                />
+                >
+                  <List className={`List_${facet.label}`}>
+                    <FilterItems
+                      facet={facet}
+                    />
+                  </List>
+                </FacetView>
               ))}
             </FacetSectionView>
           </>

package/src/components/facet/FacetStyle.js

@@ -40,7 +40,7 @@ export default () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px',
   },
   NonSortGroup: {
@@ -51,25 +51,25 @@ export default () => ({
   },
   NonSortGroupItem: {
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px',
   },
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     float: 'right',
     marginRight: '10px',
     marginTop: '5px',
   },
   highlight: {
-    color: '#b2c6d6',
+    color: '#537A9D',
   },
   showMore: {
     textAlign: 'right',
     paddingRight: '5px',
     cursor: 'pointer',
-    fontSize: '10px',
+    fontSize: '11px',
     width: '100%',
   },
 });

package/src/components/facet/FacetView.js

@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Accordion,
-  List,
-  withStyles,
-  Icon,
+  Accordion, List, withStyles, Icon,
 } from '@material-ui/core';
 import clsx from 'clsx';
 import CustomAccordionSummary from '../summary/AccordionSummaryView';
@@ -26,11 +23,13 @@ const FacetView = ({
   const onExpandFacet = () => setExpand(!expand);
 
   /**
-  * expand section incase of active local search
-  */
+   * Expand section incase of active local search
+   */
   useEffect(() => {
-    if ((autoComplete && autoComplete.length > 0)
-      || (upload && upload.length > 0)) {
+    if (
+      (autoComplete && autoComplete.length > 0)
+      || (upload && upload.length > 0)
+    ) {
       setExpand(true);
     }
   }, [autoComplete, upload]);
@@ -68,21 +67,20 @@ const FacetView = ({
         }}
         id={facet.section}
       >
-        { CustomView ? (
+        {CustomView ? (
           <CustomView
             facet={facet}
             facetClasses={
-            isActiveFacet ? `activeFacet${facet.section}`
-              : `inactiveFacet${facet.section}`
+              isActiveFacet
+                ? `activeFacet${facet.section}`
+                : `inactiveFacet${facet.section}`
             }
           />
         ) : (
           <CustomAccordionSummary>
             <div
-              id={
-                `filterGroup_ ${facet.datafield}
-                ${facet.label}`
-              }
+              id={`filterGroup_ ${facet.datafield}
+                ${facet.label}`}
               className={clsx(classes.subSectionSummaryText, {
                 [`activeFacet${facet.section}`]: isActiveFacet,
               })}
@@ -91,96 +89,60 @@ const FacetView = ({
             </div>
           </CustomAccordionSummary>
         )}
-        {
-          (facet.type === InputTypes.SLIDER || facetValues.length === 0)
-          && (
+        {facetValues.length === 0 && (
           <div className={classes.NonSortGroup}>
-            <span
-              className={classes.NonSortGroupItem}
-            >
+            <span className={classes.NonSortGroupItem}>
               No data for this field
             </span>
           </div>
-          )
-        }
-        {
-          (facet.type === InputTypes.SLIDER || facetValues.length > 0)
-          && (
+        )}
+        {facetValues.length > 0 && (
           <div className={classes.sortGroup}>
             <span className={classes.sortGroupIcon}>
-              <Icon
-                style={{ fontSize: 10 }}
-                onClick={onClearSection}
-              >
-                <img
-                  src={clearIcon}
-                  height={12}
-                  width={12}
-                  alt="clear-icon"
-                />
+              <Icon style={{ fontSize: 10 }} onClick={onClearSection}>
+                <img src={clearIcon} height={12} width={12} alt="clear-icon" />
               </Icon>
             </span>
-            { (facet.type === InputTypes.CHECKBOX && facetValues.length > 0)
-          && (
-          <>
-            <span
-              className={
-                    clsx(classes.sortGroupItem, {
-                      [classes.highlight]: sortBy === sortType.ALPHABET,
-                    })
-                  }
-              onClick={() => {
-                onSortFacet(sortType.ALPHABET);
-              }}
-            >
-              Sort alphabetically
-            </span>
-            <span
-              className={
-                    clsx(classes.sortGroupItemCounts, {
-                      [classes.highlight]: sortBy === sortType.NUMERIC,
-                    })
-                  }
-              onClick={() => {
-                onSortFacet(sortType.NUMERIC);
-              }}
-            >
-              Sort by count
-            </span>
-          </>
-          )}
+            {facet.type === InputTypes.CHECKBOX && facetValues.length > 0 && (
+              <>
+                <span
+                  className={clsx(classes.sortGroupItem, {
+                    [classes.highlight]: sortBy === sortType.ALPHABET,
+                  })}
+                  onClick={() => {
+                    onSortFacet(sortType.ALPHABET);
+                  }}
+                >
+                  Sort alphabetically
+                </span>
+                <span
+                  className={clsx(classes.sortGroupItemCounts, {
+                    [classes.highlight]: sortBy === sortType.NUMERIC,
+                  })}
+                  onClick={() => {
+                    onSortFacet(sortType.NUMERIC);
+                  }}
+                >
+                  Sort by count
+                </span>
+              </>
+            )}
           </div>
-          )
-}
-        {(expand)
-          && (
-          <FilterItems
-            facet={facet}
-            sortBy={sortBy}
-          />
-          )}
+        )}
+        {expand && <FilterItems facet={facet} sortBy={sortBy} />}
       </Accordion>
-      {
-        (!expand && type === InputTypes.CHECKBOX && selectedItems.length > 0) && (
-          <>
-            <List id="filter_Items">
-              <FilterItems
-                facet={displayFacet}
-              />
-            </List>
-          </>
-        )
-      }
-      {
-        (!expand && selectedItems.length > limitCheckBoxCount) && (
-          <div
-            className={classes.showMore}
-            onClick={onExpandFacet}
-          >
-            ...expand to see all selections
-          </div>
-        )
-      }
+      {!expand && type === InputTypes.CHECKBOX && selectedItems.length > 0 && (
+        <>
+          <List id="filter_Items">
+            <FilterItems facet={displayFacet} />
+          </List>
+        </>
+      )}
+      {!expand && selectedItems.length > limitCheckBoxCount && (
+        <div className={classes.showMore} onClick={onExpandFacet}>
+          ...expand to see all selections
+        </div>
+      )}
     </>
   );
 };

package/src/components/inputs/checkbox/CheckboxStyle.js

@@ -2,6 +2,12 @@ export default () => ({
   listItemGutters: {
     padding: '10px 20px 10px 0px',
   },
+  listItemRoot: {
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+    },
+  },
   checkboxRoot: {
     marginLeft: '5px',
     height: 12,

package/src/components/inputs/checkbox/CheckboxView.js

@@ -7,7 +7,7 @@
 /* eslint-disable react/jsx-one-expression-per-line */
 /* eslint-disable no-useless-escape */
 
-import React from 'react';
+import React, { useRef } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import {
   Checkbox,
@@ -17,7 +17,9 @@ import {
   Tooltip,
   Box,
   Typography,
+  ButtonBase,
 } from '@material-ui/core';
+import TouchRipple from '@material-ui/core/ButtonBase/TouchRipple';
 import clsx from 'clsx';
 import {
   CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxBlankIcon,
@@ -32,26 +34,34 @@ const CheckBoxView = ({
   facet,
 }) => {
   const {
+    name,
+    subjects,
     isChecked = false,
     index,
     section,
     tooltip,
+    label,
   } = checkboxItem;
-  const {
-    field = 'group',
-    count = 'subjects',
-    customCount = (text) => `(${text})`,
-    defaultValue = '',
-  } = facet;
-
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
-  const checkedSection = `${section}`.toLowerCase().replace(/\ /g, '_');
+  const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
+  const checkboxId = `checkbox_${facet.label}_${name}`;
+  const rippleRef = useRef(null);
 
-  const name = checkboxItem[field] || defaultValue || 'N/A';
+  const handleRippleStart = (event) => {
+    if (rippleRef.current) {
+      rippleRef.current.start(event);
+    }
+  };
+
+  const handleRippleStop = (event) => {
+    if (rippleRef.current) {
+      rippleRef.current.stop(event);
+    }
+  };
 
   const handleToggle = () => {
     const toggleCheckBoxItem = {
-      name: checkboxItem[field],
+      name: name,
       datafield: datafield,
       isChecked: !isChecked,
     };
@@ -66,71 +76,71 @@ const CheckBoxView = ({
         [`${checkedSection}NameChecked`]: isChecked,
       })}
     >
-      <Typography className={classes.checkboxName}>
-        {name}
-      </Typography>
+      {label ? (
+        <Typography className={classes.checkboxLabel}>{label}</Typography>
+      ) : (<Typography className={classes.checkboxName}>{name}</Typography>)}
     </Box>
   );
 
   return (
     <>
-      <ListItem
-        width={1}
-        button
-        alignItems="flex-start"
-        onClick={handleToggle}
-        classes={{ gutters: classes.listItemGutters }}
-        className={clsx({ [`${checkedSection}Checked${indexType}`]: isChecked })}
-      >
-        <Checkbox
-          id={`checkbox_${facet.label}_${name}`}
-          icon={
-            <CheckBoxBlankIcon
-              style={{ fontSize: 18 }}
-              className={checkedSection}
-            />
-          }
+        <ListItem
+          component="div"
+          width={1}
+          alignItems="flex-start"
           onClick={handleToggle}
-          checked={isChecked}
-          checkedIcon={(
-            <CheckBoxIcon
-              style={{
-                fontSize: 18,
-              }}
-              className={`${checkedSection}CheckedIcon`}
-            />
+          onMouseDown={handleRippleStart}
+          onMouseUp={handleRippleStop}
+          onMouseLeave={handleRippleStop}
+          classes={{ gutters: classes.listItemGutters, root: classes.listItemRoot }}
+          className={clsx({ [`${checkedSection}Checked${indexType}`]: isChecked })}
+        >
+          <Checkbox
+            id={checkboxId}
+            icon={(<CheckBoxBlankIcon style={{ fontSize: 18 }} className={checkedSection} />
+            )}
+            inputProps={{ 'aria-label': 'checkbox', tabIndex: -1, 'aria-hidden': true }}
+            checked={isChecked}
+            checkedIcon={(
+              <CheckBoxIcon
+                style={{
+                  fontSize: 18,
+                }}
+                className={`${checkedSection}CheckedIcon`}
+              />
+            )}
+            disableRipple
+            color="secondary"
+            classes={{ root: classes.checkboxRoot }}
+            style={{ pointerEvents: 'none' }}
+          />
+          { tooltip ? (
+            <Tooltip id={datafield} title={tooltip}>
+              <div className={datafield}>
+                <LabelComponent />
+              </div>
+            </Tooltip>
+          ) : (
+            <LabelComponent />
           )}
-          disableRipple
-          color="secondary"
-          classes={{ root: classes.checkboxRoot }}
-          inputProps={{ 'aria-label': 'Select' }}
+          <ListItemText className={`${checkedSection}_md_space`} />
+          <Typography
+            className={clsx(`${checkedSection}Subjects`, {
+              [`${checkedSection}SubjectUnChecked`]: !isChecked,
+              [`${checkedSection}SubjectChecked`]: isChecked,
+            })}
+          >
+            {`(${subjects})`}
+          </Typography>
+          <TouchRipple ref={rippleRef} center />
+        </ListItem>
+        <Divider
+          style={{
+            backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
+            margin: '0px',
+            height: isChecked ? '2px' : '1px',
+          }}
         />
-        { tooltip ? (
-          <Tooltip id={datafield} title={tooltip}>
-            <div className={datafield}>
-              {name}
-            </div>
-          </Tooltip>
-        ) : (
-          <LabelComponent />
-        )}
-        <ListItemText className={`${checkedSection}_md_space`} />
-        <Typography
-          className={clsx(`${checkedSection}Subjects`, {
-            [`${checkedSection}SubjectUnChecked`]: !isChecked,
-            [`${checkedSection}SubjectChecked`]: isChecked,
-          })}
-        >
-          {customCount(checkboxItem[count] || 0)}
-        </Typography>
-      </ListItem>
-      <Divider
-        style={{
-          backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
-          margin: '0px',
-          height: isChecked ? '2px' : '1px',
-        }}
-      />
     </>
   );
 };

package/src/components/inputs/slider/SliderView.js

@@ -14,15 +14,7 @@ const SliderView = ({
   onSliderToggle,
   filterState,
 }) => {
-  const {
-    minLowerBound,
-    maxUpperBound,
-    quantifier,
-    datafield,
-    facetValues,
-    CustomLowerUpperBound,
-    CustomSliderValue,
-  } = facet;
+  const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
@@ -107,26 +99,24 @@ const SliderView = ({
             }}
           />
         </div>
-        {typeof CustomLowerUpperBound === 'function' ? (
-          CustomLowerUpperBound({ minLowerBound, maxUpperBound, classes })
-        ) : (
-          <Box className={classes.lowerUpperBound}>
-            <Typography className={classes.lowerBound}>
-              {minLowerBound}
-            </Typography>
-            <Typography className={classes.upperBound}>
-              {maxUpperBound}
-            </Typography>
-          </Box>
-        )}
+        <Box className={classes.lowerUpperBound}>
+          <Typography className={classes.lowerBound}>
+            {minLowerBound}
+          </Typography>
+          <Typography className={classes.upperBound}>
+            {maxUpperBound}
+          </Typography>
+        </Box>
       </div>
       {/* Change to red if invalid range */}
-      {typeof CustomSliderValue === 'function' ? (
-        CustomSliderValue({
-          sliderValue, minLowerBound, maxUpperBound, isValid, quantifier, classes })
-      ) : (
-        (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && (
-          <Typography className={isValid() ? classes.sliderText : classes.invalidSliderText}>
+      {
+        (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
+        && (
+          <Typography
+            className={isValid()
+              ? classes.sliderText
+              : classes.invalidSliderText}
+          >
             {sliderValue[0]}
             {' - '}
             {sliderValue[1]}
@@ -134,7 +124,7 @@ const SliderView = ({
             {quantifier}
           </Typography>
         )
-      )}
+      }
     </>
   );
 };

package/src/utils/Sort.js

@@ -37,28 +37,22 @@ export const getNumberArray = (range) => {
  * @param {array} checkboxData
  * @return {array}
  */
-export const sortBySection = ({
-  facetValues,
-  sort_type,
-  sortBy,
-  field,
-  count = 'subjects',
-}) => {
+export const sortBySection = ({ facetValues, sort_type, sortBy }) => {
   const sortfacetValues = [...facetValues];
   if (!sortfacetValues) {
     return facetValues;
   }
   if (sortBy === sortType.NUMERIC) {
-    sortfacetValues.sort((a, b) => b[count] - a[count]);
+    sortfacetValues.sort((a, b) => b.subjects - a.subjects);
   } else {
-    sortfacetValues.sort(((a, b) => (lowerCaseString(a[field]) > lowerCaseString(b[field])
-      || -(lowerCaseString(a[field]) < lowerCaseString(b[field])))));
+    sortfacetValues.sort(((a, b) => (lowerCaseString(a.name) > lowerCaseString(b.name)
+      || -(lowerCaseString(a.name) < lowerCaseString(b.name)))));
   }
 
   if (sort_type === sortType.CUSTOM_NUMBER && sortBy !== sortType.NUMERIC) {
     sortfacetValues.sort((a, b) => {
-      const aNumbs = getNumberArray(a[field]);
-      const bNumbs = getNumberArray(b[field]);
+      const aNumbs = getNumberArray(a.name);
+      const bNumbs = getNumberArray(b.name);
       const aNumb = Number(aNumbs[0]);
       const bNumb = Number(bNumbs[0]);
       return (aNumbs.length === bNumbs.length) ? aNumb > bNumb : -(aNumb <= bNumb);
@@ -66,8 +60,8 @@ export const sortBySection = ({
   }
 
   if (sort_type === sortType.RANGE && sortBy !== sortType.NUMERIC) {
-    sortfacetValues.sort(((a, b) => (startIndex(a[field]) > startIndex(b[field])
-      || -(startIndex(a[field]) < startIndex(b[field])))));
+    sortfacetValues.sort(((a, b) => (startIndex(a.name) > startIndex(b.name)
+      || -(startIndex(a.name) < startIndex(b.name)))));
   }
   /**
    * Display checked item always on top