Merge pull request #242 from eccenca/release/v24.0.1

Release v24.0.1 into main branch

Author: haschek

.eslintrc.json

@@ -6,6 +6,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Changed
+
+-   `eslint` libraries were upgraded to v9, so `node` v18.18 or higher is required
+
+### Fixed
+
+-   `MultiSelect`:
+    -   Old suggestions might be shown for a very short time when typing in a new search query.
+-   `CodeEditor`:
+    -   Broken highlighting for editor modes that leveraged adapted legacy modes.
+
 ## [24.0.0] - 2024-12-17
 
 This is a major release, and it might be not compatible with your current usage of our library. Please read about the necessary changes in the section about how to migrate.

CHANGELOG.md

@@ -0,0 +1,57 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import { fixupPluginRules } from "@eslint/compat";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [...compat.extends(
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+), {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+        react,
+        "react-hooks": fixupPluginRules(reactHooks),
+        "simple-import-sort": simpleImportSort,
+    },
+
+    languageOptions: {
+        parser: tsParser,
+    },
+
+    rules: {
+        "arrow-body-style": "off",
+        "prefer-arrow-callback": "off",
+
+        "simple-import-sort/imports": ["error", {
+            groups: [
+                ["^react", "^@?\\w"],
+                ["^(@|components)(/.*|$)"],
+                ["^\\u0000"],
+                ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+                ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+                ["^.+\\.?(css)$"],
+            ],
+        }],
+
+        "@typescript-eslint/ban-ts-comment": ["error", {
+            "ts-ignore": "allow-with-description",
+        }],
+
+        "no-console": "error",
+    },
+}];

eslint.config.mjs

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.0.0",
+    "version": "24.0.1-rc.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -28,7 +28,7 @@
         "registry": "https://registry.npmjs.org"
     },
     "engines": {
-        "node": ">=18"
+        "node": ">=18.18.0"
     },
     "style": "src/index.scss",
     "main": "dist/cjs/index.js",
@@ -47,6 +47,7 @@
         "scripts"
     ],
     "scripts": {
+        "project:clean": "yarn test:clean && yarn build:clean && yarn storybook:clean && rimraf yarn-error.log",
         "build:clean": "rimraf dist/",
         "build:esm": "tsc --project .typescript/tsbuild-esm.json && ./scripts/fix-esm-dist",
         "build:cjs": "tsc --project .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
@@ -55,24 +56,29 @@
         "compile-scss": "ts-node -O \"{ \\\"esModuleInterop\\\": true, \\\"module\\\": \\\"commonjs\\\"}\" ./scripts/compile-sass.ts",
         "storybook": "storybook dev -p 6006 --no-open",
         "build-storybook": "storybook build --webpack-stats-json",
+        "storybook:clean": "rimraf storybook-static/",
         "test": "jest",
         "test:ci": "jest --ci --reporters='default'",
         "test:coverage": "jest --collectCoverage",
         "test:generate-output": "jest --json --outputFile=.jest-test-results.json",
+        "test:clean": "rimraf .jest-test-results.json && rimraf coverage/",
         "autolint:scripts": "eslint --fix .storybook/ blueprint/ scripts/ src/ index.ts || exit 0",
         "autolint:styles": "stylelint \"{.storybook,src}/**/*.{css,scss}\" --fix || exit 0",
         "autolint:prettier": "prettier \"{.github,.storybook,.typescript,blueprint,scripts,src}/**/*\" .* *.json *.md *.ts --write --ignore-unknown",
         "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^5.1.1",
-        "@blueprintjs/core": "^5.11.0",
-        "@blueprintjs/select": "^5.2.2",
-        "@carbon/icons": "^11.47.1",
-        "@carbon/react": "^1.64.1",
+        "@blueprintjs/colors": "^5.1.5",
+        "@blueprintjs/core": "^5.16.2",
+        "@blueprintjs/select": "^5.3.7",
+        "@carbon/icons": "^11.53.0",
+        "@carbon/react": "1.72.0",
+        "@codemirror/lang-javascript": "^6.2.2",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-markdown": "^6.3.1",
+        "@codemirror/lang-sql": "^6.8.0",
         "@codemirror/lang-xml": "^6.1.0",
+        "@codemirror/lang-yaml": "^6.1.2",
         "@codemirror/legacy-modes": "^6.4.2",
         "@mavrin/remark-typograf": "^2.2.0",
         "codemirror": "^6.0.1",
@@ -98,44 +104,47 @@
     },
     "devDependencies": {
         "@babel/core": "^7.26.0",
-        "@babel/plugin-proposal-class-properties": "^7.16.7",
-        "@babel/plugin-proposal-private-methods": "^7.16.11",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@babel/preset-env": "^7.26.0",
         "@babel/preset-flow": "^7.25.9",
-        "@babel/preset-react": "^7.25.9",
+        "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.26.0",
-        "@storybook/addon-actions": "^8.4.3",
-        "@storybook/addon-essentials": "^8.4.3",
-        "@storybook/addon-jest": "^8.4.3",
-        "@storybook/addon-links": "^8.4.3",
+        "@eslint/compat": "^1.2.4",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.17.0",
+        "@storybook/addon-actions": "^8.4.7",
+        "@storybook/addon-essentials": "^8.4.7",
+        "@storybook/addon-jest": "^8.4.7",
+        "@storybook/addon-links": "^8.4.7",
         "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/cli": "^8.4.3",
+        "@storybook/cli": "^8.4.7",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.4.3",
-        "@storybook/react-webpack5": "^8.4.3",
-        "@storybook/test": "^8.4.3",
+        "@storybook/react": "^8.4.7",
+        "@storybook/react-webpack5": "^8.4.7",
+        "@storybook/test": "^8.4.7",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^12.1.2",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
-        "@types/jest": "^29.5.12",
-        "@types/lodash": "^4.17.7",
+        "@types/jest": "^29.5.14",
+        "@types/lodash": "^4.17.13",
         "@types/react-syntax-highlighter": "^15.5.13",
-        "@typescript-eslint/eslint-plugin": "^5.62.0",
-        "@typescript-eslint/parser": "^5.62.0",
+        "@typescript-eslint/eslint-plugin": "^8.18.1",
+        "@typescript-eslint/parser": "^8.18.1",
         "babel-jest": "^29.7.0",
-        "chromatic": "^11.18.1",
-        "eslint": "^8.57.0",
-        "eslint-plugin-react": "^7.35.0",
-        "eslint-plugin-react-hooks": "^4.6.2",
+        "chromatic": "^11.20.2",
+        "eslint": "^9.17.0",
+        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react-hooks": "^5.1.0",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-pnp-resolver": "^1.2.3",
-        "lint-staged": "^15.2.9",
+        "lint-staged": "^15.2.11",
         "node-sass-package-importer": "^5.3.3",
         "path": "^0.12.7",
         "prettier": "^2.8.8",
@@ -145,12 +154,12 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.4.3",
+        "storybook": "^8.4.7",
         "stylelint": "^15.11.0",
         "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-standard-scss": "^9.0.0",
         "ts-node": "^10.9.2",
-        "tsc-esm-fix": "^3.0.2",
+        "tsc-esm-fix": "^3.1.2",
         "typescript": "5.5.3",
         "url-loader": "^4.1.1",
         "yargs": "^17.7.2"
@@ -161,8 +170,8 @@
         "react-dom": ">=16"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.80",
-        "node-sass-package-importer/**/postcss": "^8.4.41",
+        "**/@types/react": "^17.0.83",
+        "node-sass-package-importer/**/postcss": "^8.4.49",
         "**/cross-spawn": "^7.0.5 ",
         "**/micromatch": "^4.0.8"
     },

