@usereactify/search 5.26.0 → 5.26.2

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [5.26.2](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.26.1...release-v5.26.2) (2023-08-09)
+
+### [5.26.1](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.26.0...release-v5.26.1) (2023-08-09)
+
+
+### Bug Fixes
+
+* correct sort option ordering ([c48ecdd](https://bitbucket.org/usereactify/reactify-search-ui/commit/c48ecdd99166259966c97616a64ec0950e64172f))
+
 ## [5.26.0](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.25.0...release-v5.26.0) (2023-08-08)
 
 

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@usereactify/search",
     "description": "React UI library for Reactify Search",
-    "version": "5.26.0",
+    "version": "5.26.1",
     "license": "MIT",
     "main": "dist/src/index.js",
     "types": "dist/src/index.d.ts",

package/dist/src/components/Sensor/SensorSortScore.d.ts

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

package/dist/src/components/Sensor/SensorSortScore.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SensorSortScore = void 0;
+const react_1 = __importDefault(require("react"));
+const ReactiveComponent_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/basic/ReactiveComponent"));
+const SensorSortScore = () => (react_1.default.createElement(ReactiveComponent_1.default, { componentId: "SensorSortScore", customQuery: () => ({
+        sort: { _score: "desc" },
+    }) }));
+exports.SensorSortScore = SensorSortScore;
+//# sourceMappingURL=SensorSortScore.js.map

package/dist/src/components/Sensor/SensorSortScore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SensorSortScore.js","sourceRoot":"","sources":["../../../../src/components/Sensor/SensorSortScore.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,yHAAiG;AAE1F,MAAM,eAAe,GAAa,GAAG,EAAE,CAAC,CAC7C,8BAAC,2BAAiB,IAChB,WAAW,EAAC,iBAAiB,EAC7B,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC;QAClB,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;KACzB,CAAC,GACF,CACH,CAAC;AAPW,QAAA,eAAe,mBAO1B","sourcesContent":["import React from \"react\";\nimport ReactiveComponent from \"@appbaseio/reactivesearch/lib/components/basic/ReactiveComponent\";\n\nexport const SensorSortScore: React.FC = () => (\n  <ReactiveComponent\n    componentId=\"SensorSortScore\"\n    customQuery={() => ({\n      sort: { _score: \"desc\" },\n    })}\n  />\n);\n"]}

package/dist/src/hooks/reactivesearch/useReactiveDataSearchProps.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export declare const useReactiveDataSearchProps: (options: {
+    [key: string]: any;
+    debounce?: number | undefined;
+    placeholder?: string | undefined;
+    inputClassName?: string | undefined;
+}) => {
+    debounce?: number | undefined;
+    placeholder: string;
+    inputClassName?: string | undefined;
+    type: string;
+    showIcon: boolean;
+    fuzziness: 0 | 2 | 1 | "AUTO";
+    queryFormat: "and" | "or";
+    autosuggest: boolean;
+    value: string;
+    onKeyUp: (event: React.KeyboardEvent) => void;
+    componentId: string;
+    dataField: string[];
+    fieldWeights: number[];
+    onChange: (value: string, triggerQuery: () => {}) => void;
+    onBlur: () => void;
+    onFocus: () => void;
+    innerClass: {
+        input: string | undefined;
+    };
+};

