@usereactify/search 3.6.0 → 3.8.0

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

@@ -1,9 +1,14 @@
 declare type Props = {
+    [key: string]: any;
     debounce?: number;
     placeholder?: string;
     inputClassName?: string;
 };
 export declare const useReactiveDataSearchProps: (props?: Props) => {
+    debounce?: number | undefined;
+    placeholder: string;
+    inputClassName?: string | undefined;
+    type: string;
     showIcon: boolean;
     fuzziness: 0 | 1 | 2 | "AUTO";
     queryFormat: "and" | "or";
@@ -11,7 +16,6 @@ export declare const useReactiveDataSearchProps: (props?: Props) => {
     value: string;
     onKeyUp: (e: any) => void;
     componentId: string;
-    placeholder: string;
     dataField: string[];
     fieldWeights: number[];
     onChange: (value: string, triggerQuery: () => {}) => void;

package/dist/hooks/reactivesearch/useReactiveDataSearchProps.js

@@ -45,35 +45,20 @@ const useReactiveDataSearchProps = (props = {}) => {
     }, {
         wait: debounce !== null && debounce !== void 0 ? debounce : 300,
     });
-    return react_1.default.useMemo(() => ({
-        showIcon: false,
-        fuzziness: 1,
-        queryFormat: "and",
-        autosuggest: false,
-        value: searchQuery !== null && searchQuery !== void 0 ? searchQuery : "",
-        onKeyUp: handleKeyPress,
-        componentId: "SearchInput",
-        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search for a product...",
-        dataField: searchFields.map((field) => field.field),
-        fieldWeights: searchFields.map((field) => field.importance),
-        onChange: (value, triggerQuery) => {
+    return react_1.default.useMemo(() => (Object.assign({ type: "search", showIcon: false, fuzziness: 1, queryFormat: "and", autosuggest: false, value: searchQuery !== null && searchQuery !== void 0 ? searchQuery : "", onKeyUp: handleKeyPress, componentId: "SearchInput", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search for a product...", dataField: searchFields.map((field) => field.field), fieldWeights: searchFields.map((field) => field.importance), onChange: (value, triggerQuery) => {
             setSearchQuery(value);
             if (!!value)
                 runDebouncedTriggerQuery(triggerQuery);
             else
                 cancelDebouncedTriggerQuery();
-        },
-        onBlur: () => {
+        }, onBlur: () => {
             // requestAnimationFrame ensures that results are still clickable before close
             window.requestAnimationFrame(() => setShowInstantSearchResults(false));
-        },
-        onFocus: () => {
+        }, onFocus: () => {
             setShowInstantSearchResults(true);
-        },
-        innerClass: {
+        }, innerClass: {
             input: inputClassName,
-        },
-    }), [
+        } }, props)), [
         searchQuery,
         handleKeyPress,
         placeholder,

package/dist/result/ResultList.d.ts

@@ -11,6 +11,7 @@ declare type ResultProps = ReactivesearchResultProps & {
     products: ElasticProduct[];
 };
 declare type Props = {
+    gridGap?: number;
     pageSize?: number;
     gridColumns?: number;
     listClassName?: string;

package/dist/result/ResultList.js

@@ -23,7 +23,7 @@ const ResultList = (props) => {
 };
 exports.ResultList = ResultList;
 const ResultListInner = (props) => {
-    const { gridColumns, renderError, renderAfter, renderBefore, renderLoading, listClassName, renderResults, renderNoResults, renderResultCard, renderLoadMoreButton, renderResultCardCallout, reactivesearchResultProps, } = props;
+    const { gridGap, gridColumns, renderError, renderAfter, renderBefore, renderLoading, listClassName, renderResults, renderNoResults, renderResultCard, renderLoadMoreButton, renderResultCardCallout, reactivesearchResultProps, } = props;
     const filterStack = (0, hooks_1.useFilterStack)();
     const { instantSearch, searchQuery } = (0, hooks_1.useSearch)();
     const { track } = (0, __1.useAnalytics)();
@@ -31,8 +31,9 @@ const ResultListInner = (props) => {
         typeof reactivesearchResultProps.resultStats.numberOfResults, [reactivesearchResultProps]);
     const styleProp = react_1.default.useMemo(() => ({
         display: "grid",
+        gap: `${gridGap !== null && gridGap !== void 0 ? gridGap : "0px"}`,
         gridTemplateColumns: `repeat(${gridColumns !== null && gridColumns !== void 0 ? gridColumns : 4}, minmax(0, 1fr))`,
-    }), [gridColumns]);
+    }), [gridColumns, gridGap]);
     const resultProps = react_1.default.useMemo(() => (Object.assign(Object.assign({}, reactivesearchResultProps), { products: reactivesearchResultProps.data.filter((document) => elastic_1.ElasticDocumentType.Product === document.type || !document.type), callouts: reactivesearchResultProps.data.filter((document) => elastic_1.ElasticDocumentType.Callout === document.type) })), [reactivesearchResultProps]);
     if (reactivesearchResultProps.error) {
         if (renderError)

package/dist/search/SearchInput.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 declare type Props = {
+    [key: string]: any;
     debounce?: number;
     placeholder?: string;
     inputClassName?: string;

package/dist/search/SearchInput.js

@@ -9,11 +9,9 @@ const DataSearch_1 = __importDefault(require("@appbaseio/reactivesearch/lib/comp
 const hooks_1 = require("../hooks");
 const SearchInput = (props) => {
     const { debounce, placeholder, inputClassName } = props;
-    const reactiveDataSearchProps = (0, hooks_1.useReactiveDataSearchProps)({
-        debounce,
+    const reactiveDataSearchProps = (0, hooks_1.useReactiveDataSearchProps)(Object.assign({ debounce,
         placeholder,
-        inputClassName,
-    });
+        inputClassName }, props));
     return react_1.default.createElement(DataSearch_1.default, Object.assign({}, reactiveDataSearchProps));
 };
 exports.SearchInput = SearchInput;

package/package.json

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