react-search-autocomplete - npm Package Compare versions

Comparing version 8.2.1 to 8.3.1

dist/components/ReactSearchAutocomplete.d.ts

@@ -27,3 +27,4 @@ import { default as Fuse } from 'fuse.js';
     showItemsOnFocus?: boolean;
+    maxLength?: number;
 }
-export default function ReactSearchAutocomplete<T>({ items, fuseOptions, inputDebounce, onSearch, onHover, onSelect, onFocus, onClear, showIcon, showClear, maxResults, placeholder, autoFocus, styling, resultStringKeyName, inputSearchString, formatResult, showNoResults, showNoResultsText, showItemsOnFocus }: ReactSearchAutocompleteProps<T>): JSX.Element;
+export default function ReactSearchAutocomplete<T>({ items, fuseOptions, inputDebounce, onSearch, onHover, onSelect, onFocus, onClear, showIcon, showClear, maxResults, placeholder, autoFocus, styling, resultStringKeyName, inputSearchString, formatResult, showNoResults, showNoResultsText, showItemsOnFocus, maxLength }: ReactSearchAutocompleteProps<T>): JSX.Element;

dist/components/ReactSearchAutocomplete.js

@@ -56,3 +56,3 @@ "use strict";
 function ReactSearchAutocomplete(_a) {
-    var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.fuseOptions, fuseOptions = _c === void 0 ? config_1.defaultFuseOptions : _c, _d = _a.inputDebounce, inputDebounce = _d === void 0 ? exports.DEFAULT_INPUT_DEBOUNCE : _d, _e = _a.onSearch, onSearch = _e === void 0 ? function () { } : _e, _f = _a.onHover, onHover = _f === void 0 ? function () { } : _f, _g = _a.onSelect, onSelect = _g === void 0 ? function () { } : _g, _h = _a.onFocus, onFocus = _h === void 0 ? function () { } : _h, _j = _a.onClear, onClear = _j === void 0 ? function () { } : _j, _k = _a.showIcon, showIcon = _k === void 0 ? true : _k, _l = _a.showClear, showClear = _l === void 0 ? true : _l, _m = _a.maxResults, maxResults = _m === void 0 ? exports.MAX_RESULTS : _m, _o = _a.placeholder, placeholder = _o === void 0 ? '' : _o, _p = _a.autoFocus, autoFocus = _p === void 0 ? false : _p, _q = _a.styling, styling = _q === void 0 ? {} : _q, _r = _a.resultStringKeyName, resultStringKeyName = _r === void 0 ? 'name' : _r, _s = _a.inputSearchString, inputSearchString = _s === void 0 ? '' : _s, formatResult = _a.formatResult, _t = _a.showNoResults, showNoResults = _t === void 0 ? true : _t, _u = _a.showNoResultsText, showNoResultsText = _u === void 0 ? 'No results' : _u, _v = _a.showItemsOnFocus, showItemsOnFocus = _v === void 0 ? false : _v;
+    var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.fuseOptions, fuseOptions = _c === void 0 ? config_1.defaultFuseOptions : _c, _d = _a.inputDebounce, inputDebounce = _d === void 0 ? exports.DEFAULT_INPUT_DEBOUNCE : _d, _e = _a.onSearch, onSearch = _e === void 0 ? function () { } : _e, _f = _a.onHover, onHover = _f === void 0 ? function () { } : _f, _g = _a.onSelect, onSelect = _g === void 0 ? function () { } : _g, _h = _a.onFocus, onFocus = _h === void 0 ? function () { } : _h, _j = _a.onClear, onClear = _j === void 0 ? function () { } : _j, _k = _a.showIcon, showIcon = _k === void 0 ? true : _k, _l = _a.showClear, showClear = _l === void 0 ? true : _l, _m = _a.maxResults, maxResults = _m === void 0 ? exports.MAX_RESULTS : _m, _o = _a.placeholder, placeholder = _o === void 0 ? '' : _o, _p = _a.autoFocus, autoFocus = _p === void 0 ? false : _p, _q = _a.styling, styling = _q === void 0 ? {} : _q, _r = _a.resultStringKeyName, resultStringKeyName = _r === void 0 ? 'name' : _r, _s = _a.inputSearchString, inputSearchString = _s === void 0 ? '' : _s, formatResult = _a.formatResult, _t = _a.showNoResults, showNoResults = _t === void 0 ? true : _t, _u = _a.showNoResultsText, showNoResultsText = _u === void 0 ? 'No results' : _u, _v = _a.showItemsOnFocus, showItemsOnFocus = _v === void 0 ? false : _v, _w = _a.maxLength, maxLength = _w === void 0 ? 0 : _w;
     var theme = __assign(__assign({}, config_1.defaultTheme), styling);
@@ -62,9 +62,9 @@ var options = __assign(__assign({}, config_1.defaultFuseOptions), fuseOptions);
     fuse.setCollection(items);
-    var _w = (0, react_1.useState)(inputSearchString), searchString = _w[0], setSearchString = _w[1];
-    var _x = (0, react_1.useState)([]), results = _x[0], setResults = _x[1];
-    var _y = (0, react_1.useState)(-1), highlightedItem = _y[0], setHighlightedItem = _y[1];
-    var _z = (0, react_1.useState)(false), isSearchComplete = _z[0], setIsSearchComplete = _z[1];
-    var _0 = (0, react_1.useState)(false), isTyping = _0[0], setIsTyping = _0[1];
-    var _1 = (0, react_1.useState)(false), showNoResultsFlag = _1[0], setShowNoResultsFlag = _1[1];
-    var _2 = (0, react_1.useState)(false), hasFocus = _2[0], setHasFocus = _2[1];
+    var _x = (0, react_1.useState)(inputSearchString), searchString = _x[0], setSearchString = _x[1];
+    var _y = (0, react_1.useState)([]), results = _y[0], setResults = _y[1];
+    var _z = (0, react_1.useState)(-1), highlightedItem = _z[0], setHighlightedItem = _z[1];
+    var _0 = (0, react_1.useState)(false), isSearchComplete = _0[0], setIsSearchComplete = _0[1];
+    var _1 = (0, react_1.useState)(false), isTyping = _1[0], setIsTyping = _1[1];
+    var _2 = (0, react_1.useState)(false), showNoResultsFlag = _2[0], setShowNoResultsFlag = _2[1];
+    var _3 = (0, react_1.useState)(false), hasFocus = _3[0], setHasFocus = _3[1];
     (0, react_1.useEffect)(function () {
@@ -187,3 +187,3 @@ setSearchString(inputSearchString);
     };
-    return ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsx)(StyledReactSearchAutocomplete, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "wrapper" }, { children: [(0, jsx_runtime_1.jsx)(SearchInput_1.default, { searchString: searchString, setSearchString: handleSetSearchString, autoFocus: autoFocus, onFocus: handleOnFocus, onClear: onClear, placeholder: placeholder, showIcon: showIcon, showClear: showClear, setHighlightedItem: handleSetHighlightedItem }), (0, jsx_runtime_1.jsx)(Results_1.default, { results: results, onClick: handleOnClick, setSearchString: setSearchString, showIcon: showIcon, maxResults: maxResults, resultStringKeyName: resultStringKeyName, formatResult: formatResult, highlightedItem: highlightedItem, setHighlightedItem: handleSetHighlightedItem, showNoResultsFlag: showNoResultsFlag, showNoResultsText: showNoResultsText })] })) }) })));
+    return ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsx)(StyledReactSearchAutocomplete, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "wrapper" }, { children: [(0, jsx_runtime_1.jsx)(SearchInput_1.default, { searchString: searchString, setSearchString: handleSetSearchString, autoFocus: autoFocus, onFocus: handleOnFocus, onClear: onClear, placeholder: placeholder, showIcon: showIcon, showClear: showClear, setHighlightedItem: handleSetHighlightedItem, maxLength: maxLength }), (0, jsx_runtime_1.jsx)(Results_1.default, { results: results, onClick: handleOnClick, setSearchString: setSearchString, showIcon: showIcon, maxResults: maxResults, resultStringKeyName: resultStringKeyName, formatResult: formatResult, highlightedItem: highlightedItem, setHighlightedItem: handleSetHighlightedItem, showNoResultsFlag: showNoResultsFlag, showNoResultsText: showNoResultsText })] })) }) })));
 }
@@ -190,0 +190,0 @@ exports.default = ReactSearchAutocomplete;

dist/components/SearchInput.d.ts

@@ -12,4 +12,5 @@ import { ChangeEventHandler, FocusEventHandler } from 'react';
     showClear: boolean;
+    maxLength: number;
 }
-export default function SearchInput({ searchString, setSearchString, setHighlightedItem, autoFocus, onFocus, onClear, placeholder, showIcon, showClear }: SearchInputProps): JSX.Element;
+export default function SearchInput({ searchString, setSearchString, setHighlightedItem, autoFocus, onFocus, onClear, placeholder, showIcon, showClear, maxLength }: SearchInputProps): JSX.Element;
 export {};

dist/components/SearchInput.js

@@ -6,2 +6,13 @@ "use strict";
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -17,3 +28,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 function SearchInput(_a) {
-    var searchString = _a.searchString, setSearchString = _a.setSearchString, setHighlightedItem = _a.setHighlightedItem, autoFocus = _a.autoFocus, onFocus = _a.onFocus, onClear = _a.onClear, placeholder = _a.placeholder, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.showClear, showClear = _c === void 0 ? true : _c;
+    var searchString = _a.searchString, setSearchString = _a.setSearchString, setHighlightedItem = _a.setHighlightedItem, autoFocus = _a.autoFocus, onFocus = _a.onFocus, onClear = _a.onClear, placeholder = _a.placeholder, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.showClear, showClear = _c === void 0 ? true : _c, maxLength = _a.maxLength;
     var ref = (0, react_1.useRef)(null);
@@ -29,3 +40,4 @@ var manualFocus = true;
     };
-    return ((0, jsx_runtime_1.jsxs)(StyledSearchInput, { children: [(0, jsx_runtime_1.jsx)(SearchIcon_1.SearchIcon, { showIcon: showIcon }), (0, jsx_runtime_1.jsx)("input", { ref: ref, spellCheck: false, value: searchString, onChange: setSearchString, onFocus: handleOnFocus, placeholder: placeholder, autoFocus: autoFocus, onKeyDown: function (event) { return setHighlightedItem({ event: event }); }, "data-test": "search-input" }), (0, jsx_runtime_1.jsx)(ClearIcon_1.ClearIcon, { showClear: showClear, setSearchString: setSearchString, searchString: searchString, onClear: onClear, setFocus: setFocus })] }));
+    var maxLengthProperty = maxLength ? { maxLength: maxLength } : {};
+    return ((0, jsx_runtime_1.jsxs)(StyledSearchInput, { children: [(0, jsx_runtime_1.jsx)(SearchIcon_1.SearchIcon, { showIcon: showIcon }), (0, jsx_runtime_1.jsx)("input", __assign({ type: "text", ref: ref, spellCheck: false, value: searchString, onChange: setSearchString, onFocus: handleOnFocus, placeholder: placeholder, autoFocus: autoFocus, onKeyDown: function (event) { return setHighlightedItem({ event: event }); }, "data-test": "search-input" }, maxLengthProperty)), (0, jsx_runtime_1.jsx)(ClearIcon_1.ClearIcon, { showClear: showClear, setSearchString: setSearchString, searchString: searchString, onClear: onClear, setFocus: setFocus })] }));
 }
@@ -32,0 +44,0 @@ exports.default = SearchInput;

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "8.2.1",
+  "version": "8.3.1",
   "description": "A search box for React",
@@ -8,0 +8,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41632

increased by1.63%

Lines of code

549

increased by2.62%

No dependency changes