chakra-react-select - npm Package Compare versions

Comparing version 3.1.1 to 3.1.2-beta.1

dist/cjs/use-chakra-select-props.js

@@ -56,5 +56,7 @@ "use strict";
 
-  // Combine the props passed into the component with the props that can be set
-  // on a surrounding form control to get the values of `isDisabled` and
-  // `isInvalid`
+  /**
+   * Combine the props passed into the component with the props that can be set
+   * on a surrounding form control to get the values of `isDisabled` and
+   * `isInvalid`
+   */
   var inputProps = (0, _formControl.useFormControl)({
@@ -73,3 +75,4 @@ id: inputId,
 
-  var placeholderColor = (0, _system.useColorModeValue)("gray.400", "whiteAlpha.400"); // Ensure that the size used is one of the options, either `sm`, `md`, or `lg`
+  var placeholderColor = (0, _system.useColorModeValue)("gray.400", "whiteAlpha.400");
+  /** Ensure that the size used is one of the options, either `sm`, `md`, or `lg` */
 
@@ -81,4 +84,7 @@ var realSize = size;
     realSize = "md";
-  } // Ensure that the tag variant used is one of the options, either `subtle`,
-  // `solid`, or `outline` (or undefined)
+  }
+  /**
+   * Ensure that the tag variant used is one of the options, either `subtle`,
+   * `solid`, or `outline` (or undefined)
+   */
 
@@ -93,3 +99,4 @@
     }
-  } // Ensure that the selected option style is either `color` or `check`
+  }
+  /** Ensure that the selected option style is either `color` or `check` */
 
@@ -102,3 +109,4 @@
     realSelectedOptionStyle = "color";
-  } // Ensure that the color used for the selected options is a string
+  }
+  /** Ensure that the color used for the selected options is a string */
 
@@ -105,0 +113,0 @@

dist/esm/use-chakra-select-props.js

@@ -40,5 +40,7 @@ var _excluded = ["components", "theme", "size", "colorScheme", "isDisabled", "isInvalid", "inputId", "tagVariant", "hasStickyGroupHeaders", "selectedOptionStyle", "selectedOptionColor", "focusBorderColor", "errorBorderColor", "chakraStyles", "onFocus", "onBlur"];
 
-  // Combine the props passed into the component with the props that can be set
-  // on a surrounding form control to get the values of `isDisabled` and
-  // `isInvalid`
+  /**
+   * Combine the props passed into the component with the props that can be set
+   * on a surrounding form control to get the values of `isDisabled` and
+   * `isInvalid`
+   */
   var inputProps = useFormControl({
@@ -57,3 +59,4 @@ id: inputId,
 
-  var placeholderColor = useColorModeValue("gray.400", "whiteAlpha.400"); // Ensure that the size used is one of the options, either `sm`, `md`, or `lg`
+  var placeholderColor = useColorModeValue("gray.400", "whiteAlpha.400");
+  /** Ensure that the size used is one of the options, either `sm`, `md`, or `lg` */
 
@@ -65,4 +68,7 @@ var realSize = size;
     realSize = "md";
-  } // Ensure that the tag variant used is one of the options, either `subtle`,
-  // `solid`, or `outline` (or undefined)
+  }
+  /**
+   * Ensure that the tag variant used is one of the options, either `subtle`,
+   * `solid`, or `outline` (or undefined)
+   */
 
@@ -77,3 +83,4 @@
     }
-  } // Ensure that the selected option style is either `color` or `check`
+  }
+  /** Ensure that the selected option style is either `color` or `check` */
 
@@ -86,3 +93,4 @@
     realSelectedOptionStyle = "color";
-  } // Ensure that the color used for the selected options is a string
+  }
+  /** Ensure that the color used for the selected options is a string */
 
@@ -89,0 +97,0 @@

