@usereactify/search 5.25.0 → 5.26.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.26.1](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.26.0...release-v5.26.1) (2023-08-09)
+
+
+### Bug Fixes
+
+* correct sort option ordering ([c48ecdd](https://bitbucket.org/usereactify/reactify-search-ui/commit/c48ecdd99166259966c97616a64ec0950e64172f))
+
+## [5.26.0](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.25.0...release-v5.26.0) (2023-08-08)
+
+
+### Features
+
+* add flags for synonyms ([cfbc94a](https://bitbucket.org/usereactify/reactify-search-ui/commit/cfbc94ab16cb7a91e570134e7033c1dca8874e71))
+
 ## [5.25.0](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.24.0...release-v5.25.0) (2023-08-02)
 
 

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@usereactify/search",
     "description": "React UI library for Reactify Search",
-    "version": "5.25.0",
+    "version": "5.6.1",
     "license": "MIT",
     "main": "dist/src/index.js",
     "types": "dist/src/index.d.ts",
@@ -10,7 +10,6 @@
         "README.md",
         "CHANGELOG.md"
     ],
-    "packageManager": "pnpm@7.9.5",
     "scripts": {
         "watch": "tsc --watch",
         "release": "standard-version --tag-prefix release-v",
@@ -18,11 +17,16 @@
         "prebuild": "rimraf dist",
         "build": "tsc",
         "prettier": "prettier --write .",
-        "start": "start-storybook -p 6006",
+        "storybook": "start-storybook -p 6006",
         "sentry:release:new": "sentry-cli releases new $npm_package_version",
         "sentry:release:upload": "sentry-cli releases files $npm_package_version upload-sourcemaps dist",
-        "sentry:release:finalize": "sentry-cli releases finalize $npm_package_version",
-        "prepare": "husky install"
+        "sentry:release:finalize": "sentry-cli releases finalize $npm_package_version"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "pretty-quick --staged",
+            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+        }
     },
     "commitlint": {
         "extends": [
@@ -36,9 +40,7 @@
         "axios": "0.26.1",
         "currency.js": "2.0.4",
         "debug": "4.3.2",
-        "ga-gtag": "1.1.5",
-        "react-intersection-observer": "9.1.0",
-        "react-slider": "2.0.4"
+        "react-intersection-observer": "9.1.0"
     },
     "peerDependencies": {
         "@appbaseio/reactivesearch": "3.14.0",
@@ -59,9 +61,8 @@
         "@types/debug": "4.1.7",
         "@types/react": "18.0.19",
         "@types/react-dom": "18.0.6",
-        "@types/react-slider": "1.3.1",
         "babel-loader": "8.2.2",
-        "husky": "^8.0.0",
+        "husky": "4.3.8",
         "prettier": "2.4.1",
         "pretty-quick": "3.1.1",
         "react": "18.2.0",

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

@@ -7,13 +7,11 @@ exports.ClearAll = void 0;
 const react_1 = __importDefault(require("react"));
 const SelectedFilters_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/basic/SelectedFilters"));
 const components_1 = require("../../components");
-const hooks_1 = require("../../hooks");
 const ClearAll = (props) => {
     var _a;
     const RenderComponent = (_a = props.render) !== null && _a !== void 0 ? _a : components_1.ExampleClearAll;
-    const filtersHook = (0, hooks_1.useFilters)();
-    return (react_1.default.createElement(SelectedFilters_1.default, { render: (renderProps) => {
-            const selectedFilters = Object.values(renderProps.selectedValues)
+    return (react_1.default.createElement(SelectedFilters_1.default, { render: ({ selectedValues, clearValues }) => {
+            const selectedFilters = Object.values(selectedValues)
                 .map((value) => value)
                 .filter((item) => {
                 var _a, _b;
@@ -21,36 +19,10 @@ const ClearAll = (props) => {
                     (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));
             });
-            const handleClearAll = () => {
-                var _a;
-                for (const filter of (_a = filtersHook.filters) !== null && _a !== void 0 ? _a : []) {
-                    if (filter.displayType === "slider") {
-                        const event = new CustomEvent(`@usereactify/search:filter:${filter.handle}:update`, {
-                            detail: {
-                                handle: filter.handle,
-                                value: [],
-                            },
-                        });
-                        window.dispatchEvent(event);
-                    }
-                    if (filter.displayType === "multi") {
-                        if (filter.displayView === "range") {
-                            const event = new CustomEvent(`@usereactify/search:filter:${filter.handle}:update`, {
-                                detail: {
-                                    handle: filter.handle,
-                                    value: [],
-                                },
-                            });
-                            window.dispatchEvent(event);
-                        }
-                    }
-                }
-                renderProps.clearValues();
-            };
             if (!selectedFilters.length) {
                 return null;
             }
-            return react_1.default.createElement(RenderComponent, { clearAll: handleClearAll });
+            return react_1.default.createElement(RenderComponent, { clearAll: clearValues });
         } }));
 };
 exports.ClearAll = ClearAll;

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

@@ -1 +1 @@
-{"version":3,"file":"ClearAll.js","sourceRoot":"","sources":["../../../../src/components/ClearAll/ClearAll.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qHAA6F;AAE7F,iDAAmD;AACnD,uCAAyC;AASlC,MAAM,QAAQ,GAA4B,CAAC,KAAK,EAAE,EAAE;;IACzD,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,4BAAe,CAAC;IAExD,MAAM,WAAW,GAAG,IAAA,kBAAU,GAAE,CAAC;IAEjC,OAAO,CACL,8BAAC,yBAAe,IACd,MAAM,EAAE,CAAC,WAAW,EAAE,EAAE;YACtB,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,cAAc,CAAC;iBAC9D,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,MAAM,cAAc,GAAG,GAAG,EAAE;;gBAC1B,KAAK,MAAM,MAAM,IAAI,MAAA,WAAW,CAAC,OAAO,mCAAI,EAAE,EAAE;oBAC9C,IAAI,MAAM,CAAC,WAAW,KAAK,QAAQ,EAAE;wBACnC,MAAM,KAAK,GAAG,IAAI,WAAW,CAG1B,8BAA8B,MAAM,CAAC,MAAM,SAAS,EAAE;4BACvD,MAAM,EAAE;gCACN,MAAM,EAAE,MAAM,CAAC,MAAM;gCACrB,KAAK,EAAE,EAAE;6BACV;yBACF,CAAC,CAAC;wBACH,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;qBAC7B;oBACD,IAAI,MAAM,CAAC,WAAW,KAAK,OAAO,EAAE;wBAClC,IAAI,MAAM,CAAC,WAAW,KAAK,OAAO,EAAE;4BAClC,MAAM,KAAK,GAAG,IAAI,WAAW,CAG1B,8BAA8B,MAAM,CAAC,MAAM,SAAS,EAAE;gCACvD,MAAM,EAAE;oCACN,MAAM,EAAE,MAAM,CAAC,MAAM;oCACrB,KAAK,EAAE,EAAE;iCACV;6BACF,CAAC,CAAC;4BACH,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;yBAC7B;qBACF;iBACF;gBACD,WAAW,CAAC,WAAW,EAAE,CAAC;YAC5B,CAAC,CAAC;YAEF,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;gBAC3B,OAAO,IAAI,CAAC;aACb;YAED,OAAO,8BAAC,eAAe,IAAC,QAAQ,EAAE,cAAc,GAAI,CAAC;QACvD,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAzDW,QAAA,QAAQ,YAyDnB","sourcesContent":["import React from \"react\";\nimport SelectedFilters from \"@appbaseio/reactivesearch/lib/components/basic/SelectedFilters\";\n\nimport { ExampleClearAll } from \"../../components\";\nimport { useFilters } from \"../../hooks\";\n\nexport type ClearAllProps = {\n  /** Render method */\n  render?: React.FC<{\n    clearAll: () => void;\n  }>;\n};\n\nexport const ClearAll: React.FC<ClearAllProps> = (props) => {\n  const RenderComponent = props.render ?? ExampleClearAll;\n\n  const filtersHook = useFilters();\n\n  return (\n    <SelectedFilters\n      render={(renderProps) => {\n        const selectedFilters = Object.values(renderProps.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        const handleClearAll = () => {\n          for (const filter of filtersHook.filters ?? []) {\n            if (filter.displayType === \"slider\") {\n              const event = new CustomEvent<{\n                handle: string;\n                value: [];\n              }>(`@usereactify/search:filter:${filter.handle}:update`, {\n                detail: {\n                  handle: filter.handle,\n                  value: [],\n                },\n              });\n              window.dispatchEvent(event);\n            }\n            if (filter.displayType === \"multi\") {\n              if (filter.displayView === \"range\") {\n                const event = new CustomEvent<{\n                  handle: string;\n                  value: Array<string>;\n                }>(`@usereactify/search:filter:${filter.handle}:update`, {\n                  detail: {\n                    handle: filter.handle,\n                    value: [],\n                  },\n                });\n                window.dispatchEvent(event);\n              }\n            }\n          }\n          renderProps.clearValues();\n        };\n\n        if (!selectedFilters.length) {\n          return null;\n        }\n\n        return <RenderComponent clearAll={handleClearAll} />;\n      }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"ClearAll.js","sourceRoot":"","sources":["../../../../src/components/ClearAll/ClearAll.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qHAA6F;AAE7F,iDAAmD;AAS5C,MAAM,QAAQ,GAA4B,CAAC,KAAK,EAAE,EAAE;;IACzD,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,4BAAe,CAAC;IAExD,OAAO,CACL,8BAAC,yBAAe,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,eAAe,IAAC,QAAQ,EAAE,WAAW,GAAI,CAAC;QACpD,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,QAAQ,YAuBnB","sourcesContent":["import React from \"react\";\nimport SelectedFilters from \"@appbaseio/reactivesearch/lib/components/basic/SelectedFilters\";\n\nimport { ExampleClearAll } from \"../../components\";\n\nexport type ClearAllProps = {\n  /** Render method */\n  render?: React.FC<{\n    clearAll: () => void;\n  }>;\n};\n\nexport const ClearAll: React.FC<ClearAllProps> = (props) => {\n  const RenderComponent = props.render ?? 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 <RenderComponent clearAll={clearValues} />;\n      }}\n    />\n  );\n};\n"]}

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

@@ -10,9 +10,7 @@ const ExampleFilterRange = (props) => {
         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: "multi" === props.filterRangeProps.filter.displayType
-                        ? "checkbox"
-                        : "radio", checked: option.checked, onChange: (event) => props.filterRangeProps.handleChange(event.target.value) }),
+                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.label))))))));
 };
 exports.ExampleFilterRange = ExampleFilterRange;

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;AAQnB,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,EACF,OAAO,KAAK,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,WAAW;wBACnD,CAAC,CAAC,UAAU;wBACZ,CAAC,CAAC,OAAO,EAEb,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,KAAK,CAAQ,CAC3D,CACL,CACN,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,kBAAkB,sBA8B7B","sourcesContent":["import React from \"react\";\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={\n                  \"multi\" === props.filterRangeProps.filter.displayType\n                    ? \"checkbox\"\n                    : \"radio\"\n                }\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.label}</span>\n            </label>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ExampleFilterRange.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterRange.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,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,KAAK,CAAQ,CAC3D,CACL,CACN,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,kBAAkB,sBA0B7B","sourcesContent":["import React from \"react\";\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.label}</span>\n            </label>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n"]}

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