package.json

@@ -323,6 +323,7 @@ function MultiSelect<T>({
      * @param query
      */
     const onQueryChange = (query: string) => {
+        setFilteredItems([]);
         if (query.length && query !== requestState.current.query) {
             requestState.current.query = query;
             if (requestState.current.timeoutId) {

src/components/MultiSelect/MultiSelect.tsx

@@ -1,18 +1,18 @@
-import { defaultHighlightStyle, StreamLanguage, StreamParser, LanguageSupport } from "@codemirror/language";
-
-//modes imports
-import { markdown } from "@codemirror/lang-markdown";
+//adapted v6 modes imports
+import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
+import { markdown } from "@codemirror/lang-markdown";
+import { sql } from "@codemirror/lang-sql";
 import { xml } from "@codemirror/lang-xml";
-import { javascript } from "@codemirror/legacy-modes/mode/javascript";
+import { yaml } from "@codemirror/lang-yaml";
+import { defaultHighlightStyle, LanguageSupport, StreamLanguage, StreamParser } from "@codemirror/language";
+//legacy mode imports
+import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
+import { mathematica } from "@codemirror/legacy-modes/mode/mathematica";
+import { ntriples } from "@codemirror/legacy-modes/mode/ntriples";
 import { python } from "@codemirror/legacy-modes/mode/python";
 import { sparql } from "@codemirror/legacy-modes/mode/sparql";
-import { sql } from "@codemirror/legacy-modes/mode/sql";
 import { turtle } from "@codemirror/legacy-modes/mode/turtle";
-import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
-import { yaml } from "@codemirror/legacy-modes/mode/yaml";
-import { ntriples } from "@codemirror/legacy-modes/mode/ntriples";
-import { mathematica } from "@codemirror/legacy-modes/mode/mathematica";
 
 //adaptations
 import { adaptedSyntaxHighlighting } from "../tests/codemirrorTestHelper";
@@ -35,10 +35,19 @@ const supportedModes = {
 export const supportedCodeEditorModes = Object.keys(supportedModes) as Array<keyof typeof supportedModes>;
 export type SupportedCodeEditorModes = (typeof supportedCodeEditorModes)[number];
 
+const v6AdaptedModes: ReadonlyMap<SupportedCodeEditorModes, boolean> = new Map([
+    ["json", true],
+    ["markdown", true],
+    ["xml", true],
+    ["sql", true],
+    ["yaml", true],
+    ["javascript", true],
+]);
+
 export const useCodeMirrorModeExtension = (mode?: SupportedCodeEditorModes) => {
     return !mode
         ? adaptedSyntaxHighlighting(defaultHighlightStyle)
-        : ["json", "markdown", "xml"].includes(mode)
+        : v6AdaptedModes.has(mode)
         ? ((typeof supportedModes[mode] === "function" ? supportedModes[mode] : () => {}) as () => LanguageSupport)()
         : StreamLanguage?.define(supportedModes[mode] as StreamParser<unknown>);
 };