@formio/choices.js - npm Package Compare versions

Comparing version 9.0.1 to 10.2.0

package.json

 {
   "name": "@formio/choices.js",
-  "version": "9.0.1",
+  "version": "10.2.0",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./public/assets/scripts/choices.js",
-  "types": "./types/index.d.ts",
+  "types": "./public/types/src/index.d.ts",
   "scripts": {
     "start": "run-p js:watch css:watch",
     "build": "run-p js:build css:build",
-    "lint": "eslint src/scripts",
+    "lint": "run-p lint:js lint:scss",
+    "lint:js": "eslint src/scripts/**/*.ts",
+    "lint:scss": "stylelint src/**/*.scss",
     "bundlesize": "bundlesize",
-    "cypress:run": "cypress run",
+    "cypress:run": "cypress run --browser chrome",
     "cypress:open": "cypress open",
-    "cypress:ci": "cypress run --record --group $GITHUB_REF --ci-build-id $GITHUB_SHA",
+    "cypress:ci": "cypress run --browser chrome --record --group $GITHUB_REF --ci-build-id $GITHUB_SHA",
     "test": "run-s test:unit test:e2e",
-    "test:unit": "NODE_ENV=test mocha",
-    "test:unit:watch": "NODE_ENV=test mocha --watch --inspect=5556",
+    "test:unit": "cross-env TS_NODE_TRANSPILE_ONLY=true NODE_ENV=test mocha",
+    "test:unit:watch": "npm run test:unit -- --watch --inspect=5556",
     "test:unit:coverage": "NODE_ENV=test nyc --reporter=lcov --reporter=text --reporter=text-summary mocha",
     "test:e2e": "run-p --race start cypress:run",
-    "js:watch": "NODE_ENV=development node server.js",
+    "js:watch": "cross-env NODE_ENV=development node server.js",
     "js:build": "webpack --config webpack.config.prod.js",
     "css:watch": "nodemon -e scss -x \"npm run css:build\"",
     "css:build": "run-s css:sass css:prefix css:min",
-    "css:sass": "node-sass --output-style expanded --include-path scss src/styles/base.scss public/assets/styles/base.css && node-sass --output-style expanded --include-path scss src/styles/choices.scss public/assets/styles/choices.css",
+    "css:sass": "sass -I scss src/styles/base.scss public/assets/styles/base.css && sass -I scss src/styles/choices.scss public/assets/styles/choices.css",
     "css:prefix": "postcss public/assets/styles/*.css --use autoprefixer --no-map --env prod --dir public/assets/styles",
@@ -39,2 +41,3 @@ "css:min": "csso public/assets/styles/base.css --output public/assets/styles/base.min.css && csso public/assets/styles/choices.css --output public/assets/styles/choices.min.css",
     "public/assets/styles",
+    "public/types",
     "src",
@@ -57,42 +60,57 @@ "!src/**/*.test.js",
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/register": "^7.6.2",
-    "autoprefixer": "^9.6.5",
-    "babel-loader": "^8.0.6",
-    "bundlesize": "^0.18.0",
-    "chai": "^4.2.0",
-    "csso-cli": "^3.0.0",
-    "cypress": "3.6.0",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-loader": "^3.0.2",
-    "eslint-plugin-compat": "3.3.0",
-    "eslint-plugin-cypress": "^2.7.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-sort-class-members": "^1.6.0",
-    "express": "^4.16.4",
-    "husky": "^3.0.9",
-    "jsdom": "^15.2.0",
-    "lint-staged": "^9.4.2",
-    "mocha": "^6.2.2",
-    "node-sass": "^4.12.0",
-    "nodemon": "^1.18.10",
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/register": "^7.18.9",
+    "@types/chai": "^4.3.4",
+    "@types/mocha": "^10.0.1",
+    "@types/sinon": "^10.0.13",
+    "@types/sinon-chai": "^3.2.9",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "^9.1.0",
+    "bundlesize": "^0.18.1",
+    "chai": "^4.3.7",
+    "cross-env": "^7.0.3",
+    "csso-cli": "^4.0.1",
+    "cypress": "11.2.0",
+    "eslint": "^8.28.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-compat": "4.0.2",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-sort-class-members": "^1.15.2",
+    "eslint-webpack-plugin": "^3.2.0",
+    "express": "^4.18.2",
+    "husky": "^8.0.2",
+    "jsdom": "^20.0.3",
+    "lint-staged": "^13.0.4",
+    "mocha": "^10.1.0",
+    "nodemon": "^2.0.20",
     "npm-run-all": "^4.1.5",
-    "nyc": "^14.1.1",
-    "postcss-cli": "^6.1.3",
-    "prettier": "^1.18.2",
-    "sinon": "^7.5.0",
-    "sinon-chai": "^3.3.0",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-middleware": "^3.7.2",
-    "webpack-hot-middleware": "^2.25.0"
+    "nyc": "^15.1.0",
+    "postcss": "^8.4.19",
+    "postcss-cli": "^10.0.0",
+    "prettier": "^2.8.0",
+    "sass": "^1.56.1",
+    "sinon": "^15.0.0",
+    "sinon-chai": "^3.7.0",
+    "stylelint": "^14.15.0",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "ts-loader": "^9.4.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.3",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-middleware": "^6.0.1",
+    "webpack-hot-middleware": "^2.25.3"
   },
   "dependencies": {
-    "deepmerge": "^4.2.0",
-    "fuse.js": "^3.4.5",
-    "redux": "^4.0.4"
+    "deepmerge": "^4.2.2",
+    "fuse.js": "^6.6.2",
+    "redux": "^4.2.0"
   },
@@ -105,2 +123,3 @@ "npmName": "choices.js",
         "public/assets/styles/*",
+        "public/types/*",
         "src/icons/*"
@@ -121,9 +140,9 @@ ]
       "path": "public/assets/scripts/choices.min.js",
-      "maxSize": "20 kB"
+      "maxSize": "25 kB"
     },
     {
       "path": "public/assets/styles/choices.min.css",
-      "maxSize": "1.8 kB"
+      "maxSize": "2.5 kB"
     }
   ]
 }

README.md

@@ -5,3 +5,3 @@ # Choices.js [![Actions Status](https://github.com/jshjohnson/Choices/workflows/Build%20and%20test/badge.svg)](https://github.com/jshjohnson/Choices/actions) [![Actions Status](https://github.com/jshjohnson/Choices/workflows/Bundle%20size%20checks/badge.svg)](https://github.com/jshjohnson/Choices/actions) [![npm](https://img.shields.io/npm/v/choices.js.svg)](https://www.npmjs.com/package/choices.js)
 
-[Demo](https://joshuajohnson.co.uk/Choices/)
+[Demo](https://choices-js.github.io/Choices/)
 
@@ -23,4 +23,24 @@ ## TL;DR
 
+### Sponsored by:
+<p align="center">
+  <a href="https://wanderermaps.com/" target="_blank" rel="noopener noreferrer">
+    <img src="https://cdn.shopify.com/s/files/1/0614/3357/7715/files/Logo_BlackWithBackground_200x.png?v=1644802773" alt="Wanderer Maps logo">
+  </a>
+</p>
+
 ---
 
+## Table of Contents
+
+- [Installation](#installation)
+- [Setup](#setup)
+- [Terminology](#terminology)
+- [Input Types](#input-types)
+- [Configuration Options](#configuration-options)
+- [Callbacks](#callbacks)
+- [Events](#events)
+- [Methods](#methods)
+- [Development](#development)
+- [License](#license)
+
 ## Installation
@@ -50,2 +70,8 @@
 />
+<!-- Or versioned -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/base.min.css"
+/>
+
 <!-- Include Choices CSS -->
@@ -56,4 +82,12 @@ <link
 />
-<!-- Include Choices JavaScript -->
+<!-- Or versioned -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css"
+/>
+
+<!-- Include Choices JavaScript (latest) -->
 <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
+<!-- Or versioned -->
+<script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script>
 ```
@@ -100,2 +134,3 @@
     editItems: false,
+    allowHTML: true,
     duplicateItemsAllowed: true,
@@ -124,2 +159,4 @@ delimiter: ',',
     itemSelectText: 'Press to select',
+    uniqueItemText: 'Only unique values can be added',
+    customAddItemText: 'Only values matching specific conditions can be added',
     addItemText: (value) => {
@@ -163,6 +200,7 @@ return `Press Enter to add <b>"${value}"</b>`;
     // Choices uses the great Fuse library for searching. You
-    // can find more options here: https://github.com/krisk/Fuse#options
+    // can find more options here: https://fusejs.io/api/options.html
     fuseOptions: {
-      include: 'score'
+      includeScore: true
     },
+    labelId: '',
     callbackOnInit: null,
@@ -181,4 +219,14 @@ callbackOnCreateTemplates: null
 
-## Configuration options
+## Input Types
 
+Choices works with the following input types, referenced in the documentation as noted.
+
+| HTML Element                                                                                           | Documentation "Input Type" |
+| -------------------------------------------------------------------------------------------------------| -------------------------- |
+| [`<input type="text">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)               | `text`                     |
+| [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)                         | `select-one`               |
+| [`<select multiple>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple)  | `select-multiple`          |
+
+## Configuration Options
+
 ### silent
@@ -188,3 +236,3 @@
 
-**Input types affected:** `text`, `select-single`, `select-multiple`
+**Input types affected:** `text`, `select-one`, `select-multiple`
 
@@ -300,2 +348,12 @@ **Usage:** Optionally suppress console errors and warnings.
 
+### allowHTML
+
+**Type:** `Boolean` **Default:** `true`
+
+**Input types affected:** `text`, `select-one`, `select-multiple`
+
+**Usage:** Whether HTML should be rendered in all Choices elements. If `false`, all elements (placeholder, items, etc.) will be treated as plain text. If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source.
+
+**Deprecation Warning:** This will default to `false` in a future release.
+
 ### duplicateItemsAllowed
@@ -315,3 +373,3 @@
 
-**Usage:** What divides each value. The default delimiter seperates each value with a comma: `"Value 1, Value 2, Value 3"`.
+**Usage:** What divides each value. The default delimiter separates each value with a comma: `"Value 1, Value 2, Value 3"`.
 
@@ -484,3 +542,3 @@ ### paste
 
-**Input types affected:** `text`, `select-multiple`
+**Input types affected:** `text`
 
@@ -585,2 +643,10 @@ **Usage:** The value of the inputs placeholder.
 
+### labelId
+
+**Type:** `String` **Default:** ``
+
+**Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** The labelId improves accessibility. If set, it will add aria-labelledby to the choices element.
+
 ### classNames
@@ -640,6 +706,8 @@
 
-**Usage:** Function to run on template creation. Through this callback it is possible to provide custom templates for the various components of Choices (see terminology). For Choices to work with custom templates, it is important you maintain the various data attributes defined [here](https://github.com/jshjohnson/Choices/blob/master/src/scripts/templates.js).
+**Usage:** Function to run on template creation. Through this callback it is possible to provide custom templates for the various components of Choices (see terminology). For Choices to work with custom templates, it is important you maintain the various data attributes defined [here](https://github.com/Choices-js/Choices/blob/master/src/scripts/templates.ts).
 If you want just extend a little original template then you may use `Choices.defaults.templates` to get access to
 original template function.
 
+Templates receive the full Choices config as the first argument to any template, which allows you to conditionally display things based on the options specified.
+
 **Example:**
@@ -664,3 +732,3 @@
     return {
-      item: (classNames, data) => {
+      item: ({ classNames }, data) => {
         return template(`
@@ -680,3 +748,3 @@ <div class="${classNames.item} ${
       },
-      choice: (classNames, data) => {
+      choice: ({ classNames }, data) => {
         return template(`
@@ -743,3 +811,3 @@ <div class="${classNames.item} ${classNames.itemChoice} ${
 
-**Arguments:** `id, value, label, groupValue, keyCode`
+**Payload:** `id, value, label, customProperties, groupValue, keyCode`
 
@@ -752,3 +820,3 @@ **Input types affected:** `text`, `select-one`, `select-multiple`
 
-**Arguments:** `id, value, label, groupValue`
+**Payload:** `id, value, label, customProperties, groupValue`
 
@@ -761,3 +829,3 @@ **Input types affected:** `text`, `select-one`, `select-multiple`
 
-**Arguments:** `id, value, label, groupValue`
+**Payload:** `id, value, label, groupValue`
 
@@ -770,3 +838,3 @@ **Input types affected:** `text`, `select-multiple`
 
-**Arguments:** `id, value, label, groupValue`
+**Payload:** `id, value, label, groupValue`
 
@@ -779,3 +847,3 @@ **Input types affected:** `text`, `select-multiple`
 
-**Arguments:** `choice`
+**Payload:** `choice`
 
@@ -789,3 +857,3 @@ **Input types affected:** `select-one`, `select-multiple`
 
-**Arguments:** `value`
+**Payload:** `value`
 
@@ -798,3 +866,3 @@ **Input types affected:** `text`, `select-one`, `select-multiple`
 
-**Arguments:** `value`, `resultCount`
+**Payload:** `value`, `resultCount`
 
@@ -807,3 +875,3 @@ **Input types affected:** `select-one`, `select-multiple`
 
-**Arguments:** -
+**Payload:** -
 
@@ -816,3 +884,3 @@ **Input types affected:** `select-one`, `select-multiple`
 
-**Arguments:** -
+**Payload:** -
 
@@ -825,3 +893,3 @@ **Input types affected:** `select-one`, `select-multiple`
 
-**Arguments:** `el`
+**Payload:** `el`
 
@@ -1082,4 +1150,4 @@ **Input types affected:** `select-one`, `select-multiple`
 
-Choices is compiled using [Babel](https://babeljs.io/) targeting browsers [with more that 1% of global usage](https://github.com/jshjohnson/Choices/blob/master/.browserslistrc) and expecting that features [listed below](https://github.com/jshjohnson/Choices/blob/master/.eslintrc.json#L62) are available or polyfilled in browser.
-You may see exact list of target browsers by running `npx browserslist` withing this repository folder.
+Choices is compiled using [Babel](https://babeljs.io/) targeting browsers [with more than 1% of global usage](https://github.com/jshjohnson/Choices/blob/master/.browserslistrc) and expecting that features [listed below](https://github.com/jshjohnson/Choices/blob/master/.eslintrc.json#L62) are available or polyfilled in browser.
+You may see exact list of target browsers by running `npx browserslist` within this repository folder.
 If you need to support a browser that does not have one of the features listed below,
@@ -1091,3 +1159,3 @@ I suggest including a polyfill from the very good [polyfill.io](https://polyfill.io/v3/):
 ```html
-<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest"></script>
+<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Array.from%2Ces5%2Ces6%2CSymbol%2CSymbol.iterator%2CDOMTokenList%2CObject.assign%2CCustomEvent%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.dataset%2CArray.prototype.find%2CArray.prototype.includes"></script>
 ```
@@ -1103,2 +1171,3 @@
 Symbol.iterator
+DOMTokenList
 Object.assign
@@ -1108,2 +1177,3 @@ CustomEvent
 Element.prototype.closest
+Element.prototype.dataset
 ```
@@ -1132,2 +1202,6 @@
 
+### Interested in contributing?
+
+We're always interested in having more active maintainers.  Please get in touch if you're interested 👍
+
 ## License
@@ -1134,0 +1208,0 @@

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

Improved metrics

Total package byte prevSize

786146

increased by63.27%

Number of package files

220

increased by478.95%

Lines of code

18142

increased by71.85%

Number of lines in readme file

1187

increased by6.65%

Worsened metrics

Dev dependency count

50

increased by42.86%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedfuse.js@6.6.2(transitive)

• - Removedfuse.js@3.6.1(transitive)

• Updateddeepmerge@^4.2.2

• Updatedfuse.js@^6.6.2

• Updatedredux@^4.2.0