@usereactify/search 5.0.0-beta.13 → 5.0.0-beta.14

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [5.0.0-beta.14](https://bitbucket.org/usereactify/reactify-search-ui/compare/v5.0.0-beta.13...v5.0.0-beta.14) (2022-08-04)
+
+
+### Features
+
+* add example components for filter range, filter slider, custom, stats, clear all, filters active ([d5e56fb](https://bitbucket.org/usereactify/reactify-search-ui/commit/d5e56fb114edc3e134c3ce2e90f7f2df67c5d097))
+* add example filter list unstyled, radio, checkbox, swatch and box ([a6ebcd0](https://bitbucket.org/usereactify/reactify-search-ui/commit/a6ebcd0b606f9a8381d1e082dd4935e4a4d83c2f))
+* add support for filter option settingsUppercase ([99d822b](https://bitbucket.org/usereactify/reactify-search-ui/commit/99d822b611ec0302fe314cbe0b1c24653b1ae72c))
+* improve sorting of filter list options ([c41eedc](https://bitbucket.org/usereactify/reactify-search-ui/commit/c41eedc900f500d3ddf9434cb14a7397c6385707))
+
 ## [5.0.0-beta.13](https://bitbucket.org/usereactify/reactify-search-ui/compare/v5.0.0-beta.12...v5.0.0-beta.13) (2022-08-03)
 
 

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@usereactify/search",
     "description": "React UI library for Reactify Search",
-    "version": "5.0.0-beta.13",
+    "version": "5.0.0-beta.14",
     "license": "MIT",
     "main": "dist/src/index.js",
     "types": "dist/src/index.d.ts",

package/dist/src/components/ClearAll/ClearAll.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare type ClearAllProps = {
+    /** Render method */
+    renderClearAll?: React.FC<{
+        clearAll: () => void;
+    }>;
+};
+export declare const ClearAll: React.FC<ClearAllProps>;

package/dist/src/components/ClearAll/ClearAll.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearAll = void 0;
+const react_1 = __importDefault(require("react"));
+const reactivesearch_1 = require("@appbaseio/reactivesearch");
+const components_1 = require("../../components");
+const ClearAll = (props) => {
+    var _a;
+    const RenderFiltersComponent = (_a = props.renderClearAll) !== null && _a !== void 0 ? _a : components_1.ExampleClearAll;
+    return (react_1.default.createElement(reactivesearch_1.SelectedFilters, { render: ({ selectedValues, clearValues }) => {
+            const selectedFilters = Object.values(selectedValues)
+                .map((value) => value)
+                .filter((item) => {
+                var _a, _b;
+                return (item === null || item === void 0 ? void 0 : item.URLParams) &&
+                    (item === null || item === void 0 ? void 0 : item.showFilter) &&
+                    (!!((_a = item === null || item === void 0 ? void 0 : item.value) === null || _a === void 0 ? void 0 : _a.length) || !!((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.label));
+            });
+            if (!selectedFilters.length) {
+                return null;
+            }
+            return react_1.default.createElement(RenderFiltersComponent, { clearAll: clearValues });
+        } }));
+};
+exports.ClearAll = ClearAll;
+//# sourceMappingURL=ClearAll.js.map

package/dist/src/components/ClearAll/ClearAll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearAll.js","sourceRoot":"","sources":["../../../../src/components/ClearAll/ClearAll.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,8DAA4D;AAE5D,iDAAmD;AAS5C,MAAM,QAAQ,GAA4B,CAAC,KAAK,EAAE,EAAE;;IACzD,MAAM,sBAAsB,GAAG,MAAA,KAAK,CAAC,cAAc,mCAAI,4BAAe,CAAC;IAEvE,OAAO,CACL,8BAAC,gCAAe,IACd,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,EAAE;YAC1C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;iBAClD,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC;iBACrB,MAAM,CACL,CAAC,IAAS,EAAE,EAAE;;gBACZ,OAAA,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS;qBACf,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,CAAA;oBAChB,CAAC,CAAC,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,KAAK,CAAA,CAAC,CAAA;aAAA,CAClD,CAAC;YAEJ,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;gBAC3B,OAAO,IAAI,CAAC;aACb;YAED,OAAO,8BAAC,sBAAsB,IAAC,QAAQ,EAAE,WAAW,GAAI,CAAC;QAC3D,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,QAAQ,YAuBnB","sourcesContent":["import React from \"react\";\nimport { SelectedFilters } from \"@appbaseio/reactivesearch\";\n\nimport { ExampleClearAll } from \"../../components\";\n\nexport type ClearAllProps = {\n  /** Render method */\n  renderClearAll?: React.FC<{\n    clearAll: () => void;\n  }>;\n};\n\nexport const ClearAll: React.FC<ClearAllProps> = (props) => {\n  const RenderFiltersComponent = props.renderClearAll ?? ExampleClearAll;\n\n  return (\n    <SelectedFilters\n      render={({ selectedValues, clearValues }) => {\n        const selectedFilters = Object.values(selectedValues)\n          .map((value) => value)\n          .filter(\n            (item: any) =>\n              item?.URLParams &&\n              item?.showFilter &&\n              (!!item?.value?.length || !!item?.value?.label)\n          );\n\n        if (!selectedFilters.length) {\n          return null;\n        }\n\n        return <RenderFiltersComponent clearAll={clearValues} />;\n      }}\n    />\n  );\n};\n"]}

package/dist/src/components/ClearAll/index.d.ts

@@ -0,0 +1 @@
+export * from "./ClearAll";

package/dist/src/components/ClearAll/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ClearAll"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/components/ClearAll/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ClearAll/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAA2B","sourcesContent":["export * from \"./ClearAll\";\n"]}

package/dist/src/components/CustomComponent/CustomComponent.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ReactiveComponent } from "@appbaseio/reactivesearch";
+export declare type CustomComponentProps = React.ComponentProps<typeof ReactiveComponent>;
+export declare const CustomComponent: React.FC<CustomComponentProps>;

package/dist/src/components/CustomComponent/CustomComponent.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const reactivesearch_1 = require("@appbaseio/reactivesearch");
+const CustomComponent = (props) => {
+    return react_1.default.createElement(reactivesearch_1.ReactiveComponent, Object.assign({}, props));
+};
+exports.CustomComponent = CustomComponent;
+//# sourceMappingURL=CustomComponent.js.map

package/dist/src/components/CustomComponent/CustomComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomComponent.js","sourceRoot":"","sources":["../../../../src/components/CustomComponent/CustomComponent.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,8DAA8D;AAMvD,MAAM,eAAe,GAAmC,CAAC,KAAK,EAAE,EAAE;IACvE,OAAO,8BAAC,kCAAiB,oBAAK,KAAK,EAAI,CAAC;AAC1C,CAAC,CAAC;AAFW,QAAA,eAAe,mBAE1B","sourcesContent":["import React from \"react\";\nimport { ReactiveComponent } from \"@appbaseio/reactivesearch\";\n\nexport type CustomComponentProps = React.ComponentProps<\n  typeof ReactiveComponent\n>;\n\nexport const CustomComponent: React.FC<CustomComponentProps> = (props) => {\n  return <ReactiveComponent {...props} />;\n};\n"]}

package/dist/src/components/CustomComponent/index.d.ts

@@ -0,0 +1 @@
+export * from "./CustomComponent";

package/dist/src/components/CustomComponent/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CustomComponent"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/components/CustomComponent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomComponent/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,oDAAkC","sourcesContent":["export * from \"./CustomComponent\";\n"]}

package/dist/src/components/Example/ExampleClearAll.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ClearAllProps } from "../../components";
+export declare type ExampleClearAllProps = React.ComponentProps<NonNullable<ClearAllProps["renderClearAll"]>>;
+export declare const ExampleClearAll: React.FC<ExampleClearAllProps>;

package/dist/src/components/Example/ExampleClearAll.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleClearAll = void 0;
+const react_1 = __importDefault(require("react"));
+const ExampleClearAll = (props) => {
+    return react_1.default.createElement("a", { onClick: props.clearAll }, "Clear All");
+};
+exports.ExampleClearAll = ExampleClearAll;
+//# sourceMappingURL=ExampleClearAll.js.map

package/dist/src/components/Example/ExampleClearAll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleClearAll.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleClearAll.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,eAAe,GAAmC,CAAC,KAAK,EAAE,EAAE;IACvE,OAAO,qCAAG,OAAO,EAAE,KAAK,CAAC,QAAQ,IAAG,WAAW,CAAK,CAAC;AACvD,CAAC,CAAC;AAFW,QAAA,eAAe,mBAE1B","sourcesContent":["import React from \"react\";\n\nimport { Filter, ClearAllProps } from \"../../components\";\n\nexport type ExampleClearAllProps = React.ComponentProps<\n  NonNullable<ClearAllProps[\"renderClearAll\"]>\n>;\n\nexport const ExampleClearAll: React.FC<ExampleClearAllProps> = (props) => {\n  return <a onClick={props.clearAll}>{\"Clear All\"}</a>;\n};\n"]}