@@ -5,33 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleFilterSlider = void 0;
 const react_1 = __importDefault(require("react"));
-const react_slider_1 = __importDefault(require("react-slider"));
+const DynamicRangeSlider_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/range/DynamicRangeSlider"));
+const hooks_1 = require("../../hooks");
 const ExampleFilterSlider = (props) => {
-    const trackStyleEnds = {
-        top: "10px",
-        height: "8px",
-        background: "rgb(239, 239, 239)",
-        border: "1px solid rgb(179, 179, 179)",
-        borderRadius: "4px",
-    };
-    const trackStyleMiddle = Object.assign(Object.assign({}, trackStyleEnds), { background: "rgb(2, 117, 255)", border: "1px solid rgb(74, 117, 187)" });
+    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("div", { className: "rs__filter__slider", style: {
-                maxWidth: "300px",
-                height: "26px",
-                margin: "auto",
-                top: "6px",
-            } },
-            react_1.default.createElement(react_slider_1.default, Object.assign({ thumbClassName: "rs__filter__slider__thumb" }, props.filterSliderProps.reactSliderProps, { renderTrack: (props, state) => (react_1.default.createElement("div", Object.assign({}, props, { style: Object.assign(Object.assign({}, (state.index === 1 ? trackStyleMiddle : trackStyleEnds)), props.style) }))), renderThumb: (renderProps, state) => (react_1.default.createElement("div", Object.assign({}, renderProps, { style: Object.assign({ cursor: "grab", background: "rgb(2, 117, 255)", top: "6px", width: "16px", height: "16px", borderRadius: "100%", outline: "none" }, renderProps.style) }),
-                    react_1.default.createElement("span", { style: {
-                            position: "absolute",
-                            top: "-24px",
-                            left: "-50%",
-                        } },
-                        props.filter.displaySliderPrefix,
-                        state.valueNow,
-                        props.filter.displaySliderSuffix))) })))));
+        react_1.default.createElement(DynamicRangeSlider_1.default, 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,gEAAuC;AAOhC,MAAM,mBAAmB,GAAuC,CACrE,KAAK,EACL,EAAE;IACF,MAAM,cAAc,GAAG;QACrB,GAAG,EAAE,MAAM;QACX,MAAM,EAAE,KAAK;QACb,UAAU,EAAE,oBAAoB;QAChC,MAAM,EAAE,8BAA8B;QACtC,YAAY,EAAE,KAAK;KACpB,CAAC;IACF,MAAM,gBAAgB,mCACjB,cAAc,KACjB,UAAU,EAAE,kBAAkB,EAC9B,MAAM,EAAE,6BAA6B,GACtC,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAC,YAAY;QACzB,sCAAI,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAM;QACzD,uCACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,MAAM;gBACd,GAAG,EAAE,KAAK;aACX;YAED,8BAAC,sBAAW,kBACV,cAAc,EAAC,2BAA2B,IACtC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,IAC5C,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,uDACM,KAAK,IACT,KAAK,kCACA,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC,GACvD,KAAK,CAAC,KAAK,KAEX,CACR,EACD,WAAW,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,uDACM,WAAW,IACf,KAAK,kBACH,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,kBAAkB,EAC9B,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,IACZ,WAAW,CAAC,KAAK;oBAGtB,wCACE,KAAK,EAAE;4BACL,QAAQ,EAAE,UAAU;4BACpB,GAAG,EAAE,OAAO;4BACZ,IAAI,EAAE,MAAM;yBACb;wBAEA,KAAK,CAAC,MAAM,CAAC,mBAAmB;wBAChC,KAAK,CAAC,QAAQ;wBACd,KAAK,CAAC,MAAM,CAAC,mBAAmB,CAC5B,CACH,CACP,IACD,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAvEW,QAAA,mBAAmB,uBAuE9B","sourcesContent":["import React from \"react\";\nimport ReactSlider from \"react-slider\";\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 trackStyleEnds = {\n    top: \"10px\",\n    height: \"8px\",\n    background: \"rgb(239, 239, 239)\",\n    border: \"1px solid rgb(179, 179, 179)\",\n    borderRadius: \"4px\",\n  };\n  const trackStyleMiddle = {\n    ...trackStyleEnds,\n    background: \"rgb(2, 117, 255)\",\n    border: \"1px solid rgb(74, 117, 187)\",\n  };\n\n  return (\n    <div className=\"rs__filter\">\n      <h3 className=\"rs__filter__name\">{props.filter.name}</h3>\n      <div\n        className=\"rs__filter__slider\"\n        style={{\n          maxWidth: \"300px\",\n          height: \"26px\",\n          margin: \"auto\",\n          top: \"6px\",\n        }}\n      >\n        <ReactSlider\n          thumbClassName=\"rs__filter__slider__thumb\"\n          {...props.filterSliderProps.reactSliderProps}\n          renderTrack={(props, state) => (\n            <div\n              {...props}\n              style={{\n                ...(state.index === 1 ? trackStyleMiddle : trackStyleEnds),\n                ...props.style,\n              }}\n            ></div>\n          )}\n          renderThumb={(renderProps, state) => (\n            <div\n              {...renderProps}\n              style={{\n                cursor: \"grab\",\n                background: \"rgb(2, 117, 255)\",\n                top: \"6px\",\n                width: \"16px\",\n                height: \"16px\",\n                borderRadius: \"100%\",\n                outline: \"none\",\n                ...renderProps.style,\n              }}\n            >\n              <span\n                style={{\n                  position: \"absolute\",\n                  top: \"-24px\",\n                  left: \"-50%\",\n                }}\n              >\n                {props.filter.displaySliderPrefix}\n                {state.valueNow}\n                {props.filter.displaySliderSuffix}\n              </span>\n            </div>\n          )}\n        />\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ExampleFilterSlider.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterSlider.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,2HAAmG;AAEnG,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,4BAAkB,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/lib/components/range/DynamicRangeSlider\";\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/ExampleFilters.d.ts

@@ -1,2 +1,4 @@
 import React from "react";
-export declare const ExampleFilters: React.FC;
+import { FiltersProps } from "../../components";
+export declare type ExampleFiltersProps = React.ComponentProps<NonNullable<FiltersProps["render"]>>;
+export declare const ExampleFilters: React.FC<ExampleFiltersProps>;

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

@@ -5,14 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleFilters = void 0;
 const react_1 = __importDefault(require("react"));
-const Filter_1 = require("../Filter");
-const ExampleFilterList_1 = require("./ExampleFilterList");
-const ExampleFilterRange_1 = require("./ExampleFilterRange");
-const ExampleFilterSlider_1 = require("./ExampleFilterSlider");
-const ExampleFilters = () => {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h3", null, "Filters"),
-        react_1.default.createElement(Filter_1.Filters, { renderFilterList: ExampleFilterList_1.ExampleFilterList, renderFilterRange: ExampleFilterRange_1.ExampleFilterRange, renderFilterSlider: ExampleFilterSlider_1.ExampleFilterSlider })));
+const components_1 = require("../../components");
+const ExampleFilters = (props) => {
+    var _a;
+    return (react_1.default.createElement(react_1.default.Fragment, null, (_a = props.filters) === null || _a === void 0 ? void 0 : _a.map((filter) => (react_1.default.createElement(components_1.Filter, { key: filter.id, filter: filter })))));
 };
 exports.ExampleFilters = ExampleFilters;
 //# sourceMappingURL=ExampleFilters.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleFilters.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilters.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sCAAoC;AAEpC,2DAAwD;AACxD,6DAA0D;AAC1D,+DAA4D;AAErD,MAAM,cAAc,GAAa,GAAG,EAAE;IAC3C,OAAO,CACL;QACE,0CAAK,SAAS,CAAM;QACpB,8BAAC,gBAAO,IACN,gBAAgB,EAAE,qCAAiB,EACnC,iBAAiB,EAAE,uCAAkB,EACrC,kBAAkB,EAAE,yCAAmB,GACvC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,cAAc,kBAWzB","sourcesContent":["import React from \"react\";\nimport { Filters } from \"../Filter\";\n\nimport { ExampleFilterList } from \"./ExampleFilterList\";\nimport { ExampleFilterRange } from \"./ExampleFilterRange\";\nimport { ExampleFilterSlider } from \"./ExampleFilterSlider\";\n\nexport const ExampleFilters: React.FC = () => {\n  return (\n    <div>\n      <h3>{\"Filters\"}</h3>\n      <Filters\n        renderFilterList={ExampleFilterList}\n        renderFilterRange={ExampleFilterRange}\n        renderFilterSlider={ExampleFilterSlider}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ExampleFilters.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilters.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAAwD;AAMjD,MAAM,cAAc,GAAkC,CAAC,KAAK,EAAE,EAAE;;IACrE,OAAO,CACL,8DACG,MAAA,KAAK,CAAC,OAAO,0CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9B,8BAAC,mBAAM,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CAC3C,CAAC,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,cAAc,kBAQzB","sourcesContent":["import React from \"react\";\n\nimport { Filter, FiltersProps } from \"../../components\";\n\nexport type ExampleFiltersProps = React.ComponentProps<\n  NonNullable<FiltersProps[\"render\"]>\n>;\n\nexport const ExampleFilters: React.FC<ExampleFiltersProps> = (props) => {\n  return (\n    <>\n      {props.filters?.map((filter) => (\n        <Filter key={filter.id} filter={filter} />\n      ))}\n    </>\n  );\n};\n"]}

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

@@ -5,33 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleFiltersSelected = void 0;
 const react_1 = __importDefault(require("react"));
-const hooks_1 = require("../../hooks");
 const ExampleFiltersSelected = (props) => {
     return (react_1.default.createElement("div", { className: "rs__filters-selected" },
         react_1.default.createElement("h3", { className: "rs__filters-selected__name" }, "Filters Selected"),
-        react_1.default.createElement("ul", { className: "rs__filters-selected__list" }, props.selectedFilters.map((selectedFilter) => (react_1.default.createElement(ExampleFiltersSelectedItem, { selectedFilter: selectedFilter, handleRemove: props.handleRemove }))))));
+        react_1.default.createElement("ul", { className: "rs__filters-selected__list" }, props.selectedFilters.map((selectedFilter) => (react_1.default.createElement("li", { key: selectedFilter.key, className: "rs__filters-selected__list-item" },
+            react_1.default.createElement("label", { className: "rs__filters-selected__list-item-label", onClick: () => props.handleRemove(selectedFilter.key) },
+                react_1.default.createElement("span", { className: "rs__filters-selected__list-item-label" },
+                    selectedFilter.label,
+                    ": "),
+                react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, Array.isArray(selectedFilter.value)
+                    ? selectedFilter.value.join(", ")
+                    : typeof selectedFilter.value !== "string"
+                        ? `${selectedFilter.value.start}-${selectedFilter.value.end}`
+                        : selectedFilter.value))))))));
 };
 exports.ExampleFiltersSelected = ExampleFiltersSelected;
