@usereactify/search 5.0.0-beta.9 → 5.1.0-beta.0

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleHookUseSortBy = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const ExampleHookUseSortBy = () => {
+    var _a;
+    const sortByHook = (0, hooks_1.useSortBy)();
+    const handleSelectChange = react_1.default.useCallback((event) => {
+        sortByHook.setSortOption(event.target.value);
+    }, [sortByHook.setSortOption]);
+    return (react_1.default.createElement("select", { value: (_a = sortByHook.sortOption) === null || _a === void 0 ? void 0 : _a.handle, onChange: handleSelectChange }, sortByHook.sortOptions.map((sortOption) => (react_1.default.createElement("option", { key: sortOption.handle, value: sortOption.handle }, sortOption.name)))));
+};
+exports.ExampleHookUseSortBy = ExampleHookUseSortBy;
+//# sourceMappingURL=ExampleHookUseSortBy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleHookUseSortBy.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleHookUseSortBy.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,uCAAwC;AAEjC,MAAM,oBAAoB,GAAa,GAAG,EAAE;;IACjD,MAAM,UAAU,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE/B,MAAM,kBAAkB,GAAG,eAAK,CAAC,WAAW,CAC1C,CAAC,KAA2C,EAAE,EAAE;QAC9C,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,0CAAQ,KAAK,EAAE,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,IACvE,UAAU,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAC1C,0CAAQ,GAAG,EAAE,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,MAAM,IACrD,UAAU,CAAC,IAAI,CACT,CACV,CAAC,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,oBAAoB,wBAmB/B","sourcesContent":["import React from \"react\";\n\nimport { useSortBy } from \"../../hooks\";\n\nexport const ExampleHookUseSortBy: React.FC = () => {\n  const sortByHook = useSortBy();\n\n  const handleSelectChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) => {\n      sortByHook.setSortOption(event.target.value);\n    },\n    [sortByHook.setSortOption]\n  );\n\n  return (\n    <select value={sortByHook.sortOption?.handle} onChange={handleSelectChange}>\n      {sortByHook.sortOptions.map((sortOption) => (\n        <option key={sortOption.handle} value={sortOption.handle}>\n          {sortOption.name}\n        </option>\n      ))}\n    </select>\n  );\n};\n"]}

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleReactiveSearchProviderCollection = void 0;
+const react_1 = __importDefault(require("react"));
+const components_1 = require("../../components");
+const ExampleReactiveSearchProviderCollection = () => (react_1.default.createElement(components_1.ReactifySearchProvider, { mode: "collection", shopifyPermanentDomain: "reactify-apps.myshopify.com", collectionHandle: "example-collection" }, "..."));
+exports.ExampleReactiveSearchProviderCollection = ExampleReactiveSearchProviderCollection;
+//# sourceMappingURL=ExampleReactiveSearchProviderCollection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleReactiveSearchProviderCollection.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleReactiveSearchProviderCollection.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA0D;AAEnD,MAAM,uCAAuC,GAAa,GAAG,EAAE,CAAC,CACrE,8BAAC,mCAAsB,IACrB,IAAI,EAAC,YAAY,EACjB,sBAAsB,EAAC,6BAA6B,EACpD,gBAAgB,EAAC,oBAAoB,UAGd,CAC1B,CAAC;AARW,QAAA,uCAAuC,2CAQlD","sourcesContent":["import React from \"react\";\n\nimport { ReactifySearchProvider } from \"../../components\";\n\nexport const ExampleReactiveSearchProviderCollection: React.FC = () => (\n  <ReactifySearchProvider\n    mode=\"collection\"\n    shopifyPermanentDomain=\"reactify-apps.myshopify.com\"\n    collectionHandle=\"example-collection\"\n  >\n    ...\n  </ReactifySearchProvider>\n);\n"]}

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleReactiveSearchProviderInstantSearch = void 0;
+const react_1 = __importDefault(require("react"));
+const components_1 = require("../../components");
+const ExampleReactiveSearchProviderInstantSearch = () => (react_1.default.createElement(components_1.ReactifySearchProvider, { mode: "instant-search", shopifyPermanentDomain: "reactify-apps.myshopify.com" }, "..."));
+exports.ExampleReactiveSearchProviderInstantSearch = ExampleReactiveSearchProviderInstantSearch;
+//# sourceMappingURL=ExampleReactiveSearchProviderInstantSearch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleReactiveSearchProviderInstantSearch.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleReactiveSearchProviderInstantSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA0D;AAEnD,MAAM,0CAA0C,GAAa,GAAG,EAAE,CAAC,CACxE,8BAAC,mCAAsB,IACrB,IAAI,EAAC,gBAAgB,EACrB,sBAAsB,EAAC,6BAA6B,UAG7B,CAC1B,CAAC;AAPW,QAAA,0CAA0C,8CAOrD","sourcesContent":["import React from \"react\";\n\nimport { ReactifySearchProvider } from \"../../components\";\n\nexport const ExampleReactiveSearchProviderInstantSearch: React.FC = () => (\n  <ReactifySearchProvider\n    mode=\"instant-search\"\n    shopifyPermanentDomain=\"reactify-apps.myshopify.com\"\n  >\n    ...\n  </ReactifySearchProvider>\n);\n"]}

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleReactiveSearchProviderSearch = void 0;
+const react_1 = __importDefault(require("react"));
+const components_1 = require("../../components");
+const ExampleReactiveSearchProviderSearch = () => (react_1.default.createElement(components_1.ReactifySearchProvider, { mode: "search", shopifyPermanentDomain: "reactify-apps.myshopify.com" }, "..."));
+exports.ExampleReactiveSearchProviderSearch = ExampleReactiveSearchProviderSearch;
+//# sourceMappingURL=ExampleReactiveSearchProviderSearch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleReactiveSearchProviderSearch.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleReactiveSearchProviderSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA0D;AAEnD,MAAM,mCAAmC,GAAa,GAAG,EAAE,CAAC,CACjE,8BAAC,mCAAsB,IACrB,IAAI,EAAC,QAAQ,EACb,sBAAsB,EAAC,6BAA6B,UAG7B,CAC1B,CAAC;AAPW,QAAA,mCAAmC,uCAO9C","sourcesContent":["import React from \"react\";\n\nimport { ReactifySearchProvider } from \"../../components\";\n\nexport const ExampleReactiveSearchProviderSearch: React.FC = () => (\n  <ReactifySearchProvider\n    mode=\"search\"\n    shopifyPermanentDomain=\"reactify-apps.myshopify.com\"\n  >\n    ...\n  </ReactifySearchProvider>\n);\n"]}

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

