@bento-core/facet-filter 1.0.1-icdc.0 → 1.0.1-icdc.10

package/README.md

@@ -72,12 +72,17 @@ import FacetFilter from 'bento-core';
 ```
 import { InputTypes } from 'bento-core';
 
+// fields for labelds and counts
+const GROUP = 'group'; // access labels
+const COUNT = 'subjects'; // access count value
+
 export const facetsConfig = [{ 
   section: CASES,
   label: 'Program', 
   apiForFiltering: 'filterSubjectCountByProgram', 
   datafield: 'programs', 
-  field: GROUP, 
+  field: GROUP,
+  count: COUNT,
   type: InputTypes.CHECKBOX, 
   sort_type: sortType.ALPHABET,
   show: true, 
@@ -244,12 +249,84 @@ 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 { generateClearAllFilterBtn } from 'bento-core';
+import { ClearAllFiltersBtn, FacetFilter } from '@bento-core/facet-filter';
+import { getFilters } from '@bento-core/facet-filter';
 
 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}]
+
+// facet = { 
+//  section: CASES,
+//  label: 'Program', 
+//  apiForFiltering: 'filterSubjectCountByProgram', 
+//  datafield: 'programs', 
+//  field: GROUP,
+//  count: COUNT,
+//  type: InputTypes.CHECKBOX, 
+//  sort_type: sortType.ALPHABET,
+//  show: true, 
+//  customCount = (text) => `(${text})`,
+// }
+
+const {
+  field = 'group',
+  count = 'subjects',
+  customCount = (text) => `(${text})`,
+} = facet;
+const {
+  isChecked = false,
+  index,
+  section,
+  tooltip,
+} = checkboxItem;
 
-const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn); 
+// 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}
+  />
 ```

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,7 +29,8 @@ const FacetFilterController = props => {
     filterState,
     data,
     facetsConfig,
-    facetSectionConfig
+    facetSectionConfig,
+    tooltipText = {}
   } = props;
   const updateFacetState = filterSections => {
     const updateSections = [...filterSections];
@@ -37,9 +38,16 @@ const FacetFilterController = props => {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach(sideBar => {
           if (sideBar.type === _Types.InputTypes.CHECKBOX && sideBar.datafield === key) {
-            sideBar.facetValues.forEach(item => {
-              item.isChecked = value[item.name] ? value[item.name] : false;
+            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 = updateFacetVals;
           }
           if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -49,9 +57,13 @@ const FacetFilterController = props => {
     } else {
       updateSections.forEach(sideBar => {
         if (sideBar.type === _Types.InputTypes.CHECKBOX) {
-          sideBar.facetValues.forEach(item => {
-            item.isChecked = false;
-          });
+          const {
+            facetValues = []
+          } = sideBar;
+          const updateFacetVals = facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
+            isChecked: false
+          }));
+          sideBar.facetValues = updateFacetVals;
         }
         /**
          * set default value for slider - on clear all filter
@@ -96,6 +108,7 @@ 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 = [];
@@ -105,19 +118,13 @@ const FacetFilterController = props => {
           facetValues: []
         });
         const {
-          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            const updateField = data[apiForFiltering].map(item => {
-              const addField = _objectSpread({}, item);
-              addField.name = item[field];
-              return addField;
-            });
-            updateFacet.facetValues = updateField;
+            updateFacet.facetValues = data[apiForFiltering];
           }
           /**
           * add object to facet values
@@ -140,7 +147,7 @@ const FacetFilterController = props => {
    * Generate facet sections state
    *
    */
-  const displayFacets = facetsConfig.filter(facet => facet.show).slice(0, 16);
+  const displayFacets = facetsConfig.filter(facet => facet.show);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/dist/FacetFilterView.js

@@ -9,7 +9,6 @@ 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 */
@@ -18,7 +17,9 @@ const BentoFacetFilter = _ref => {
   let {
     sideBarSections,
     CustomFacetSection,
-    CustomFacetView
+    CustomFacetView,
+    enableClearSection,
+    enableFacetCollapse
   } = _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",
@@ -28,12 +29,10 @@ const BentoFacetFilter = _ref => {
     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
-  }))))))));
+    CustomView: CustomFacetView,
+    enableClearSection: enableClearSection,
+    enableFacetCollapse: enableFacetCollapse
+  }))))));
 };
 var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);
 exports.default = _default;

package/dist/components/facet/FacetStyle.js

@@ -20,6 +20,13 @@ var _default = () => ({
       position: 'initial'
     }
   },
+  subSectionSummaryTextWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingRight: '15px'
+  },
   subSectionSummaryText: {
     marginLeft: '10px',
     lineHeight: 0,
@@ -34,21 +41,26 @@ var _default = () => ({
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    marginLeft: '-5px'
+    // marginLeft: '-5px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-around'
   },
   sortGroupIcon: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
-    marginRight: '12px',
-    marginLeft: '16px'
+    fontSize: '10px'
+    // marginRight: '12px',
+    // marginLeft: '16px',
   },
+
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
-    marginRight: '32px'
+    fontSize: '10px'
+    // marginRight: '32px',
   },