-const ExampleFiltersSelectedItem = (props) => {
-    var _a;
-    const filtersHook = (0, hooks_1.useFilters)();
-    const filter = (_a = filtersHook.filters) === null || _a === void 0 ? void 0 : _a.find((filter) => filter.handle === props.selectedFilter.key);
-    return (react_1.default.createElement("li", { key: props.selectedFilter.key, className: "rs__filters-selected__list-item" },
-        react_1.default.createElement("label", { className: "rs__filters-selected__list-item-label" },
-            react_1.default.createElement("span", { className: "rs__filters-selected__list-item-label", onClick: () => props.handleRemove(props.selectedFilter.key) },
-                props.selectedFilter.label,
-                ": "),
-            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "single" && filter.displayView === "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" },
-                react_1.default.createElement("span", { onClick: () => props.handleRemove(props.selectedFilter.key, [
-                        props.selectedFilter.value.label,
-                    ]) }, props.selectedFilter.value.label))),
-            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "single" && filter.displayView !== "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" },
-                react_1.default.createElement("span", { onClick: () => props.handleRemove(props.selectedFilter.key, [
-                        props.selectedFilter.value,
-                    ]) }, props.selectedFilter.value))),
-            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "multi" && filter.displayView === "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, props.selectedFilter.value.map((value) => (react_1.default.createElement("span", { onClick: () => props.handleRemove(props.selectedFilter.key, [value.label]) }, value.label))))),
-            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "multi" && filter.displayView !== "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, props.selectedFilter.value.map((value) => (react_1.default.createElement("span", { onClick: () => props.handleRemove(props.selectedFilter.key, [value]) }, value))))),
-            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "slider" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" },
-                react_1.default.createElement("span", { onClick: () => props.handleRemove(props.selectedFilter.key, [""]) }, `${filter.displaySliderPrefix}${props.selectedFilter.value[0]} to ${filter.displaySliderPrefix}${props.selectedFilter.value[1]}`))))));
-};
 //# sourceMappingURL=ExampleFiltersSelected.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleFiltersSelected.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFiltersSelected.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport { FiltersSelectedProps } from \"../../components\";\nimport { useFilters } from \"../../hooks\";\n\nexport type ExampleFiltersSelectedProps = React.ComponentProps<\n  NonNullable<FiltersSelectedProps[\"render\"]>\n>;\n\nexport const ExampleFiltersSelected: React.FC<ExampleFiltersSelectedProps> = (\n  props\n) => {\n  return (\n    <div className=\"rs__filters-selected\">\n      <h3 className=\"rs__filters-selected__name\">{\"Filters Selected\"}</h3>\n      <ul className=\"rs__filters-selected__list\">\n        {props.selectedFilters.map((selectedFilter) => (\n          <ExampleFiltersSelectedItem\n            selectedFilter={selectedFilter}\n            handleRemove={props.handleRemove}\n          />\n        ))}\n      </ul>\n    </div>\n  );\n};\n\ntype ExampleFiltersSelectedItemProps = {\n  selectedFilter: ExampleFiltersSelectedProps[\"selectedFilters\"][number];\n  handleRemove: ExampleFiltersSelectedProps[\"handleRemove\"];\n};\n\nconst ExampleFiltersSelectedItem: React.FC<ExampleFiltersSelectedItemProps> = (\n  props\n) => {\n  const filtersHook = useFilters();\n  const filter = filtersHook.filters?.find(\n    (filter) => filter.handle === props.selectedFilter.key\n  );\n\n  return (\n    <li\n      key={props.selectedFilter.key}\n      className=\"rs__filters-selected__list-item\"\n    >\n      <label className=\"rs__filters-selected__list-item-label\">\n        <span\n          className=\"rs__filters-selected__list-item-label\"\n          onClick={() => props.handleRemove(props.selectedFilter.key)}\n        >\n          {props.selectedFilter.label}\n          {\": \"}\n        </span>\n\n        {filter?.displayType === \"single\" && filter.displayView === \"range\" && (\n          <span className=\"rs__filters-selected__list-item-value\">\n            <span\n              onClick={() =>\n                props.handleRemove(props.selectedFilter.key, [\n                  (props.selectedFilter.value as { label: string }).label,\n                ])\n              }\n            >\n              {(props.selectedFilter.value as { label: string }).label}\n            </span>\n          </span>\n        )}\n        {filter?.displayType === \"single\" && filter.displayView !== \"range\" && (\n          <span className=\"rs__filters-selected__list-item-value\">\n            <span\n              onClick={() =>\n                props.handleRemove(props.selectedFilter.key, [\n                  props.selectedFilter.value as string,\n                ])\n              }\n            >\n              {props.selectedFilter.value as string}\n            </span>\n          </span>\n        )}\n        {filter?.displayType === \"multi\" && filter.displayView === \"range\" && (\n          <span className=\"rs__filters-selected__list-item-value\">\n            {(props.selectedFilter.value as Array<{ label: string }>).map(\n              (value) => (\n                <span\n                  onClick={() =>\n                    props.handleRemove(props.selectedFilter.key, [value.label])\n                  }\n                >\n                  {value.label}\n                </span>\n              )\n            )}\n          </span>\n        )}\n        {filter?.displayType === \"multi\" && filter.displayView !== \"range\" && (\n          <span className=\"rs__filters-selected__list-item-value\">\n            {(props.selectedFilter.value as Array<string>).map((value) => (\n              <span\n                onClick={() =>\n                  props.handleRemove(props.selectedFilter.key, [value])\n                }\n              >\n                {value}\n              </span>\n            ))}\n          </span>\n        )}\n        {filter?.displayType === \"slider\" && (\n          <span className=\"rs__filters-selected__list-item-value\">\n            <span\n              onClick={() => props.handleRemove(props.selectedFilter.key, [\"\"])}\n            >\n              {`${filter.displaySliderPrefix}${\n                (props.selectedFilter.value as any)[0]\n              } to ${filter.displaySliderPrefix}${\n                (props.selectedFilter.value as any)[1]\n              }`}\n            </span>\n          </span>\n        )}\n      </label>\n    </li>\n  );\n};\n"]}