package/dist/src/hooks/reactivesearch/useReactiveDataSearchProps.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReactiveDataSearchProps = void 0;
+const react_1 = __importDefault(require("react"));
+const ahooks_1 = require("ahooks");
+const hooks_1 = require("../../hooks");
+// default field for when zero search fields have been configured in Reactify
+const defaultSearchField = {
+    id: "title",
+    field: "title",
+    importance: 0,
+    searchType: "instant_search",
+};
+const useReactiveDataSearchProps = (options) => {
+    var _a;
+    const { config } = (0, hooks_1.useReactifySearchContext)();
+    const { searchTerm, submitSearchTerm, setSearchTerm, setShowInstantSearchResults, } = (0, hooks_1.useSearch)();
+    const searchFields = react_1.default.useMemo(() => 0 < config.fields.length
+        ? config.fields.filter((field) => ["always_search", "instant_search"].includes(field.searchType))
+        : [defaultSearchField], []);
+    const handleKeyPress = react_1.default.useCallback((event) => {
+        if ("Enter" !== event.key)
+            return;
+        submitSearchTerm();
+    }, [submitSearchTerm]);
+    const { track } = (0, hooks_1.useAnalytics)();
+    const trackQuery = react_1.default.useCallback(() => {
+        if (!searchTerm || (searchTerm && searchTerm.length < 3))
+            return;
+        track({ eventName: "search", payload: { searchTerm: searchTerm } });
+    }, [searchTerm, track]);
+    const { run: runDebouncedTriggerQuery, cancel: cancelDebouncedTriggerQuery } = (0, ahooks_1.useDebounceFn)((triggerQuery) => {
+        triggerQuery();
+        trackQuery();
+    }, {
+        wait: (_a = options.debounce) !== null && _a !== void 0 ? _a : 300,
+    });
+    const reactiveDataSearchProps = react_1.default.useMemo(() => {
+        var _a;
+        return (Object.assign({ type: "search", showIcon: false, fuzziness: 1, queryFormat: "and", autosuggest: false, value: searchTerm !== null && searchTerm !== void 0 ? searchTerm : "", onKeyUp: handleKeyPress, componentId: "SearchInput", placeholder: (_a = options.placeholder) !== null && _a !== void 0 ? _a : "Search for a product...", dataField: searchFields.map((field) => field.field), fieldWeights: searchFields.map((field) => field.importance), onChange: (value, triggerQuery) => {
+                setSearchTerm(value);
+                if (!!value) {
+                    runDebouncedTriggerQuery(triggerQuery);
+                }
+                else {
+                    cancelDebouncedTriggerQuery();
+                }
+            }, onBlur: () => {
+                // setTimeout ensures that results are still clickable before close
+                setTimeout(() => setShowInstantSearchResults(false), 300);
+            }, onFocus: () => {
+                setShowInstantSearchResults(true);
+            }, innerClass: {
+                input: options.inputClassName,
+            } }, options));
+    }, [
+        searchTerm,
+        handleKeyPress,
+        options.placeholder,
+        searchFields,
+        setSearchTerm,
+        runDebouncedTriggerQuery,
+        cancelDebouncedTriggerQuery,
+    ]);
+    return reactiveDataSearchProps;
+};
+exports.useReactiveDataSearchProps = useReactiveDataSearchProps;
+//# sourceMappingURL=useReactiveDataSearchProps.js.map

