@usereactify/search 5.26.1 → 5.26.5

package/dist/src/hooks/useFilterRangeProps.js

@@ -3,56 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFilterRangeMultiProps = exports.useFilterRangeProps = void 0;
+exports.useFilterRangeProps = void 0;
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../hooks");
 const utility_1 = require("../utility");
 const useFilterRangeProps = (filter) => {
     const { track } = (0, hooks_1.useAnalytics)();
-    const [filterValue, setFilterValue] = react_1.default.useState("");
-    const handleChange = react_1.default.useCallback((key) => {
-        utility_1.debug.breadcrumb({
-            category: "filter",
-            message: "filter option changed",
-            data: {
-                filter: filter.name,
-                field: filter.field,
-                value: key,
-            },
-        });
-        utility_1.debug.log("useFilterRangeProps", "handleChange[key]", key);
-        setFilterValue(key);
-        track({
-            eventName: "filterChange",
-            payload: {
-                name: filter.name,
-                value: key,
-            },
-        });
-    }, [filter]);
-    const filterRangeProps = react_1.default.useMemo(() => {
-        var _a, _b;
-        const options = (_b = (_a = filter.displayRangeOptions) === null || _a === void 0 ? void 0 : _a.map((option) => {
-            const [key] = option.split(":");
-            return {
-                key: key,
-                label: filter.settingsUppercase ? key.toUpperCase() : key,
-                checked: filterValue === key,
-            };
-        })) !== null && _b !== void 0 ? _b : [];
-        return {
-            handleChange,
-            filter,
-            value: filterValue,
-            options,
-        };
-    }, [filter, filterValue, handleChange]);
-    return filterRangeProps;
-};
-exports.useFilterRangeProps = useFilterRangeProps;
-const useFilterRangeMultiProps = (filter) => {
-    const { track } = (0, hooks_1.useAnalytics)();
-    const [filterValues, setFilterValues] = react_1.default.useState([""]);
+    const [filterValues, setFilterValues] = react_1.default.useState([]);
     const handleChange = react_1.default.useCallback((key) => {
         utility_1.debug.breadcrumb({
             category: "filter",
@@ -64,7 +21,15 @@ const useFilterRangeMultiProps = (filter) => {
             },
         });
         utility_1.debug.log("useFilterRangeMultiProps", "handleChange[key]", key);
-        setFilterValues([...filterValues, key]);
+        if (filter.displayType === "multi") {
+            const selected = filterValues.find((item) => item === key)
+                ? filterValues.filter((value) => value !== key)
+                : [...filterValues, key];
+            setFilterValues(selected);
+        }
+        if (filter.displayType === "single") {
+            setFilterValues([key]);
+        }
         track({
             eventName: "filterChange",
             payload: {
@@ -73,6 +38,29 @@ const useFilterRangeMultiProps = (filter) => {
             },
         });
     }, [filter, filterValues]);
+    const handleClear = react_1.default.useCallback(() => {
+        setFilterValues([]);
+    }, []);
+    react_1.default.useEffect(() => {
+        var _a;
+        try {
+            if (filter.displayView === "range") {
+                const url = new URL(window.location.href);
+                const value = JSON.parse((_a = url.searchParams.get(filter.handle)) !== null && _a !== void 0 ? _a : "[]");
+                setFilterValues(value);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }, []);
+    react_1.default.useEffect(() => {
+        const handler = (event) => {
+            setFilterValues(event.detail.value);
+        };
+        window.addEventListener(`@usereactify/search:filter:${filter.handle}:update`, handler);
+        return () => window.removeEventListener(`@usereactify/search:filter:${filter.handle}:update`, handler);
+    }, []);
     const filterRangeProps = react_1.default.useMemo(() => {
         var _a, _b;
         const options = (_b = (_a = filter.displayRangeOptions) === null || _a === void 0 ? void 0 : _a.map((option) => {
@@ -85,6 +73,7 @@ const useFilterRangeMultiProps = (filter) => {
         })) !== null && _b !== void 0 ? _b : [];
         return {
             handleChange,
+            handleClear,
             filter,
             values: filterValues,
             options,
@@ -92,5 +81,5 @@ const useFilterRangeMultiProps = (filter) => {
     }, [filter, filterValues, handleChange]);
     return filterRangeProps;
 };
-exports.useFilterRangeMultiProps = useFilterRangeMultiProps;
+exports.useFilterRangeProps = useFilterRangeProps;
 //# sourceMappingURL=useFilterRangeProps.js.map

package/dist/src/hooks/useFilterRangeProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFilterRangeProps.js","sourceRoot":"","sources":["../../../src/hooks/useFilterRangeProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport { ConfigFilterOption } from \"../types/config\";\nimport { useAnalytics } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const useFilterRangeProps = (\n  filter: ConfigFilterOption\n): {\n  filter: ConfigFilterOption;\n  options: Array<{\n    key: string;\n    label: string;\n    checked: boolean;\n  }>;\n  value: string;\n  handleChange: (key: string) => void;\n} => {\n  const { track } = useAnalytics();\n  const [filterValue, setFilterValue] = React.useState<string>(\"\");\n\n  const handleChange = React.useCallback(\n    (key: string) => {\n      debug.breadcrumb({\n        category: \"filter\",\n        message: \"filter option changed\",\n        data: {\n          filter: filter.name,\n          field: filter.field,\n          value: key,\n        },\n      });\n\n      debug.log(\"useFilterRangeProps\", \"handleChange[key]\", key);\n\n      setFilterValue(key);\n\n      track({\n        eventName: \"filterChange\",\n        payload: {\n          name: filter.name,\n          value: key,\n        },\n      });\n    },\n    [filter]\n  );\n\n  const filterRangeProps = React.useMemo(() => {\n    const options =\n      filter.displayRangeOptions?.map((option) => {\n        const [key] = option.split(\":\");\n        return {\n          key: key,\n          label: filter.settingsUppercase ? key.toUpperCase() : key,\n          checked: filterValue === key,\n        };\n      }) ?? [];\n\n    return {\n      handleChange,\n      filter,\n      value: filterValue,\n      options,\n    };\n  }, [filter, filterValue, handleChange]);\n\n  return filterRangeProps;\n};\n\nexport const useFilterRangeMultiProps = (\n  filter: ConfigFilterOption\n): {\n  filter: ConfigFilterOption;\n  options: Array<{\n    key: string;\n    label: string;\n    checked: boolean;\n  }>;\n  values: string[];\n  handleChange: (key: string) => void;\n} => {\n  const { track } = useAnalytics();\n  const [filterValues, setFilterValues] = React.useState<string[]>([\"\"]);\n\n  const handleChange = React.useCallback(\n    (key: string) => {\n      debug.breadcrumb({\n        category: \"filter\",\n        message: \"filter option changed\",\n        data: {\n          filter: filter.name,\n          field: filter.field,\n          value: key,\n        },\n      });\n\n      debug.log(\"useFilterRangeMultiProps\", \"handleChange[key]\", key);\n\n      setFilterValues([...filterValues, key]);\n\n      track({\n        eventName: \"filterChange\",\n        payload: {\n          name: filter.name,\n          value: key,\n        },\n      });\n    },\n    [filter, filterValues]\n  );\n\n  const filterRangeProps = React.useMemo(() => {\n    const options =\n      filter.displayRangeOptions?.map((option) => {\n        const [key] = option.split(\":\");\n        return {\n          key: key,\n          label: filter.settingsUppercase ? key.toUpperCase() : key,\n          checked: filterValues.includes(key),\n        };\n      }) ?? [];\n\n    return {\n      handleChange,\n      filter,\n      values: filterValues,\n      options,\n    };\n  }, [filter, filterValues, handleChange]);\n\n  return filterRangeProps;\n};\n"]}
+{"version":3,"file":"useFilterRangeProps.js","sourceRoot":"","sources":["../../../src/hooks/useFilterRangeProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport { ConfigFilterOption } from \"../types/config\";\nimport { useAnalytics } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const useFilterRangeProps = (\n  filter: ConfigFilterOption\n): {\n  filter: ConfigFilterOption;\n  options: Array<{\n    key: string;\n    label: string;\n    checked: boolean;\n  }>;\n  values: string[];\n  handleChange: (key: string) => void;\n  handleClear: () => void;\n} => {\n  const { track } = useAnalytics();\n  const [filterValues, setFilterValues] = React.useState<string[]>([]);\n\n  const handleChange = React.useCallback(\n    (key: string) => {\n      debug.breadcrumb({\n        category: \"filter\",\n        message: \"filter option changed\",\n        data: {\n          filter: filter.name,\n          field: filter.field,\n          value: key,\n        },\n      });\n\n      debug.log(\"useFilterRangeMultiProps\", \"handleChange[key]\", key);\n\n      if (filter.displayType === \"multi\") {\n        const selected = filterValues.find((item: string) => item === key)\n          ? filterValues.filter((value) => value !== key)\n          : [...filterValues, key];\n\n        setFilterValues(selected);\n      }\n      if (filter.displayType === \"single\") {\n        setFilterValues([key]);\n      }\n\n      track({\n        eventName: \"filterChange\",\n        payload: {\n          name: filter.name,\n          value: key,\n        },\n      });\n    },\n    [filter, filterValues]\n  );\n\n  const handleClear = React.useCallback(() => {\n    setFilterValues([]);\n  }, []);\n\n  React.useEffect(() => {\n    try {\n      if (filter.displayView === \"range\") {\n        const url = new URL(window.location.href);\n        const value = JSON.parse(url.searchParams.get(filter.handle) ?? \"[]\");\n        setFilterValues(value);\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }, []);\n\n  React.useEffect(() => {\n    const handler = (\n      event: CustomEvent<{ handle: string; value: Array<string> }>\n    ) => {\n      setFilterValues(event.detail.value);\n    };\n    window.addEventListener(\n      `@usereactify/search:filter:${filter.handle}:update`,\n      handler as EventListener\n    );\n\n    return () =>\n      window.removeEventListener(\n        `@usereactify/search:filter:${filter.handle}:update`,\n        handler as EventListener\n      );\n  }, []);\n\n  const filterRangeProps = React.useMemo(() => {\n    const options =\n      filter.displayRangeOptions?.map((option) => {\n        const [key] = option.split(\":\");\n        return {\n          key: key,\n          label: filter.settingsUppercase ? key.toUpperCase() : key,\n          checked: filterValues.includes(key),\n        };\n      }) ?? [];\n\n    return {\n      handleChange,\n      handleClear,\n      filter,\n      values: filterValues,\n      options,\n    };\n  }, [filter, filterValues, handleChange]);\n\n  return filterRangeProps;\n};\n"]}

package/dist/src/hooks/useFilterSliderProps.d.ts

@@ -1,12 +1,10 @@
 import { ConfigFilterOption } from "../types/config";
+import { useReactSliderProps } from "./react-slider/useReactSliderProps";
 export declare const useFilterSliderProps: (filter: ConfigFilterOption) => {
     filter: ConfigFilterOption;
-    value: {
-        start: number;
-        end: number;
-    };
-    handleChange: (value: {
-        start: number | string;
-        end: number | string;
-    }) => void;
+    value: [number, number];
+    range: [number, number];
+    handleChange: (value: [number | string, number | string]) => void;
+    handleRange: (value: [number, number]) => void;
+    reactSliderProps: ReturnType<typeof useReactSliderProps>;
 };

package/dist/src/hooks/useFilterSliderProps.js

@@ -7,12 +7,15 @@ exports.useFilterSliderProps = void 0;
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../hooks");
 const utility_1 = require("../utility");
+const useReactSliderProps_1 = require("./react-slider/useReactSliderProps");
 const useFilterSliderProps = (filter) => {
+    var _a;
     const { track } = (0, hooks_1.useAnalytics)();
-    const [filterValue, setFilterValue] = react_1.default.useState({
-        start: 0,
-        end: 0,
-    });
+    const urlSearchParam = new URLSearchParams(window.location.search);
+    const [filterValue, setFilterValue] = react_1.default.useState(JSON.parse((_a = urlSearchParam.get(filter.handle)) !== null && _a !== void 0 ? _a : "[0,0]"));
+    const [filterRange, setFilterRange] = react_1.default.useState([
+        0, 0,
+    ]);
     const handleChange = react_1.default.useCallback((value) => {
         utility_1.debug.breadcrumb({
             category: "filter",
@@ -24,25 +27,43 @@ const useFilterSliderProps = (filter) => {
             },
         });
         utility_1.debug.log("useFilterSliderProps", "handleChange[value]", value);
-        setFilterValue({
-            start: parseInt(`${value.start}`),
-            end: parseInt(`${value.end}`),
-        });
+        setFilterValue([parseInt(`${value[0]}`), parseInt(`${value[1]}`)]);
         track({
             eventName: "filterChange",
             payload: {
                 name: filter.name,
-                value: `${value.start}:${value.end}`,
+                value: `${value[0]}:${value[1]}`,
             },
         });
     }, [filter]);
+    const handleRange = react_1.default.useCallback((value) => {
+        setFilterRange([parseInt(`${value[0]}`), parseInt(`${value[1]}`)]);
+    }, [filter]);
+    react_1.default.useEffect(() => {
+        const handler = (event) => {
+            setFilterValue(event.detail.value);
+        };
+        window.addEventListener(`@usereactify/search:filter:${filter.handle}:update`, handler);
+        return () => window.removeEventListener(`@usereactify/search:filter:${filter.handle}:update`, handler);
+    }, []);
+    const reactSliderProps = (0, useReactSliderProps_1.useReactSliderProps)(filter, filterValue, filterRange, handleChange);
     const filterSliderProps = react_1.default.useMemo(() => {
         return {
             handleChange,
+            handleRange,
             filter,
             value: filterValue,
+            range: filterRange,
+            reactSliderProps,
         };
-    }, [filter, filterValue, handleChange]);
+    }, [
+        handleChange,
+        handleRange,
+        filter,
+        filterValue,
+        filterRange,
+        reactSliderProps,
+    ]);
     return filterSliderProps;
 };
 exports.useFilterSliderProps = useFilterSliderProps;

package/dist/src/hooks/useFilterSliderProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFilterSliderProps.js","sourceRoot":"","sources":["../../../src/hooks/useFilterSliderProps.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,oCAAwC;AACxC,wCAAmC;AAE5B,MAAM,oBAAoB,GAAG,CAClC,MAA0B,EAW1B,EAAE;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IACjC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAK,CAAC,QAAQ,CAGjD;QACD,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,CAAC;KACP,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,eAAK,CAAC,WAAW,CACpC,CAAC,KAAuD,EAAE,EAAE;QAC1D,eAAK,CAAC,UAAU,CAAC;YACf,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,uBAAuB;YAChC,IAAI,EAAE;gBACJ,MAAM,EAAE,MAAM,CAAC,IAAI;gBACnB,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CAAC;QAEH,eAAK,CAAC,GAAG,CAAC,sBAAsB,EAAE,qBAAqB,EAAE,KAAK,CAAC,CAAC;QAEhE,cAAc,CAAC;YACb,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;YACjC,GAAG,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;SAC9B,CAAC,CAAC;QAEH,KAAK,CAAC;YACJ,SAAS,EAAE,cAAc;YACzB,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,EAAE;aACrC;SACF,CAAC,CAAC;IACL,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC3C,OAAO;YACL,YAAY;YACZ,MAAM;YACN,KAAK,EAAE,WAAW;SACnB,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAExC,OAAO,iBAAiB,CAAC;AAC3B,CAAC,CAAC;AA7DW,QAAA,oBAAoB,wBA6D/B","sourcesContent":["import React from \"react\";\n\nimport { ConfigFilterOption } from \"../types/config\";\nimport { useAnalytics } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const useFilterSliderProps = (\n  filter: ConfigFilterOption\n): {\n  filter: ConfigFilterOption;\n  value: {\n    start: number;\n    end: number;\n  };\n  handleChange: (value: {\n    start: number | string;\n    end: number | string;\n  }) => void;\n} => {\n  const { track } = useAnalytics();\n  const [filterValue, setFilterValue] = React.useState<{\n    start: number;\n    end: number;\n  }>({\n    start: 0,\n    end: 0,\n  });\n\n  const handleChange = React.useCallback(\n    (value: { start: number | string; end: number | string }) => {\n      debug.breadcrumb({\n        category: \"filter\",\n        message: \"filter option changed\",\n        data: {\n          filter: filter.name,\n          field: filter.field,\n          value: value,\n        },\n      });\n\n      debug.log(\"useFilterSliderProps\", \"handleChange[value]\", value);\n\n      setFilterValue({\n        start: parseInt(`${value.start}`),\n        end: parseInt(`${value.end}`),\n      });\n\n      track({\n        eventName: \"filterChange\",\n        payload: {\n          name: filter.name,\n          value: `${value.start}:${value.end}`,\n        },\n      });\n    },\n    [filter]\n  );\n\n  const filterSliderProps = React.useMemo(() => {\n    return {\n      handleChange,\n      filter,\n      value: filterValue,\n    };\n  }, [filter, filterValue, handleChange]);\n\n  return filterSliderProps;\n};\n"]}
+{"version":3,"file":"useFilterSliderProps.js","sourceRoot":"","sources":["../../../src/hooks/useFilterSliderProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { ConfigFilterOption } from \"../types/config\";\nimport { useAnalytics } from \"../hooks\";\nimport { debug } from \"../utility\";\nimport { useReactSliderProps } from \"./react-slider/useReactSliderProps\";\n\nexport const useFilterSliderProps = (\n  filter: ConfigFilterOption\n): {\n  filter: ConfigFilterOption;\n  value: [number, number];\n  range: [number, number];\n  handleChange: (value: [number | string, number | string]) => void;\n  handleRange: (value: [number, number]) => void;\n  reactSliderProps: ReturnType<typeof useReactSliderProps>;\n} => {\n  const { track } = useAnalytics();\n\n  const urlSearchParam = new URLSearchParams(window.location.search);\n  const [filterValue, setFilterValue] = React.useState<[number, number]>(\n    JSON.parse(urlSearchParam.get(filter.handle) ?? \"[0,0]\")\n  );\n  const [filterRange, setFilterRange] = React.useState<[number, number]>([\n    0, 0,\n  ]);\n\n  const handleChange = React.useCallback(\n    (value: [number | string, number | string]) => {\n      debug.breadcrumb({\n        category: \"filter\",\n        message: \"filter option changed\",\n        data: {\n          filter: filter.name,\n          field: filter.field,\n          value: value,\n        },\n      });\n\n      debug.log(\"useFilterSliderProps\", \"handleChange[value]\", value);\n\n      setFilterValue([parseInt(`${value[0]}`), parseInt(`${value[1]}`)]);\n\n      track({\n        eventName: \"filterChange\",\n        payload: {\n          name: filter.name,\n          value: `${value[0]}:${value[1]}`,\n        },\n      });\n    },\n    [filter]\n  );\n\n  const handleRange = React.useCallback(\n    (value: [number | string, number | string]) => {\n      setFilterRange([parseInt(`${value[0]}`), parseInt(`${value[1]}`)]);\n    },\n    [filter]\n  );\n\n  React.useEffect(() => {\n    const handler = (\n      event: CustomEvent<{ handle: string; value: [number, number] }>\n    ) => {\n      setFilterValue(event.detail.value);\n    };\n    window.addEventListener(\n      `@usereactify/search:filter:${filter.handle}:update`,\n      handler as EventListener\n    );\n\n    return () =>\n      window.removeEventListener(\n        `@usereactify/search:filter:${filter.handle}:update`,\n        handler as EventListener\n      );\n  }, []);\n\n  const reactSliderProps = useReactSliderProps(\n    filter,\n    filterValue,\n    filterRange,\n    handleChange\n  );\n\n  const filterSliderProps = React.useMemo(() => {\n    return {\n      handleChange,\n      handleRange,\n      filter,\n      value: filterValue,\n      range: filterRange,\n      reactSliderProps,\n    };\n  }, [\n    handleChange,\n    handleRange,\n    filter,\n    filterValue,\n    filterRange,\n    reactSliderProps,\n  ]);\n\n  return filterSliderProps;\n};\n"]}

package/dist/src/hooks/useFilters.js

@@ -10,9 +10,6 @@ const utility_1 = require("../utility");
 const useFilters = () => {
     const { options, config } = (0, hooks_1.useReactifySearchContext)();
     const filterStack = react_1.default.useMemo(() => {
-        if (options.mode === "instant-search") {
-            return undefined;
-        }
         // select filters by type
         const matchingFilterss = config.filters.filter((filter) => filter.type === options.mode);
         // select filter stack by handle if provided

package/dist/src/hooks/useFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFilters.js","sourceRoot":"","sources":["../../../src/hooks/useFilters.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,oCAAoD;AACpD,wCAAmC;AAE5B,MAAM,UAAU,GAAG,GAKxB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAA,gCAAwB,GAAE,CAAC;IAEvD,MAAM,WAAW,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,OAAO,CAAC,IAAI,KAAK,gBAAgB,EAAE;YACrC,OAAO,SAAS,CAAC;SAClB;QAED,yBAAyB;QACzB,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAC5C,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,CACzC,CAAC;QAEF,4CAA4C;QAC5C,IAAI,OAAO,CAAC,aAAa,EAAE;YACzB,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAC3C,CAAC,WAAW,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,KAAK,WAAW,CAAC,MAAM,CAC9D,CAAC;YACF,IAAI,eAAe,EAAE;gBACnB,OAAO,eAAe,CAAC;aACxB;SACF;QAED,gDAAgD;QAChD,IAAI,OAAO,CAAC,IAAI,KAAK,YAAY,IAAI,OAAO,CAAC,gBAAgB,EAAE;YAC7D,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,WAC5D,OAAA,MAAA,WAAW,CAAC,WAAW,0CAAE,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA,EAAA,CAC5D,CAAC;YACF,IAAI,eAAe,EAAE;gBACnB,OAAO,eAAe,CAAC;aACxB;SACF;QAED,sCAAsC;QACtC,IAAI,eAAe,GAAG,gBAAgB,CAAC,IAAI,CACzC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,KAAK,SAAS,CAClD,CAAC;QACF,IAAI,eAAe,EAAE;YACnB,OAAO,eAAe,CAAC;SACxB;QAED,0CAA0C;QAC1C,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CACnC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,KAAK,SAAS,CAClD,CAAC;QACF,IAAI,eAAe,EAAE;YACnB,OAAO,eAAe,CAAC;SACxB;QAED,+CAA+C;QAC/C,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAEpC,OAAO,eAAe,CAAC;IACzB,CAAC,EAAE;QACD,MAAM;QACN,OAAO,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;KACrE,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,aAAa,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACvD,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACjC,CAAC;QAEF,OAAO,aAAa,CAAC;IACvB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,eAAK,CAAC,IAAI,CAAC,YAAY,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;IACrD,eAAK,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IAE7C,OAAO;QACL,WAAW,EAAE,WAAW;QACxB,OAAO,EAAE,OAAO;KACjB,CAAC;AACJ,CAAC,CAAC;AA9EW,QAAA,UAAU,cA8ErB","sourcesContent":["import React from \"react\";\n\nimport { ConfigFilter, ConfigFilterOption } from \"../types\";\nimport { useReactifySearchContext } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const useFilters = (): {\n  /** The currently selected filter stack, based on mode, curation and more */\n  filterStack?: ConfigFilter;\n  /** All of the available filters within the filter stack */\n  filters?: Array<ConfigFilterOption>;\n} => {\n  const { options, config } = useReactifySearchContext();\n\n  const filterStack = React.useMemo(() => {\n    if (options.mode === \"instant-search\") {\n      return undefined;\n    }\n\n    // select filters by type\n    const matchingFilterss = config.filters.filter(\n      (filter) => filter.type === options.mode\n    );\n\n    // select filter stack by handle if provided\n    if (options.filtersHandle) {\n      const matchingFilters = matchingFilterss.find(\n        (filterStack) => options.filtersHandle === filterStack.handle\n      );\n      if (matchingFilters) {\n        return matchingFilters;\n      }\n    }\n\n    // select filter stack by collection if provided\n    if (options.mode === \"collection\" && options.collectionHandle) {\n      const matchingFilters = matchingFilterss.find((filterStack) =>\n        filterStack.collections?.includes(options.collectionHandle)\n      );\n      if (matchingFilters) {\n        return matchingFilters;\n      }\n    }\n\n    // select filter with \"default\" handle\n    let matchingFilters = matchingFilterss.find(\n      (filterStack) => filterStack.handle === \"default\"\n    );\n    if (matchingFilters) {\n      return matchingFilters;\n    }\n\n    // select any filter with \"default\" handle\n    matchingFilters = config.filters.find(\n      (filterStack) => filterStack.handle === \"default\"\n    );\n    if (matchingFilters) {\n      return matchingFilters;\n    }\n\n    // select any available filter as a last resort\n    matchingFilters = config.filters[0];\n\n    return matchingFilters;\n  }, [\n    config,\n    options.mode === \"collection\" ? options.collectionHandle : undefined,\n  ]);\n\n  const filters = React.useMemo(() => {\n    const sortedFilters = filterStack?.options.sort((a, b) =>\n      a.position > b.position ? 1 : -1\n    );\n\n    return sortedFilters;\n  }, [filterStack]);\n\n  debug.hook(\"useFilters\", \"filterStack\", filterStack);\n  debug.hook(\"useFilters\", \"filters\", filters);\n\n  return {\n    filterStack: filterStack,\n    filters: filters,\n  };\n};\n"]}
+{"version":3,"file":"useFilters.js","sourceRoot":"","sources":["../../../src/hooks/useFilters.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,oCAAoD;AACpD,wCAAmC;AAE5B,MAAM,UAAU,GAAG,GAKxB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAA,gCAAwB,GAAE,CAAC;IAEvD,MAAM,WAAW,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,yBAAyB;QACzB,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAC5C,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,CACzC,CAAC;QAEF,4CAA4C;QAC5C,IAAI,OAAO,CAAC,aAAa,EAAE;YACzB,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAC3C,CAAC,WAAW,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,KAAK,WAAW,CAAC,MAAM,CAC9D,CAAC;YACF,IAAI,eAAe,EAAE;gBACnB,OAAO,eAAe,CAAC;aACxB;SACF;QAED,gDAAgD;QAChD,IAAI,OAAO,CAAC,IAAI,KAAK,YAAY,IAAI,OAAO,CAAC,gBAAgB,EAAE;YAC7D,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,WAC5D,OAAA,MAAA,WAAW,CAAC,WAAW,0CAAE,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA,EAAA,CAC5D,CAAC;YACF,IAAI,eAAe,EAAE;gBACnB,OAAO,eAAe,CAAC;aACxB;SACF;QAED,sCAAsC;QACtC,IAAI,eAAe,GAAG,gBAAgB,CAAC,IAAI,CACzC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,KAAK,SAAS,CAClD,CAAC;QACF,IAAI,eAAe,EAAE;YACnB,OAAO,eAAe,CAAC;SACxB;QAED,0CAA0C;QAC1C,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CACnC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,KAAK,SAAS,CAClD,CAAC;QACF,IAAI,eAAe,EAAE;YACnB,OAAO,eAAe,CAAC;SACxB;QAED,+CAA+C;QAC/C,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAEpC,OAAO,eAAe,CAAC;IACzB,CAAC,EAAE;QACD,MAAM;QACN,OAAO,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;KACrE,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,aAAa,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACvD,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACjC,CAAC;QAEF,OAAO,aAAa,CAAC;IACvB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,eAAK,CAAC,IAAI,CAAC,YAAY,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;IACrD,eAAK,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IAE7C,OAAO;QACL,WAAW,EAAE,WAAW;QACxB,OAAO,EAAE,OAAO;KACjB,CAAC;AACJ,CAAC,CAAC;AA1EW,QAAA,UAAU,cA0ErB","sourcesContent":["import React from \"react\";\n\nimport { ConfigFilter, ConfigFilterOption } from \"../types\";\nimport { useReactifySearchContext } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const useFilters = (): {\n  /** The currently selected filter stack, based on mode, curation and more */\n  filterStack?: ConfigFilter;\n  /** All of the available filters within the filter stack */\n  filters?: Array<ConfigFilterOption>;\n} => {\n  const { options, config } = useReactifySearchContext();\n\n  const filterStack = React.useMemo(() => {\n    // select filters by type\n    const matchingFilterss = config.filters.filter(\n      (filter) => filter.type === options.mode\n    );\n\n    // select filter stack by handle if provided\n    if (options.filtersHandle) {\n      const matchingFilters = matchingFilterss.find(\n        (filterStack) => options.filtersHandle === filterStack.handle\n      );\n      if (matchingFilters) {\n        return matchingFilters;\n      }\n    }\n\n    // select filter stack by collection if provided\n    if (options.mode === \"collection\" && options.collectionHandle) {\n      const matchingFilters = matchingFilterss.find((filterStack) =>\n        filterStack.collections?.includes(options.collectionHandle)\n      );\n      if (matchingFilters) {\n        return matchingFilters;\n      }\n    }\n\n    // select filter with \"default\" handle\n    let matchingFilters = matchingFilterss.find(\n      (filterStack) => filterStack.handle === \"default\"\n    );\n    if (matchingFilters) {\n      return matchingFilters;\n    }\n\n    // select any filter with \"default\" handle\n    matchingFilters = config.filters.find(\n      (filterStack) => filterStack.handle === \"default\"\n    );\n    if (matchingFilters) {\n      return matchingFilters;\n    }\n\n    // select any available filter as a last resort\n    matchingFilters = config.filters[0];\n\n    return matchingFilters;\n  }, [\n    config,\n    options.mode === \"collection\" ? options.collectionHandle : undefined,\n  ]);\n\n  const filters = React.useMemo(() => {\n    const sortedFilters = filterStack?.options.sort((a, b) =>\n      a.position > b.position ? 1 : -1\n    );\n\n    return sortedFilters;\n  }, [filterStack]);\n\n  debug.hook(\"useFilters\", \"filterStack\", filterStack);\n  debug.hook(\"useFilters\", \"filters\", filters);\n\n  return {\n    filterStack: filterStack,\n    filters: filters,\n  };\n};\n"]}

package/dist/src/hooks/useFlags.d.ts

@@ -0,0 +1,21 @@
+export declare enum Flags {
+    SENSOR_SORT = "reactify-search:flag_sensor_sort",
+    SENSOR_COLLECTION = "reactify-search:flag_sensor_collection",
+    SENSOR_PUBLISHED = "reactify-search:flag_sensor_published",
+    SENSOR_INVENTORYAVAILABLE = "reactify-search:flag_sensor_inventoryavailable",
+    SENSOR_SEARCHTERM = "reactify-search:flag_sensor_searchterm",
+    SENSOR_SEARCHTERM_VALUE = "reactify-search:flag_sensor_searchterm_value",
+    SENSOR_SEARCHTERM_PHRASE = "reactify-search:flag_sensor_searchterm_phrase",
+    SENSOR_SEARCHTERM_PHRASE_SYNONYMS = "reactify-search:flag_sensor_searchterm_phrase_synonyms",
+    SENSOR_SEARCHTERM_PHRASE_PREFIX = "reactify-search:flag_sensor_searchterm_phrase_prefix",
+    SENSOR_SEARCHTERM_PHRASE_PREFIX_SYNONYMS = "reactify-search:flag_sensor_searchterm_phrase_prefix_synonyms",
+    SENSOR_SEARCHTERM_CROSS_FIELDS = "reactify-search:flag_sensor_searchterm_cross_fields",
+    SENSOR_SEARCHTERM_CROSS_FIELDS_SYNONYMS = "reactify-search:flag_sensor_searchterm_cross_fields_synonyms",
+    SENSOR_SEARCHTERM_SPAN_FIRST = "reactify-search:flag_sensor_searchterm_span_first",
+    SENSOR_SEARCHTERM_SPAN_FIRST_SYNONYMS = "reactify-search:flag_sensor_searchterm_span_first_synonyms"
+}
+export declare const useFlags: () => {
+    flags: Record<Flags, boolean>;
+    setFlag: (flag: Flags, value: boolean) => void;
+    getFlag: (flag: Flags) => boolean;
+};

package/dist/src/hooks/useFlags.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFlags = exports.Flags = void 0;
+const react_1 = __importDefault(require("react"));
+var Flags;
+(function (Flags) {
+    Flags["SENSOR_SORT"] = "reactify-search:flag_sensor_sort";
+    Flags["SENSOR_COLLECTION"] = "reactify-search:flag_sensor_collection";
+    Flags["SENSOR_PUBLISHED"] = "reactify-search:flag_sensor_published";
+    Flags["SENSOR_INVENTORYAVAILABLE"] = "reactify-search:flag_sensor_inventoryavailable";
+    Flags["SENSOR_SEARCHTERM"] = "reactify-search:flag_sensor_searchterm";
+    Flags["SENSOR_SEARCHTERM_VALUE"] = "reactify-search:flag_sensor_searchterm_value";
+    Flags["SENSOR_SEARCHTERM_PHRASE"] = "reactify-search:flag_sensor_searchterm_phrase";
+    Flags["SENSOR_SEARCHTERM_PHRASE_SYNONYMS"] = "reactify-search:flag_sensor_searchterm_phrase_synonyms";
+    Flags["SENSOR_SEARCHTERM_PHRASE_PREFIX"] = "reactify-search:flag_sensor_searchterm_phrase_prefix";
+    Flags["SENSOR_SEARCHTERM_PHRASE_PREFIX_SYNONYMS"] = "reactify-search:flag_sensor_searchterm_phrase_prefix_synonyms";
+    Flags["SENSOR_SEARCHTERM_CROSS_FIELDS"] = "reactify-search:flag_sensor_searchterm_cross_fields";
+    Flags["SENSOR_SEARCHTERM_CROSS_FIELDS_SYNONYMS"] = "reactify-search:flag_sensor_searchterm_cross_fields_synonyms";
+    Flags["SENSOR_SEARCHTERM_SPAN_FIRST"] = "reactify-search:flag_sensor_searchterm_span_first";
+    Flags["SENSOR_SEARCHTERM_SPAN_FIRST_SYNONYMS"] = "reactify-search:flag_sensor_searchterm_span_first_synonyms";
+})(Flags = exports.Flags || (exports.Flags = {}));
+const useFlags = () => {
+    const [delta, setDelta] = react_1.default.useState(Date.now());
+    const getFlag = react_1.default.useCallback((flag) => {
+        return sessionStorage.getItem(flag) === "false" ? false : true;
+    }, [delta]);
+    const setFlag = react_1.default.useCallback((flag, value) => {
+        sessionStorage.setItem(flag, `${value}`);
+        setDelta(Date.now());
+    }, [delta]);
+    const flags = react_1.default.useMemo(() => {
+        return Object.values(Flags).reduce((acc, flag) => (Object.assign(Object.assign({}, acc), { [flag]: getFlag(flag) })), {});
+    }, [delta]);
+    react_1.default.useEffect(() => {
+        for (const flag of Object.values(Flags)) {
+            setFlag(flag, getFlag(flag));
+        }
+    }, [flags]);
+    return {
+        flags: flags,
+        setFlag: setFlag,
+        getFlag: getFlag,
+    };
+};
+exports.useFlags = useFlags;
+//# sourceMappingURL=useFlags.js.map

package/dist/src/hooks/useFlags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlags.js","sourceRoot":"","sources":["../../../src/hooks/useFlags.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,IAAY,KAeX;AAfD,WAAY,KAAK;IACf,yDAAgD,CAAA;IAChD,qEAA4D,CAAA;IAC5D,mEAA0D,CAAA;IAC1D,qFAA4E,CAAA;IAC5E,qEAA4D,CAAA;IAC5D,iFAAwE,CAAA;IACxE,mFAA0E,CAAA;IAC1E,qGAA4F,CAAA;IAC5F,iGAAwF,CAAA;IACxF,mHAA0G,CAAA;IAC1G,+FAAsF,CAAA;IACtF,iHAAwG,CAAA;IACxG,2FAAkF,CAAA;IAClF,6GAAoG,CAAA;AACtG,CAAC,EAfW,KAAK,GAAL,aAAK,KAAL,aAAK,QAehB;AAEM,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAS,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG,eAAK,CAAC,WAAW,CAC/B,CAAC,IAAW,EAAW,EAAE;QACvB,OAAO,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IACjE,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,OAAO,GAAG,eAAK,CAAC,WAAW,CAC/B,CAAC,IAAW,EAAE,KAAc,EAAE,EAAE;QAC9B,cAAc,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,KAAK,GAAG,eAAK,CAAC,OAAO,CAAyB,GAAG,EAAE;QACvD,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAChC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,iCACV,GAAG,KACN,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IACrB,EACF,EAA4B,CAC7B,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YACvC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;SAC9B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO;QACL,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,OAAO;KACjB,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,QAAQ,YAuCnB","sourcesContent":["import React from \"react\";\n\nexport enum Flags {\n  SENSOR_SORT = \"reactify-search:flag_sensor_sort\",\n  SENSOR_COLLECTION = \"reactify-search:flag_sensor_collection\",\n  SENSOR_PUBLISHED = \"reactify-search:flag_sensor_published\",\n  SENSOR_INVENTORYAVAILABLE = \"reactify-search:flag_sensor_inventoryavailable\",\n  SENSOR_SEARCHTERM = \"reactify-search:flag_sensor_searchterm\",\n  SENSOR_SEARCHTERM_VALUE = \"reactify-search:flag_sensor_searchterm_value\",\n  SENSOR_SEARCHTERM_PHRASE = \"reactify-search:flag_sensor_searchterm_phrase\",\n  SENSOR_SEARCHTERM_PHRASE_SYNONYMS = \"reactify-search:flag_sensor_searchterm_phrase_synonyms\",\n  SENSOR_SEARCHTERM_PHRASE_PREFIX = \"reactify-search:flag_sensor_searchterm_phrase_prefix\",\n  SENSOR_SEARCHTERM_PHRASE_PREFIX_SYNONYMS = \"reactify-search:flag_sensor_searchterm_phrase_prefix_synonyms\",\n  SENSOR_SEARCHTERM_CROSS_FIELDS = \"reactify-search:flag_sensor_searchterm_cross_fields\",\n  SENSOR_SEARCHTERM_CROSS_FIELDS_SYNONYMS = \"reactify-search:flag_sensor_searchterm_cross_fields_synonyms\",\n  SENSOR_SEARCHTERM_SPAN_FIRST = \"reactify-search:flag_sensor_searchterm_span_first\",\n  SENSOR_SEARCHTERM_SPAN_FIRST_SYNONYMS = \"reactify-search:flag_sensor_searchterm_span_first_synonyms\",\n}\n\nexport const useFlags = () => {\n  const [delta, setDelta] = React.useState<number>(Date.now());\n\n  const getFlag = React.useCallback(\n    (flag: Flags): boolean => {\n      return sessionStorage.getItem(flag) === \"false\" ? false : true;\n    },\n    [delta]\n  );\n\n  const setFlag = React.useCallback(\n    (flag: Flags, value: boolean) => {\n      sessionStorage.setItem(flag, `${value}`);\n      setDelta(Date.now());\n    },\n    [delta]\n  );\n\n  const flags = React.useMemo<Record<Flags, boolean>>(() => {\n    return Object.values(Flags).reduce<Record<Flags, boolean>>(\n      (acc, flag) => ({\n        ...acc,\n        [flag]: getFlag(flag),\n      }),\n      {} as Record<Flags, boolean>\n    );\n  }, [delta]);\n\n  React.useEffect(() => {\n    for (const flag of Object.values(Flags)) {\n      setFlag(flag, getFlag(flag));\n    }\n  }, [flags]);\n\n  return {\n    flags: flags,\n    setFlag: setFlag,\n    getFlag: getFlag,\n  };\n};\n"]}

package/dist/src/hooks/useIndices.d.ts

@@ -0,0 +1,5 @@
+export declare type UseIndices = {
+    indices: Array<string>;
+    indexNameFormat: (indexName: string) => string;
+};
+export declare const useIndices: () => UseIndices;

package/dist/src/hooks/useIndices.js

@@ -0,0 +1,49 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIndices = void 0;
+const react_1 = __importDefault(require("react"));
+const useReactifySearchContext_1 = require("./useReactifySearchContext");
+const useIndices = () => {
+    const { config, options } = (0, useReactifySearchContext_1.useReactifySearchContext)();
+    const shopName = options.shopifyPermanentDomain.replace(".myshopify.com", "");
+    const [indices, setIndices] = react_1.default.useState([]);
+    const indexNameFormat = (indexName) => {
+        let indexNameFormatted = indexName;
+        try {
+            const indexDate = indexName.split(`${shopName}-`)[1];
+            indexNameFormatted = `${shopName} ${new Date(parseInt(indexDate)).toLocaleString()} (${indexDate})`;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return indexNameFormatted;
+    };
+    react_1.default.useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            const response = yield fetch(`https://${config.endpoint}/_cat/indices?format=json`).then((response) => response.json());
+            const regexp = new RegExp(`${shopName}-[0-9]`);
+            setIndices(response
+                .map((item) => item.index)
+                .filter((item) => regexp.test(item))
+                .sort((a, b) => (a > b ? -1 : 1)));
+        }))();
+    }, [config.endpoint]);
+    return {
+        indices: indices,
+        indexNameFormat: indexNameFormat,
+    };
+};
+exports.useIndices = useIndices;
+//# sourceMappingURL=useIndices.js.map