package.json

 {
   "name": "chakra-react-select",
-  "version": "3.1.1",
+  "version": "3.1.2-beta.1",
   "description": "A Chakra UI wrapper for the popular library React Select",
@@ -24,4 +24,4 @@ "license": "MIT",
     "build": "concurrently npm:build:*",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
-    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions .ts,.tsx -d dist/cjs --source-maps",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --extensions .ts,.tsx -d dist/esm --source-maps",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
@@ -32,3 +32,3 @@ "format": "prettier --write .",
     "lint-fix": "eslint --fix src",
-    "lint:src": "eslint src --ext .ts,.tsx",
+    "lint:src": "eslint .",
     "lint:types": "tsc --noEmit",
@@ -55,3 +55,3 @@ "prepare": "husky install",
     "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.17.7",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -61,22 +61,31 @@ "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
+    "@chakra-ui/form-control": "^1.5.9",
+    "@chakra-ui/icon": "^2.0.5",
+    "@chakra-ui/layout": "^1.7.7",
+    "@chakra-ui/menu": "^1.8.9",
+    "@chakra-ui/spinner": "^1.2.6",
+    "@chakra-ui/system": "^1.11.2",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
     "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/react": "^17.0.40",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
-    "babel-eslint": "^10.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
     "concurrently": "^7.0.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.10.0",
+    "eslint": "^8.11.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^16.1.1",
+    "eslint-config-airbnb-typescript": "^16.1.3",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react": "^1.1.7",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^7.0.4",
-    "lint-staged": "^12.3.5",
+    "lint-staged": "^12.3.7",
     "nodemon": "^2.0.15",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "prettier-package-json": "^2.6.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
@@ -83,0 +92,0 @@ "typescript": "^4.6.2"

README.md

 # chakra-react-select
 
+[![Build Status](https://github.com/csandman/chakra-react-select/actions/workflows/build.yml/badge.svg?branch=main "Build Status")](https://github.com/csandman/chakra-react-select/actions/workflows/build.yml?query=branch%3Amain)
+[![Lint Status](https://github.com/csandman/chakra-react-select/actions/workflows/lint.yml/badge.svg?branch=main "Lint Status")](https://github.com/csandman/chakra-react-select/actions/workflows/lint.yml?query=branch%3Amain)
+[![npm - chakra-react-select](https://img.shields.io/npm/v/chakra-react-select "chakra-react-select npm")](https://www.npmjs.com/package/chakra-react-select)
+[![Minified Bundle Size](https://badgen.net/bundlephobia/min/chakra-react-select "Minified Bundle Size")](https://bundlephobia.com/result?p=chakra-react-select)
+[![Minzipped Bundle Size](https://badgen.net/bundlephobia/minzip/chakra-react-select "Minzipped Bundle Size")](https://bundlephobia.com/result?p=chakra-react-select)
+[![Total NPM Downloads](https://badgen.net/npm/dt/chakra-react-select?color=blue "Total NPM Downloads")](https://www.npmjs.com/package/chakra-react-select)
+[![Known Vulnerabilities](https://snyk.io/test/github/csandman/chakra-react-select/badge.svg "Known Vulnerabilities")](https://snyk.io/test/github/csandman/chakra-react-select)
+[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-c596c7.svg "Code Style: Prettier")](https://github.com/prettier/prettier)
 [![MIT License](https://badgen.net/github/license/csandman/chakra-react-select "MIT License")](LICENSE.md)
-[![npm - chakra-react-select](https://img.shields.io/npm/v/chakra-react-select "chakra-react-select npm")](https://www.npmjs.com/package/chakra-react-select)
-[![bundle size - chakra-react-select](https://badgen.net/bundlephobia/min/chakra-react-select "chakra-react-select bundlephobia")](https://bundlephobia.com/result?p=chakra-react-select)
-[![bundle size - chakra-react-select](https://badgen.net/bundlephobia/minzip/chakra-react-select "chakra-react-select bundlephobia")](https://bundlephobia.com/result?p=chakra-react-select)
-[![Total Downloads - chakra-react-select](https://badgen.net/npm/dt/chakra-react-select?color=blue "chakra-react-select npm downloads")](https://www.npmjs.com/package/chakra-react-select)
 
@@ -18,2 +22,4 @@ This component is a wrapper for the popular react component [react-select](https://react-select.com/home) made using the UI library [Chakra UI](https://chakra-ui.com/).
 
+**NOTE:** Before leaving an issue on this project, remember that this is just a _wrapper_ for `react-select`, not a standalone package. A large percent of the questions people have end up being about how `react-select` itself works, so please read through their documentation to familiarize yourself with it! https://react-select.com/home
+
 ## Contents
@@ -20,0 +26,0 @@

src/use-chakra-select-props.ts

@@ -30,5 +30,7 @@ import { useFormControl } from "@chakra-ui/form-control";
 }: Props<Option, IsMulti, Group>): Props<Option, IsMulti, Group> => {
-  // Combine the props passed into the component with the props that can be set
-  // on a surrounding form control to get the values of `isDisabled` and
-  // `isInvalid`
+  /**
+   * Combine the props passed into the component with the props that can be set
+   * on a surrounding form control to get the values of `isDisabled` and
+   * `isInvalid`
+   */
   const inputProps = useFormControl({
@@ -49,3 +51,3 @@ id: inputId,
 
-  // Ensure that the size used is one of the options, either `sm`, `md`, or `lg`
+  /** Ensure that the size used is one of the options, either `sm`, `md`, or `lg` */
   let realSize: Size = size;
@@ -57,4 +59,6 @@ const sizeOptions: Size[] = ["sm", "md", "lg"];
 
-  // Ensure that the tag variant used is one of the options, either `subtle`,
-  // `solid`, or `outline` (or undefined)
+  /**
+   * Ensure that the tag variant used is one of the options, either `subtle`,
+   * `solid`, or `outline` (or undefined)
+   */
   let realTagVariant: TagVariant | undefined = tagVariant;
@@ -68,3 +72,3 @@ const tagVariantOptions: TagVariant[] = ["subtle", "solid", "outline"];
 
-  // Ensure that the selected option style is either `color` or `check`
+  /** Ensure that the selected option style is either `color` or `check` */
   let realSelectedOptionStyle: SelectedOptionStyle = selectedOptionStyle;
@@ -76,3 +80,3 @@ const selectedOptionStyleOptions: SelectedOptionStyle[] = ["color", "check"];
 
-  // Ensure that the color used for the selected options is a string
+  /** Ensure that the color used for the selected options is a string */
   let realSelectedOptionColor: string = selectedOptionColor;
@@ -79,0 +83,0 @@ if (typeof selectedOptionColor !== "string") {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

416978

increased by16.97%

Number of package files

143

increased by95.89%

Lines of code

4818

increased by10.56%

Number of lines in readme file

650

increased by0.93%

Worsened metrics

Dev dependency count

37

increased by32.14%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes