@db-ux/react-core-components 4.5.4 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @db-ux/react-core-components
 
+## 4.6.0
+
+### Minor Changes
+
+- refactor: exclude whitelabel-theme from default bundle to reduce size and to align with "how to import a theme" - [see commit f272967](https://github.com/db-ux-design-system/core-web/commit/f272967acb7a37dc9b07d9786134e437b284e9b6)
+
+### Patch Changes
+
+- fix: issue with tailwind duplicating some classes by using `@theme` inline - [see commit 92de4e6](https://github.com/db-ux-design-system/core-web/commit/92de4e6e5fdad3be5629d7457944d3b9b7396cf4)
+
+- docs(vite): mentioning version 8 configuration in `README.md` file - [see commit 4c5fc92](https://github.com/db-ux-design-system/core-web/commit/4c5fc9266402d9585087f4738a1a800cff1515f1)
+
+- fix(number input): prevent from clearing on intermediate decimal entry - [see commit aa85967](https://github.com/db-ux-design-system/core-web/commit/aa85967ffeaa685f6b647069d0e1d415d812dc87):
+  - fix(input,textarea): allow using `undefined` as `value`
+
 ## 4.5.4
 
 ### Patch Changes

package/README.md

@@ -44,8 +44,61 @@ import "@db-ux/core-components/build/styles/rollup.css";
 
 </details>
 
+### Vite 8
+
+Starting with Vite 8, the default CSS minifier was changed to [LightningCSS](https://lightningcss.dev/), which provides buggy transformations for modern CSS features used by the DB UX Design System (e.g. `light-dark()` CSS function). To keep CSS output stable, configure `vite.config.ts` like this:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  build: {
+    cssMinify: "esbuild"
+  }
+});
+```
+
+> Alternatively, you could define a [browserslist](https://browsersl.ist/) based on your individual browser support strategy — which might be totally different from the list Vite 8 defines by default (targeting browsers from the early 2020s):
+
+```ts
+// Note: You need to install the required packages first:
+// npm install -D lightningcss browserslist
+
+// vite.config.ts
+import { browserslistToTargets } from "lightningcss";
+import browserslist from "browserslist";
+
+export default defineConfig({
+  css: {
+    lightningcss: {
+      targets: browserslistToTargets(browserslist(">= 0.5%, last 2 major versions, Firefox ESR, not dead"))
+    }
+  }
+});
+```
+
 > **Note:** The `@db-ux/core-components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
 
+### Next 16
+
+Starting with Next 16, the default CSS minifier was changed to [LightningCSS](https://lightningcss.dev/), which provides buggy transformations for modern CSS features used by the DB UX Design System (e.g. `light-dark()` CSS function). We might provide a specific configuration necessary to mitigate those problems in the near future. To keep CSS output stable in the meantime, configure `next.config.ts` like this:
+
+````ts
+// next.config.ts
+
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+	experimental: {
+		useLightningcss: true,
+		lightningCssFeatures: {
+			exclude: ['light-dark'],
+		},
+	},
+}
+
+export default nextConfig
+````
+
 ### DB Theme
 
 In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) node package (even also available as an inner source node package, as described within that packages README).
@@ -75,6 +128,44 @@ This will create or update `.github/copilot-instructions.md` with component docu
 
 📖 **[Learn more about `@db-ux/agent-cli` node package](packages/agent-cli/README.md)**
 
+## Code Quality
+
+To enforce correct usage of DB UX Design System components in your React project, we provide the [`@db-ux/core-eslint-plugin`](https://www.npmjs.com/package/@db-ux/core-eslint-plugin) ESLint plugin.
+
+### Installation
+
+```shell
+npm install eslint @db-ux/core-eslint-plugin @typescript-eslint/parser --save-dev
+```
+
+### Setup
+
+```js
+// eslint.config.js
+import dbUx from "@db-ux/core-eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+export default [
+	{
+		files: ["**/*.ts", "**/*.tsx"],
+		languageOptions: {
+			parser: tsParser,
+			parserOptions: {
+				ecmaVersion: "latest",
+				sourceType: "module",
+				ecmaFeatures: { jsx: true }
+			}
+		},
+		plugins: {
+			"db-ux": dbUx
+		},
+		rules: dbUx.configs.recommended.rules
+	}
+];
+```
+
+📖 **[Learn more about `@db-ux/core-eslint-plugin` node package](https://www.npmjs.com/package/@db-ux/core-eslint-plugin)**
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.

package/dist/components/input/input.js

@@ -125,9 +125,7 @@ function DBInputFn(props, component) {
         }
     }, [_id]);
     useEffect(() => {
-        if (props.value !== undefined) {
-            set_value(props.value);
-        }
+        set_value(props.value);
     }, [props.value]);
     useEffect(() => {
         // If angular uses ngModel value and _value are null

package/dist/components/textarea/textarea.js

@@ -112,9 +112,7 @@ function DBTextareaFn(props, component) {
         }
     }, [_id]);
     useEffect(() => {
-        if (props.value !== undefined) {
-            set_value(props.value);
-        }
+        set_value(props.value);
     }, [props.value]);
     useEffect(() => {
         // If angular uses ngModel value and _value are null

package/dist/shared/model.d.ts

@@ -22,7 +22,7 @@ export interface GlobalProps {
      */
     autofocus?: boolean | string;
     /**
-     * Allows overriding specific props on nested elements or internal component structure.
+     * Allows overriding specific props on nested elements or internal component structure. Currently only supports propOverrides.id
      */
     propOverrides?: PropOverridesType;
 }

package/dist/utils/form-components.d.ts

@@ -1,4 +1,4 @@
-export declare const handleFrameworkEventAngular: (component: any, event: any, modelValue?: string) => void;
+export declare const handleFrameworkEventAngular: (component: any, event: any, modelValue?: string, lastValue?: any) => void;
 export declare const handleFrameworkEventVue: (emit: (event: string, ...args: any[]) => void, event: any, modelValue?: string) => void;
 export declare const addResetEventListener: (element: any, resetFunction: (event: Event) => void, signal: AbortSignal) => void;
 export declare const addCheckedResetEventListener: (element: any, props: {

package/dist/utils/form-components.js

@@ -1,8 +1,30 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { delay } from './index';
-export const handleFrameworkEventAngular = (component, event, modelValue = 'value') => {
-    component.propagateChange(event.target[modelValue]);
-    component.writeValue(event.target[modelValue]);
+const specialNumberCharacters = ['.', ',', 'e', 'E', '+', '-'];
+export const handleFrameworkEventAngular = (component, event, modelValue = 'value', lastValue) => {
+    var _a;
+    const value = event.target[modelValue];
+    const type = (_a = event.target) === null || _a === void 0 ? void 0 : _a.type;
+    if (!value && value !== '' && ['date', 'time', 'week', 'month', 'datetime-local'].includes(type)) {
+        // If value is empty and type date we skip `writingValue` function
+        return;
+    }
+    if (type === 'number') {
+        if (event.type === 'input') {
+            if (specialNumberCharacters.includes(event.data) || specialNumberCharacters.some(specialCharacter => lastValue === null || lastValue === void 0 ? void 0 : lastValue.toString().includes(specialCharacter)) && event.inputType === 'deleteContentBackward') {
+                // Skip `writingValue` function if number type and input event
+                // and `.` or `,` or 'e', 'E', '+', '-' was typed
+                // or content was deleted but last number had a `.`
+                return;
+            }
+        }
+        else if (event.type === 'change') {
+            // Skip `writingValue` function if number type and change event
+            return;
+        }
+    }
+    component.propagateChange(value);
+    component.writeValue(value);
 };
 export const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
     // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"

package/dist/utils/form-components.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/form-components.spec.js

@@ -0,0 +1,167 @@
+import { describe, expect, it, vi } from 'vitest';
+import { handleFrameworkEventAngular, handleFrameworkEventVue } from './form-components';
+const createNumberEvent = (value, badInput, inputType) => ({
+    inputType,
+    target: {
+        type: 'number',
+        value,
+        validity: {
+            badInput
+        }
+    }
+});
+const createTextEvent = (value) => ({
+    target: {
+        type: 'text',
+        value,
+        validity: {
+            badInput: false
+        }
+    }
+});
+describe('handleFrameworkEventAngular', () => {
+    it('calls propagateChange and writeValue for valid number value', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = createNumberEvent('1.5', false);
+        handleFrameworkEventAngular(component, event);
+        expect(component.propagateChange).toHaveBeenCalledWith('1.5');
+        expect(component.writeValue).toHaveBeenCalledWith('1.5');
+    });
+    it('skips propagateChange and writeValue when "." is typed (intermediate state)', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = {
+            type: 'input',
+            data: '.',
+            inputType: 'insertText',
+            target: {
+                type: 'number',
+                value: '1.'
+            }
+        };
+        handleFrameworkEventAngular(component, event, 'value', '1');
+        expect(component.propagateChange).not.toHaveBeenCalled();
+        expect(component.writeValue).not.toHaveBeenCalled();
+    });
+    it('skips propagateChange and writeValue when "," is typed (intermediate state)', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = {
+            type: 'input',
+            data: ',',
+            inputType: 'insertText',
+            target: {
+                type: 'number',
+                value: ''
+            }
+        };
+        handleFrameworkEventAngular(component, event, 'value', '1');
+        expect(component.propagateChange).not.toHaveBeenCalled();
+        expect(component.writeValue).not.toHaveBeenCalled();
+    });
+    it.each(['e', 'E', '+', '-'])('skips propagateChange and writeValue when "%s" is typed (intermediate state)', char => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = {
+            type: 'input',
+            data: char,
+            inputType: 'insertText',
+            target: {
+                type: 'number',
+                value: ''
+            }
+        };
+        handleFrameworkEventAngular(component, event, 'value', '1');
+        expect(component.propagateChange).not.toHaveBeenCalled();
+        expect(component.writeValue).not.toHaveBeenCalled();
+    });
+    it('skips propagateChange and writeValue when deleting content and lastValue has decimal', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = {
+            type: 'input',
+            data: null,
+            inputType: 'deleteContentBackward',
+            target: {
+                type: 'number',
+                value: ''
+            }
+        };
+        handleFrameworkEventAngular(component, event, 'value', '1.5');
+        expect(component.propagateChange).not.toHaveBeenCalled();
+        expect(component.writeValue).not.toHaveBeenCalled();
+    });
+    it('calls propagateChange and writeValue when number input is cleared via backspace (no decimal in lastValue)', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = createNumberEvent('', false, 'deleteContentBackward');
+        handleFrameworkEventAngular(component, event);
+        expect(component.propagateChange).toHaveBeenCalledWith('');
+        expect(component.writeValue).toHaveBeenCalledWith('');
+    });
+    it('skips propagateChange and writeValue for number change events', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = {
+            type: 'change',
+            target: {
+                type: 'number',
+                value: '5'
+            }
+        };
+        handleFrameworkEventAngular(component, event);
+        expect(component.propagateChange).not.toHaveBeenCalled();
+        expect(component.writeValue).not.toHaveBeenCalled();
+    });
+    it('calls propagateChange and writeValue for text input type', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = createTextEvent('hello');
+        handleFrameworkEventAngular(component, event);
+        expect(component.propagateChange).toHaveBeenCalledWith('hello');
+        expect(component.writeValue).toHaveBeenCalledWith('hello');
+    });
+});
+describe('handleFrameworkEventVue', () => {
+    it('emits update:value for valid number value', () => {
+        const emit = vi.fn();
+        const event = createNumberEvent('1.5', false);
+        handleFrameworkEventVue(emit, event);
+        expect(emit).toHaveBeenCalledWith('update:value', '1.5');
+    });
+    it('emits update:value with empty string when number input has badInput (intermediate state like "1.")', () => {
+        const emit = vi.fn();
+        const event = createNumberEvent('', true);
+        handleFrameworkEventVue(emit, event);
+        expect(emit).toHaveBeenCalledWith('update:value', '');
+    });
+    it('emits update:value when number input is cleared (empty, no badInput)', () => {
+        const emit = vi.fn();
+        const event = createNumberEvent('', false);
+        handleFrameworkEventVue(emit, event);
+        expect(emit).toHaveBeenCalledWith('update:value', '');
+    });
+    it('emits update:value for text input type', () => {
+        const emit = vi.fn();
+        const event = createTextEvent('hello');
+        handleFrameworkEventVue(emit, event);
+        expect(emit).toHaveBeenCalledWith('update:value', 'hello');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.5.4",
+  "version": "4.6.0",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
     "tsc": "tsc --project . --sourceMap false"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.58.2",
+    "@playwright/experimental-ct-react": "1.59.1",
     "@types/react": "19.2.14",
     "react": "19.2.4",
     "react-dom": "19.2.4"
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.5.4",
-    "@db-ux/core-foundations": "4.5.4"
+    "@db-ux/core-components": "4.6.0",
+    "@db-ux/core-foundations": "4.6.0"
   }
 }