package/dist/src/hooks/useIndices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIndices.js","sourceRoot":"","sources":["../../../src/hooks/useIndices.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,yEAAsE;AAO/D,MAAM,UAAU,GAAG,GAAe,EAAE;IACzC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,mDAAwB,GAAE,CAAC;IACvD,MAAM,QAAQ,GAAG,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;IAE9E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAwB,EAAE,CAAC,CAAC;IAExE,MAAM,eAAe,GAAkC,CAAC,SAAS,EAAE,EAAE;QACnE,IAAI,kBAAkB,GAAG,SAAS,CAAC;QACnC,IAAI;YACF,MAAM,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YAErD,kBAAkB,GAAG,GAAG,QAAQ,IAAI,IAAI,IAAI,CAC1C,QAAQ,CAAC,SAAS,CAAC,CACpB,CAAC,cAAc,EAAE,KAAK,SAAS,GAAG,CAAC;SACrC;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SACtB;QAED,OAAO,kBAAkB,CAAC;IAC5B,CAAC,CAAC;IAEF,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,CAAC,GAAS,EAAE;YACV,MAAM,QAAQ,GAA6B,MAAM,KAAK,CACpD,WAAW,MAAM,CAAC,QAAQ,2BAA2B,CACtD,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;YAEtC,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC;YAE/C,UAAU,CACR,QAAQ;iBACL,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;iBACzB,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBACnC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACpC,CAAC;QACJ,CAAC,CAAA,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO;QACL,OAAO,EAAE,OAAO;QAChB,eAAe,EAAE,eAAe;KACjC,CAAC;AACJ,CAAC,CAAC;AA1CW,QAAA,UAAU,cA0CrB","sourcesContent":["import React from \"react\";\nimport { useReactifySearchContext } from \"./useReactifySearchContext\";\n\nexport type UseIndices = {\n  indices: Array<string>;\n  indexNameFormat: (indexName: string) => string;\n};\n\nexport const useIndices = (): UseIndices => {\n  const { config, options } = useReactifySearchContext();\n  const shopName = options.shopifyPermanentDomain.replace(\".myshopify.com\", \"\");\n\n  const [indices, setIndices] = React.useState<UseIndices[\"indices\"]>([]);\n\n  const indexNameFormat: UseIndices[\"indexNameFormat\"] = (indexName) => {\n    let indexNameFormatted = indexName;\n    try {\n      const indexDate = indexName.split(`${shopName}-`)[1];\n\n      indexNameFormatted = `${shopName} ${new Date(\n        parseInt(indexDate)\n      ).toLocaleString()} (${indexDate})`;\n    } catch (error) {\n      console.error(error);\n    }\n\n    return indexNameFormatted;\n  };\n\n  React.useEffect(() => {\n    (async () => {\n      const response: Array<{ index: string }> = await fetch(\n        `https://${config.endpoint}/_cat/indices?format=json`\n      ).then((response) => response.json());\n\n      const regexp = new RegExp(`${shopName}-[0-9]`);\n\n      setIndices(\n        response\n          .map((item) => item.index)\n          .filter((item) => regexp.test(item))\n          .sort((a, b) => (a > b ? -1 : 1))\n      );\n    })();\n  }, [config.endpoint]);\n\n  return {\n    indices: indices,\n    indexNameFormat: indexNameFormat,\n  };\n};\n"]}