@@ -13,7 +13,7 @@ const ExampleResultCardCallout = (props) => {
             gridColumn: `span ${(_b = props.callout.displayColumns) !== null && _b !== void 0 ? _b : 1}`,
         });
     }, [props.callout]);
-    return (react_1.default.createElement("div", { className: "rs__result-card-callout__wrapper", ref: props.itemRef, style: styleProp },
+    return (react_1.default.createElement("div", { className: "rs__result-card-callout", ref: props.itemRef, style: styleProp },
         react_1.default.createElement("a", { className: "rs__result-card-callout__link", href: props.callout.link, onClick: props.handleClick },
             props.callout.desktopImage && (react_1.default.createElement("img", { className: "rs__result-card-callout__image", src: props.callout.desktopImage, width: "100%" })),
             react_1.default.createElement("span", { className: "rs__result-card-callout__title" }, props.callout.title))));

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleResultCardCallout.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleResultCardCallout.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,wBAAwB,GACnC,CAAC,KAAK,EAAE,EAAE;IACR,MAAM,SAAS,GAAG,eAAK,CAAC,OAAO,CAC7B,GAAG,EAAE;;QAAC,OAAA,CAAC;YACL,OAAO,EAAE,QAAQ,MAAA,KAAK,CAAC,OAAO,CAAC,WAAW,mCAAI,CAAC,EAAE;YACjD,UAAU,EAAE,QAAQ,MAAA,KAAK,CAAC,OAAO,CAAC,cAAc,mCAAI,CAAC,EAAE;SACxD,CAAC,CAAA;KAAA,EACF,CAAC,KAAK,CAAC,OAAO,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,uCACE,SAAS,EAAC,kCAAkC,EAC5C,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,KAAK,EAAE,SAAS;QAEhB,qCACE,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EACxB,OAAO,EAAE,KAAK,CAAC,WAAW;YAEzB,KAAK,CAAC,OAAO,CAAC,YAAY,IAAI,CAC7B,uCACE,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAC/B,KAAK,EAAC,MAAM,GACZ,CACH;YACD,wCAAM,SAAS,EAAC,gCAAgC,IAC7C,KAAK,CAAC,OAAO,CAAC,KAAK,CACf,CACL,CACA,CACP,CAAC;AACJ,CAAC,CAAC;AAlCS,QAAA,wBAAwB,4BAkCjC","sourcesContent":["import React from \"react\";\n\nimport { ResultCardCalloutProps } from \"../../components\";\n\nexport type ExampleResultCardCalloutProps = React.ComponentProps<\n  NonNullable<ResultCardCalloutProps[\"render\"]>\n>;\n\nexport const ExampleResultCardCallout: React.FC<ExampleResultCardCalloutProps> =\n  (props) => {\n    const styleProp = React.useMemo<React.HTMLAttributes<HTMLElement>[\"style\"]>(\n      () => ({\n        gridRow: `span ${props.callout.displayRows ?? 1}`,\n        gridColumn: `span ${props.callout.displayColumns ?? 1}`,\n      }),\n      [props.callout]\n    );\n\n    return (\n      <div\n        className=\"rs__result-card-callout__wrapper\"\n        ref={props.itemRef}\n        style={styleProp}\n      >\n        <a\n          className=\"rs__result-card-callout__link\"\n          href={props.callout.link}\n          onClick={props.handleClick}\n        >\n          {props.callout.desktopImage && (\n            <img\n              className=\"rs__result-card-callout__image\"\n              src={props.callout.desktopImage}\n              width=\"100%\"\n            />\n          )}\n          <span className=\"rs__result-card-callout__title\">\n            {props.callout.title}\n          </span>\n        </a>\n      </div>\n    );\n  };\n"]}
+{"version":3,"file":"ExampleResultCardCallout.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleResultCardCallout.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,wBAAwB,GACnC,CAAC,KAAK,EAAE,EAAE;IACR,MAAM,SAAS,GAAG,eAAK,CAAC,OAAO,CAC7B,GAAG,EAAE;;QAAC,OAAA,CAAC;YACL,OAAO,EAAE,QAAQ,MAAA,KAAK,CAAC,OAAO,CAAC,WAAW,mCAAI,CAAC,EAAE;YACjD,UAAU,EAAE,QAAQ,MAAA,KAAK,CAAC,OAAO,CAAC,cAAc,mCAAI,CAAC,EAAE;SACxD,CAAC,CAAA;KAAA,EACF,CAAC,KAAK,CAAC,OAAO,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,uCACE,SAAS,EAAC,yBAAyB,EACnC,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,KAAK,EAAE,SAAS;QAEhB,qCACE,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EACxB,OAAO,EAAE,KAAK,CAAC,WAAW;YAEzB,KAAK,CAAC,OAAO,CAAC,YAAY,IAAI,CAC7B,uCACE,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAC/B,KAAK,EAAC,MAAM,GACZ,CACH;YACD,wCAAM,SAAS,EAAC,gCAAgC,IAC7C,KAAK,CAAC,OAAO,CAAC,KAAK,CACf,CACL,CACA,CACP,CAAC;AACJ,CAAC,CAAC;AAlCS,QAAA,wBAAwB,4BAkCjC","sourcesContent":["import React from \"react\";\n\nimport { ResultCardCalloutProps } from \"../../components\";\n\nexport type ExampleResultCardCalloutProps = React.ComponentProps<\n  NonNullable<ResultCardCalloutProps[\"render\"]>\n>;\n\nexport const ExampleResultCardCallout: React.FC<ExampleResultCardCalloutProps> =\n  (props) => {\n    const styleProp = React.useMemo<React.HTMLAttributes<HTMLElement>[\"style\"]>(\n      () => ({\n        gridRow: `span ${props.callout.displayRows ?? 1}`,\n        gridColumn: `span ${props.callout.displayColumns ?? 1}`,\n      }),\n      [props.callout]\n    );\n\n    return (\n      <div\n        className=\"rs__result-card-callout\"\n        ref={props.itemRef}\n        style={styleProp}\n      >\n        <a\n          className=\"rs__result-card-callout__link\"\n          href={props.callout.link}\n          onClick={props.handleClick}\n        >\n          {props.callout.desktopImage && (\n            <img\n              className=\"rs__result-card-callout__image\"\n              src={props.callout.desktopImage}\n              width=\"100%\"\n            />\n          )}\n          <span className=\"rs__result-card-callout__title\">\n            {props.callout.title}\n          </span>\n        </a>\n      </div>\n    );\n  };\n"]}

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExampleResultCardProduct = void 0;
 const react_1 = __importDefault(require("react"));
 const ExampleResultCardProduct = (props) => {
-    return (react_1.default.createElement("div", { ref: props.itemRef, className: "rs__result-card-product__wrapper" },
+    return (react_1.default.createElement("div", { ref: props.itemRef, className: "rs__result-card-product" },
         react_1.default.createElement("a", { className: "rs__result-card-product__link", onClick: props.handleClick, href: `/products/${props.product.handle}` },
             props.product.image && (react_1.default.createElement("img", { className: "rs__result-card-product__image", src: props.product.image, width: "100%" })),
             react_1.default.createElement("span", { className: "rs__result-card-product__title" }, props.product.title)),

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleResultCardProduct.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleResultCardProduct.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,wBAAwB,GACnC,CAAC,KAAK,EAAE,EAAE;IACR,OAAO,CACL,uCAAK,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAC,kCAAkC;QACnE,qCACE,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,KAAK,CAAC,WAAW,EAC1B,IAAI,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;YAExC,KAAK,CAAC,OAAO,CAAC,KAAK,IAAI,CACtB,uCACE,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EACxB,KAAK,EAAC,MAAM,GACZ,CACH;YACD,wCAAM,SAAS,EAAC,gCAAgC,IAC7C,KAAK,CAAC,OAAO,CAAC,KAAK,CACf,CACL;QACJ,wCAAM,SAAS,EAAC,gCAAgC,IAC7C,KAAK,CAAC,cAAc,CAChB;QACN,KAAK,CAAC,MAAM,IAAI,CACf,wCACE,SAAS,EAAC,qCAAqC,EAC/C,KAAK,EAAE;gBACL,cAAc,EAAE,cAAc;aAC/B,IAEA,KAAK,CAAC,uBAAuB,CACzB,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAnCS,QAAA,wBAAwB,4BAmCjC","sourcesContent":["import React from \"react\";\n\nimport { ResultCardProductProps } from \"../../components\";\n\nexport type ExampleResultCardProductProps = React.ComponentProps<\n  NonNullable<ResultCardProductProps[\"render\"]>\n>;\n\nexport const ExampleResultCardProduct: React.FC<ExampleResultCardProductProps> =\n  (props) => {\n    return (\n      <div ref={props.itemRef} className=\"rs__result-card-product__wrapper\">\n        <a\n          className=\"rs__result-card-product__link\"\n          onClick={props.handleClick}\n          href={`/products/${props.product.handle}`}\n        >\n          {props.product.image && (\n            <img\n              className=\"rs__result-card-product__image\"\n              src={props.product.image}\n              width=\"100%\"\n            />\n          )}\n          <span className=\"rs__result-card-product__title\">\n            {props.product.title}\n          </span>\n        </a>\n        <span className=\"rs__result-card-product__price\">\n          {props.formattedPrice}\n        </span>\n        {props.onSale && (\n          <span\n            className=\"rs__result-card-product__price-sale\"\n            style={{\n              textDecoration: \"line-through\",\n            }}\n          >\n            {props.formattedCompareAtPrice}\n          </span>\n        )}\n      </div>\n    );\n  };\n"]}
+{"version":3,"file":"ExampleResultCardProduct.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleResultCardProduct.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,wBAAwB,GACnC,CAAC,KAAK,EAAE,EAAE;IACR,OAAO,CACL,uCAAK,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAC,yBAAyB;QAC1D,qCACE,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,KAAK,CAAC,WAAW,EAC1B,IAAI,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;YAExC,KAAK,CAAC,OAAO,CAAC,KAAK,IAAI,CACtB,uCACE,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EACxB,KAAK,EAAC,MAAM,GACZ,CACH;YACD,wCAAM,SAAS,EAAC,gCAAgC,IAC7C,KAAK,CAAC,OAAO,CAAC,KAAK,CACf,CACL;QACJ,wCAAM,SAAS,EAAC,gCAAgC,IAC7C,KAAK,CAAC,cAAc,CAChB;QACN,KAAK,CAAC,MAAM,IAAI,CACf,wCACE,SAAS,EAAC,qCAAqC,EAC/C,KAAK,EAAE;gBACL,cAAc,EAAE,cAAc;aAC/B,IAEA,KAAK,CAAC,uBAAuB,CACzB,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAnCS,QAAA,wBAAwB,4BAmCjC","sourcesContent":["import React from \"react\";\n\nimport { ResultCardProductProps } from \"../../components\";\n\nexport type ExampleResultCardProductProps = React.ComponentProps<\n  NonNullable<ResultCardProductProps[\"render\"]>\n>;\n\nexport const ExampleResultCardProduct: React.FC<ExampleResultCardProductProps> =\n  (props) => {\n    return (\n      <div ref={props.itemRef} className=\"rs__result-card-product\">\n        <a\n          className=\"rs__result-card-product__link\"\n          onClick={props.handleClick}\n          href={`/products/${props.product.handle}`}\n        >\n          {props.product.image && (\n            <img\n              className=\"rs__result-card-product__image\"\n              src={props.product.image}\n              width=\"100%\"\n            />\n          )}\n          <span className=\"rs__result-card-product__title\">\n            {props.product.title}\n          </span>\n        </a>\n        <span className=\"rs__result-card-product__price\">\n          {props.formattedPrice}\n        </span>\n        {props.onSale && (\n          <span\n            className=\"rs__result-card-product__price-sale\"\n            style={{\n              textDecoration: \"line-through\",\n            }}\n          >\n            {props.formattedCompareAtPrice}\n          </span>\n        )}\n      </div>\n    );\n  };\n"]}

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

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

package/dist/src/components/Example/ExampleResults.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.Component = void 0;
+const react_1 = __importDefault(require("react"));
+const components_1 = require("../../components");
+const ExampleResultCardProduct_1 = require("./ExampleResultCardProduct");
+const ExampleResultCardCallout_1 = require("./ExampleResultCardCallout");
+const ExampleResultPaginationNumbered_1 = require("./ExampleResultPaginationNumbered");
+const ExampleResultPaginationLoadMore_1 = require("./ExampleResultPaginationLoadMore");
+const ExampleResultPaginationNextPrev_1 = require("./ExampleResultPaginationNextPrev");
+const Component = () => {
+    return (react_1.default.createElement(components_1.Results, { listStyle: {
+            display: "grid",
+            gap: "10px",
+            gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
+        }, renderResultCardProduct: ExampleResultCardProduct_1.ExampleResultCardProduct, renderResultCardCallout: ExampleResultCardCallout_1.ExampleResultCardCallout, renderPaginationNumbered: ExampleResultPaginationNumbered_1.ExampleResultPaginationNumbered, renderPaginationLoadMore: ExampleResultPaginationLoadMore_1.ExampleResultPaginationLoadMore, renderPaginationNextPrev: ExampleResultPaginationNextPrev_1.ExampleResultPaginationNextPrev }));
+};
+exports.Component = Component;
+//# sourceMappingURL=ExampleResults.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleResults.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleResults.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA2C;AAE3C,yEAAsE;AACtE,yEAAsE;AACtE,uFAAoF;AACpF,uFAAoF;AACpF,uFAAoF;AAE7E,MAAM,SAAS,GAAa,GAAG,EAAE;IACtC,OAAO,CACL,8BAAC,oBAAO,IACN,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,GAAG,EAAE,MAAM;YACX,mBAAmB,EAAE,2BAA2B;SACjD,EACD,uBAAuB,EAAE,mDAAwB,EACjD,uBAAuB,EAAE,mDAAwB,EACjD,wBAAwB,EAAE,iEAA+B,EACzD,wBAAwB,EAAE,iEAA+B,EACzD,wBAAwB,EAAE,iEAA+B,GACzD,CACH,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,SAAS,aAepB","sourcesContent":["import React from \"react\";\n\nimport { Results } from \"../../components\";\n\nimport { ExampleResultCardProduct } from \"./ExampleResultCardProduct\";\nimport { ExampleResultCardCallout } from \"./ExampleResultCardCallout\";\nimport { ExampleResultPaginationNumbered } from \"./ExampleResultPaginationNumbered\";\nimport { ExampleResultPaginationLoadMore } from \"./ExampleResultPaginationLoadMore\";\nimport { ExampleResultPaginationNextPrev } from \"./ExampleResultPaginationNextPrev\";\n\nexport const Component: React.FC = () => {\n  return (\n    <Results\n      listStyle={{\n        display: \"grid\",\n        gap: \"10px\",\n        gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\",\n      }}\n      renderResultCardProduct={ExampleResultCardProduct}\n      renderResultCardCallout={ExampleResultCardCallout}\n      renderPaginationNumbered={ExampleResultPaginationNumbered}\n      renderPaginationLoadMore={ExampleResultPaginationLoadMore}\n      renderPaginationNextPrev={ExampleResultPaginationNextPrev}\n    />\n  );\n};\n"]}

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

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

package/dist/src/components/Example/ExampleSearch.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.ExampleSearch = void 0;
+const react_1 = __importDefault(require("react"));
+const ExampleSearch = (props) => {
+    const handleFormSubmit = react_1.default.useCallback((event) => {
+        event.preventDefault();
+        props.submitSearchTerm();
+    }, [props.submitSearchTerm]);
+    const handleInputChange = react_1.default.useCallback((event) => {
+        props.setSearchTerm(event.target.value);
+    }, [props.setSearchTerm]);
+    return (react_1.default.createElement("form", { onSubmit: handleFormSubmit },
+        react_1.default.createElement("input", { type: "text", placeholder: "Search terms...", value: props.searchTerm, onChange: handleInputChange })));
+};
+exports.ExampleSearch = ExampleSearch;
+//# sourceMappingURL=ExampleSearch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleSearch.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,aAAa,GAAiC,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,gBAAgB,GAAG,eAAK,CAAC,WAAW,CACxC,CAAC,KAAuC,EAAE,EAAE;QAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,gBAAgB,EAAE,CAAC;IAC3B,CAAC,EACD,CAAC,KAAK,CAAC,gBAAgB,CAAC,CACzB,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAK,CAAC,WAAW,CACzC,CAAC,KAA0C,EAAE,EAAE;QAC7C,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,EACD,CAAC,KAAK,CAAC,aAAa,CAAC,CACtB,CAAC;IAEF,OAAO,CACL,wCAAM,QAAQ,EAAE,gBAAgB;QAC9B,yCACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,iBAAiB,EAC7B,KAAK,EAAE,KAAK,CAAC,UAAU,EACvB,QAAQ,EAAE,iBAAiB,GAC3B,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,aAAa,iBA0BxB","sourcesContent":["import React from \"react\";\n\nimport { SearchProps } from \"../../components\";\n\nexport type ExampleSearchProps = React.ComponentProps<\n  NonNullable<SearchProps[\"render\"]>\n>;\n\nexport const ExampleSearch: React.FC<ExampleSearchProps> = (props) => {\n  const handleFormSubmit = React.useCallback(\n    (event: React.FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      props.submitSearchTerm();\n    },\n    [props.submitSearchTerm]\n  );\n\n  const handleInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      props.setSearchTerm(event.target.value);\n    },\n    [props.setSearchTerm]\n  );\n\n  return (\n    <form onSubmit={handleFormSubmit}>\n      <input\n        type=\"text\"\n        placeholder=\"Search terms...\"\n        value={props.searchTerm}\n        onChange={handleInputChange}\n      />\n    </form>\n  );\n};\n"]}

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

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

package/dist/src/components/Example/{ExampleSortby.js → ExampleSortBy.js}

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExampleSortby = void 0;
+exports.ExampleSortBy = void 0;
 const react_1 = __importDefault(require("react"));
-const ExampleSortby = (props) => {
+const ExampleSortBy = (props) => {
     var _a;
     return (react_1.default.createElement("select", { className: "rs__sortby__select", value: (_a = props.sortOption) === null || _a === void 0 ? void 0 : _a.handle, onChange: (event) => props.setSortOption(event.target.value) }, props.sortOptions.map((sortOption) => (react_1.default.createElement("option", { key: sortOption.handle, className: "rs__sortby__option", value: sortOption.handle }, sortOption.name)))));
 };
-exports.ExampleSortby = ExampleSortby;
-//# sourceMappingURL=ExampleSortby.js.map
+exports.ExampleSortBy = ExampleSortBy;
+//# sourceMappingURL=ExampleSortBy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleSortBy.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleSortBy.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,aAAa,GAAiC,CAAC,KAAK,EAAE,EAAE;;IACnE,OAAO,CACL,0CACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,MAAM,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAE3D,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACrC,0CACE,GAAG,EAAE,UAAU,CAAC,MAAM,EACtB,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,UAAU,CAAC,MAAM,IAEvB,UAAU,CAAC,IAAI,CACT,CACV,CAAC,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,aAAa,iBAkBxB","sourcesContent":["import React from \"react\";\n\nimport { SortByProps } from \"../../components\";\n\nexport type ExampleSortByProps = React.ComponentProps<\n  NonNullable<SortByProps[\"render\"]>\n>;\n\nexport const ExampleSortBy: React.FC<ExampleSortByProps> = (props) => {\n  return (\n    <select\n      className=\"rs__sortby__select\"\n      value={props.sortOption?.handle}\n      onChange={(event) => props.setSortOption(event.target.value)}\n    >\n      {props.sortOptions.map((sortOption) => (\n        <option\n          key={sortOption.handle}\n          className=\"rs__sortby__option\"\n          value={sortOption.handle}\n        >\n          {sortOption.name}\n        </option>\n      ))}\n    </select>\n  );\n};\n"]}

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

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

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

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

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

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

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

@@ -1,10 +1,20 @@
+export * from "./ExampleClearAll";
+export * from "./ExampleCustomComponent";
 export * from "./ExampleFilterList";
 export * from "./ExampleFilterRange";
 export * from "./ExampleFilterSlider";
-export * from "./ExampleFilterStack";
+export * from "./ExampleFilters";
+export * from "./ExampleFiltersActive";
+export * from "./ExampleReactiveSearchProviderCollection";
+export * from "./ExampleReactiveSearchProviderInstantSearch";
+export * from "./ExampleReactiveSearchProviderSearch";
 export * from "./ExampleResultCardCallout";
 export * from "./ExampleResultCardProduct";
 export * from "./ExampleResultPaginationNumbered";
 export * from "./ExampleResultPaginationLoadMore";
 export * from "./ExampleResultPaginationNextPrev";
-export * from "./ExampleSortby";
+export * from "./ExampleSearch";
+export * from "./ExampleSortBy";
+export * from "./ExampleStats";
+export * from "./ExampleHookUseSearch";
+export * from "./ExampleHookUseSortBy";

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

@@ -10,14 +10,24 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ExampleClearAll"), exports);
+__exportStar(require("./ExampleCustomComponent"), exports);
 __exportStar(require("./ExampleFilterList"), exports);
 __exportStar(require("./ExampleFilterRange"), exports);
 __exportStar(require("./ExampleFilterSlider"), exports);
-__exportStar(require("./ExampleFilterStack"), exports);
+__exportStar(require("./ExampleFilters"), exports);
+__exportStar(require("./ExampleFiltersActive"), exports);
+__exportStar(require("./ExampleReactiveSearchProviderCollection"), exports);
+__exportStar(require("./ExampleReactiveSearchProviderInstantSearch"), exports);
+__exportStar(require("./ExampleReactiveSearchProviderSearch"), exports);
 __exportStar(require("./ExampleResultCardCallout"), exports);
 __exportStar(require("./ExampleResultCardProduct"), exports);
 __exportStar(require("./ExampleResultPaginationNumbered"), exports);
 __exportStar(require("./ExampleResultPaginationLoadMore"), exports);
 __exportStar(require("./ExampleResultPaginationNextPrev"), exports);
-__exportStar(require("./ExampleSortby"), exports);
+__exportStar(require("./ExampleSearch"), exports);
+__exportStar(require("./ExampleSortBy"), exports);
+__exportStar(require("./ExampleStats"), 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,sDAAoC;AACpC,uDAAqC;AACrC,wDAAsC;AACtC,uDAAqC;AACrC,6DAA0C;AAC1C,6DAA2C;AAC3C,oEAAkD;AAClD,oEAAkD;AAClD,oEAAkD;AAClD,kDAAgC","sourcesContent":["export * from \"./ExampleFilterList\";\nexport * from \"./ExampleFilterRange\";\nexport * from \"./ExampleFilterSlider\";\nexport * from \"./ExampleFilterStack\";\nexport * from \"./ExampleResultCardCallout\"\nexport * from \"./ExampleResultCardProduct\";\nexport * from \"./ExampleResultPaginationNumbered\";\nexport * from \"./ExampleResultPaginationLoadMore\";\nexport * from \"./ExampleResultPaginationNextPrev\";\nexport * from \"./ExampleSortby\";"]}
+{"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,yDAAuC;AACvC,4EAA0D;AAC1D,+EAA6D;AAC7D,wEAAsD;AACtD,6DAA2C;AAC3C,6DAA2C;AAC3C,oEAAkD;AAClD,oEAAkD;AAClD,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 \"./ExampleFiltersActive\";\nexport * from \"./ExampleReactiveSearchProviderCollection\";\nexport * from \"./ExampleReactiveSearchProviderInstantSearch\";\nexport * from \"./ExampleReactiveSearchProviderSearch\";\nexport * from \"./ExampleResultCardCallout\";\nexport * from \"./ExampleResultCardProduct\";\nexport * from \"./ExampleResultPaginationNumbered\";\nexport * from \"./ExampleResultPaginationLoadMore\";\nexport * from \"./ExampleResultPaginationNextPrev\";\nexport * from \"./ExampleSearch\";\nexport * from \"./ExampleSortBy\";\nexport * from \"./ExampleStats\";\n\nexport * from \"./ExampleHookUseSearch\";\nexport * from \"./ExampleHookUseSortBy\";\n"]}

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

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

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

@@ -20,18 +20,19 @@ const MultiList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/compo
 const SingleList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/list/SingleList"));
 const hooks_1 = require("../../hooks");
 const components_1 = require("../../components");
+const reactivesearch_1 = require("@appbaseio/reactivesearch");
 const Filter = (props) => {
     if ("single" === props.filter.displayType) {
-        return (react_1.default.createElement(FilterSingleList, Object.assign({}, props)));
+        return react_1.default.createElement(FilterSingleList, Object.assign({}, props));
     }
     if ("multi" === props.filter.displayType) {
-        return (react_1.default.createElement(FilterMultiList, Object.assign({}, props)));
+        return react_1.default.createElement(FilterMultiList, Object.assign({}, props));
     }
     if ("range" === props.filter.displayType) {
-        return (react_1.default.createElement(FilterRange, Object.assign({}, props)));
+        return react_1.default.createElement(FilterRange, Object.assign({}, props));
     }
     if ("slider" === props.filter.displayType) {
-        return (react_1.default.createElement(FilterSlider, Object.assign({}, props)));
+        return react_1.default.createElement(FilterSlider, Object.assign({}, props));
     }
     console.log(`filter with display type "${props.filter.displayType}" not yet supported`);
     return null;
@@ -46,45 +47,44 @@ const FilterMultiList = (props) => {
     return (react_1.default.createElement(MultiList_1.default, Object.assign({}, reactiveFilterListProps, { render: (reactivesearchFilterProps) => (react_1.default.createElement(FilterListInner, Object.assign({}, props, { reactivesearchFilterProps: reactivesearchFilterProps }))) })));
 };
 const FilterRange = (props) => {
+    var _a;
     const reactiveFilterRangeProps = (0, hooks_1.useReactiveFilterRangeProps)(props.filter);
-    if (props.renderFilterRange) {
-        const Component = props.renderFilterRange;
-        return (react_1.default.createElement(Component, Object.assign({}, props, { reactiveFilterRangeProps: reactiveFilterRangeProps })));
-    }
-    return null;
+    const filterRangeProps = (0, hooks_1.useFilterRangeProps)(props.filter);
+    const RenderRangeComponent = (_a = props.renderFilterRange) !== null && _a !== void 0 ? _a : components_1.ExampleFilterRange;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: {
+                display: "none",
+            } },
+            react_1.default.createElement(reactivesearch_1.SingleRange, Object.assign({}, reactiveFilterRangeProps, { value: filterRangeProps.value, onChange: filterRangeProps.handleChange }))),
+        react_1.default.createElement(RenderRangeComponent, { filterRangeProps: filterRangeProps, filter: props.filter })));
 };
 const FilterSlider = (props) => {
+    var _a;
     const reactiveFilterSliderProps = (0, hooks_1.useReactiveFilterSliderProps)(props.filter);
-    if (props.renderFilterSlider) {
-        const Component = props.renderFilterSlider;
-        return (react_1.default.createElement(Component, Object.assign({}, props, { reactiveFilterSliderProps: reactiveFilterSliderProps })));
-    }
-    return null;
+    const filterSliderProps = (0, hooks_1.useFilterSliderProps)(props.filter);
+    const RenderSliderComponent = (_a = props.renderFilterSlider) !== null && _a !== void 0 ? _a : components_1.ExampleFilterSlider;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        props.renderFilterSlider ? (react_1.default.createElement("div", { style: {
+                display: "none",
+            } },
+            react_1.default.createElement(reactivesearch_1.DynamicRangeSlider, Object.assign({}, reactiveFilterSliderProps, { value: () => filterSliderProps.value, onChange: (value) => filterSliderProps.handleChange({
+                    start: value[0],
+                    end: value[1],
+                }) })))) : null,
+        react_1.default.createElement(RenderSliderComponent, { filterSliderProps: filterSliderProps, filter: props.filter })));
 };
 // inner component exists only so we can use memos in reactivesearch render functions
 const FilterListInner = (props) => {
     const { filter, renderFilterList, reactivesearchFilterProps } = props, otherProps = __rest(props, ["filter", "renderFilterList", "reactivesearchFilterProps"]);
-    const { track } = (0, hooks_1.useAnalytics)();
-    const _a = (0, hooks_1.useFilterListProps)(filter, reactivesearchFilterProps), { handleChange } = _a, filterListProps = __rest(_a, ["handleChange"]);
-    const handleFilterChange = react_1.default.useCallback((value) => {
-        handleChange(value);
-        track({
-            eventName: "filterChange",
-            payload: {
-                name: filter.name,
-                value: value,
-            },
-        });
-    }, [filterListProps]);
-    const updatedFilterListProps = Object.assign(Object.assign({}, filterListProps), { handleChange: handleFilterChange });
+    const filterListProps = (0, hooks_1.useFilterListProps)(filter, reactivesearchFilterProps);
     // hide entire filter when no options available
     if (0 === filterListProps.options.length) {
         return null;
     }
     if (renderFilterList) {
         const Component = renderFilterList;
-        return (react_1.default.createElement(Component, Object.assign({ filterListProps: updatedFilterListProps, filter: filter }, otherProps)));
+        return (react_1.default.createElement(Component, Object.assign({ filterListProps: filterListProps, filter: filter }, otherProps)));
     }
-    return (react_1.default.createElement(components_1.ExampleFilterList, Object.assign({ filterListProps: updatedFilterListProps, filter: filter }, otherProps)));
+    return (react_1.default.createElement(components_1.ExampleFilterList, Object.assign({ filterListProps: filterListProps, filter: filter }, otherProps)));
 };
 //# sourceMappingURL=Filter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport MultiList from \"@appbaseio/reactivesearch/lib/components/list/MultiList\";\nimport SingleList from \"@appbaseio/reactivesearch/lib/components/list/SingleList\";\n\nimport type { ConfigFilterOption, ReactivesearchFilterProps } from \"../../types\";\nimport { useAnalytics, useFilterListProps, useReactiveFilterListProps, useReactiveFilterRangeProps, useReactiveFilterSliderProps } from \"../../hooks\";\nimport { ExampleFilterList } from \"../../components\";\n\n\nexport type FilterProps = {\n  /** The filter option being rendered */\n  filter: ConfigFilterOption;\n  /** Render method for List filters */\n  renderFilterList?: React.FC<Omit<FilterProps, \"renderFilterList\"> & {\n    filterListProps: ReturnType<typeof useFilterListProps>;\n  }>;\n  /** Render method for Range filters */\n  renderFilterRange?: React.FC<Omit<FilterProps, \"renderFilterRange\"> & {\n    reactiveFilterRangeProps: ReturnType<typeof useReactiveFilterRangeProps>;\n  }>;\n  /** Render method for Slider filters */\n  renderFilterSlider?: React.FC<Omit<FilterProps, \"renderFilterSlider\"> & {\n    reactiveFilterSliderProps: ReturnType<typeof useReactiveFilterSliderProps>;\n  }>;\n};\n\nexport const Filter: React.FC<FilterProps> = (props) => {\n  if (\"single\" === props.filter.displayType) {\n    return (\n      <FilterSingleList {...props} />\n    )\n  }\n\n  if (\"multi\" === props.filter.displayType) {\n    return (\n      <FilterMultiList {...props} />\n    )\n  }\n\n  if (\"range\" === props.filter.displayType) {\n    return (\n      <FilterRange {...props} />\n    )\n  }\n\n  if (\"slider\" === props.filter.displayType) {\n    return (\n      <FilterSlider {...props} />\n    )\n  }\n\n  console.log(\n    `filter with display type \"${props.filter.displayType}\" not yet supported`\n  );\n\n  return null;\n};\n\nconst FilterSingleList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <SingleList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n}\n\nconst FilterMultiList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <MultiList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n}\n\nconst FilterRange: React.FC<FilterProps> = (props) => {\n  const reactiveFilterRangeProps = useReactiveFilterRangeProps(props.filter);\n\n  if (props.renderFilterRange) {\n    const Component = props.renderFilterRange;\n\n    return (\n      <Component\n        {...props}\n        reactiveFilterRangeProps={reactiveFilterRangeProps}\n      />\n    )\n  }\n  \n  return null;\n}\n\nconst FilterSlider: React.FC<FilterProps> = (props) => {\n  const reactiveFilterSliderProps = useReactiveFilterSliderProps(props.filter);\n\n  if (props.renderFilterSlider) {\n    const Component = props.renderFilterSlider;\n\n    return (\n      <Component\n        {...props}\n        reactiveFilterSliderProps={reactiveFilterSliderProps}\n      />\n    )\n  }\n\n  return null;\n}\n\n// inner component exists only so we can use memos in reactivesearch render functions\nconst FilterListInner: React.FC<\n  FilterProps & { reactivesearchFilterProps: ReactivesearchFilterProps }\n> = (props) => {\n  const {\n    filter,\n    renderFilterList,\n    reactivesearchFilterProps,\n    ...otherProps\n  } = props;\n\n  const { track } = useAnalytics();\n\n  const { handleChange, ...filterListProps } = useFilterListProps(\n    filter,\n    reactivesearchFilterProps\n  );\n\n  const handleFilterChange = React.useCallback(\n    (value: string) => {\n      handleChange(value);\n      track({\n        eventName: \"filterChange\",\n        payload: {\n          name: filter.name,\n          value: value,\n        },\n      });\n    },\n    [filterListProps]\n  );\n\n  const updatedFilterListProps = {\n    ...filterListProps,\n    handleChange: handleFilterChange,\n  };\n\n  // hide entire filter when no options available\n  if (0 === filterListProps.options.length) {\n    return null;\n  }\n\n  if (renderFilterList) {\n    const Component = renderFilterList;\n    return (\n      <Component\n        filterListProps={updatedFilterListProps}\n        filter={filter}\n        {...otherProps}\n      />\n    );\n  }\n\n  return (\n    <ExampleFilterList\n      filterListProps={updatedFilterListProps}\n      filter={filter}\n      {...otherProps}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport MultiList from \"@appbaseio/reactivesearch/lib/components/list/MultiList\";\nimport SingleList from \"@appbaseio/reactivesearch/lib/components/list/SingleList\";\n\nimport type {\n  ConfigFilterOption,\n  ReactivesearchFilterListProps,\n} from \"../../types\";\nimport {\n  useFilterListProps,\n  useFilterRangeProps,\n  useFilterSliderProps,\n  useReactiveFilterListProps,\n  useReactiveFilterRangeProps,\n  useReactiveFilterSliderProps,\n} from \"../../hooks\";\nimport {\n  ExampleFilterList,\n  ExampleFilterRange,\n  ExampleFilterSlider,\n} from \"../../components\";\nimport { DynamicRangeSlider, SingleRange } from \"@appbaseio/reactivesearch\";\n\nexport type FilterProps = {\n  /** The filter option being rendered */\n  filter: ConfigFilterOption;\n  /** Render method for List filters */\n  renderFilterList?: React.FC<{\n    filter: ConfigFilterOption;\n    filterListProps: ReturnType<typeof useFilterListProps>;\n  }>;\n  /** Render method for Range filters */\n  renderFilterRange?: React.FC<{\n    filter: ConfigFilterOption;\n    filterRangeProps: ReturnType<typeof useFilterRangeProps>;\n  }>;\n  /** Render method for Slider filters */\n  renderFilterSlider?: React.FC<{\n    filter: ConfigFilterOption;\n    filterSliderProps: ReturnType<typeof useFilterSliderProps>;\n  }>;\n};\n\nexport const Filter: React.FC<FilterProps> = (props) => {\n  if (\"single\" === props.filter.displayType) {\n    return <FilterSingleList {...props} />;\n  }\n\n  if (\"multi\" === props.filter.displayType) {\n    return <FilterMultiList {...props} />;\n  }\n\n  if (\"range\" === props.filter.displayType) {\n    return <FilterRange {...props} />;\n  }\n\n  if (\"slider\" === props.filter.displayType) {\n    return <FilterSlider {...props} />;\n  }\n\n  console.log(\n    `filter with display type \"${props.filter.displayType}\" not yet supported`\n  );\n\n  return null;\n};\n\nconst FilterSingleList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <SingleList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterListProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n};\n\nconst FilterMultiList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <MultiList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterListProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n};\n\nconst FilterRange: React.FC<FilterProps> = (props) => {\n  const reactiveFilterRangeProps = useReactiveFilterRangeProps(props.filter);\n\n  const filterRangeProps = useFilterRangeProps(props.filter);\n\n  const RenderRangeComponent = props.renderFilterRange ?? ExampleFilterRange;\n\n  return (\n    <>\n      <div\n        style={{\n          display: \"none\",\n        }}\n      >\n        <SingleRange\n          {...reactiveFilterRangeProps}\n          value={filterRangeProps.value}\n          onChange={filterRangeProps.handleChange}\n        />\n      </div>\n      <RenderRangeComponent\n        filterRangeProps={filterRangeProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\nconst FilterSlider: React.FC<FilterProps> = (props) => {\n  const reactiveFilterSliderProps = useReactiveFilterSliderProps(props.filter);\n\n  const filterSliderProps = useFilterSliderProps(props.filter);\n\n  const RenderSliderComponent = props.renderFilterSlider ?? ExampleFilterSlider;\n\n  return (\n    <>\n      {props.renderFilterSlider ? (\n        <div\n          style={{\n            display: \"none\",\n          }}\n        >\n          <DynamicRangeSlider\n            {...reactiveFilterSliderProps}\n            value={() => filterSliderProps.value}\n            onChange={(value) =>\n              filterSliderProps.handleChange({\n                start: value[0],\n                end: value[1],\n              })\n            }\n          />\n        </div>\n      ) : null}\n      <RenderSliderComponent\n        filterSliderProps={filterSliderProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\n// inner component exists only so we can use memos in reactivesearch render functions\nconst FilterListInner: React.FC<\n  FilterProps & { reactivesearchFilterProps: ReactivesearchFilterListProps }\n> = (props) => {\n  const { filter, renderFilterList, reactivesearchFilterProps, ...otherProps } =\n    props;\n\n  const filterListProps = useFilterListProps(filter, reactivesearchFilterProps);\n\n  // hide entire filter when no options available\n  if (0 === filterListProps.options.length) {\n    return null;\n  }\n\n  if (renderFilterList) {\n    const Component = renderFilterList;\n    return (\n      <Component\n        filterListProps={filterListProps}\n        filter={filter}\n        {...otherProps}\n      />\n    );\n  }\n\n  return (\n    <ExampleFilterList\n      filterListProps={filterListProps}\n      filter={filter}\n      {...otherProps}\n    />\n  );\n};\n"]}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { useFilters } from "../../hooks";