package/dist/src/hooks/reactivesearch/useReactiveDataSearchProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReactiveDataSearchProps.js","sourceRoot":"","sources":["../../../../src/hooks/reactivesearch/useReactiveDataSearchProps.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,mCAAuC;AAIvC,uCAAgF;AAEhF,6EAA6E;AAC7E,MAAM,kBAAkB,GAAgB;IACtC,EAAE,EAAE,OAAO;IACX,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,gBAAgB;CAC7B,CAAC;AAEK,MAAM,0BAA0B,GAAG,CAAC,OAK1C,EAAE,EAAE;;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,gCAAwB,GAAE,CAAC;IAC9C,MAAM,EACJ,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,2BAA2B,GAC5B,GAAG,IAAA,iBAAS,GAAE,CAAC;IAEhB,MAAM,YAAY,GAAG,eAAK,CAAC,OAAO,CAChC,GAAG,EAAE,CACH,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM;QACtB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAC7B,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAC/D;QACH,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAC1B,EAAE,CACH,CAAC;IAEF,MAAM,cAAc,GAAG,eAAK,CAAC,WAAW,CACtC,CAAC,KAA0B,EAAE,EAAE;QAC7B,IAAI,OAAO,KAAK,KAAK,CAAC,GAAG;YAAE,OAAO;QAClC,gBAAgB,EAAE,CAAC;IACrB,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAEjC,MAAM,UAAU,GAAG,eAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;YAAE,OAAO;QACjE,KAAK,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,MAAM,EAAE,GAAG,EAAE,wBAAwB,EAAE,MAAM,EAAE,2BAA2B,EAAE,GAC1E,IAAA,sBAAa,EACX,CAAC,YAAwB,EAAE,EAAE;QAC3B,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,CAAC;IACf,CAAC,EACD;QACE,IAAI,EAAE,MAAA,OAAO,CAAC,QAAQ,mCAAI,GAAG;KAC9B,CACF,CAAC;IAEJ,MAAM,uBAAuB,GAAG,eAAK,CAAC,OAAO,CAC3C,GAAG,EAAE;;QAAC,OAAA,iBACJ,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,CAAuB,EAClC,WAAW,EAAE,KAAqB,EAClC,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,EAAE,EACvB,OAAO,EAAE,cAAc,EACvB,WAAW,EAAE,aAAa,EAC1B,WAAW,EAAE,MAAA,OAAO,CAAC,WAAW,mCAAI,yBAAyB,EAC7D,SAAS,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EACnD,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,EAC3D,QAAQ,EAAE,CAAC,KAAa,EAAE,YAAsB,EAAE,EAAE;gBAClD,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,IAAI,CAAC,CAAC,KAAK,EAAE;oBACX,wBAAwB,CAAC,YAAY,CAAC,CAAC;iBACxC;qBAAM;oBACL,2BAA2B,EAAE,CAAC;iBAC/B;YACH,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;gBACX,mEAAmE;gBACnE,UAAU,CAAC,GAAG,EAAE,CAAC,2BAA2B,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;YAC5D,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;gBACZ,2BAA2B,CAAC,IAAI,CAAC,CAAC;YACpC,CAAC,EACD,UAAU,EAAE;gBACV,KAAK,EAAE,OAAO,CAAC,cAAc;aAC9B,IACE,OAAO,EACV,CAAA;KAAA,EACF;QACE,UAAU;QACV,cAAc;QACd,OAAO,CAAC,WAAW;QACnB,YAAY;QACZ,aAAa;QACb,wBAAwB;QACxB,2BAA2B;KAC5B,CACF,CAAC;IAEF,OAAO,uBAAuB,CAAC;AACjC,CAAC,CAAC;AA/FW,QAAA,0BAA0B,8BA+FrC","sourcesContent":["import React from \"react\";\nimport { useDebounceFn } from \"ahooks\";\n\nimport type { ConfigField } from \"../../types/config\";\n\nimport { useReactifySearchContext, useSearch, useAnalytics } from \"../../hooks\";\n\n// default field for when zero search fields have been configured in Reactify\nconst defaultSearchField: ConfigField = {\n  id: \"title\",\n  field: \"title\",\n  importance: 0,\n  searchType: \"instant_search\",\n};\n\nexport const useReactiveDataSearchProps = (options: {\n  [key: string]: any;\n  debounce?: number;\n  placeholder?: string;\n  inputClassName?: string;\n}) => {\n  const { config } = useReactifySearchContext();\n  const {\n    searchTerm,\n    submitSearchTerm,\n    setSearchTerm,\n    setShowInstantSearchResults,\n  } = useSearch();\n\n  const searchFields = React.useMemo(\n    () =>\n      0 < config.fields.length\n        ? config.fields.filter((field) =>\n            [\"always_search\", \"instant_search\"].includes(field.searchType)\n          )\n        : [defaultSearchField],\n    []\n  );\n\n  const handleKeyPress = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (\"Enter\" !== event.key) return;\n      submitSearchTerm();\n    },\n    [submitSearchTerm]\n  );\n\n  const { track } = useAnalytics();\n\n  const trackQuery = React.useCallback(() => {\n    if (!searchTerm || (searchTerm && searchTerm.length < 3)) return;\n    track({ eventName: \"search\", payload: { searchTerm: searchTerm } });\n  }, [searchTerm, track]);\n\n  const { run: runDebouncedTriggerQuery, cancel: cancelDebouncedTriggerQuery } =\n    useDebounceFn(\n      (triggerQuery: () => void) => {\n        triggerQuery();\n        trackQuery();\n      },\n      {\n        wait: options.debounce ?? 300,\n      }\n    );\n\n  const reactiveDataSearchProps = React.useMemo(\n    () => ({\n      type: \"search\",\n      showIcon: false,\n      fuzziness: 1 as 0 | 1 | 2 | \"AUTO\",\n      queryFormat: \"and\" as \"and\" | \"or\",\n      autosuggest: false,\n      value: searchTerm ?? \"\",\n      onKeyUp: handleKeyPress,\n      componentId: \"SearchInput\",\n      placeholder: options.placeholder ?? \"Search for a product...\",\n      dataField: searchFields.map((field) => field.field),\n      fieldWeights: searchFields.map((field) => field.importance),\n      onChange: (value: string, triggerQuery: () => {}) => {\n        setSearchTerm(value);\n        if (!!value) {\n          runDebouncedTriggerQuery(triggerQuery);\n        } else {\n          cancelDebouncedTriggerQuery();\n        }\n      },\n      onBlur: () => {\n        // setTimeout ensures that results are still clickable before close\n        setTimeout(() => setShowInstantSearchResults(false), 300);\n      },\n      onFocus: () => {\n        setShowInstantSearchResults(true);\n      },\n      innerClass: {\n        input: options.inputClassName,\n      },\n      ...options,\n    }),\n    [\n      searchTerm,\n      handleKeyPress,\n      options.placeholder,\n      searchFields,\n      setSearchTerm,\n      runDebouncedTriggerQuery,\n      cancelDebouncedTriggerQuery,\n    ]\n  );\n\n  return reactiveDataSearchProps;\n};\n"]}

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

@@ -0,0 +1,15 @@
+import { ReactivesearchResultProps } from "../types";
+export declare const usePaginationLoadMore: (input: ReactivesearchResultProps) => {
+    loading: boolean;
+    hasMore: boolean;
+    handleLoadMore: () => void;
+    resultStats: {
+        time: number;
+        hidden: number;
+        promoted: number;
+        currentPage: number;
+        numberOfPages: number;
+        numberOfResults?: number;
+        displayedResults: number;
+    };
+};

package/dist/src/hooks/usePaginationLoadMore.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePaginationLoadMore = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../hooks");
+const utility_1 = require("../utility");
+const usePaginationLoadMore = (input) => {
+    const analyticsHook = (0, hooks_1.useAnalytics)();
+    const { filterStack } = (0, hooks_1.useFilters)();
+    const hasMore = input.resultStats.displayedResults !== input.resultStats.numberOfResults;
+    const handleLoadMore = react_1.default.useCallback(() => {
+        utility_1.debug.log("usePaginationLoadMore", "handleLoadMore");
+        if (!hasMore) {
+            return;
+        }
+        input.loadMore();
+        analyticsHook.track({
+            eventName: "paginationChange",
+            payload: {
+                page: Math.ceil(input.resultStats.displayedResults / ((filterStack === null || filterStack === void 0 ? void 0 : filterStack.pageSize) || 20)) + 1,
+                source: window.location.pathname.includes("/search")
+                    ? "search"
+                    : "collection",
+            },
+        });
+    }, [input.loadMore, analyticsHook.track, input.resultStats, filterStack]);
+    return react_1.default.useMemo(() => ({
+        loading: input.loading,
+        hasMore,
+        handleLoadMore,
+        resultStats: input.resultStats,
+    }), [input.loading, hasMore, handleLoadMore, input.resultStats]);
+};
+exports.usePaginationLoadMore = usePaginationLoadMore;
+//# sourceMappingURL=usePaginationLoadMore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationLoadMore.js","sourceRoot":"","sources":["../../../src/hooks/usePaginationLoadMore.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,oCAAoD;AACpD,wCAAmC;AAE5B,MAAM,qBAAqB,GAAG,CACnC,KAAgC,EAchC,EAAE;IACF,MAAM,aAAa,GAAG,IAAA,oBAAY,GAAE,CAAC;IACrC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,GAAE,CAAC;IAErC,MAAM,OAAO,GACX,KAAK,CAAC,WAAW,CAAC,gBAAgB,KAAK,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC;IAE3E,MAAM,cAAc,GAAG,eAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,eAAK,CAAC,GAAG,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,CAAC;QAErD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,KAAK,CAAC,QAAQ,EAAE,CAAC;QACjB,aAAa,CAAC,KAAK,CAAC;YAClB,SAAS,EAAE,kBAAkB;YAC7B,OAAO,EAAE;gBACP,IAAI,EACF,IAAI,CAAC,IAAI,CACP,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,KAAI,EAAE,CAAC,CACnE,GAAG,CAAC;gBACP,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;oBAClD,CAAC,CAAC,QAAQ;oBACV,CAAC,CAAC,YAAY;aACjB;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1E,OAAO,eAAK,CAAC,OAAO,CAClB,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,OAAO;QACP,cAAc;QACd,WAAW,EAAE,KAAK,CAAC,WAAW;KAC/B,CAAC,EACF,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,CAAC,WAAW,CAAC,CAC5D,CAAC;AACJ,CAAC,CAAC;AArDW,QAAA,qBAAqB,yBAqDhC","sourcesContent":["import React from \"react\";\n\nimport { ReactivesearchResultProps } from \"../types\";\nimport { useAnalytics, useFilters } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const usePaginationLoadMore = (\n  input: ReactivesearchResultProps\n): {\n  loading: boolean;\n  hasMore: boolean;\n  handleLoadMore: () => void;\n  resultStats: {\n    time: number;\n    hidden: number;\n    promoted: number;\n    currentPage: number;\n    numberOfPages: number;\n    numberOfResults?: number;\n    displayedResults: number;\n  };\n} => {\n  const analyticsHook = useAnalytics();\n  const { filterStack } = useFilters();\n\n  const hasMore =\n    input.resultStats.displayedResults !== input.resultStats.numberOfResults;\n\n  const handleLoadMore = React.useCallback(() => {\n    debug.log(\"usePaginationLoadMore\", \"handleLoadMore\");\n\n    if (!hasMore) {\n      return;\n    }\n\n    input.loadMore();\n    analyticsHook.track({\n      eventName: \"paginationChange\",\n      payload: {\n        page:\n          Math.ceil(\n            input.resultStats.displayedResults / (filterStack?.pageSize || 20)\n          ) + 1,\n        source: window.location.pathname.includes(\"/search\")\n          ? \"search\"\n          : \"collection\",\n      },\n    });\n  }, [input.loadMore, analyticsHook.track, input.resultStats, filterStack]);\n\n  return React.useMemo(\n    () => ({\n      loading: input.loading,\n      hasMore,\n      handleLoadMore,\n      resultStats: input.resultStats,\n    }),\n    [input.loading, hasMore, handleLoadMore, input.resultStats]\n  );\n};\n"]}