package/dist/src/hooks/useReactifySearchContext.d.ts

@@ -1,18 +1,16 @@
 import React from "react";
-import { Config } from "../types";
+import { Config, ReactivesearchResultProps } from "../types";
 export declare type ReactifySearchMode = "search" | "collection" | "instant-search";
 export declare const ReactifySearchContext: React.Context<{
     config: Config;
     options: {
+        clientId: string;
         mode: ReactifySearchMode;
         index: string;
         shopifyPermanentDomain: string;
         filtersHandle?: string | undefined;
-        credentials: {
-            username: string;
-            password: string;
-            endpoint: string;
-        };
+        credentials?: string | undefined;
+        endpoint: string;
         onRedirect?: ((type: "redirect" | "search", url: string) => void) | undefined;
         theme: Record<string, unknown>;
         additionalComponentIds?: string[] | undefined;
@@ -36,19 +34,23 @@ export declare const ReactifySearchContext: React.Context<{
         sortOption: string;
         setSortOption: React.Dispatch<React.SetStateAction<string>>;
     };
+    results: {
+        results: ReactivesearchResultProps["data"];
+        setResults: React.Dispatch<React.SetStateAction<ReactivesearchResultProps["data"]>>;
+        resultStats?: ReactivesearchResultProps["resultStats"];
+        setResultStats: React.Dispatch<React.SetStateAction<ReactivesearchResultProps["resultStats"] | undefined>>;
+    };
 } | undefined>;
 export declare const useReactifySearchContext: () => {
     config: Config;
     options: {
+        clientId: string;
         mode: ReactifySearchMode;
         index: string;
         shopifyPermanentDomain: string;
         filtersHandle?: string | undefined;
-        credentials: {
-            username: string;
-            password: string;
-            endpoint: string;
-        };
+        credentials?: string | undefined;
+        endpoint: string;
         onRedirect?: ((type: "redirect" | "search", url: string) => void) | undefined;
         theme: Record<string, unknown>;
         additionalComponentIds?: string[] | undefined;
@@ -72,4 +74,10 @@ export declare const useReactifySearchContext: () => {
         sortOption: string;
         setSortOption: React.Dispatch<React.SetStateAction<string>>;
     };
+    results: {
+        results: ReactivesearchResultProps["data"];
+        setResults: React.Dispatch<React.SetStateAction<ReactivesearchResultProps["data"]>>;
+        resultStats?: ReactivesearchResultProps["resultStats"];
+        setResultStats: React.Dispatch<React.SetStateAction<ReactivesearchResultProps["resultStats"] | undefined>>;
+    };
 };

package/dist/src/hooks/useReactifySearchContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReactifySearchContext.js","sourceRoot":"","sources":["../../../src/hooks/useReactifySearchContext.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAMb,QAAA,qBAAqB,GAAG,eAAK,CAAC,aAAa,CA4CtD,SAAS,CAAC,CAAC;AAEN,MAAM,wBAAwB,GAAG,GAAG,EAAE,CAC3C,eAAK,CAAC,UAAU,CAAC,6BAAqB,CAAE,CAAC;AAD9B,QAAA,wBAAwB,4BACM","sourcesContent":["import React from \"react\";\n\nimport { Config } from \"../types\";\n\nexport type ReactifySearchMode = \"search\" | \"collection\" | \"instant-search\";\n\nexport const ReactifySearchContext = React.createContext<\n  | {\n      config: Config;\n      options: {\n        mode: ReactifySearchMode;\n        index: string;\n        shopifyPermanentDomain: string;\n        filtersHandle?: string;\n        credentials: {\n          username: string;\n          password: string;\n          endpoint: string;\n        };\n        onRedirect?: (type: \"redirect\" | \"search\", url: string) => void;\n        theme: Record<string, unknown>;\n        additionalComponentIds?: Array<string>;\n        includeFields?: Array<string>;\n        excludeFields?: Array<string>;\n      } & (\n        | {\n            mode: \"search\";\n          }\n        | {\n            mode: \"collection\";\n            collectionHandle: string;\n          }\n        | {\n            mode: \"instant-search\";\n          }\n      );\n      search: {\n        searchTerm: string;\n        setSearchTerm: React.Dispatch<React.SetStateAction<string>>;\n        showInstantSearchResults: boolean;\n        setShowInstantSearchResults: React.Dispatch<\n          React.SetStateAction<boolean>\n        >;\n      };\n      sortby: {\n        sortOption: string;\n        setSortOption: React.Dispatch<React.SetStateAction<string>>;\n      };\n    }\n  | undefined\n>(undefined);\n\nexport const useReactifySearchContext = () =>\n  React.useContext(ReactifySearchContext)!;\n"]}
+{"version":3,"file":"useReactifySearchContext.js","sourceRoot":"","sources":["../../../src/hooks/useReactifySearchContext.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAMb,QAAA,qBAAqB,GAAG,eAAK,CAAC,aAAa,CAsDtD,SAAS,CAAC,CAAC;AAEN,MAAM,wBAAwB,GAAG,GAAG,EAAE,CAC3C,eAAK,CAAC,UAAU,CAAC,6BAAqB,CAAE,CAAC;AAD9B,QAAA,wBAAwB,4BACM","sourcesContent":["import React from \"react\";\n\nimport { Config, ReactivesearchResultProps } from \"../types\";\n\nexport type ReactifySearchMode = \"search\" | \"collection\" | \"instant-search\";\n\nexport const ReactifySearchContext = React.createContext<\n  | {\n      config: Config;\n      options: {\n        clientId: string;\n        mode: ReactifySearchMode;\n        index: string;\n        shopifyPermanentDomain: string;\n        filtersHandle?: string;\n        credentials?: string;\n        endpoint: string;\n        onRedirect?: (type: \"redirect\" | \"search\", url: string) => void;\n        theme: Record<string, unknown>;\n        additionalComponentIds?: Array<string>;\n        includeFields?: Array<string>;\n        excludeFields?: Array<string>;\n      } & (\n        | {\n            mode: \"search\";\n          }\n        | {\n            mode: \"collection\";\n            collectionHandle: string;\n          }\n        | {\n            mode: \"instant-search\";\n          }\n      );\n      search: {\n        searchTerm: string;\n        setSearchTerm: React.Dispatch<React.SetStateAction<string>>;\n        showInstantSearchResults: boolean;\n        setShowInstantSearchResults: React.Dispatch<\n          React.SetStateAction<boolean>\n        >;\n      };\n      sortby: {\n        sortOption: string;\n        setSortOption: React.Dispatch<React.SetStateAction<string>>;\n      };\n      results: {\n        results: ReactivesearchResultProps[\"data\"];\n        setResults: React.Dispatch<\n          React.SetStateAction<ReactivesearchResultProps[\"data\"]>\n        >;\n        resultStats?: ReactivesearchResultProps[\"resultStats\"];\n        setResultStats: React.Dispatch<\n          React.SetStateAction<\n            ReactivesearchResultProps[\"resultStats\"] | undefined\n          >\n        >;\n      };\n    }\n  | undefined\n>(undefined);\n\nexport const useReactifySearchContext = () =>\n  React.useContext(ReactifySearchContext)!;\n"]}

package/dist/src/hooks/useResults.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { ReactivesearchResultProps } from "../types";
+/** This hook must never be used to render results */
+export declare const useResults: () => {
+    /** All of the current results */
+    results: ReactivesearchResultProps["data"];
+    /** Function for setting the current results */
+    setResults: React.Dispatch<React.SetStateAction<ReactivesearchResultProps["data"]>>;
+    /** All of the current result stats */
+    resultStats?: {
+        time: number;
+        hidden: number;
+        promoted: number;
+        currentPage: number;
+        numberOfPages: number;
+        numberOfResults?: number | undefined;
+        displayedResults: number;
+    } | undefined;
+    /** Function for setting the current result stats */
+    setResultStats: React.Dispatch<React.SetStateAction<ReactivesearchResultProps["resultStats"] | undefined>>;
+};

package/dist/src/hooks/useResults.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResults = void 0;
+const hooks_1 = require("../hooks");
+const utility_1 = require("../utility");
+/** This hook must never be used to render results */
+const useResults = () => {
+    const { results } = (0, hooks_1.useReactifySearchContext)();
+    utility_1.debug.hook("useResults", "results", results.results);
+    utility_1.debug.hook("useResults", "resultStats", results.resultStats);
+    return {
+        results: results.results,
+        setResults: results.setResults,
+        resultStats: results.resultStats,
+        setResultStats: results.setResultStats,
+    };
+};
+exports.useResults = useResults;
+//# sourceMappingURL=useResults.js.map

package/dist/src/hooks/useResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResults.js","sourceRoot":"","sources":["../../../src/hooks/useResults.ts"],"names":[],"mappings":";;;AAGA,oCAAoD;AACpD,wCAAmC;AAEnC,qDAAqD;AAC9C,MAAM,UAAU,GAAG,GAaxB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,gCAAwB,GAAE,CAAC;IAE/C,eAAK,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IACrD,eAAK,CAAC,IAAI,CAAC,YAAY,EAAE,aAAa,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAE7D,OAAO;QACL,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,WAAW,EAAE,OAAO,CAAC,WAAW;QAChC,cAAc,EAAE,OAAO,CAAC,cAAc;KACvC,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,UAAU,cAyBrB","sourcesContent":["import React from \"react\";\n\nimport { ReactivesearchResultProps } from \"../types\";\nimport { useReactifySearchContext } from \"../hooks\";\nimport { debug } from \"../utility\";\n\n/** This hook must never be used to render results */\nexport const useResults = (): {\n  /** All of the current results */\n  results: ReactivesearchResultProps[\"data\"];\n  /** Function for setting the current results */\n  setResults: React.Dispatch<\n    React.SetStateAction<ReactivesearchResultProps[\"data\"]>\n  >;\n  /** All of the current result stats */\n  resultStats?: ReactivesearchResultProps[\"resultStats\"];\n  /** Function for setting the current result stats */\n  setResultStats: React.Dispatch<\n    React.SetStateAction<ReactivesearchResultProps[\"resultStats\"] | undefined>\n  >;\n} => {\n  const { results } = useReactifySearchContext();\n\n  debug.hook(\"useResults\", \"results\", results.results);\n  debug.hook(\"useResults\", \"resultStats\", results.resultStats);\n\n  return {\n    results: results.results,\n    setResults: results.setResults,\n    resultStats: results.resultStats,\n    setResultStats: results.setResultStats,\n  };\n};\n"]}

package/dist/src/hooks/useSearch.js

@@ -28,13 +28,15 @@ const useSearch = () => {
         }
         search.setShowInstantSearchResults(false);
         if (options.onRedirect) {
-            options.onRedirect(redirect ? "redirect" : "search", redirect ? redirect.url : `/search?q=${searchTerm}`);
+            options.onRedirect(redirect ? "redirect" : "search", redirect
+                ? redirect.url
+                : `/search?q=${encodeURIComponent(searchTerm)}`);
         }
         else if (redirect) {
             window.location.href = redirect.url;
         }
         else {
-            window.location.href = `/search?q=${searchTerm}`;
+            window.location.href = `/search?q=${encodeURIComponent(searchTerm)}`;
         }
     }, [search.searchTerm]);
     const handleSetSearchTerm = react_1.default.useCallback((searchTerm = "") => {