@porsche-design-system/components-react 3.28.0-rc.2 → 3.28.0

package/CHANGELOG.md

@@ -14,6 +14,40 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [3.28.0] - 2025-06-02
+
+#### Added
+
+- `Input Number`: ([#3855](https://github.com/porsche-design-system/porsche-design-system/pull/3855))
+
+#### Fixed
+
+- `Select Wrapper`: update of scroll position if dropdown is navigated with keyboard
+  ([#3858](https://github.com/porsche-design-system/porsche-design-system/pull/3858))
+- `Select`, `Multi Select`: replacement of static (english) a11y announcement of active `option` with dynamic
+  announcement through `ariaActiveDescendantElement`
+  ([#3826](https://github.com/porsche-design-system/porsche-design-system/pull/3826))
+
+## [3.28.0-rc.3] - 2025-05-19
+
+### Added
+
+- `Styles`: theme for `tailwindcss` including utilities available under
+  `import { … } from '@porsche-design-system/components-{js|angular|react|vue}/tailwindcss';`
+  ([#3849](https://github.com/porsche-design-system/porsche-design-system/pull/3849))
+
+### Changed
+
+- Partials: `getInitialStyles` removed default styles for `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `b` and `strong`
+  ([#3849](https://github.com/porsche-design-system/porsche-design-system/pull/3849))
+
+#### Fixed
+
+- `Multi Select`: enable full a11y compliance
+  ([#3819](https://github.com/porsche-design-system/porsche-design-system/pull/3819))
+- Accessibility: fix ARIA live announcements of form components status messages
+  ([#3796](https://github.com/porsche-design-system/porsche-design-system/pull/3796))
+
 ## [3.28.0-rc.2] - 2025-04-23
 
 ### Fixed

package/cjs/lib/components/input-number.wrapper.cjs

@@ -0,0 +1,29 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+
+const PInputNumber = /*#__PURE__*/ react.forwardRef(({ autoComplete = '', compact = false, controls = false, description = '', disabled = false, form, hideLabel = false, label = '', max, message = '', min, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', step = 1, theme, value = '', className, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = hooks.usePrefix('p-input-number');
+    const propsToSync = [autoComplete, compact, controls, description, disabled, form, hideLabel, label, max, message, min, name, placeholder, readOnly, required, state, step, theme || hooks.useTheme(), value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'controls', 'description', 'disabled', 'form', 'hideLabel', 'label', 'max', 'message', 'min', 'name', 'placeholder', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PInputNumber = PInputNumber;

package/cjs/public-api.cjs

@@ -29,6 +29,7 @@ var heading_wrapper = require('./lib/components/heading.wrapper.cjs');
 var headline_wrapper = require('./lib/components/headline.wrapper.cjs');
 var icon_wrapper = require('./lib/components/icon.wrapper.cjs');
 var inlineNotification_wrapper = require('./lib/components/inline-notification.wrapper.cjs');
+var inputNumber_wrapper = require('./lib/components/input-number.wrapper.cjs');
 var inputPassword_wrapper = require('./lib/components/input-password.wrapper.cjs');
 var link_wrapper = require('./lib/components/link.wrapper.cjs');
 var linkPure_wrapper = require('./lib/components/link-pure.wrapper.cjs');
@@ -115,6 +116,7 @@ exports.PHeading = heading_wrapper.PHeading;
 exports.PHeadline = headline_wrapper.PHeadline;
 exports.PIcon = icon_wrapper.PIcon;
 exports.PInlineNotification = inlineNotification_wrapper.PInlineNotification;
+exports.PInputNumber = inputNumber_wrapper.PInputNumber;
 exports.PInputPassword = inputPassword_wrapper.PInputPassword;
 exports.PLink = link_wrapper.PLink;
 exports.PLinkPure = linkPure_wrapper.PLinkPure;

package/esm/lib/components/index.d.ts

@@ -26,6 +26,7 @@ export * from './heading.wrapper';
 export * from './headline.wrapper';
 export * from './icon.wrapper';
 export * from './inline-notification.wrapper';
+export * from './input-number.wrapper';
 export * from './input-password.wrapper';
 export * from './link.wrapper';
 export * from './link-pure.wrapper';

package/esm/lib/components/input-number.wrapper.d.ts

@@ -0,0 +1,184 @@
+import type { BaseProps } from '../../BaseProps';
+import type { InputNumberAutoComplete, BreakpointCustomizable, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState, Theme } from '../types';
+export type PInputNumberProps = BaseProps & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputNumberAutoComplete;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * Show or hide the increment/decrement stepper controls.
+     */
+    controls?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the number input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the number input should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The max value of the number input.
+     */
+    max?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min value of the number input.
+     */
+    min?: number;
+    /**
+     * The name of the number input.
+     */
+    name: string;
+    /**
+     * Emitted when the number input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputNumberBlurEventDetail>) => void;
+    /**
+     * Emitted when the number input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputNumberChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the number input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the number input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputNumberState;
+    /**
+     * The granularity that the value must adhere to.
+     */
+    step?: number;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The number input value.
+     */
+    value?: string;
+};
+export declare const PInputNumber: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputNumberAutoComplete;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * Show or hide the increment/decrement stepper controls.
+     */
+    controls?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the number input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the number input should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The max value of the number input.
+     */
+    max?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min value of the number input.
+     */
+    min?: number;
+    /**
+     * The name of the number input.
+     */
+    name: string;
+    /**
+     * Emitted when the number input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputNumberBlurEventDetail>) => void;
+    /**
+     * Emitted when the number input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputNumberChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the number input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the number input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputNumberState;
+    /**
+     * The granularity that the value must adhere to.
+     */
+    step?: number;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The number input value.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/input-number.wrapper.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PInputNumber = /*#__PURE__*/ forwardRef(({ autoComplete = '', compact = false, controls = false, description = '', disabled = false, form, hideLabel = false, label = '', max, message = '', min, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', step = 1, theme, value = '', className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = usePrefix('p-input-number');
+    const propsToSync = [autoComplete, compact, controls, description, disabled, form, hideLabel, label, max, message, min, name, placeholder, readOnly, required, state, step, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'controls', 'description', 'disabled', 'form', 'hideLabel', 'label', 'max', 'message', 'min', 'name', 'placeholder', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PInputNumber };

package/esm/lib/types.d.ts

@@ -1088,13 +1088,23 @@ declare const ICON_COLORS: readonly [
     "state-disabled"
 ];
 export type IconColor = (typeof ICON_COLORS)[number];
+export type InputNumberState = FormState;
+declare const INPUT_NUMBER_AUTO_COMPLETE: readonly [
+    "off",
+    "on",
+    ""
+];
+export type InputNumberAutoComplete = (typeof INPUT_NUMBER_AUTO_COMPLETE)[number];
+export type InputNumberChangeEventDetail = Event;
+export type InputNumberBlurEventDetail = Event;
+export type InputNumberInputEventDetail = InputEvent;
 export type InputPasswordState = FormState;
 declare const INPUT_PASSWORD_AUTO_COMPLETE: readonly [
     "off",
     "on",
+    "",
     "current-password",
-    "new-password",
-    ""
+    "new-password"
 ];
 export type InputPasswordAutoComplete = (typeof INPUT_PASSWORD_AUTO_COMPLETE)[number];
 export type InputPasswordChangeEventDetail = Event;

package/esm/public-api.mjs

@@ -27,6 +27,7 @@ export { PHeading } from './lib/components/heading.wrapper.mjs';
 export { PHeadline } from './lib/components/headline.wrapper.mjs';
 export { PIcon } from './lib/components/icon.wrapper.mjs';
 export { PInlineNotification } from './lib/components/inline-notification.wrapper.mjs';
+export { PInputNumber } from './lib/components/input-number.wrapper.mjs';
 export { PInputPassword } from './lib/components/input-password.wrapper.mjs';
 export { PLink } from './lib/components/link.wrapper.mjs';
 export { PLinkPure } from './lib/components/link-pure.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.28.0-rc.2",
+  "version": "3.28.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.28.0-rc.2"
+    "@porsche-design-system/components-js": "3.28.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 33.0.0 <34.0.0",
@@ -75,6 +75,9 @@
       "import": "./styles/vanilla-extract/esm/vanilla-extract/index.mjs",
       "default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
     },
+    "./tailwindcss": {
+      "style": "./tailwindcss/index.css"
+    },
     "./ag-grid": {
       "types": "./ag-grid/esm/index.d.ts",
       "import": "./ag-grid/esm/index.mjs",