package/dist/src/components/Example/ExampleFilterList.d.ts

@@ -2,3 +2,8 @@ import React from "react";
 import { FilterProps } from "../../components";
 export declare type ExampleFilterListProps = React.ComponentProps<NonNullable<FilterProps["renderFilterList"]>>;
 export declare const ExampleFilterList: React.FC<ExampleFilterListProps>;
+export declare const ExampleFilterListList: React.FC<ExampleFilterListProps>;
+export declare const ExampleFilterListRadio: React.FC<ExampleFilterListProps>;
+export declare const ExampleFilterListCheckbox: React.FC<ExampleFilterListProps>;
+export declare const ExampleFilterListSwatch: React.FC<ExampleFilterListProps>;
+export declare const ExampleFilterListBox: React.FC<ExampleFilterListProps>;

package/dist/src/components/Example/ExampleFilterList.js

@@ -3,19 +3,90 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExampleFilterList = void 0;
+exports.ExampleFilterListBox = exports.ExampleFilterListSwatch = exports.ExampleFilterListCheckbox = exports.ExampleFilterListRadio = exports.ExampleFilterListList = exports.ExampleFilterList = void 0;
 const react_1 = __importDefault(require("react"));
 const ExampleFilterList = (props) => {
     return (react_1.default.createElement("div", { className: "rs__filter" },
         react_1.default.createElement("h3", { className: "rs__filter__name" }, props.filter.name),
-        react_1.default.createElement("ul", { className: "rs__filter__list" }, props.filterListProps.options.map((option) => (react_1.default.createElement("li", { key: option.key, className: "rs__filter__list-item" },
-            react_1.default.createElement("label", { className: "rs__filter__list-item-label" },
-                react_1.default.createElement("input", { className: "rs__filter__list-item-input", value: option.key, type: "checkbox", checked: option.checked, onChange: ({ target: { value } }) => props.filterListProps.handleChange(value) }),
-                react_1.default.createElement("span", { className: "rs__filter__list-item-key" }, option.key),
-                react_1.default.createElement("span", { className: "rs__filter__list-item-count" },
-                    "(",
-                    option.doc_count,
-                    ")"))))))));
+        props.filter.displayView === "list" ? (react_1.default.createElement(exports.ExampleFilterListList, Object.assign({}, props))) : null,
+        props.filter.displayType === "single" &&
+            props.filter.displayView === "check" ? (react_1.default.createElement(exports.ExampleFilterListRadio, Object.assign({}, props))) : null,
+        props.filter.displayType === "multi" &&
+            props.filter.displayView === "check" ? (react_1.default.createElement(exports.ExampleFilterListCheckbox, Object.assign({}, props))) : null,
+        props.filter.displayView === "swatch" ? (react_1.default.createElement(exports.ExampleFilterListSwatch, Object.assign({}, props))) : null,
+        props.filter.displayView === "box" ? (react_1.default.createElement(exports.ExampleFilterListBox, Object.assign({}, props))) : null));
 };
 exports.ExampleFilterList = ExampleFilterList;
+const ExampleFilterListList = (props) => {
+    return (react_1.default.createElement("ul", { className: "rs__filter__list" }, props.filterListProps.options.map((option) => (react_1.default.createElement("li", { key: option.key, className: `rs__filter__list-item ${option.checked ? "rs__filter__list-item-active" : ""}` },
+        react_1.default.createElement("label", { className: "rs__filter__list-item-label", onClick: () => props.filterListProps.handleChange(option.key) },
+            react_1.default.createElement("span", { className: "rs__filter__list-item-key" }, option.key),
+            react_1.default.createElement("span", { className: "rs__filter__list-item-count" },
+                "(",
+                option.doc_count,
+                ")")))))));
+};
+exports.ExampleFilterListList = ExampleFilterListList;
+const ExampleFilterListRadio = (props) => {
+    return (react_1.default.createElement("ul", { className: "rs__filter__list" }, props.filterListProps.options.map((option) => (react_1.default.createElement("li", { key: option.key, className: `rs__filter__list-item ${option.checked ? "rs__filter__list-item-active" : ""}` },
+        react_1.default.createElement("label", { className: "rs__filter__list-item-label" },
+            react_1.default.createElement("input", { className: "rs__filter__list-item-input", value: option.key, type: "radio", checked: option.checked, onChange: (event) => props.filterListProps.handleChange(event.target.value) }),
+            react_1.default.createElement("span", { className: "rs__filter__list-item-key" }, option.key),
+            react_1.default.createElement("span", { className: "rs__filter__list-item-count" },
+                "(",
+                option.doc_count,
+                ")")))))));
+};
+exports.ExampleFilterListRadio = ExampleFilterListRadio;
+const ExampleFilterListCheckbox = (props) => {
+    return (react_1.default.createElement("ul", { className: "rs__filter__list" }, props.filterListProps.options.map((option) => (react_1.default.createElement("li", { key: option.key, className: `rs__filter__list-item ${option.checked ? "rs__filter__list-item-active" : ""}` },
+        react_1.default.createElement("label", { className: "rs__filter__list-item-label" },
+            react_1.default.createElement("input", { className: "rs__filter__list-item-input", value: option.key, type: "checkbox", checked: option.checked, onChange: (event) => props.filterListProps.handleChange(event.target.value) }),
+            react_1.default.createElement("span", { className: "rs__filter__list-item-key" }, option.key),
+            react_1.default.createElement("span", { className: "rs__filter__list-item-count" },
+                "(",
+                option.doc_count,
+                ")")))))));
+};
+exports.ExampleFilterListCheckbox = ExampleFilterListCheckbox;
+const ExampleFilterListSwatch = (props) => {
+    return (react_1.default.createElement("div", { className: "rs__filter__list", style: {
+            display: "flex",
+            flexWrap: "wrap",
+        } }, props.filterListProps.options.map((option) => (react_1.default.createElement("div", { key: option.key, className: `rs__filter__list-item ${option.checked ? "rs__filter__list-item-active" : ""}` },
+        react_1.default.createElement("div", { className: "rs__filter__list-item-label", style: {
+                display: "inline-block",
+                width: "20px",
+                height: "20px",
+                marginRight: "2px",
+                marginBottom: "2px",
+                borderRadius: "50%",
+                backgroundColor: option.key,
+                border: option.checked
+                    ? "1px solid black"
+                    : "1px solid transparent",
+            }, onClick: () => props.filterListProps.handleChange(option.key) }))))));
+};
+exports.ExampleFilterListSwatch = ExampleFilterListSwatch;
+const ExampleFilterListBox = (props) => {
+    return (react_1.default.createElement("div", { className: "rs__filter__list", style: {
+            display: "flex",
+            flexWrap: "wrap",
+        } }, props.filterListProps.options.map((option) => (react_1.default.createElement("div", { key: option.key, className: `rs__filter__list-item ${option.checked ? "rs__filter__list-item-active" : ""}` },
+        react_1.default.createElement("div", { className: "rs__filter__list-item-label", style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                width: "40px",
+                height: "40px",
+                marginRight: "2px",
+                marginBottom: "2px",
+                border: "1px solid black",
+                overflow: "hidden",
+                cursor: "pointer",
+                color: option.checked ? "white" : "black",
+                backgroundColor: option.checked ? "black" : "white",
+            }, onClick: () => props.filterListProps.handleChange(option.key) }, option.key))))));
+};
+exports.ExampleFilterListBox = ExampleFilterListBox;
 //# sourceMappingURL=ExampleFilterList.js.map

