Merge branch 'main' of https://github.com/ghiscoding/multiple-select-vanilla

ghiscoding · ghiscoding · commit 329bfcbc9ab4 · 2024-05-01T11:13:09.000-04:00
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -104,7 +104,7 @@ jobs:
         if: |
           github.ref == 'refs/heads/main' &&
           (contains(github.event.head_commit.message, 'chore(release)') || contains(github.event.head_commit.message, '[refresh gh-pages]'))
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./packages/demo/dist
diff --git a/.github/workflows/publish-npm-latest.yml b/.github/workflows/publish-npm-latest.yml
@@ -126,7 +126,7 @@ jobs:
 
       - name: Deploy to gh-pages
         if: ${{ inputs.dryrun != true }}
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./packages/demo/dist
diff --git a/.github/workflows/publish-npm-prompt.yml b/.github/workflows/publish-npm-prompt.yml
@@ -115,7 +115,7 @@ jobs:
         run: pnpm build:demo
 
       - name: Deploy to gh-pages
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./packages/demo/dist
diff --git a/README.md b/README.md
@@ -42,8 +42,8 @@ npm install multiple-select-vanilla
 ## Changes vs Original lib (`multiple-select`)
 New Multiple-Select Options:
 - dropped jQuery requirement and replaced necessary code with browser native code.
-- written in TypeScript which also brings typings support
-- revamped the UI to give it a more Modern Look by updating CSS and using SVG icons.
+- rewritten in TypeScript to also add typings support (`d.ts`)
+- revamped the UI to give it a more Modern Look by updating the CSS and using SVG icons (CSS/SASS variables are also availables)
 - add extra features:
   - `autoAdjustDropHeight` will automatically adjust the drop (up/down) height by available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options30))
   - `autoAdjustDropPosition` will find best position (top/bottom) by its available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options29))
@@ -57,11 +57,11 @@ New Multiple-Select Options:
   - `showOkButton` to add an "OK" button at the end of the multiple select option list (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options25))
   - `showSearchClear` show a clear button on the search filter input (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options34))
   - `diacriticParser` custom parser to normalize diacritic signs when filtering select list (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options35))
-  - replace tabIndex by arrow navigation highlight
-  - `darkMode` option for a **Dark Mode** Theme (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options38))
+  - replace tabIndex by a more intuitive navigation & highlight by using arrow keys (or mouse hover)
+  - `darkMode` option for a new **Dark Mode** Theme (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options38))
 
 ## CSP Compliance
-The library is now CSP (Content Security Policy) compliant, however there are some exceptions to be aware of. When using any html string as template (with `textTemplate`, `labelTemplate`, `renderOptionLabelAsHtml` or `useSelectOptionLabelToHtml`), you will not be fully compliant unless you return `TrustedHTML`. You can achieve this by using the `sanitizer` method in combo with [DOMPurify](https://github.com/cure53/DOMPurify) to return `TrustedHTML` as shown below and with that in place you will be CSP compliant.
+The library is now CSP (Content Security Policy) compliant, however there are some exceptions to be aware of. When using any HTML strings as template (when using `textTemplate`, `labelTemplate`, `renderOptionLabelAsHtml` or `useSelectOptionLabelToHtml`), you will not be fully compliant unless you return [`TrustedHTML`](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML). You can achieve safety by using the `sanitizer` method in combo with an external library like [DOMPurify](https://github.com/cure53/DOMPurify) to return `TrustedHTML` as shown below and with that in place you will be CSP compliant.
 
 ```typescript
 import DOMPurify from 'dompurify';
@@ -85,10 +85,10 @@ with this code in place, we can now use the following CSP meta tag (which is wha
 > **Note** that in our demo we are actually adding `unsafe-inline` simply because we are using Vite (which is not CSP compliant in Dev mode), but the library should work nonetheless without `unsafe-inline`.
 
 ### Installation / Structure
-There are multiple ways to use the library, you can see below the folder structure of the distribution files
+There are multiple ways to install and use the library, you can see below the folder structure of the distribution files
 1. `dist/browser`: Standalone build which assigns `multipleSelect` on the `window.multipleSelect` object
    - browser standalone means that you can simply load it with `<script></script>` and then `multipleSelect('#mySelect')`
-   - 2 builds are available CJS (`.cjs`) and ESM (`.js`) and for ESM you will need to load it with `<script type="module">`
+   - 2 builds are available CJS (`.cjs`) and ESM (`.js`) and for the latter you will need to load it with `<script type="module">`
 2. `cjs`: to use as CommonJS with `require('multiple-select-vanilla')`
 3. `esm`: to use as ESM with `import from 'multiple-select-vanilla'`
 
diff --git a/package.json b/package.json
@@ -55,19 +55,19 @@
     "test:e2e:ui": "playwright test --config playwright/playwright.config.ts --ui",
     "test:report": "playwright show-report"
   },
-  "packageManager": "pnpm@8.15.5",
+  "packageManager": "pnpm@9.0.6",
   "devDependencies": {
-    "@biomejs/biome": "^1.6.2",
-    "@lerna-lite/cli": "^3.3.1",
-    "@lerna-lite/publish": "^3.3.1",
-    "@lerna-lite/watch": "^3.3.1",
-    "@playwright/test": "^1.42.1",
-    "@types/node": "^20.11.30",
+    "@biomejs/biome": "^1.7.1",
+    "@lerna-lite/cli": "^3.3.3",
+    "@lerna-lite/publish": "^3.3.3",
+    "@lerna-lite/watch": "^3.3.3",
+    "@playwright/test": "^1.43.1",
+    "@types/node": "^20.12.7",
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "cross-env": "^7.0.3",
     "npm-run-all2": "^6.1.2",
-    "pnpm": "^8.15.5",
+    "pnpm": "^9.0.6",
     "rimraf": "^5.0.5",
-    "typescript": "5.4.3"
+    "typescript": "5.4.5"
   }
 }
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -21,14 +21,14 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
-    "dompurify": "^3.0.11",
+    "dompurify": "^3.1.1",
     "font-awesome": "^4.7.0",
     "multiple-select-vanilla": "workspace:*"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
-    "sass": "^1.72.0",
-    "typescript": "5.4.3",
-    "vite": "^5.2.3"
+    "sass": "^1.75.0",
+    "typescript": "5.4.5",
+    "vite": "^5.2.10"
   }
 }
diff --git a/packages/multiple-select-vanilla/package.json b/packages/multiple-select-vanilla/package.json
@@ -66,13 +66,13 @@
     "autoprefixer": "^10.4.19",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "cssnano": "^6.1.1",
+    "cssnano": "^7.0.1",
     "esbuild": "^0.20.2",
     "fs-extra": "^11.2.0",
-    "glob": "^10.3.10",
+    "glob": "^10.3.12",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
-    "sass": "^1.72.0",
-    "typescript": "5.4.3"
+    "sass": "^1.75.0",
+    "typescript": "5.4.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
