@porsche-design-system/components-react 3.20.0 → 3.21.0-rc.0

package/esm/lib/components/multi-select.wrapper.mjs

@@ -4,17 +4,18 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PMultiSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
+const PMultiSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-multi-select');
-    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/optgroup.wrapper.mjs

@@ -14,6 +14,7 @@ const POptgroup = /*#__PURE__*/ forwardRef(({ disabled = false, label, className
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/pagination.wrapper.mjs

@@ -16,6 +16,7 @@ const PPagination = /*#__PURE__*/ forwardRef(({ activePage = 1, allyLabel, allyL
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/pin-code.wrapper.mjs

@@ -15,6 +15,7 @@ const PPinCode = /*#__PURE__*/ forwardRef(({ description = '', disabled = false,
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/popover.wrapper.mjs

@@ -14,6 +14,7 @@ const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bot
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/radio-button-wrapper.wrapper.mjs

@@ -14,6 +14,7 @@ const PRadioButtonWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/scroller.wrapper.mjs

@@ -14,6 +14,7 @@ const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', a
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/segmented-control-item.wrapper.mjs

@@ -14,6 +14,7 @@ const PSegmentedControlItem = /*#__PURE__*/ forwardRef(({ aria, disabled = false
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/segmented-control.wrapper.mjs

@@ -16,6 +16,7 @@ const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/select-option.wrapper.mjs

@@ -14,6 +14,7 @@ const PSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value, class
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/select-wrapper.wrapper.mjs

@@ -14,6 +14,7 @@ const PSelectWrapper = /*#__PURE__*/ forwardRef(({ description = '', dropdownDir
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/select.wrapper.d.ts

@@ -13,6 +13,10 @@ export type PSelectProps = BaseProps & {
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: SelectDropdownDirection;
+    /**
+     * The id of a form element the select should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -63,6 +67,10 @@ export declare const PSelect: import("react").ForwardRefExoticComponent<import("
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: SelectDropdownDirection;
+    /**
+     * The id of a form element the select should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */

package/esm/lib/components/select.wrapper.mjs

@@ -4,17 +4,18 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+const PSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-select');
-    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/spinner.wrapper.mjs

@@ -14,6 +14,7 @@ const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', theme, classN
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/stepper-horizontal-item.wrapper.mjs

@@ -14,6 +14,7 @@ const PStepperHorizontalItem = /*#__PURE__*/ forwardRef(({ disabled = false, sta
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/stepper-horizontal.wrapper.mjs

@@ -16,6 +16,7 @@ const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, onUpdate, s
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/switch.wrapper.mjs

@@ -16,6 +16,7 @@ const PSwitch = /*#__PURE__*/ forwardRef(({ alignLabel = 'end', checked = false,
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-body.wrapper.mjs

@@ -9,6 +9,7 @@ const PTableBody = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
     const WebComponentTag = usePrefix('p-table-body');
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-cell.wrapper.mjs

@@ -12,6 +12,7 @@ const PTableCell = /*#__PURE__*/ forwardRef(({ multiline = false, className, ...
     }, [multiline]);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-head-cell.wrapper.mjs

@@ -14,6 +14,7 @@ const PTableHeadCell = /*#__PURE__*/ forwardRef(({ hideLabel = false, multiline
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-head-row.wrapper.mjs

@@ -9,6 +9,7 @@ const PTableHeadRow = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) =>
     const WebComponentTag = usePrefix('p-table-head-row');
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-head.wrapper.mjs

@@ -9,6 +9,7 @@ const PTableHead = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
     const WebComponentTag = usePrefix('p-table-head');
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-row.wrapper.mjs

@@ -9,6 +9,7 @@ const PTableRow = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
     const WebComponentTag = usePrefix('p-table-row');
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table.wrapper.mjs

@@ -16,6 +16,7 @@ const PTable = /*#__PURE__*/ forwardRef(({ caption, onSortingChange, onUpdate, t
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/tabs-bar.wrapper.mjs

@@ -16,6 +16,7 @@ const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColor = 'ba
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/tabs-item.wrapper.mjs

@@ -12,6 +12,7 @@ const PTabsItem = /*#__PURE__*/ forwardRef(({ label, className, ...rest }, ref)
     }, [label]);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/tabs.wrapper.mjs

@@ -16,6 +16,7 @@ const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColor = 'b
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/tag-dismissible.wrapper.mjs

@@ -14,6 +14,7 @@ const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-su
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/tag.wrapper.mjs

@@ -14,6 +14,7 @@ const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/text-field-wrapper.wrapper.mjs

@@ -15,6 +15,7 @@ const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/text-list-item.wrapper.mjs

@@ -9,6 +9,7 @@ const PTextListItem = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) =>
     const WebComponentTag = usePrefix('p-text-list-item');
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/text-list.wrapper.mjs

@@ -14,6 +14,7 @@ const PTextList = /*#__PURE__*/ forwardRef(({ listType, orderType, theme, type =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/text.wrapper.mjs

@@ -14,6 +14,7 @@ const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', el
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/textarea-wrapper.wrapper.mjs

@@ -14,6 +14,7 @@ const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/textarea.wrapper.mjs

@@ -17,6 +17,7 @@ const PTextarea = /*#__PURE__*/ forwardRef(({ autoComplete = '', description = '
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/toast.wrapper.mjs

@@ -13,6 +13,7 @@ const PToast = /*#__PURE__*/ forwardRef(({ theme, className, ...rest }, ref) =>
     }, [theme, themeValue]);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/wordmark.wrapper.mjs

@@ -14,6 +14,7 @@ const PWordmark = /*#__PURE__*/ forwardRef(({ aria, href, size = 'small', target
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/types.d.ts

@@ -440,7 +440,8 @@ declare const BUTTON_ARIA_ATTRIBUTES: readonly [
 export type ButtonAriaAttribute = typeof BUTTON_ARIA_ATTRIBUTES[number];
 declare const LINK_ARIA_ATTRIBUTES: readonly [
     "aria-label",
-    "aria-current"
+    "aria-current",
+    "aria-haspopup"
 ];
 export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
 declare const breakpoints: readonly [
@@ -885,6 +886,11 @@ declare const FLYOUT_POSITIONS: readonly [
     "right"
 ];
 export type FlyoutPosition = (typeof FLYOUT_POSITIONS)[number];
+declare const FLYOUT_FOOTER_BEHAVIOR: readonly [
+    "sticky",
+    "fixed"
+];
+export type FlyoutFooterBehavior = (typeof FLYOUT_FOOTER_BEHAVIOR)[number];
 declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.20.0",
+  "version": "3.21.0-rc.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.20.0"
+    "@porsche-design-system/components-js": "3.21.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 32.0.0 <33.0.0",
@@ -25,6 +25,14 @@
     "react": ">=18.0.0 <19.0.0",
     "react-dom": ">=18.0.0 <19.0.0"
   },
+  "peerDependenciesMeta": {
+    "ag-grid-enterprise": {
+      "optional": true
+    },
+    "ag-grid-react": {
+      "optional": true
+    }
+  },
   "main": "cjs/public-api.cjs",
   "module": "esm/public-api.mjs",
   "types": "esm/public-api.d.ts",