package/dist/src/components/Example/ExampleFilterList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleFilterList.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterList.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,iBAAiB,GAAqC,CAAC,KAAK,EAAE,EAAE;IAC3E,OAAO,CACL,uCAAK,SAAS,EAAC,YAAY;QACzB,sCAAI,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAM;QACzD,sCAAI,SAAS,EAAC,kBAAkB,IAC7B,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC7C,sCAAI,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,SAAS,EAAC,uBAAuB;YACpD,yCAAO,SAAS,EAAC,6BAA6B;gBAC5C,yCACE,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,MAAM,CAAC,GAAG,EACjB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAClC,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,GAE3C;gBACF,wCAAM,SAAS,EAAC,2BAA2B,IAAE,MAAM,CAAC,GAAG,CAAQ;gBAC/D,wCAAM,SAAS,EAAC,6BAA6B;;oBACzC,MAAM,CAAC,SAAS;wBACb,CACD,CACL,CACN,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,iBAAiB,qBA2B5B","sourcesContent":["import React from \"react\";\n\nimport { FilterProps } from \"../../components\";\n\nexport type ExampleFilterListProps = React.ComponentProps<\n  NonNullable<FilterProps[\"renderFilterList\"]>\n>;\n\nexport const ExampleFilterList: React.FC<ExampleFilterListProps> = (props) => {\n  return (\n    <div className=\"rs__filter\">\n      <h3 className=\"rs__filter__name\">{props.filter.name}</h3>\n      <ul className=\"rs__filter__list\">\n        {props.filterListProps.options.map((option) => (\n          <li key={option.key} className=\"rs__filter__list-item\">\n            <label className=\"rs__filter__list-item-label\">\n              <input\n                className=\"rs__filter__list-item-input\"\n                value={option.key}\n                type=\"checkbox\"\n                checked={option.checked}\n                onChange={({ target: { value } }) =>\n                  props.filterListProps.handleChange(value)\n                }\n              />\n              <span className=\"rs__filter__list-item-key\">{option.key}</span>\n              <span className=\"rs__filter__list-item-count\">\n                ({option.doc_count})\n              </span>\n            </label>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ExampleFilterList.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport { FilterProps } from \"../../components\";\n\nexport type ExampleFilterListProps = React.ComponentProps<\n  NonNullable<FilterProps[\"renderFilterList\"]>\n>;\n\nexport const ExampleFilterList: React.FC<ExampleFilterListProps> = (props) => {\n  return (\n    <div className=\"rs__filter\">\n      <h3 className=\"rs__filter__name\">{props.filter.name}</h3>\n      {props.filter.displayView === \"list\" ? (\n        <ExampleFilterListList {...props} />\n      ) : null}\n      {props.filter.displayType === \"single\" &&\n      props.filter.displayView === \"check\" ? (\n        <ExampleFilterListRadio {...props} />\n      ) : null}\n      {props.filter.displayType === \"multi\" &&\n      props.filter.displayView === \"check\" ? (\n        <ExampleFilterListCheckbox {...props} />\n      ) : null}\n      {props.filter.displayView === \"swatch\" ? (\n        <ExampleFilterListSwatch {...props} />\n      ) : null}\n      {props.filter.displayView === \"box\" ? (\n        <ExampleFilterListBox {...props} />\n      ) : null}\n    </div>\n  );\n};\n\nexport const ExampleFilterListList: React.FC<ExampleFilterListProps> = (\n  props\n) => {\n  return (\n    <ul className=\"rs__filter__list\">\n      {props.filterListProps.options.map((option) => (\n        <li\n          key={option.key}\n          className={`rs__filter__list-item ${\n            option.checked ? \"rs__filter__list-item-active\" : \"\"\n          }`}\n        >\n          <label\n            className=\"rs__filter__list-item-label\"\n            onClick={() => props.filterListProps.handleChange(option.key)}\n          >\n            <span className=\"rs__filter__list-item-key\">{option.key}</span>\n            <span className=\"rs__filter__list-item-count\">\n              ({option.doc_count})\n            </span>\n          </label>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport const ExampleFilterListRadio: React.FC<ExampleFilterListProps> = (\n  props\n) => {\n  return (\n    <ul className=\"rs__filter__list\">\n      {props.filterListProps.options.map((option) => (\n        <li\n          key={option.key}\n          className={`rs__filter__list-item ${\n            option.checked ? \"rs__filter__list-item-active\" : \"\"\n          }`}\n        >\n          <label className=\"rs__filter__list-item-label\">\n            <input\n              className=\"rs__filter__list-item-input\"\n              value={option.key}\n              type=\"radio\"\n              checked={option.checked}\n              onChange={(event) =>\n                props.filterListProps.handleChange(event.target.value)\n              }\n            />\n            <span className=\"rs__filter__list-item-key\">{option.key}</span>\n            <span className=\"rs__filter__list-item-count\">\n              ({option.doc_count})\n            </span>\n          </label>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport const ExampleFilterListCheckbox: React.FC<ExampleFilterListProps> = (\n  props\n) => {\n  return (\n    <ul className=\"rs__filter__list\">\n      {props.filterListProps.options.map((option) => (\n        <li\n          key={option.key}\n          className={`rs__filter__list-item ${\n            option.checked ? \"rs__filter__list-item-active\" : \"\"\n          }`}\n        >\n          <label className=\"rs__filter__list-item-label\">\n            <input\n              className=\"rs__filter__list-item-input\"\n              value={option.key}\n              type=\"checkbox\"\n              checked={option.checked}\n              onChange={(event) =>\n                props.filterListProps.handleChange(event.target.value)\n              }\n            />\n            <span className=\"rs__filter__list-item-key\">{option.key}</span>\n            <span className=\"rs__filter__list-item-count\">\n              ({option.doc_count})\n            </span>\n          </label>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport const ExampleFilterListSwatch: React.FC<ExampleFilterListProps> = (\n  props\n) => {\n  return (\n    <div\n      className=\"rs__filter__list\"\n      style={{\n        display: \"flex\",\n        flexWrap: \"wrap\",\n      }}\n    >\n      {props.filterListProps.options.map((option) => (\n        <div\n          key={option.key}\n          className={`rs__filter__list-item ${\n            option.checked ? \"rs__filter__list-item-active\" : \"\"\n          }`}\n        >\n          <div\n            className=\"rs__filter__list-item-label\"\n            style={{\n              display: \"inline-block\",\n              width: \"20px\",\n              height: \"20px\",\n              marginRight: \"2px\",\n              marginBottom: \"2px\",\n              borderRadius: \"50%\",\n              backgroundColor: option.key,\n              border: option.checked\n                ? \"1px solid black\"\n                : \"1px solid transparent\",\n            }}\n            onClick={() => props.filterListProps.handleChange(option.key)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport const ExampleFilterListBox: React.FC<ExampleFilterListProps> = (\n  props\n) => {\n  return (\n    <div\n      className=\"rs__filter__list\"\n      style={{\n        display: \"flex\",\n        flexWrap: \"wrap\",\n      }}\n    >\n      {props.filterListProps.options.map((option) => (\n        <div\n          key={option.key}\n          className={`rs__filter__list-item ${\n            option.checked ? \"rs__filter__list-item-active\" : \"\"\n          }`}\n        >\n          <div\n            className=\"rs__filter__list-item-label\"\n            style={{\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              width: \"40px\",\n              height: \"40px\",\n              marginRight: \"2px\",\n              marginBottom: \"2px\",\n              border: \"1px solid black\",\n              overflow: \"hidden\",\n              cursor: \"pointer\",\n              color: option.checked ? \"white\" : \"black\",\n              backgroundColor: option.checked ? \"black\" : \"white\",\n            }}\n            onClick={() => props.filterListProps.handleChange(option.key)}\n          >\n            {option.key}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/src/components/Example/ExampleFilterRange.js

