react-select-search - npm Package Compare versions

Comparing version 4.1.7 to 4.1.8

dist/cjs/index.js

@@ -5,5 +5,7 @@ var $a9A1a$reactjsxruntime = require("react/jsx-runtime");
 
+
 function $parcel$defineInteropFlag(a) {
   Object.defineProperty(a, '__esModule', {value: true, configurable: true});
 }
+
 function $parcel$export(e, n, v, s) {
@@ -44,3 +46,5 @@ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
     if (!oldOption) return (0, $5461a40aff0a72e7$export$2e2bcd8739ae039)(newOption);
-    const nextOption = (0, $5461a40aff0a72e7$export$2e2bcd8739ae039)(oldOption);
+    const nextOption = [
+        ...(0, $5461a40aff0a72e7$export$2e2bcd8739ae039)(oldOption)
+    ];
     const newOptionIndex = nextOption.findIndex((o)=>(0, $2484e3d63aab434d$export$2e2bcd8739ae039)(o.value, newOption.value));
@@ -166,3 +170,3 @@ if (newOptionIndex >= 0) nextOption.splice(newOptionIndex, 1);
     let newHighlighted = current;
-    while((i++) <= max && (!option || option.disabled)){
+    while(i++ <= max && (!option || option.disabled)){
         newHighlighted = dir === "down" ? newHighlighted + 1 : newHighlighted - 1;
@@ -205,3 +209,3 @@ if (newHighlighted < 0) newHighlighted = max;
 const $4bbd6d22e42ff57c$var$nullCb = ()=>{};
-function $4bbd6d22e42ff57c$export$2e2bcd8739ae039({ options: defaultOptions , defaultValue: defaultValue , value: value , multiple: multiple , search: search , onChange: onChange = $4bbd6d22e42ff57c$var$nullCb , onFocus: onFocus = $4bbd6d22e42ff57c$var$nullCb , onBlur: onBlur = $4bbd6d22e42ff57c$var$nullCb , closeOnSelect: closeOnSelect = true , placeholder: placeholder , getOptions: getOptions , filterOptions: filterOptions , useFuzzySearch: useFuzzySearch = true , debounce: debounce  }) {
+function $4bbd6d22e42ff57c$export$2e2bcd8739ae039({ options: defaultOptions, defaultValue: defaultValue, value: value, multiple: multiple, search: search, onChange: onChange = $4bbd6d22e42ff57c$var$nullCb, onFocus: onFocus = $4bbd6d22e42ff57c$var$nullCb, onBlur: onBlur = $4bbd6d22e42ff57c$var$nullCb, closeOnSelect: closeOnSelect = true, placeholder: placeholder, getOptions: getOptions, filterOptions: filterOptions, useFuzzySearch: useFuzzySearch = true, debounce: debounce }) {
     const ref = (0, $a9A1a$react.useRef)();
@@ -249,3 +253,3 @@ const [option, setOption] = (0, $a9A1a$react.useState)(null);
             setFocus(false);
-            setSearch("");
+            !option && setSearch("");
             setHighlighted(-1);
@@ -260,3 +264,3 @@ onBlur(e);
         },
-        onChange: search ? ({ target: target  })=>setSearch(target.value) : null
+        onChange: search ? ({ target: target })=>setSearch(target.value) : null
     };
@@ -296,3 +300,3 @@ const optionProps = {
 
-function $3ab465bfb745ddbf$var$Option({ optionProps: optionProps , highlighted: highlighted , selected: selected , option: option , cls: cls , renderOption: renderOption , disabled: disabled  }) {
+function $3ab465bfb745ddbf$var$Option({ optionProps: optionProps, highlighted: highlighted, selected: selected, option: option, cls: cls, renderOption: renderOption, disabled: disabled }) {
     const props = {
@@ -326,3 +330,3 @@ ...optionProps,
 }
-var $3ab465bfb745ddbf$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $a9A1a$react.memo)($3ab465bfb745ddbf$var$Option);
+var $3ab465bfb745ddbf$export$2e2bcd8739ae039 = $3ab465bfb745ddbf$var$Option;
 
@@ -337,3 +341,3 @@
 function $7239d77515a2cb4f$var$Options(props) {
-    const { options: options , cls: cls , renderOption: renderOption , renderGroupHeader: renderGroupHeader , optionProps: optionProps , snapshot: snapshot , disabled: disabled  } = props;
+    const { options: options, cls: cls, renderOption: renderOption, renderGroupHeader: renderGroupHeader, optionProps: optionProps, snapshot: snapshot, disabled: disabled } = props;
     return /*#__PURE__*/ (0, $a9A1a$reactjsxruntime.jsx)("ul", {
@@ -371,6 +375,6 @@ className: cls("options"),
 }
-var $7239d77515a2cb4f$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $a9A1a$react.memo)($7239d77515a2cb4f$var$Options);
+var $7239d77515a2cb4f$export$2e2bcd8739ae039 = $7239d77515a2cb4f$var$Options;
 
 
-const $fdefef8b289dc6d0$var$SelectSearch = /*#__PURE__*/ (0, $a9A1a$react.forwardRef)(({ disabled: disabled , placeholder: placeholder , multiple: multiple , search: search , autoFocus: autoFocus , autoComplete: autoComplete , id: id , closeOnSelect: closeOnSelect , className: className , renderValue: renderValue , renderOption: renderOption , renderGroupHeader: renderGroupHeader , fuzzySearch: fuzzySearch , emptyMessage: emptyMessage , value: value , ...hookProps }, ref)=>{
+const $fdefef8b289dc6d0$var$SelectSearch = /*#__PURE__*/ (0, $a9A1a$react.forwardRef)(({ disabled: disabled, placeholder: placeholder, multiple: multiple, search: search, autoFocus: autoFocus, autoComplete: autoComplete = "on", id: id, closeOnSelect: closeOnSelect = true, className: className = "select-search", renderValue: renderValue, renderOption: renderOption, renderGroupHeader: renderGroupHeader, fuzzySearch: fuzzySearch = true, emptyMessage: emptyMessage, value: value, debounce: debounce = 250, printOptions: printOptions = "auto", options: options = [], ...hookProps }, ref)=>{
     const selectRef = (0, $a9A1a$react.useRef)(null);
@@ -386,5 +390,8 @@ const cls = (classNames)=>(0, $801112dfb0745bfa$export$2e2bcd8739ae039)(classNames, className);
         useFuzzySearch: fuzzySearch,
+        options: options,
+        printOptions: printOptions,
+        debounce: debounce,
         ...hookProps
     });
-    const { highlighted: highlighted , value: snapValue , fetching: fetching , focus: focus  } = snapshot;
+    const { highlighted: highlighted, value: snapValue, fetching: fetching, focus: focus } = snapshot;
     const props = {
@@ -397,3 +404,3 @@ ...valueProps,
     (0, $a9A1a$react.useEffect)(()=>{
-        const { current: current  } = selectRef;
+        const { current: current } = selectRef;
         if (current) {
@@ -463,17 +470,4 @@ const val = Array.isArray(snapValue) ? snapValue[0] : snapValue;
 });
-$fdefef8b289dc6d0$var$SelectSearch.defaultProps = {
-    // Data
-    options: [],
-    fuzzySearch: true,
-    // Interaction´
-    printOptions: "auto",
-    closeOnSelect: true,
-    debounce: 250,
-    // Attributes
-    autoComplete: "on",
-    // Design
-    className: "select-search"
-};
 $fdefef8b289dc6d0$var$SelectSearch.displayName = "SelectSearch";
-var $fdefef8b289dc6d0$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $a9A1a$react.memo)($fdefef8b289dc6d0$var$SelectSearch);
+var $fdefef8b289dc6d0$export$2e2bcd8739ae039 = $fdefef8b289dc6d0$var$SelectSearch;
 
@@ -480,0 +474,0 @@

dist/esm/index.js

 import {jsxs as $6XpKT$jsxs, jsx as $6XpKT$jsx} from "react/jsx-runtime";
-import {forwardRef as $6XpKT$forwardRef, useRef as $6XpKT$useRef, useState as $6XpKT$useState, useEffect as $6XpKT$useEffect, memo as $6XpKT$memo} from "react";
+import {forwardRef as $6XpKT$forwardRef, useRef as $6XpKT$useRef, useState as $6XpKT$useState, useEffect as $6XpKT$useEffect} from "react";
 import "prop-types";
@@ -32,3 +32,5 @@
     if (!oldOption) return (0, $ab17a5af9c7227da$export$2e2bcd8739ae039)(newOption);
-    const nextOption = (0, $ab17a5af9c7227da$export$2e2bcd8739ae039)(oldOption);
+    const nextOption = [
+        ...(0, $ab17a5af9c7227da$export$2e2bcd8739ae039)(oldOption)
+    ];
     const newOptionIndex = nextOption.findIndex((o)=>(0, $f63eea9d7c5f466f$export$2e2bcd8739ae039)(o.value, newOption.value));
@@ -154,3 +156,3 @@ if (newOptionIndex >= 0) nextOption.splice(newOptionIndex, 1);
     let newHighlighted = current;
-    while((i++) <= max && (!option || option.disabled)){
+    while(i++ <= max && (!option || option.disabled)){
         newHighlighted = dir === "down" ? newHighlighted + 1 : newHighlighted - 1;
@@ -193,3 +195,3 @@ if (newHighlighted < 0) newHighlighted = max;
 const $0d0f732c1d5a71da$var$nullCb = ()=>{};
-function $0d0f732c1d5a71da$export$2e2bcd8739ae039({ options: defaultOptions , defaultValue: defaultValue , value: value , multiple: multiple , search: search , onChange: onChange = $0d0f732c1d5a71da$var$nullCb , onFocus: onFocus = $0d0f732c1d5a71da$var$nullCb , onBlur: onBlur = $0d0f732c1d5a71da$var$nullCb , closeOnSelect: closeOnSelect = true , placeholder: placeholder , getOptions: getOptions , filterOptions: filterOptions , useFuzzySearch: useFuzzySearch = true , debounce: debounce  }) {
+function $0d0f732c1d5a71da$export$2e2bcd8739ae039({ options: defaultOptions, defaultValue: defaultValue, value: value, multiple: multiple, search: search, onChange: onChange = $0d0f732c1d5a71da$var$nullCb, onFocus: onFocus = $0d0f732c1d5a71da$var$nullCb, onBlur: onBlur = $0d0f732c1d5a71da$var$nullCb, closeOnSelect: closeOnSelect = true, placeholder: placeholder, getOptions: getOptions, filterOptions: filterOptions, useFuzzySearch: useFuzzySearch = true, debounce: debounce }) {
     const ref = (0, $6XpKT$useRef)();
@@ -237,3 +239,3 @@ const [option, setOption] = (0, $6XpKT$useState)(null);
             setFocus(false);
-            setSearch("");
+            !option && setSearch("");
             setHighlighted(-1);
@@ -248,3 +250,3 @@ onBlur(e);
         },
-        onChange: search ? ({ target: target  })=>setSearch(target.value) : null
+        onChange: search ? ({ target: target })=>setSearch(target.value) : null
     };
@@ -284,3 +286,3 @@ const optionProps = {
 
-function $9b55b4f5631730e8$var$Option({ optionProps: optionProps , highlighted: highlighted , selected: selected , option: option , cls: cls , renderOption: renderOption , disabled: disabled  }) {
+function $9b55b4f5631730e8$var$Option({ optionProps: optionProps, highlighted: highlighted, selected: selected, option: option, cls: cls, renderOption: renderOption, disabled: disabled }) {
     const props = {
@@ -314,3 +316,3 @@ ...optionProps,
 }
-var $9b55b4f5631730e8$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $6XpKT$memo)($9b55b4f5631730e8$var$Option);
+var $9b55b4f5631730e8$export$2e2bcd8739ae039 = $9b55b4f5631730e8$var$Option;
 
@@ -325,3 +327,3 @@
 function $1b5fcad01c07e709$var$Options(props) {
-    const { options: options , cls: cls , renderOption: renderOption , renderGroupHeader: renderGroupHeader , optionProps: optionProps , snapshot: snapshot , disabled: disabled  } = props;
+    const { options: options, cls: cls, renderOption: renderOption, renderGroupHeader: renderGroupHeader, optionProps: optionProps, snapshot: snapshot, disabled: disabled } = props;
     return /*#__PURE__*/ (0, $6XpKT$jsx)("ul", {
@@ -359,6 +361,6 @@ className: cls("options"),
 }
-var $1b5fcad01c07e709$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $6XpKT$memo)($1b5fcad01c07e709$var$Options);
+var $1b5fcad01c07e709$export$2e2bcd8739ae039 = $1b5fcad01c07e709$var$Options;
 
 
-const $00d3317695af813e$var$SelectSearch = /*#__PURE__*/ (0, $6XpKT$forwardRef)(({ disabled: disabled , placeholder: placeholder , multiple: multiple , search: search , autoFocus: autoFocus , autoComplete: autoComplete , id: id , closeOnSelect: closeOnSelect , className: className , renderValue: renderValue , renderOption: renderOption , renderGroupHeader: renderGroupHeader , fuzzySearch: fuzzySearch , emptyMessage: emptyMessage , value: value , ...hookProps }, ref)=>{
+const $00d3317695af813e$var$SelectSearch = /*#__PURE__*/ (0, $6XpKT$forwardRef)(({ disabled: disabled, placeholder: placeholder, multiple: multiple, search: search, autoFocus: autoFocus, autoComplete: autoComplete = "on", id: id, closeOnSelect: closeOnSelect = true, className: className = "select-search", renderValue: renderValue, renderOption: renderOption, renderGroupHeader: renderGroupHeader, fuzzySearch: fuzzySearch = true, emptyMessage: emptyMessage, value: value, debounce: debounce = 250, printOptions: printOptions = "auto", options: options = [], ...hookProps }, ref)=>{
     const selectRef = (0, $6XpKT$useRef)(null);
@@ -374,5 +376,8 @@ const cls = (classNames)=>(0, $461fda4bde208857$export$2e2bcd8739ae039)(classNames, className);
         useFuzzySearch: fuzzySearch,
+        options: options,
+        printOptions: printOptions,
+        debounce: debounce,
         ...hookProps
     });
-    const { highlighted: highlighted , value: snapValue , fetching: fetching , focus: focus  } = snapshot;
+    const { highlighted: highlighted, value: snapValue, fetching: fetching, focus: focus } = snapshot;
     const props = {
@@ -385,3 +390,3 @@ ...valueProps,
     (0, $6XpKT$useEffect)(()=>{
-        const { current: current  } = selectRef;
+        const { current: current } = selectRef;
         if (current) {
@@ -451,17 +456,4 @@ const val = Array.isArray(snapValue) ? snapValue[0] : snapValue;
 });
-$00d3317695af813e$var$SelectSearch.defaultProps = {
-    // Data
-    options: [],
-    fuzzySearch: true,
-    // Interaction´
-    printOptions: "auto",
-    closeOnSelect: true,
-    debounce: 250,
-    // Attributes
-    autoComplete: "on",
-    // Design
-    className: "select-search"
-};
 $00d3317695af813e$var$SelectSearch.displayName = "SelectSearch";
-var $00d3317695af813e$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $6XpKT$memo)($00d3317695af813e$var$SelectSearch);
+var $00d3317695af813e$export$2e2bcd8739ae039 = $00d3317695af813e$var$SelectSearch;
 
@@ -468,0 +460,0 @@

package.json

 {
     "name": "react-select-search",
-    "version": "4.1.7",
+    "version": "4.1.8",
     "description": "Lightweight select component for React",
@@ -15,10 +15,10 @@ "source": "src/index.js",
         "lint": "eslint src --ext .js --ext .jsx",
-        "test": "yarn build && size-limit && jest",
-        "test:watch": "yarn test -- --watch",
-        "test:coverage": "yarn test -- --coverage --silent",
-        "coveralls": "yarn test:coverage && cat ./coverage/lcov.info | coveralls",
-        "start": "start-storybook -p 6006",
+        "test": "npm run build && size-limit && NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest",
+        "test:watch": "npm test -- --watch",
+        "test:coverage": "npm test -- --coverage --silent",
+        "coveralls": "npm test:coverage && cat ./coverage/lcov.info | coveralls",
+        "start": "storybook dev -p 6006",
         "build": "parcel build --no-cache",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook --output-dir public",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build --output-dir public",
         "size": "size-limit",
@@ -57,30 +57,37 @@ "pub": "npm run build && npm publish",
     "devDependencies": {
-        "@babel/preset-env": "^7.18.2",
-        "@babel/preset-react": "^7.17.12",
-        "@size-limit/preset-small-lib": "^7.0.8",
-        "@storybook/addon-actions": "^6.5.12",
-        "@storybook/addon-essentials": "^6.5.12",
-        "@storybook/addon-links": "^6.5.12",
-        "@storybook/addon-storyshots": "^6.5.12",
-        "@storybook/addons": "^6.5.12",
-        "@storybook/react": "^6.5.12",
-        "babel-jest": "^28.1.1",
+        "@babel/core": "^7.25.2",
+        "@babel/preset-env": "^7.25.4",
+        "@babel/preset-react": "^7.24.7",
+        "@chromatic-com/storybook": "^2.0.2",
+        "@jest/globals": "^29.7.0",
+        "@size-limit/preset-small-lib": "^11.1.5",
+        "@storybook/addon-actions": "^8.3.2",
+        "@storybook/addon-essentials": "^8.3.2",
+        "@storybook/addon-links": "^8.3.2",
+        "@storybook/addon-storyshots": "^7.6.17",
+        "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+        "@storybook/addons": "^7.6.17",
+        "@storybook/react": "^8.3.2",
+        "@storybook/react-webpack5": "^8.3.2",
+        "babel-jest": "^29.7.0",
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
         "coveralls": "^3.1.1",
-        "eslint": "^8.18.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-react": "^7.30.1",
+        "eslint": "^9.11.1",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-react": "^7.36.1",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^28.1.1",
-        "jest-environment-jsdom": "^28.1.1",
-        "parcel": "^2.6.1",
-        "prettier": "^2.7.1",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "jest-image-snapshot": "^6.4.0",
+        "parcel": "^2.12.0",
+        "prettier": "^3.3.3",
         "prop-types": "^15.8.1",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1",
-        "react-test-renderer": "^18.2.0",
-        "react-transition-group": "^4.4.2",
-        "size-limit": "^7.0.8",
-        "storybook-dark-mode": "^1.1.2"
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-test-renderer": "^18.3.1",
+        "react-transition-group": "^4.4.5",
+        "size-limit": "^11.1.5",
+        "storybook": "^8.3.2",
+        "storybook-dark-mode": "^4.0.2"
     }
 }

README.md

@@ -0,1 +1,9 @@
+## ⚠️ Looking for maintainers
+
+First of all, I want to thank you all for the amazing support over the years. This was one of my first open source projects and also my first successful one. I am beyond grateful for all the [33! contributors](https://github.com/tbleckert/react-select-search/graphs/contributors), wouldn't have been possible to run this project without you.
+
+A lot happened last year. I had my first born son, I had a few time consuming freelance gigs and a few startups that grew. This took time away from open source and I feel I can't do this component justice anymore. Not by myself at least.
+
+I still believe in a tiny, super fast and zero-dependency select component. If there's anyone out there that wants to co-maintain this with me, please reach out to discuss the next steps. Send me an email at [e-mail] or hit me up on [Twitter](https://twitter.com/tbleckert)
+
 <p align="center">
@@ -2,0 +10,0 @@ <img src="https://user-images.githubusercontent.com/263465/175054036-90835869-74dc-40f1-a541-adea18da9b8f.png" alt="React Select Search" />

src/index.d.ts

@@ -105,2 +105,4 @@ import {
     emptyMessage?: ReactNode | (() => ReactNode);
+    onBlur: (event: Event) => void;
+    onFocus: (event: Event) => void;
 };
@@ -107,0 +109,0 @@

No alert changes

Improved metrics

Number of lines in readme file

231

increased by3.59%

Worsened metrics

Total package byte prevSize

127726

decreased by-8.28%

Dev dependency count

34

increased by25.93%

Lines of code

1133

decreased by-1.05%

No dependency changes