@usereactify/search 5.26.1 → 5.26.5

package/CHANGELOG.md

@@ -2,7 +2,28 @@
 
 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)
+### [5.26.5](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.26.4...release-v5.26.5) (2023-08-09)
+
+
+### Bug Fixes
+
+* bump lockfile ([949edd7](https://bitbucket.org/usereactify/reactify-search-ui/commit/949edd710fa1bfba38f2fbe96091da74589af9bc))
+
+### [5.26.4](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.26.3...release-v5.26.4) (2023-08-09)
+
+
+### Bug Fixes
+
+* add inventory sensor to instant search, disable callouts for instant search ([1cbf550](https://bitbucket.org/usereactify/reactify-search-ui/commit/1cbf550b83b59aea8df2f081e3027403b8451a6c))
+
+### [5.26.3](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.26.2...release-v5.26.3) (2023-08-09)
+
+
+### Bug Fixes
+
+* use filter group when mode is instant-search ([0d5cb86](https://bitbucket.org/usereactify/reactify-search-ui/commit/0d5cb86766257387060b4c7515b660908464906f))
+
+### [5.26.2](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.26.1...release-v5.26.2) (2023-08-09)
 
 
 ### Bug Fixes

package/dist/package.json

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

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

@@ -7,11 +7,13 @@ 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;
-    return (react_1.default.createElement(SelectedFilters_1.default, { render: ({ selectedValues, clearValues }) => {
-            const selectedFilters = Object.values(selectedValues)
+    const filtersHook = (0, hooks_1.useFilters)();
+    return (react_1.default.createElement(SelectedFilters_1.default, { render: (renderProps) => {
+            const selectedFilters = Object.values(renderProps.selectedValues)
                 .map((value) => value)
                 .filter((item) => {
                 var _a, _b;
@@ -19,10 +21,36 @@ 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: clearValues });
+            return react_1.default.createElement(RenderComponent, { clearAll: handleClearAll });
         } }));
 };
 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;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"]}
+{"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"]}

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

@@ -10,7 +10,9 @@ 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: "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: "multi" === props.filterRangeProps.filter.displayType
+                        ? "checkbox"
+                        : "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,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"]}
+{"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"]}

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

@@ -5,16 +5,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleFilterSlider = void 0;
 const react_1 = __importDefault(require("react"));
-const DynamicRangeSlider_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/range/DynamicRangeSlider"));
-const hooks_1 = require("../../hooks");
+const react_slider_1 = __importDefault(require("react-slider"));
 const ExampleFilterSlider = (props) => {
-    const reactiveFilterSliderProps = (0, hooks_1.useReactiveFilterSliderProps)(props.filter);
+    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)" });
     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(DynamicRangeSlider_1.default, Object.assign({}, reactiveFilterSliderProps, { value: () => props.filterSliderProps.value, onChange: (value) => props.filterSliderProps.handleChange({
-                start: value[0],
-                end: value[1],
-            }) }))));
+        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))) })))));
 };
 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,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"]}
+{"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"]}

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

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

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

@@ -5,10 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleFilters = void 0;
 const react_1 = __importDefault(require("react"));
-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 })))));
+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 })));
 };
 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;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"]}
+{"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"]}

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

@@ -5,19 +5,33 @@ 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("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))))))));
+        react_1.default.createElement("ul", { className: "rs__filters-selected__list" }, props.selectedFilters.map((selectedFilter) => (react_1.default.createElement(ExampleFiltersSelectedItem, { selectedFilter: selectedFilter, handleRemove: props.handleRemove }))))));
 };
 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":";;;;;;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"]}