package/dist/src/hooks/useSortBy.js

@@ -12,7 +12,11 @@ const useSortBy = () => {
     const { track } = (0, hooks_1.useAnalytics)();
     const sortOptions = react_1.default.useMemo(() => {
         return config.sort
-            .sort((a, b) => `${a.position}`.localeCompare(`${b.position}`))
+            .sort((a, b) => {
+            const aInt = (typeof a.position === "string") ? parseInt(a.position, 10) : a.position;
+            const bInt = (typeof b.position === "string") ? parseInt(b.position, 10) : b.position;
+            return aInt - bInt;
+        })
             .filter(({ visibility }) => ["all", options.mode].includes(visibility));
     }, [options.mode, config]);
     const sortOption = react_1.default.useMemo(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"useSortBy.js","sourceRoot":"","sources":["../../../src/hooks/useSortBy.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,oCAAkE;AAClE,wCAAmC;AAE5B,MAAM,SAAS,GAAG,GAUvB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,gCAAwB,GAAE,CAAC;IAC/D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAEjC,MAAM,WAAW,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,MAAM,CAAC,IAAI;aACf,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;aAC9D,MAAM,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;IAC5E,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IAE3B,MAAM,UAAU,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,CACL,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,UAAU,CAAC;YAC9D,WAAW,CAAC,CAAC,CAAC,CACf,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAErC,MAAM,aAAa,GAAG,eAAK,CAAC,WAAW,CACrC,CAAC,gBAAwB,EAAE,kBAAkB,GAAG,KAAK,EAAE,EAAE;QACvD,eAAK,CAAC,UAAU,CAAC;YACf,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,qBAAqB;YAC9B,IAAI,EAAE;gBACJ,gBAAgB,EAAE,gBAAgB;aACnC;SACF,CAAC,CAAC;QAEH,eAAK,CAAC,GAAG,CACP,WAAW,EACX,iCAAiC,EACjC,gBAAgB,CACjB,CAAC;QAEF,MAAM,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAEvC,IAAI,CAAC,kBAAkB,EAAE;YACvB,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC1C,IAAI,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;gBAChC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;aAChD;iBAAM;gBACL,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;aACnD;YACD,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;SAClD;QAED,KAAK,CAAC;YACJ,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE;gBACP,IAAI,EAAE,gBAAgB;aACvB;SACF,CAAC,CAAC;IACL,CAAC,EACD,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CACvB,CAAC;IAEF,eAAK,CAAC,IAAI,CAAC,WAAW,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;IAClD,eAAK,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;IAEpD,OAAO;QACL,WAAW;QACX,UAAU;QACV,aAAa;KACd,CAAC;AACJ,CAAC,CAAC;AAzEW,QAAA,SAAS,aAyEpB","sourcesContent":["import React from \"react\";\n\nimport { ConfigSort } from \"../types\";\nimport { useAnalytics, useReactifySearchContext } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const useSortBy = (): {\n  /** The currently selected sort option */\n  sortOption?: ConfigSort;\n  /** All of the available sort options */\n  sortOptions: Array<ConfigSort>;\n  /** Function for changing the current sort option */\n  setSortOption: (\n    sortOptionHandle: string,\n    ignoreHistoryState?: boolean\n  ) => void;\n} => {\n  const { options, config, sortby } = useReactifySearchContext();\n  const { track } = useAnalytics();\n\n  const sortOptions = React.useMemo(() => {\n    return config.sort\n      .sort((a, b) => `${a.position}`.localeCompare(`${b.position}`))\n      .filter(({ visibility }) => [\"all\", options.mode].includes(visibility));\n  }, [options.mode, config]);\n\n  const sortOption = React.useMemo(() => {\n    return (\n      sortOptions.find(({ handle }) => handle === sortby.sortOption) ||\n      sortOptions[0]\n    );\n  }, [sortOptions, sortby.sortOption]);\n\n  const setSortOption = React.useCallback(\n    (sortOptionHandle: string, ignoreHistoryState = false) => {\n      debug.breadcrumb({\n        category: \"sort\",\n        message: \"sort option changed\",\n        data: {\n          sortOptionHandle: sortOptionHandle,\n        },\n      });\n\n      debug.log(\n        \"useSortBy\",\n        \"setSortOption[sortOptionHandle]\",\n        sortOptionHandle\n      );\n\n      sortby.setSortOption(sortOptionHandle);\n\n      if (!ignoreHistoryState) {\n        const url = new URL(window.location.href);\n        if (url.searchParams.has(\"sort\")) {\n          url.searchParams.set(\"sort\", sortOptionHandle);\n        } else {\n          url.searchParams.append(\"sort\", sortOptionHandle);\n        }\n        window.history.pushState({}, \"\", url.toString());\n      }\n\n      track({\n        eventName: \"sortChange\",\n        payload: {\n          type: sortOptionHandle,\n        },\n      });\n    },\n    [window.location.href]\n  );\n\n  debug.hook(\"useSortBy\", \"sortOption\", sortOption);\n  debug.hook(\"useSortBy\", \"sortOptions\", sortOptions);\n\n  return {\n    sortOptions,\n    sortOption,\n    setSortOption,\n  };\n};\n"]}
+{"version":3,"file":"useSortBy.js","sourceRoot":"","sources":["../../../src/hooks/useSortBy.ts"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport { ConfigSort } from \"../types\";\nimport { useAnalytics, useReactifySearchContext } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const useSortBy = (): {\n  /** The currently selected sort option */\n  sortOption?: ConfigSort;\n  /** All of the available sort options */\n  sortOptions: Array<ConfigSort>;\n  /** Function for changing the current sort option */\n  setSortOption: (\n    sortOptionHandle: string,\n    ignoreHistoryState?: boolean\n  ) => void;\n} => {\n  const { options, config, sortby } = useReactifySearchContext();\n  const { track } = useAnalytics();\n\n  const sortOptions = React.useMemo(() => {\n    return config.sort\n      .sort((a, b) => {\n        const aInt = (typeof a.position === \"string\") ? parseInt(a.position, 10) : a.position;\n        const bInt = (typeof b.position === \"string\") ? parseInt(b.position, 10) : b.position;\n        return aInt - bInt;\n      })\n      .filter(({ visibility }) => [\"all\", options.mode].includes(visibility));\n  }, [options.mode, config]);\n\n  const sortOption = React.useMemo(() => {\n    return (\n      sortOptions.find(({ handle }) => handle === sortby.sortOption) ||\n      sortOptions[0]\n    );\n  }, [sortOptions, sortby.sortOption]);\n\n  const setSortOption = React.useCallback(\n    (sortOptionHandle: string, ignoreHistoryState = false) => {\n      debug.breadcrumb({\n        category: \"sort\",\n        message: \"sort option changed\",\n        data: {\n          sortOptionHandle: sortOptionHandle,\n        },\n      });\n\n      debug.log(\n        \"useSortBy\",\n        \"setSortOption[sortOptionHandle]\",\n        sortOptionHandle\n      );\n\n      sortby.setSortOption(sortOptionHandle);\n\n      if (!ignoreHistoryState) {\n        const url = new URL(window.location.href);\n        if (url.searchParams.has(\"sort\")) {\n          url.searchParams.set(\"sort\", sortOptionHandle);\n        } else {\n          url.searchParams.append(\"sort\", sortOptionHandle);\n        }\n        window.history.pushState({}, \"\", url.toString());\n      }\n\n      track({\n        eventName: \"sortChange\",\n        payload: {\n          type: sortOptionHandle,\n        },\n      });\n    },\n    [window.location.href]\n  );\n\n  debug.hook(\"useSortBy\", \"sortOption\", sortOption);\n  debug.hook(\"useSortBy\", \"sortOptions\", sortOptions);\n\n  return {\n    sortOptions,\n    sortOption,\n    setSortOption,\n  };\n};\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "5.26.0",
+  "version": "5.26.2",
   "license": "MIT",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",