+
   NonSortGroup: {
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
@@ -63,11 +75,12 @@ var _default = () => ({
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
-    float: 'right',
-    marginRight: '10px',
-    marginTop: '5px'
+    fontSize: '10px'
+    // float: 'right',
+    // marginRight: '10px',
+    // marginTop: '5px',
   },
+
   highlight: {
     color: '#b2c6d6'
   },

package/dist/components/facet/FacetView.js

@@ -7,12 +7,15 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _Refresh = _interopRequireDefault(require("@material-ui/icons/Refresh"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
 var _Types = require("../inputs/Types");
 var _FacetStyle = _interopRequireDefault(require("./FacetStyle"));
 var _FilterItems = _interopRequireDefault(require("../inputs/FilterItems"));
 var _Sort = require("../../utils/Sort");
 var _clearIcon = _interopRequireDefault(require("./assets/clearIcon.svg"));
+var _ActionTypes = require("../../store/actions/ActionTypes");
 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; }
@@ -25,18 +28,50 @@ const FacetView = _ref => {
   let {
     classes,
     facet,
+    enableClearSection,
     onClearFacetSection,
     onClearSliderSection,
     CustomView,
     autoComplete,
-    upload
+    upload,
+    filterState,
+    currentActionType = {},
+    enableFacetCollapse
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(false);
   const onExpandFacet = () => setExpand(!expand);
+  const {
+    datafield
+  } = facet;
+  /**
+   * Collapse expanded facet or facets
+   * 1. on clear facet section
+   * 2. on clear all
+   * 3. on uncheck facet from DQB
+   */
+  (0, _react.useEffect)(() => {
+    if (enableFacetCollapse) {
+      const actionType = currentActionType[datafield];
+      // collapse facet if uncheck from DQB
+      if (actionType && actionType === _ActionTypes.sideBarActionTypes.FACET_VALUE_CHANGED) {
+        const {
+          isFacetOrigin
+        } = currentActionType;
+        if (!isFacetOrigin) {
+          if (Object.keys(filterState[datafield] || {}).length === 0) {
+            setExpand(false);
+          }
+        }
+      }
+      if (actionType && actionType === _ActionTypes.sideBarActionTypes.CLEAR_FACET_SECTION || currentActionType === _ActionTypes.sideBarActionTypes.CLEAR_ALL_FILTERS) {
+        setExpand(false);
+      }
+    }
+  }, [filterState]);
 
   /**
-  * 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);
@@ -48,10 +83,13 @@ const FacetView = _ref => {
   };
   const onClearSection = () => {
     setSortBy(null);
-    if (facet.type === _Types.InputTypes.SLIDER) {
-      onClearSliderSection(facet);
-    } else {
-      onClearFacetSection(facet);
+    const activeFilterItems = filterState[datafield];
+    if (activeFilterItems && Object.keys(activeFilterItems).length > 0) {
+      if (facet.type === _Types.InputTypes.SLIDER) {
+        onClearSliderSection(facet);
+      } else {
+        onClearFacetSection(facet);
+      }
     }
   };
   /**
@@ -75,14 +113,25 @@ const FacetView = _ref => {
     },
     id: facet.section
   }, CustomView ? /*#__PURE__*/_react.default.createElement(CustomView, {
+    clearFacetSectionValues: onClearSection,
+    hasSelections: selectedItems.length,
     facet: facet,
     facetClasses: isActiveFacet ? "activeFacet".concat(facet.section) : "inactiveFacet".concat(facet.section)
-  }) : /*#__PURE__*/_react.default.createElement(_AccordionSummaryView.default, null, /*#__PURE__*/_react.default.createElement("div", {
+  }) : /*#__PURE__*/_react.default.createElement(_AccordionSummaryView.default, null, !enableClearSection ? /*#__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) : /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.subSectionSummaryTextWrapper
+  }, /*#__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)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label), selectedItems.length ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: onClearSection
+  }, /*#__PURE__*/_react.default.createElement(_Refresh.default, null)) : null)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem
@@ -114,10 +163,10 @@ const FacetView = _ref => {
     onClick: () => {
       onSortFacet(_Sort.sortType.NUMERIC);
     }
-  }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+  }, "Sort by count"))), expand && /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: facet,
     sortBy: sortBy
-  })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
+  })), !expand && type === _Types.InputTypes.CHECKBOX && selectedItems.length > 0 && /*#__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

package/dist/components/facet/ReduxFacetView.js

@@ -14,11 +14,13 @@ const mapStateToProps = state => {
   var _state$localFind, _state$localFind2;
   return {
     filterState: state.statusReducer.filterState,
+    currentActionType: state.statusReducer.currentActionType,
     autoComplete: (state === null || state === void 0 ? void 0 : (_state$localFind = state.localFind) === null || _state$localFind === void 0 ? void 0 : _state$localFind.autocomplete) || [],
     upload: (state === null || state === void 0 ? void 0 : (_state$localFind2 = state.localFind) === null || _state$localFind2 === void 0 ? void 0 : _state$localFind2.upload) || []
   };
 };
 const mapDispatchToProps = dispatch => ({
+  onToggle: facet => dispatch((0, _Actions.toggleCheckBox)(facet)),
   onClearFacetSection: facet => {
     dispatch((0, _Actions.clearFacetSection)(facet));
   },

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

@@ -10,6 +10,7 @@ var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _icons = require("@material-ui/icons");
 var _CheckboxStyle = _interopRequireDefault(require("./CheckboxStyle"));
+var _ActionTypes = require("../../../store/actions/ActionTypes");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-unused-vars */
@@ -18,8 +19,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable object-curly-newline */
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable no-useless-escape */
 
-const alignment = 'flex-start';
 const CheckBoxView = _ref => {
   let {
     classes,
@@ -29,21 +30,28 @@ const CheckBoxView = _ref => {
     facet
   } = _ref;
   const {
-    name,
-    subjects,
     isChecked = false,
     index,
     section,
-    tooltip,
-    label
+    tooltip
   } = checkboxItem;
+  const {
+    field = 'group',
+    count = 'subjects',
+    customCount = text => "(".concat(text, ")")
+  } = facet;
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
-  const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
+  const checkedSection = "".concat(section).toLowerCase().replace(/\ /g, '_');
+  const name = checkboxItem[field] || 'N/A';
   const handleToggle = () => {
     const toggleCheckBoxItem = {
       name: name,
       datafield: datafield,
-      isChecked: !isChecked
+      isChecked: !isChecked,
+      actionType: {
+        [datafield]: _ActionTypes.sideBarActionTypes.FACET_VALUE_CHANGED,
+        isFacetOrigin: true
+      }
     };
     onToggle(toggleCheckBoxItem);
   };
@@ -53,9 +61,7 @@ const CheckBoxView = _ref => {
       ["".concat(checkedSection, "NameUnChecked")]: !isChecked,
       ["".concat(checkedSection, "NameChecked")]: isChecked
     })
-  }, label ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    className: classes.checkboxLabel
-  }, label) : /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, /*#__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, {
@@ -74,7 +80,8 @@ const CheckBoxView = _ref => {
     icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
       style: {
         fontSize: 18
-      }
+      },
+      className: checkedSection
     }),
     onClick: handleToggle,
     checked: isChecked,
@@ -94,12 +101,14 @@ const CheckBoxView = _ref => {
     title: tooltip
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: datafield
-  }, /*#__PURE__*/_react.default.createElement(LabelComponent, null))) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, null), /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, name)) : /*#__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
     })
-  }, "(".concat(subjects, ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
+  }, customCount(checkboxItem[count] || 0))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
     style: {
       backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
       margin: '0px',

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _SliderStyle = _interopRequireDefault(require("./SliderStyle"));
 var _Types = require("../Types");
 var _InputMinMaxView = _interopRequireDefault(require("./InputMinMaxView"));
@@ -63,9 +64,9 @@ const SliderView = _ref => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.sliderRoot
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.minMaxInputs
+    className: (0, _clsx.default)(classes.minMaxInputs, 'minMaxInputs')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.minValue
+    className: (0, _clsx.default)(classes.minValue, 'min_input_box')
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.minInputLabel
   }, "Min:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
@@ -76,7 +77,7 @@ const SliderView = _ref => {
     type: _Types.silderTypes.INPUT_MIN,
     onInputChange: handleChangeCommittedSlider
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.maxValue
+    className: (0, _clsx.default)(classes.maxValue, 'max_input_box')
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.maxInputLabel
   }, "Max:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
@@ -87,7 +88,7 @@ const SliderView = _ref => {
     type: _Types.silderTypes.INPUT_MAX,
     onInputChange: handleChangeCommittedSlider
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.slider
+    className: (0, _clsx.default)(classes.slider, 'slider')
   }, /*#__PURE__*/_react.default.createElement(_core.Slider, {
     disableSwap: true,
     getAriaValueText: valuetext,

package/dist/components/summary/AccordionSummaryView.js

@@ -11,6 +11,7 @@ var _AccordionSummaryStyle = _interopRequireDefault(require("./AccordionSummaryS
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Summary = (0, _core.withStyles)({
   root: {
+    width: '307px',
     marginBottom: -1,
     minHeight: 48,
     paddingLeft: 14,

package/dist/index.js

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "onToggleStateUpdate", {
     return _SideBarReducer.onToggleStateUpdate;
   }
 });
+Object.defineProperty(exports, "sideBarActionTypes", {
+  enumerable: true,
+  get: function get() {
+    return _ActionTypes.sideBarActionTypes;
+  }
+});
 Object.defineProperty(exports, "sideBarReducerGenerator", {
   enumerable: true,
   get: function get() {
@@ -129,6 +135,7 @@ var _filter = require("./utils/filter");
 var _Types = require("./components/inputs/Types");
 var _SideBarReducer = require("./store/reducers/SideBarReducer");
 var _Actions = require("./store/actions/Actions");
+var _ActionTypes = require("./store/actions/ActionTypes");
 var _component = require("./generator/component");
 var _ReduxClearAllBtn = _interopRequireDefault(require("./components/reset/ReduxClearAllBtn"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }