@usereactify/search 5.0.0-beta.9 → 5.0.0

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@usereactify/search",
     "description": "React UI library for Reactify Search",
-    "version": "5.0.0-beta.9",
+    "version": "5.0.0",
     "license": "MIT",
     "main": "dist/src/index.js",
     "types": "dist/src/index.d.ts",
@@ -12,8 +12,8 @@
     ],
     "scripts": {
         "watch": "tsc --watch",
-        "release": "standard-version --prerelease rc",
-        "release:beta": "standard-version --prerelease beta",
+        "release": "standard-version --tag-prefix rc-v",
+        "release:beta": "standard-version --tag-prefix beta-v --prerelease beta",
         "prebuild": "rimraf dist",
         "build": "tsc",
         "prettier": "prettier --write .",

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClearAll.js","sourceRoot":"","sources":["../../../../src/components/ClearAll/ClearAll.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,8DAA4D;AAE5D,iDAAmD;AAS5C,MAAM,QAAQ,GAA4B,CAAC,KAAK,EAAE,EAAE;;IACzD,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,4BAAe,CAAC;IAExD,OAAO,CACL,8BAAC,gCAAe,IACd,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,EAAE;YAC1C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;iBAClD,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC;iBACrB,MAAM,CACL,CAAC,IAAS,EAAE,EAAE;;gBACZ,OAAA,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS;qBACf,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,CAAA;oBAChB,CAAC,CAAC,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,KAAK,CAAA,CAAC,CAAA;aAAA,CAClD,CAAC;YAEJ,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;gBAC3B,OAAO,IAAI,CAAC;aACb;YAED,OAAO,8BAAC,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\";\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/ClearAll/index.d.ts

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

package/dist/src/components/{ReactifySearchBase → ClearAll}/index.js

@@ -10,5 +10,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ReactifySearchBase"), exports);
+__exportStar(require("./ClearAll"), exports);
 //# sourceMappingURL=index.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleCustomComponent = void 0;
+const React = __importStar(require("react"));
+const components_1 = require("../../components");
+const ExampleCustomComponent = () => {
+    return (React.createElement(components_1.ReactifySearchProvider, { mode: "search", shopifyPermanentDomain: "reactify-apps.myshopify.com", additionalComponentHandles: ["SensorSpecialProduct"] },
+        React.createElement(components_1.CustomComponent, { componentId: "SensorSpecialProduct", customQuery: () => ({
+                query: {
+                    match: {
+                        product_type: "Special Product",
+                    },
+                },
+            }) })));
+};
+exports.ExampleCustomComponent = ExampleCustomComponent;
+//# sourceMappingURL=ExampleCustomComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleCustomComponent.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleCustomComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,iDAA2E;AAEpE,MAAM,sBAAsB,GAAa,GAAG,EAAE;IACnD,OAAO,CACL,oBAAC,mCAAsB,IACrB,IAAI,EAAC,QAAQ,EACb,sBAAsB,EAAC,6BAA6B,EACpD,0BAA0B,EAAE,CAAC,sBAAsB,CAAC;QAEpD,oBAAC,4BAAe,IACd,WAAW,EAAC,sBAAsB,EAClC,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC;gBAClB,KAAK,EAAE;oBACL,KAAK,EAAE;wBACL,YAAY,EAAE,iBAAiB;qBAChC;iBACF;aACF,CAAC,GACF,CACqB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,sBAAsB,0BAmBjC","sourcesContent":["import * as React from \"react\";\n\nimport { ReactifySearchProvider, CustomComponent } from \"../../components\";\n\nexport const ExampleCustomComponent: React.FC = () => {\n  return (\n    <ReactifySearchProvider\n      mode=\"search\"\n      shopifyPermanentDomain=\"reactify-apps.myshopify.com\"\n      additionalComponentHandles={[\"SensorSpecialProduct\"]}\n    >\n      <CustomComponent\n        componentId=\"SensorSpecialProduct\"\n        customQuery={() => ({\n          query: {\n            match: {\n              product_type: \"Special Product\",\n            },\n          },\n        })}\n      />\n    </ReactifySearchProvider>\n  );\n};\n"]}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleFilterRange.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFilterRange.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,6GAAqF;AAQ9E,MAAM,kBAAkB,GAAsC,CACnE,KAAK,EACL,EAAE;IACF,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,OAAO,EAAE;QACnC,OAAO,CACL;YACE,sCAAI,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAM;YACzD,8BAAC,qBAAW,kBACV,IAAI,EAAE;oBACJ,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE;oBACnC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE;oBAC9C,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE;iBAC9C,IACG,KAAK,CAAC,wBAAwB,EAClC,CACD,CACJ,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AApBW,QAAA,kBAAkB,sBAoB7B","sourcesContent":["import React from \"react\";\nimport SingleRange from \"@appbaseio/reactivesearch/lib/components/range/SingleRange\";\n\nimport { FilterProps } from \"../../components\";\n\nexport type ExampleFilterRangeProps = React.ComponentProps<\n  NonNullable<FilterProps[\"renderFilterRange\"]>\n>;\n\nexport const ExampleFilterRange: React.FC<ExampleFilterRangeProps> = (\n  props\n) => {\n  if (props.filter.handle === \"price\") {\n    return (\n      <>\n        <h3 className=\"rs__filter__name\">{props.filter.name}</h3>\n        <SingleRange\n          data={[\n            { start: \"0\", label: \"All prices\" },\n            { start: \"0\", end: \"99\", label: \"Under $100\" },\n            { start: \"0\", end: \"49\", label: \"Under $50\" },\n          ]}\n          {...props.reactiveFilterRangeProps}\n        />\n      </>\n    );\n  }\n\n  return null;\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

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

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

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+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/{ExampleFilterStack.js → ExampleFilters.js}

@@ -3,11 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExampleFilterStack = void 0;
+exports.ExampleFilters = void 0;
 const react_1 = __importDefault(require("react"));
 const components_1 = require("../../components");
-const ExampleFilterStack = (props) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null, props.filters.map((filter) => (react_1.default.createElement(components_1.Filter, Object.assign({ key: filter.id, filter: filter }, props))))));
+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.ExampleFilterStack = ExampleFilterStack;
-//# sourceMappingURL=ExampleFilterStack.js.map
+exports.ExampleFilters = ExampleFilters;
+//# sourceMappingURL=ExampleFilters.js.map

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