@@ -5,18 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleFilterRange = void 0;
 const react_1 = __importDefault(require("react"));
-const SingleRange_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/range/SingleRange"));
 const ExampleFilterRange = (props) => {
-    if (props.filter.handle === "price") {
-        return (react_1.default.createElement("div", { className: "rs__filter" },
-            react_1.default.createElement("h3", { className: "rs__filter__name" }, props.filter.name),
-            react_1.default.createElement(SingleRange_1.default, Object.assign({ data: [
-                    { start: "0", label: "All prices" },
-                    { start: "0", end: "99", label: "Under $100" },
-                    { start: "0", end: "49", label: "Under $50" },
-                ] }, props.reactiveFilterRangeProps))));
-    }
-    return null;
+    return (react_1.default.createElement("div", { className: "rs__filter" },
+        react_1.default.createElement("h3", { className: "rs__filter__name" }, props.filter.name),
+        react_1.default.createElement("ul", { className: "rs__filter__list" }, props.filterRangeProps.options.map((option) => (react_1.default.createElement("li", { key: option.key, className: "rs__filter__list-item" },
+            react_1.default.createElement("label", { className: "rs__filter__list-item-label" },
+                react_1.default.createElement("input", { className: "rs__filter__list-item-input", value: option.key, type: "radio", checked: option.checked, onChange: (event) => props.filterRangeProps.handleChange(event.target.value) }),
+                react_1.default.createElement("span", { className: "rs__filter__list-item-key" }, option.key))))))));
 };
 exports.ExampleFilterRange = ExampleFilterRange;
 //# sourceMappingURL=ExampleFilterRange.js.map

package/dist/src/components/Example/ExampleFilterRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleFilterRange.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterRange.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,6GAAqF;AAQ9E,MAAM,kBAAkB,GAAsC,CACnE,KAAK,EACL,EAAE;IACF,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,OAAO,EAAE;QACnC,OAAO,CACL,uCAAK,SAAS,EAAC,YAAY;YACzB,sCAAI,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAM;YACzD,8BAAC,qBAAW,kBACV,IAAI,EAAE;oBACJ,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE;oBACnC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE;oBAC9C,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE;iBAC9C,IACG,KAAK,CAAC,wBAAwB,EAClC,CACE,CACP,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AApBW,QAAA,kBAAkB,sBAoB7B","sourcesContent":["import React from \"react\";\nimport SingleRange from \"@appbaseio/reactivesearch/lib/components/range/SingleRange\";\n\nimport { FilterProps } from \"../../components\";\n\nexport type ExampleFilterRangeProps = React.ComponentProps<\n  NonNullable<FilterProps[\"renderFilterRange\"]>\n>;\n\nexport const ExampleFilterRange: React.FC<ExampleFilterRangeProps> = (\n  props\n) => {\n  if (props.filter.handle === \"price\") {\n    return (\n      <div className=\"rs__filter\">\n        <h3 className=\"rs__filter__name\">{props.filter.name}</h3>\n        <SingleRange\n          data={[\n            { start: \"0\", label: \"All prices\" },\n            { start: \"0\", end: \"99\", label: \"Under $100\" },\n            { start: \"0\", end: \"49\", label: \"Under $50\" },\n          ]}\n          {...props.reactiveFilterRangeProps}\n        />\n      </div>\n    );\n  }\n\n  return null;\n};\n"]}
+{"version":3,"file":"ExampleFilterRange.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterRange.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AASnB,MAAM,kBAAkB,GAAsC,CACnE,KAAK,EACL,EAAE;IACF,OAAO,CACL,uCAAK,SAAS,EAAC,YAAY;QACzB,sCAAI,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAM;QACzD,sCAAI,SAAS,EAAC,kBAAkB,IAC7B,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9C,sCAAI,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,SAAS,EAAC,uBAAuB;YACpD,yCAAO,SAAS,EAAC,6BAA6B;gBAC5C,yCACE,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,MAAM,CAAC,GAAG,EACjB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAEzD;gBACF,wCAAM,SAAS,EAAC,2BAA2B,IAAE,MAAM,CAAC,GAAG,CAAQ,CACzD,CACL,CACN,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,kBAAkB,sBA0B7B","sourcesContent":["import React from \"react\";\n// import SingleRange from \"@appbaseio/reactivesearch/lib/components/range/SingleRange\";\n\nimport { FilterProps } from \"../../components\";\n\nexport type ExampleFilterRangeProps = React.ComponentProps<\n  NonNullable<FilterProps[\"renderFilterRange\"]>\n>;\n\nexport const ExampleFilterRange: React.FC<ExampleFilterRangeProps> = (\n  props\n) => {\n  return (\n    <div className=\"rs__filter\">\n      <h3 className=\"rs__filter__name\">{props.filter.name}</h3>\n      <ul className=\"rs__filter__list\">\n        {props.filterRangeProps.options.map((option) => (\n          <li key={option.key} className=\"rs__filter__list-item\">\n            <label className=\"rs__filter__list-item-label\">\n              <input\n                className=\"rs__filter__list-item-input\"\n                value={option.key}\n                type=\"radio\"\n                checked={option.checked}\n                onChange={(event) =>\n                  props.filterRangeProps.handleChange(event.target.value)\n                }\n              />\n              <span className=\"rs__filter__list-item-key\">{option.key}</span>\n            </label>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n"]}

package/dist/src/components/Example/ExampleFilterSlider.js

@@ -6,16 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleFilterSlider = void 0;
 const react_1 = __importDefault(require("react"));
 const reactivesearch_1 = require("@appbaseio/reactivesearch");
+const hooks_1 = require("../../hooks");
 const ExampleFilterSlider = (props) => {
-    if (props.filter.handle === "price") {
-        return (react_1.default.createElement("div", { className: "rs__filter" },
-            react_1.default.createElement("h3", { className: "rs__filter__name" }, props.filter.name),
-            react_1.default.createElement(reactivesearch_1.RangeSlider, Object.assign({ range: {
-                    start: 0,
-                    end: 500,
-                } }, props.reactiveFilterSliderProps))));
-    }
-    return null;
+    const reactiveFilterSliderProps = (0, hooks_1.useReactiveFilterSliderProps)(props.filter);
+    return (react_1.default.createElement("div", { className: "rs__filter" },
+        react_1.default.createElement("h3", { className: "rs__filter__name" }, props.filter.name),
+        react_1.default.createElement(reactivesearch_1.DynamicRangeSlider, Object.assign({}, reactiveFilterSliderProps, { value: () => props.filterSliderProps.value, onChange: (value) => props.filterSliderProps.handleChange({
+                start: value[0],
+                end: value[1],
+            }) }))));
 };
 exports.ExampleFilterSlider = ExampleFilterSlider;
 //# sourceMappingURL=ExampleFilterSlider.js.map

package/dist/src/components/Example/ExampleFilterSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleFilterSlider.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterSlider.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,8DAAwD;AAQjD,MAAM,mBAAmB,GAAuC,CACrE,KAAK,EACL,EAAE;IACF,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,OAAO,EAAE;QACnC,OAAO,CACL,uCAAK,SAAS,EAAC,YAAY;YACzB,sCAAI,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAM;YACzD,8BAAC,4BAAW,kBACV,KAAK,EAAE;oBACL,KAAK,EAAE,CAAC;oBACR,GAAG,EAAE,GAAG;iBACT,IACG,KAAK,CAAC,yBAAyB,EACnC,CACE,CACP,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAnBW,QAAA,mBAAmB,uBAmB9B","sourcesContent":["import React from \"react\";\nimport { RangeSlider } from \"@appbaseio/reactivesearch\";\n\nimport { FilterProps } from \"../../components\";\n\nexport type ExampleFilterSliderProps = React.ComponentProps<\n  NonNullable<FilterProps[\"renderFilterSlider\"]>\n>;\n\nexport const ExampleFilterSlider: React.FC<ExampleFilterSliderProps> = (\n  props\n) => {\n  if (props.filter.handle === \"price\") {\n    return (\n      <div className=\"rs__filter\">\n        <h3 className=\"rs__filter__name\">{props.filter.name}</h3>\n        <RangeSlider\n          range={{\n            start: 0,\n            end: 500,\n          }}\n          {...props.reactiveFilterSliderProps}\n        />\n      </div>\n    );\n  }\n\n  return null;\n};\n"]}
+{"version":3,"file":"ExampleFilterSlider.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterSlider.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,8DAA+D;AAE/D,uCAA2D;AAOpD,MAAM,mBAAmB,GAAuC,CACrE,KAAK,EACL,EAAE;IACF,MAAM,yBAAyB,GAAG,IAAA,oCAA4B,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7E,OAAO,CACL,uCAAK,SAAS,EAAC,YAAY;QACzB,sCAAI,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAM;QACzD,8BAAC,mCAAkB,oBACb,yBAAyB,IAC7B,KAAK,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,EAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC;gBACnC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;gBACf,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;aACd,CAAC,IAEJ,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,mBAAmB,uBAoB9B","sourcesContent":["import React from \"react\";\nimport { DynamicRangeSlider } from \"@appbaseio/reactivesearch\";\n\nimport { useReactiveFilterSliderProps } from \"../../hooks\";\nimport { FilterProps } from \"../../components\";\n\nexport type ExampleFilterSliderProps = React.ComponentProps<\n  NonNullable<FilterProps[\"renderFilterSlider\"]>\n>;\n\nexport const ExampleFilterSlider: React.FC<ExampleFilterSliderProps> = (\n  props\n) => {\n  const reactiveFilterSliderProps = useReactiveFilterSliderProps(props.filter);\n\n  return (\n    <div className=\"rs__filter\">\n      <h3 className=\"rs__filter__name\">{props.filter.name}</h3>\n      <DynamicRangeSlider\n        {...reactiveFilterSliderProps}\n        value={() => props.filterSliderProps.value}\n        onChange={(value) =>\n          props.filterSliderProps.handleChange({\n            start: value[0],\n            end: value[1],\n          })\n        }\n      />\n    </div>\n  );\n};\n"]}

package/dist/src/components/Example/ExampleFiltersActive.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FiltersActiveProps } from "../../components";
+export declare type ExampleFiltersActiveProps = React.ComponentProps<NonNullable<FiltersActiveProps["renderFiltersActive"]>>;
+export declare const ExampleFiltersActive: React.FC<ExampleFiltersActiveProps>;

package/dist/src/components/Example/ExampleFiltersActive.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleFiltersActive = void 0;
+const react_1 = __importDefault(require("react"));
+const ExampleFiltersActive = (props) => {
+    return (react_1.default.createElement("div", { className: "rs__filter-active" },
+        react_1.default.createElement("h3", { className: "rs__filter-active__name" }, "Filters Active"),
+        react_1.default.createElement("ul", { className: "rs__filter-active__list" }, props.selectedFilters.map((selectedFilter) => (react_1.default.createElement("li", { key: selectedFilter.key, className: "rs__filter-active__list-item" },
+            react_1.default.createElement("label", { className: "rs__filter-active__list-item-label", onClick: () => props.handleRemove(selectedFilter.key) },
+                react_1.default.createElement("span", { className: "rs__filter-active__list-item-label" },
+                    selectedFilter.label,
+                    ": "),
+                react_1.default.createElement("span", { className: "rs__filter-active__list-item-value" }, Array.isArray(selectedFilter.value)
+                    ? selectedFilter.value.join(", ")
+                    : typeof selectedFilter.value !== "string"
+                        ? `${selectedFilter.value.start}-${selectedFilter.value.end}`
+                        : selectedFilter.value))))))));
+};
+exports.ExampleFiltersActive = ExampleFiltersActive;
+//# sourceMappingURL=ExampleFiltersActive.js.map

package/dist/src/components/Example/ExampleFiltersActive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleFiltersActive.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFiltersActive.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,oBAAoB,GAAwC,CACvE,KAAK,EACL,EAAE;IACF,OAAO,CACL,uCAAK,SAAS,EAAC,mBAAmB;QAChC,sCAAI,SAAS,EAAC,yBAAyB,IAAE,gBAAgB,CAAM;QAC/D,sCAAI,SAAS,EAAC,yBAAyB,IACpC,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,CAC7C,sCAAI,GAAG,EAAE,cAAc,CAAC,GAAG,EAAE,SAAS,EAAC,8BAA8B;YACnE,yCACE,SAAS,EAAC,oCAAoC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC;gBAErD,wCAAM,SAAS,EAAC,oCAAoC;oBACjD,cAAc,CAAC,KAAK;oBACpB,IAAI,CACA;gBACP,wCAAM,SAAS,EAAC,oCAAoC,IACjD,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC;oBAClC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;oBACjC,CAAC,CAAC,OAAO,cAAc,CAAC,KAAK,KAAK,QAAQ;wBAC1C,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CAAC,GAAG,EAAE;wBAC7D,CAAC,CAAC,cAAc,CAAC,KAAK,CACnB,CACD,CACL,CACN,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,oBAAoB,wBA8B/B","sourcesContent":["import React from \"react\";\n\nimport { FiltersActiveProps } from \"../../components\";\n\nexport type ExampleFiltersActiveProps = React.ComponentProps<\n  NonNullable<FiltersActiveProps[\"renderFiltersActive\"]>\n>;\n\nexport const ExampleFiltersActive: React.FC<ExampleFiltersActiveProps> = (\n  props\n) => {\n  return (\n    <div className=\"rs__filter-active\">\n      <h3 className=\"rs__filter-active__name\">{\"Filters Active\"}</h3>\n      <ul className=\"rs__filter-active__list\">\n        {props.selectedFilters.map((selectedFilter) => (\n          <li key={selectedFilter.key} className=\"rs__filter-active__list-item\">\n            <label\n              className=\"rs__filter-active__list-item-label\"\n              onClick={() => props.handleRemove(selectedFilter.key)}\n            >\n              <span className=\"rs__filter-active__list-item-label\">\n                {selectedFilter.label}\n                {\": \"}\n              </span>\n              <span className=\"rs__filter-active__list-item-value\">\n                {Array.isArray(selectedFilter.value)\n                  ? selectedFilter.value.join(\", \")\n                  : typeof selectedFilter.value !== \"string\"\n                  ? `${selectedFilter.value.start}-${selectedFilter.value.end}`\n                  : selectedFilter.value}\n              </span>\n            </label>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n"]}

package/dist/src/components/Example/ExampleStats.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { StatsProps } from "../../components";
+export declare type ExampleStatsProps = React.ComponentProps<NonNullable<StatsProps["renderStats"]>>;
+export declare const ExampleStats: React.FC<ExampleStatsProps>;

package/dist/src/components/Example/ExampleStats.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleStats = void 0;
+const react_1 = __importDefault(require("react"));
+const ExampleStats = (props) => {
+    return (react_1.default.createElement("div", null,
+        "Found ",
+        props.resultStats.numberOfResults,
+        " products"));
+};
+exports.ExampleStats = ExampleStats;
+//# sourceMappingURL=ExampleStats.js.map

package/dist/src/components/Example/ExampleStats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleStats.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleStats.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,YAAY,GAAgC,CAAC,KAAK,EAAE,EAAE;IACjE,OAAO,CACL;QACG,QAAQ;QACR,KAAK,CAAC,WAAW,CAAC,eAAe;QACjC,WAAW,CACR,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,YAAY,gBAQvB","sourcesContent":["import React from \"react\";\n\nimport { StatsProps } from \"../../components\";\n\nexport type ExampleStatsProps = React.ComponentProps<\n  NonNullable<StatsProps[\"renderStats\"]>\n>;\n\nexport const ExampleStats: React.FC<ExampleStatsProps> = (props) => {\n  return (\n    <div>\n      {\"Found \"}\n      {props.resultStats.numberOfResults}\n      {\" products\"}\n    </div>\n  );\n};\n"]}

package/dist/src/components/Example/index.d.ts

@@ -1,10 +1,13 @@
+export * from "./ExampleClearAll";
 export * from "./ExampleFilterList";
 export * from "./ExampleFilterRange";
 export * from "./ExampleFilterSlider";
 export * from "./ExampleFilters";
+export * from "./ExampleFiltersActive";
 export * from "./ExampleResultCardCallout";
 export * from "./ExampleResultCardProduct";
 export * from "./ExampleResultPaginationNumbered";
 export * from "./ExampleResultPaginationLoadMore";
 export * from "./ExampleResultPaginationNextPrev";
 export * from "./ExampleSortBy";
+export * from "./ExampleStats";

package/dist/src/components/Example/index.js

@@ -10,14 +10,17 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ExampleClearAll"), exports);
 __exportStar(require("./ExampleFilterList"), exports);
 __exportStar(require("./ExampleFilterRange"), exports);
 __exportStar(require("./ExampleFilterSlider"), exports);
 __exportStar(require("./ExampleFilters"), exports);
+__exportStar(require("./ExampleFiltersActive"), exports);
 __exportStar(require("./ExampleResultCardCallout"), exports);
 __exportStar(require("./ExampleResultCardProduct"), exports);
 __exportStar(require("./ExampleResultPaginationNumbered"), exports);
 __exportStar(require("./ExampleResultPaginationLoadMore"), exports);
 __exportStar(require("./ExampleResultPaginationNextPrev"), exports);
 __exportStar(require("./ExampleSortBy"), exports);
+__exportStar(require("./ExampleStats"), exports);
 //# sourceMappingURL=index.js.map

package/dist/src/components/Example/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Example/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,sDAAoC;AACpC,uDAAqC;AACrC,wDAAsC;AACtC,mDAAiC;AACjC,6DAA2C;AAC3C,6DAA2C;AAC3C,oEAAkD;AAClD,oEAAkD;AAClD,oEAAkD;AAClD,kDAAgC","sourcesContent":["export * from \"./ExampleFilterList\";\nexport * from \"./ExampleFilterRange\";\nexport * from \"./ExampleFilterSlider\";\nexport * from \"./ExampleFilters\";\nexport * from \"./ExampleResultCardCallout\";\nexport * from \"./ExampleResultCardProduct\";\nexport * from \"./ExampleResultPaginationNumbered\";\nexport * from \"./ExampleResultPaginationLoadMore\";\nexport * from \"./ExampleResultPaginationNextPrev\";\nexport * from \"./ExampleSortBy\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Example/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,oDAAkC;AAClC,sDAAoC;AACpC,uDAAqC;AACrC,wDAAsC;AACtC,mDAAiC;AACjC,yDAAuC;AACvC,6DAA2C;AAC3C,6DAA2C;AAC3C,oEAAkD;AAClD,oEAAkD;AAClD,oEAAkD;AAClD,kDAAgC;AAChC,iDAA+B","sourcesContent":["export * from \"./ExampleClearAll\";\nexport * from \"./ExampleFilterList\";\nexport * from \"./ExampleFilterRange\";\nexport * from \"./ExampleFilterSlider\";\nexport * from \"./ExampleFilters\";\nexport * from \"./ExampleFiltersActive\";\nexport * from \"./ExampleResultCardCallout\";\nexport * from \"./ExampleResultCardProduct\";\nexport * from \"./ExampleResultPaginationNumbered\";\nexport * from \"./ExampleResultPaginationLoadMore\";\nexport * from \"./ExampleResultPaginationNextPrev\";\nexport * from \"./ExampleSortBy\";\nexport * from \"./ExampleStats\";\n"]}

package/dist/src/components/Filter/Filter.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ConfigFilterOption } from "../../types";
-import { useFilterListProps, useReactiveFilterRangeProps, useReactiveFilterSliderProps } from "../../hooks";
+import { useFilterListProps, useFilterRangeProps, useFilterSliderProps } from "../../hooks";
 export declare type FilterProps = {
     /** The filter option being rendered */
     filter: ConfigFilterOption;
@@ -10,11 +10,11 @@ export declare type FilterProps = {
     }>;
     /** Render method for Range filters */
     renderFilterRange?: React.FC<Omit<FilterProps, "renderFilterRange"> & {
-        reactiveFilterRangeProps: ReturnType<typeof useReactiveFilterRangeProps>;
+        filterRangeProps: ReturnType<typeof useFilterRangeProps>;
     }>;
     /** Render method for Slider filters */
     renderFilterSlider?: React.FC<Omit<FilterProps, "renderFilterSlider"> & {
-        reactiveFilterSliderProps: ReturnType<typeof useReactiveFilterSliderProps>;
+        filterSliderProps: ReturnType<typeof useFilterSliderProps>;
     }>;
 };
 export declare const Filter: React.FC<FilterProps>;

package/dist/src/components/Filter/Filter.js

@@ -20,6 +20,7 @@ const MultiList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/compo
 const SingleList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/list/SingleList"));
 const hooks_1 = require("../../hooks");
 const components_1 = require("../../components");
+const reactivesearch_1 = require("@appbaseio/reactivesearch");
 const Filter = (props) => {
     if ("single" === props.filter.displayType) {
         return react_1.default.createElement(FilterSingleList, Object.assign({}, props));
@@ -46,20 +47,31 @@ const FilterMultiList = (props) => {
     return (react_1.default.createElement(MultiList_1.default, Object.assign({}, reactiveFilterListProps, { render: (reactivesearchFilterProps) => (react_1.default.createElement(FilterListInner, Object.assign({}, props, { reactivesearchFilterProps: reactivesearchFilterProps }))) })));
 };
 const FilterRange = (props) => {
+    var _a;
     const reactiveFilterRangeProps = (0, hooks_1.useReactiveFilterRangeProps)(props.filter);
-    if (props.renderFilterRange) {
-        const Component = props.renderFilterRange;
-        return (react_1.default.createElement(Component, Object.assign({}, props, { reactiveFilterRangeProps: reactiveFilterRangeProps })));
-    }
-    return null;
+    const filterRangeProps = (0, hooks_1.useFilterRangeProps)(props.filter);
+    const RenderRangeComponent = (_a = props.renderFilterRange) !== null && _a !== void 0 ? _a : components_1.ExampleFilterRange;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: {
+                display: "none",
+            } },
+            react_1.default.createElement(reactivesearch_1.SingleRange, Object.assign({}, reactiveFilterRangeProps, { value: filterRangeProps.value, onChange: filterRangeProps.handleChange }))),
+        react_1.default.createElement(RenderRangeComponent, { filterRangeProps: filterRangeProps, filter: props.filter })));
 };
 const FilterSlider = (props) => {
+    var _a;
     const reactiveFilterSliderProps = (0, hooks_1.useReactiveFilterSliderProps)(props.filter);
-    if (props.renderFilterSlider) {
-        const Component = props.renderFilterSlider;
-        return (react_1.default.createElement(Component, Object.assign({}, props, { reactiveFilterSliderProps: reactiveFilterSliderProps })));
-    }
-    return null;
+    const filterSliderProps = (0, hooks_1.useFilterSliderProps)(props.filter);
+    const RenderSliderComponent = (_a = props.renderFilterSlider) !== null && _a !== void 0 ? _a : components_1.ExampleFilterSlider;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        props.renderFilterSlider ? (react_1.default.createElement("div", { style: {
+                display: "none",
+            } },
+            react_1.default.createElement(reactivesearch_1.DynamicRangeSlider, Object.assign({}, reactiveFilterSliderProps, { value: () => filterSliderProps.value, onChange: (value) => filterSliderProps.handleChange({
+                    start: value[0],
+                    end: value[1],
+                }) })))) : null,
+        react_1.default.createElement(RenderSliderComponent, { filterSliderProps: filterSliderProps, filter: props.filter })));
 };
 // inner component exists only so we can use memos in reactivesearch render functions
 const FilterListInner = (props) => {