+{"version":3,"file":"ExampleFiltersSelected.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFiltersSelected.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,sBAAsB,GAA0C,CAC3E,KAAK,EACL,EAAE;IACF,OAAO,CACL,uCAAK,SAAS,EAAC,sBAAsB;QACnC,sCAAI,SAAS,EAAC,4BAA4B,IAAE,kBAAkB,CAAM;QACpE,sCAAI,SAAS,EAAC,4BAA4B,IACvC,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,CAC7C,sCACE,GAAG,EAAE,cAAc,CAAC,GAAG,EACvB,SAAS,EAAC,iCAAiC;YAE3C,yCACE,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC;gBAErD,wCAAM,SAAS,EAAC,uCAAuC;oBACpD,cAAc,CAAC,KAAK;oBACpB,IAAI,CACA;gBACP,wCAAM,SAAS,EAAC,uCAAuC,IACpD,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;AAjCW,QAAA,sBAAsB,0BAiCjC","sourcesContent":["import React from \"react\";\n\nimport { FiltersSelectedProps } from \"../../components\";\n\nexport type ExampleFiltersSelectedProps = React.ComponentProps<\n  NonNullable<FiltersSelectedProps[\"render\"]>\n>;\n\nexport const ExampleFiltersSelected: React.FC<ExampleFiltersSelectedProps> = (\n  props\n) => {\n  return (\n    <div className=\"rs__filters-selected\">\n      <h3 className=\"rs__filters-selected__name\">{\"Filters Selected\"}</h3>\n      <ul className=\"rs__filters-selected__list\">\n        {props.selectedFilters.map((selectedFilter) => (\n          <li\n            key={selectedFilter.key}\n            className=\"rs__filters-selected__list-item\"\n          >\n            <label\n              className=\"rs__filters-selected__list-item-label\"\n              onClick={() => props.handleRemove(selectedFilter.key)}\n            >\n              <span className=\"rs__filters-selected__list-item-label\">\n                {selectedFilter.label}\n                {\": \"}\n              </span>\n              <span className=\"rs__filters-selected__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/index.d.ts

@@ -17,8 +17,5 @@ export * from "./ExampleResultPaginationNextPrev";
 export * from "./ExampleSearch";
 export * from "./ExampleSortBy";
 export * from "./ExampleStats";
-export * from "./ExampleSuggestions";
-export * from "./ExampleHookUseFilters";
-export * from "./ExampleHookUseResults";
 export * from "./ExampleHookUseSearch";
 export * from "./ExampleHookUseSortBy";

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

@@ -29,9 +29,6 @@ __exportStar(require("./ExampleResultPaginationNextPrev"), exports);
 __exportStar(require("./ExampleSearch"), exports);
 __exportStar(require("./ExampleSortBy"), exports);
 __exportStar(require("./ExampleStats"), exports);
-__exportStar(require("./ExampleSuggestions"), exports);
-__exportStar(require("./ExampleHookUseFilters"), exports);
-__exportStar(require("./ExampleHookUseResults"), exports);
 __exportStar(require("./ExampleHookUseSearch"), exports);
 __exportStar(require("./ExampleHookUseSortBy"), 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,oDAAkC;AAClC,2DAAyC;AACzC,sDAAoC;AACpC,uDAAqC;AACrC,wDAAsC;AACtC,mDAAiC;AACjC,2DAAyC;AACzC,4EAA0D;AAC1D,+EAA6D;AAC7D,wEAAsD;AACtD,6DAA2C;AAC3C,6DAA2C;AAC3C,oEAAkD;AAClD,oEAAkD;AAClD,0EAAwD;AACxD,oEAAkD;AAClD,kDAAgC;AAChC,kDAAgC;AAChC,iDAA+B;AAC/B,uDAAqC;AAErC,0DAAwC;AACxC,0DAAwC;AACxC,yDAAuC;AACvC,yDAAuC","sourcesContent":["export * from \"./ExampleClearAll\";\nexport * from \"./ExampleCustomComponent\";\nexport * from \"./ExampleFilterList\";\nexport * from \"./ExampleFilterRange\";\nexport * from \"./ExampleFilterSlider\";\nexport * from \"./ExampleFilters\";\nexport * from \"./ExampleFiltersSelected\";\nexport * from \"./ExampleReactiveSearchProviderCollection\";\nexport * from \"./ExampleReactiveSearchProviderInstantSearch\";\nexport * from \"./ExampleReactiveSearchProviderSearch\";\nexport * from \"./ExampleResultCardCallout\";\nexport * from \"./ExampleResultCardProduct\";\nexport * from \"./ExampleResultPaginationNumbered\";\nexport * from \"./ExampleResultPaginationLoadMore\";\nexport * from \"./ExampleResultPaginationInfiniteScroll\";\nexport * from \"./ExampleResultPaginationNextPrev\";\nexport * from \"./ExampleSearch\";\nexport * from \"./ExampleSortBy\";\nexport * from \"./ExampleStats\";\nexport * from \"./ExampleSuggestions\";\n\nexport * from \"./ExampleHookUseFilters\";\nexport * from \"./ExampleHookUseResults\";\nexport * from \"./ExampleHookUseSearch\";\nexport * from \"./ExampleHookUseSortBy\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Example/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,oDAAkC;AAClC,2DAAyC;AACzC,sDAAoC;AACpC,uDAAqC;AACrC,wDAAsC;AACtC,mDAAiC;AACjC,2DAAyC;AACzC,4EAA0D;AAC1D,+EAA6D;AAC7D,wEAAsD;AACtD,6DAA2C;AAC3C,6DAA2C;AAC3C,oEAAkD;AAClD,oEAAkD;AAClD,0EAAwD;AACxD,oEAAkD;AAClD,kDAAgC;AAChC,kDAAgC;AAChC,iDAA+B;AAE/B,yDAAuC;AACvC,yDAAuC","sourcesContent":["export * from \"./ExampleClearAll\";\nexport * from \"./ExampleCustomComponent\";\nexport * from \"./ExampleFilterList\";\nexport * from \"./ExampleFilterRange\";\nexport * from \"./ExampleFilterSlider\";\nexport * from \"./ExampleFilters\";\nexport * from \"./ExampleFiltersSelected\";\nexport * from \"./ExampleReactiveSearchProviderCollection\";\nexport * from \"./ExampleReactiveSearchProviderInstantSearch\";\nexport * from \"./ExampleReactiveSearchProviderSearch\";\nexport * from \"./ExampleResultCardCallout\";\nexport * from \"./ExampleResultCardProduct\";\nexport * from \"./ExampleResultPaginationNumbered\";\nexport * from \"./ExampleResultPaginationLoadMore\";\nexport * from \"./ExampleResultPaginationInfiniteScroll\";\nexport * from \"./ExampleResultPaginationNextPrev\";\nexport * from \"./ExampleSearch\";\nexport * from \"./ExampleSortBy\";\nexport * from \"./ExampleStats\";\n\nexport * from \"./ExampleHookUseSearch\";\nexport * from \"./ExampleHookUseSortBy\";\n"]}

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ConfigFilterOption } from "../../types";
-import { useFilterListProps, useFilterRangeProps, useFilterSliderProps } from "../../hooks";
+import { useFilterListProps, useFilterRangeProps, useFilterSliderProps, useFilterRangeMultiProps } from "../../hooks";
 export declare type FilterProps = {
     /** The filter option being rendered */
     filter: ConfigFilterOption;
@@ -12,7 +12,7 @@ export declare type FilterProps = {
     /** Render method for Range filters */
     renderFilterRange?: React.FC<{
         filter: ConfigFilterOption;
-        filterRangeProps: ReturnType<typeof useFilterRangeProps>;
+        filterRangeProps: ReturnType<typeof useFilterRangeProps> | ReturnType<typeof useFilterRangeMultiProps>;
     }>;
     /** Render method for Slider filters */
     renderFilterSlider?: React.FC<{

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

@@ -16,9 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
-const ReactiveComponent_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/basic/ReactiveComponent"));
 const MultiList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/list/MultiList"));
 const SingleList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/list/SingleList"));
+const DynamicRangeSlider_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/range/DynamicRangeSlider"));
 const SingleRange_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/range/SingleRange"));
 const MultiRange_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/range/MultiRange"));
 const hooks_1 = require("../../hooks");
@@ -43,7 +43,7 @@ const Filter = (props) => {
     if ("range" === props.filter.displayType) {
         return react_1.default.createElement(FilterRangeSingle, Object.assign({}, props));
     }
-    console.warn(`filter with display type "${props.filter.displayType}" not yet supported`);
+    console.log(`filter with display type "${props.filter.displayType}" not yet supported`);
     return null;
 };
 exports.Filter = Filter;
@@ -64,108 +64,35 @@ const FilterRangeSingle = (props) => {
         react_1.default.createElement("div", { style: {
                 display: "none",
             } },
-            react_1.default.createElement(SingleRange_1.default, Object.assign({}, reactiveFilterRangeProps, { value: filterRangeProps.values[0], onChange: filterRangeProps.handleChange }))),
+            react_1.default.createElement(SingleRange_1.default, Object.assign({}, reactiveFilterRangeProps, { value: filterRangeProps.value, onChange: filterRangeProps.handleChange }))),
         react_1.default.createElement(RenderRangeComponent, { filterRangeProps: filterRangeProps, filter: props.filter })));
 };
 const FilterRangeMulti = (props) => {
     var _a;
     const reactiveFilterRangeProps = (0, hooks_1.useReactiveFilterRangeProps)(props.filter);
-    const filterRangeProps = (0, hooks_1.useFilterRangeProps)(props.filter);
+    const filterRangeProps = (0, hooks_1.useFilterRangeMultiProps)(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(MultiRange_1.default, Object.assign({}, reactiveFilterRangeProps, { value: filterRangeProps.values, 
-                // @note: onChange handler must be defined for controlled component to work correctly
-                onChange: () => { }, onValueChange: (values) => {
-                    if (values.length === 0) {
-                        filterRangeProps.handleClear();
-                    }
-                } }))),
+            react_1.default.createElement(MultiRange_1.default, Object.assign({}, reactiveFilterRangeProps, { value: filterRangeProps.values, onChange: filterRangeProps.handleChange }))),
         react_1.default.createElement(RenderRangeComponent, { filterRangeProps: filterRangeProps, filter: props.filter })));
 };
 const FilterSlider = (props) => {
-    const reactiveFilterSharedProps = (0, hooks_1.useReactiveFilterSharedProps)(props.filter);
-    return (react_1.default.createElement(ReactiveComponent_1.default, Object.assign({}, reactiveFilterSharedProps, { defaultQuery: () => ({
-            aggs: {
-                min: {
-                    min: {
-                        field: props.filter.field,
-                    },
-                },
-                max: {
-                    max: {
-                        field: props.filter.field,
-                    },
-                },
-            },
-        }), render: (reactivesearchFilterProps) => {
-            var _a, _b, _c, _d;
-            if (((_b = (_a = reactivesearchFilterProps === null || reactivesearchFilterProps === void 0 ? void 0 : reactivesearchFilterProps.aggregations) === null || _a === void 0 ? void 0 : _a.min) === null || _b === void 0 ? void 0 : _b.value) ===
-                ((_d = (_c = reactivesearchFilterProps === null || reactivesearchFilterProps === void 0 ? void 0 : reactivesearchFilterProps.aggregations) === null || _c === void 0 ? void 0 : _c.max) === null || _d === void 0 ? void 0 : _d.value)) {
-                return null;
-            }
-            return (react_1.default.createElement(FilterSliderInner, Object.assign({}, props, { reactivesearchFilterProps: reactivesearchFilterProps })));
-        } })));
-};
-// inner component exists only so we can use memos in reactivesearch render functions
-const FilterSliderInner = (props) => {
-    var _a, _b;
-    const { filter, renderFilterSlider, reactivesearchFilterProps } = props, otherProps = __rest(props, ["filter", "renderFilterSlider", "reactivesearchFilterProps"]);
-    const filterSliderProps = (0, hooks_1.useFilterSliderProps)(filter);
-    react_1.default.useEffect(() => {
-        if (reactivesearchFilterProps.aggregations) {
-            filterSliderProps.handleRange([
-                reactivesearchFilterProps.aggregations.min.value,
-                reactivesearchFilterProps.aggregations.max.value,
-            ]);
-        }
-    }, [
-        (_a = reactivesearchFilterProps.aggregations) === null || _a === void 0 ? void 0 : _a.min.value,
-        (_b = reactivesearchFilterProps.aggregations) === null || _b === void 0 ? void 0 : _b.max.value,
-    ]);
-    react_1.default.useEffect(() => {
-        if (filterSliderProps.value[0] === 0 && filterSliderProps.value[1] === 0) {
-            return;
-        }
-        props.reactivesearchFilterProps.setQuery({
-            query: {
-                query: {
-                    bool: {
-                        must: [
-                            {
-                                bool: {
-                                    must: [
-                                        {
-                                            match: {
-                                                published: true,
-                                            },
-                                        },
-                                        {
-                                            range: {
-                                                [props.filter.field]: {
-                                                    gte: filterSliderProps.value[0],
-                                                    lte: filterSliderProps.value[1],
-                                                    boost: 2,
-                                                },
-                                            },
-                                        },
-                                    ],
-                                },
-                            },
-                        ],
-                    },
-                },
-            },
-            value: filterSliderProps.value,
-        });
-    }, [filterSliderProps.value]);
-    if (renderFilterSlider) {
-        const Component = renderFilterSlider;
-        return (react_1.default.createElement(Component, Object.assign({ filterSliderProps: filterSliderProps, filter: filter }, otherProps)));
-    }
-    return (react_1.default.createElement(components_1.ExampleFilterSlider, Object.assign({ filterSliderProps: filterSliderProps, filter: filter }, otherProps)));
+    var _a;
+    const reactiveFilterSliderProps = (0, hooks_1.useReactiveFilterSliderProps)(props.filter);
+    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(DynamicRangeSlider_1.default, 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) => {