@@ -0,0 +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"]}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleHookUseFilters = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const components_1 = require("../../components");
+const ExampleHookUseFilters = () => {
+    var _a;
+    const filtersHook = (0, hooks_1.useFilters)();
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("h1", null, "Filters"), (_a = filtersHook.filters) === null || _a === void 0 ? void 0 :
+        _a.map((filter) => (react_1.default.createElement("div", null,
+            react_1.default.createElement("h3", null, filter.name),
+            react_1.default.createElement(components_1.Filter, { key: filter.id, filter: filter }))))));
+};
+exports.ExampleHookUseFilters = ExampleHookUseFilters;
+//# sourceMappingURL=ExampleHookUseFilters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleHookUseFilters.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleHookUseFilters.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,uCAAyC;AACzC,iDAA0C;AAEnC,MAAM,qBAAqB,GAAa,GAAG,EAAE;;IAClD,MAAM,WAAW,GAAG,IAAA,kBAAU,GAAE,CAAC;IAEjC,OAAO,CACL;QACE,0CAAK,SAAS,CAAM,EACnB,MAAA,WAAW,CAAC,OAAO;WAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACpC;YACE,0CAAK,MAAM,CAAC,IAAI,CAAM;YACtB,8BAAC,mBAAM,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CACtC,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,qBAAqB,yBAchC","sourcesContent":["import React from \"react\";\n\nimport { useFilters } from \"../../hooks\";\nimport { Filter } from \"../../components\";\n\nexport const ExampleHookUseFilters: React.FC = () => {\n  const filtersHook = useFilters();\n\n  return (\n    <div>\n      <h1>{\"Filters\"}</h1>\n      {filtersHook.filters?.map((filter) => (\n        <div>\n          <h3>{filter.name}</h3>\n          <Filter key={filter.id} filter={filter} />\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleHookUseSearch = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const ExampleHookUseSearch = () => {
+    const searchHook = (0, hooks_1.useSearch)();
+    const handleFormSubmit = react_1.default.useCallback((event) => {
+        event.preventDefault();
+        searchHook.submitSearchTerm();
+    }, [searchHook.submitSearchTerm]);
+    const handleInputChange = react_1.default.useCallback((event) => {
+        searchHook.setSearchTerm(event.target.value);
+    }, [searchHook.setSearchTerm]);
+    return (react_1.default.createElement("form", { onSubmit: handleFormSubmit },
+        react_1.default.createElement("input", { type: "text", value: searchHook.searchTerm, onChange: handleInputChange })));
+};
+exports.ExampleHookUseSearch = ExampleHookUseSearch;
+//# sourceMappingURL=ExampleHookUseSearch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleHookUseSearch.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleHookUseSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,uCAAwC;AAEjC,MAAM,oBAAoB,GAAa,GAAG,EAAE;IACjD,MAAM,UAAU,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE/B,MAAM,gBAAgB,GAAG,eAAK,CAAC,WAAW,CACxC,CAAC,KAAuC,EAAE,EAAE;QAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,UAAU,CAAC,gBAAgB,EAAE,CAAC;IAChC,CAAC,EACD,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAC9B,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAK,CAAC,WAAW,CACzC,CAAC,KAA0C,EAAE,EAAE;QAC7C,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,UAAU,CAAC,aAAa,CAAC,CAC3B,CAAC;IAEF,OAAO,CACL,wCAAM,QAAQ,EAAE,gBAAgB;QAC9B,yCACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,UAAU,CAAC,UAAU,EAC5B,QAAQ,EAAE,iBAAiB,GAC3B,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,oBAAoB,wBA2B/B","sourcesContent":["import React from \"react\";\n\nimport { useSearch } from \"../../hooks\";\n\nexport const ExampleHookUseSearch: React.FC = () => {\n  const searchHook = useSearch();\n\n  const handleFormSubmit = React.useCallback(\n    (event: React.FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      searchHook.submitSearchTerm();\n    },\n    [searchHook.submitSearchTerm]\n  );\n\n  const handleInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      searchHook.setSearchTerm(event.target.value);\n    },\n    [searchHook.setSearchTerm]\n  );\n\n  return (\n    <form onSubmit={handleFormSubmit}>\n      <input\n        type=\"text\"\n        value={searchHook.searchTerm}\n        onChange={handleInputChange}\n      />\n    </form>\n  );\n};\n"]}

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

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