+{"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"]}

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ExampleHookUseResults: React.FC;

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleHookUseResults = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const types_1 = require("../../types");
+const ExampleHookUseResults = () => {
+    const resultsHook = (0, hooks_1.useResults)();
+    const collections = resultsHook.results
+        .map((result) => {
+        if (result.type === types_1.ElasticDocumentType.Product) {
+            return result.collections;
+        }
+        return [];
+    })
+        .flat()
+        .filter((item, index, self) => self.findIndex((itemNested) => (itemNested === null || itemNested === void 0 ? void 0 : itemNested.id) === (item === null || item === void 0 ? void 0 : item.id)) === index);
+    return (react_1.default.createElement("ul", null, collections.map((collection) => (react_1.default.createElement("li", null,
+        react_1.default.createElement("a", { href: `/collections/${collection === null || collection === void 0 ? void 0 : collection.handle}` }, collection === null || collection === void 0 ? void 0 : collection.title))))));
+};
+exports.ExampleHookUseResults = ExampleHookUseResults;
+//# sourceMappingURL=ExampleHookUseResults.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleHookUseResults.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleHookUseResults.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,uCAAyC;AACzC,uCAAkD;AAE3C,MAAM,qBAAqB,GAAa,GAAG,EAAE;IAClD,MAAM,WAAW,GAAG,IAAA,kBAAU,GAAE,CAAC;IAEjC,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO;SACpC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACd,IAAI,MAAM,CAAC,IAAI,KAAK,2BAAmB,CAAC,OAAO,EAAE;YAC/C,OAAO,MAAM,CAAC,WAAW,CAAC;SAC3B;QAED,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;SACD,IAAI,EAAE;SACN,MAAM,CACL,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,CACpB,IAAI,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,EAAE,OAAK,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,EAAE,CAAA,CAAC,KAAK,KAAK,CACxE,CAAC;IAEJ,OAAO,CACL,0CACG,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAC/B;QACE,qCAAG,IAAI,EAAE,gBAAgB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,EAAE,IAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAK,CACnE,CACN,CAAC,CACC,CACN,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,qBAAqB,yBA0BhC","sourcesContent":["import React from \"react\";\n\nimport { useResults } from \"../../hooks\";\nimport { ElasticDocumentType } from \"../../types\";\n\nexport const ExampleHookUseResults: React.FC = () => {\n  const resultsHook = useResults();\n\n  const collections = resultsHook.results\n    .map((result) => {\n      if (result.type === ElasticDocumentType.Product) {\n        return result.collections;\n      }\n\n      return [];\n    })\n    .flat()\n    .filter(\n      (item, index, self) =>\n        self.findIndex((itemNested) => itemNested?.id === item?.id) === index\n    );\n\n  return (\n    <ul>\n      {collections.map((collection) => (\n        <li>\n          <a href={`/collections/${collection?.handle}`}>{collection?.title}</a>\n        </li>\n      ))}\n    </ul>\n  );\n};\n"]}

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { SuggestionsProps } from "../../components";
+export declare type ExampleSuggestionsProps = React.ComponentProps<NonNullable<SuggestionsProps["render"]>>;
+export declare const ExampleSuggestions: React.FC<ExampleSuggestionsProps>;

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleSuggestions = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const ExampleSuggestions = (props) => {
+    const { setSearchTerm } = (0, hooks_1.useSearch)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("h3", null, "Suggestions"),
+        react_1.default.createElement("ul", null, props.suggestions.map((suggestion) => (react_1.default.createElement("li", { onClick: () => setSearchTerm(suggestion.text) }, suggestion.text))))));
+};
+exports.ExampleSuggestions = ExampleSuggestions;
+//# sourceMappingURL=ExampleSuggestions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleSuggestions.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleSuggestions.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,uCAAwC;AAMjC,MAAM,kBAAkB,GAAsC,CACnE,KAAK,EACL,EAAE;IACF,MAAM,EAAE,aAAa,EAAE,GAAG,IAAA,iBAAS,GAAE,CAAC;IAEtC,OAAO,CACL;QACE,wDAAoB;QACpB,0CACG,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACrC,sCAAI,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,IAC9C,UAAU,CAAC,IAAI,CACb,CACN,CAAC,CACC,CACJ,CACJ,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,kBAAkB,sBAiB7B","sourcesContent":["import React from \"react\";\n\nimport { SuggestionsProps } from \"../../components\";\nimport { useSearch } from \"../../hooks\";\n\nexport type ExampleSuggestionsProps = React.ComponentProps<\n  NonNullable<SuggestionsProps[\"render\"]>\n>;\n\nexport const ExampleSuggestions: React.FC<ExampleSuggestionsProps> = (\n  props\n) => {\n  const { setSearchTerm } = useSearch();\n\n  return (\n    <>\n      <h3>Suggestions</h3>\n      <ul>\n        {props.suggestions.map((suggestion) => (\n          <li onClick={() => setSearchTerm(suggestion.text)}>\n            {suggestion.text}\n          </li>\n        ))}\n      </ul>\n    </>\n  );\n};\n"]}

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

@@ -17,5 +17,8 @@ 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,6 +29,9 @@ __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;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"]}
+{"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"]}

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, useFilterRangeMultiProps } from "../../hooks";
+import { useFilterListProps, useFilterRangeProps, useFilterSliderProps } 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> | ReturnType<typeof useFilterRangeMultiProps>;
+        filterRangeProps: ReturnType<typeof useFilterRangeProps>;
     }>;
     /** Render method for Slider filters */
     renderFilterSlider?: React.FC<{