+export declare type FiltersProps = {
+    /** Render method called once for all filters */
+    render?: React.FC<ReturnType<typeof useFilters>>;
+};
+export declare const Filters: React.FC<FiltersProps>;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filters = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const components_1 = require("../../components");
+const Filters = (props) => {
+    var _a;
+    const filterStackHook = (0, hooks_1.useFilters)();
+    const RenderComponent = (_a = props.render) !== null && _a !== void 0 ? _a : components_1.ExampleFilters;
+    return react_1.default.createElement(RenderComponent, Object.assign({}, filterStackHook));
+};
+exports.Filters = Filters;
+//# sourceMappingURL=Filters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.js","sourceRoot":"","sources":["../../../../src/components/Filter/Filters.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,uCAAyC;AACzC,iDAAkD;AAO3C,MAAM,OAAO,GAA2B,CAAC,KAAK,EAAE,EAAE;;IACvD,MAAM,eAAe,GAAG,IAAA,kBAAU,GAAE,CAAC;IAErC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,2BAAc,CAAC;IAEvD,OAAO,8BAAC,eAAe,oBAAK,eAAe,EAAI,CAAC;AAClD,CAAC,CAAC;AANW,QAAA,OAAO,WAMlB","sourcesContent":["import React from \"react\";\n\nimport { useFilters } from \"../../hooks\";\nimport { ExampleFilters } from \"../../components\";\n\nexport type FiltersProps = {\n  /** Render method called once for all filters */\n  render?: React.FC<ReturnType<typeof useFilters>>;\n};\n\nexport const Filters: React.FC<FiltersProps> = (props) => {\n  const filterStackHook = useFilters();\n\n  const RenderComponent = props.render ?? ExampleFilters;\n\n  return <RenderComponent {...filterStackHook} />;\n};\n"]}

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

@@ -0,0 +1,16 @@
+import React from "react";
+export declare type FiltersActiveProps = {
+    /** Render method called once for all active filters */
+    render?: React.FC<{
+        selectedFilters: Array<{
+            key: string;
+            label: string;
+            value: Array<string> | string | {
+                start: number;
+                end: number;
+            };
+        }>;
+        handleRemove: (filterKey: string) => void;
+    }>;
+};
+export declare const FiltersActive: React.FC<FiltersActiveProps>;