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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-cell.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -16,8 +17,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
-import '../components/flyout-navigation.wrapper.mjs';
-import '../components/flyout-navigation-item.wrapper.mjs';
+import '../components/flyout-multilevel.wrapper.mjs';
+import '../components/flyout-multilevel-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -16,8 +17,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
-import '../components/flyout-navigation.wrapper.mjs';
-import '../components/flyout-navigation-item.wrapper.mjs';
+import '../components/flyout-multilevel.wrapper.mjs';
+import '../components/flyout-multilevel-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -16,8 +17,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
-import '../components/flyout-navigation.wrapper.mjs';
-import '../components/flyout-navigation-item.wrapper.mjs';
+import '../components/flyout-multilevel.wrapper.mjs';
+import '../components/flyout-multilevel-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -16,8 +17,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
-import '../components/flyout-navigation.wrapper.mjs';
-import '../components/flyout-navigation-item.wrapper.mjs';
+import '../components/flyout-multilevel.wrapper.mjs';
+import '../components/flyout-multilevel-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag-dismissible.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -16,8 +17,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
-import '../components/flyout-navigation.wrapper.mjs';
-import '../components/flyout-navigation-item.wrapper.mjs';
+import '../components/flyout-multilevel.wrapper.mjs';
+import '../components/flyout-multilevel-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag.mjs

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -16,8 +17,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
-import '../components/flyout-navigation.wrapper.mjs';
-import '../components/flyout-navigation-item.wrapper.mjs';
+import '../components/flyout-multilevel.wrapper.mjs';
+import '../components/flyout-multilevel-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.mjs

@@ -6,6 +6,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -17,8 +18,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
-import '../components/flyout-navigation.wrapper.mjs';
-import '../components/flyout-navigation-item.wrapper.mjs';
+import '../components/flyout-multilevel.wrapper.mjs';
+import '../components/flyout-multilevel-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs

@@ -5,6 +5,7 @@ export { PButton } from './lib/components/button.wrapper.mjs';
 export { PButtonGroup } from './lib/components/button-group.wrapper.mjs';
 export { PButtonPure } from './lib/components/button-pure.wrapper.mjs';
 export { PButtonTile } from './lib/components/button-tile.wrapper.mjs';
+export { PCanvas } from './lib/components/canvas.wrapper.mjs';
 export { PCarousel } from './lib/components/carousel.wrapper.mjs';
 export { PCheckboxWrapper } from './lib/components/checkbox-wrapper.wrapper.mjs';
 export { PContentWrapper } from './lib/components/content-wrapper.wrapper.mjs';
@@ -16,8 +17,8 @@ export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.mjs'
 export { PFlex } from './lib/components/flex.wrapper.mjs';
 export { PFlexItem } from './lib/components/flex-item.wrapper.mjs';
 export { PFlyout } from './lib/components/flyout.wrapper.mjs';
-export { PFlyoutNavigation } from './lib/components/flyout-navigation.wrapper.mjs';
-export { PFlyoutNavigationItem } from './lib/components/flyout-navigation-item.wrapper.mjs';
+export { PFlyoutMultilevel } from './lib/components/flyout-multilevel.wrapper.mjs';
+export { PFlyoutMultilevelItem } from './lib/components/flyout-multilevel-item.wrapper.mjs';
 export { PGrid } from './lib/components/grid.wrapper.mjs';
 export { PGridItem } from './lib/components/grid-item.wrapper.mjs';
 export { PHeading } from './lib/components/heading.wrapper.mjs';

package/ssr/esm/lib/components/accordion.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
-export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PAccordionProps = BaseProps & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
@@ -42,7 +43,7 @@ export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PAccordion: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */

package/ssr/esm/lib/components/banner.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BannerHeadingTag, BannerState, Theme, BannerWidth } from '../types';
-export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PBannerProps = BaseProps & {
     /**
      * Description of the banner.
      */
@@ -43,7 +44,7 @@ export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     width?: BannerWidth;
 };
-export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PBanner: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Description of the banner.
      */

package/ssr/esm/lib/components/button-group.wrapper.d.ts

@@ -1,12 +1,13 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
-export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonGroupProps = BaseProps & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
-export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonGroup: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */

package/ssr/esm/lib/components/button-pure.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
-export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonPureProps = BaseProps & {
     /**
      * Display button in active state.
      */
@@ -67,7 +68,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: ButtonPureWeight;
 };
-export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonPure: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Display button in active state.
      */

package/ssr/esm/lib/components/button-tile.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileBackground, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
-export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonTileProps = BaseProps & {
     /**
      * Alignment of button and description.
      */
@@ -62,7 +63,7 @@ export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
-export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonTile: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Alignment of button and description.
      */

package/ssr/esm/lib/components/button.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
-export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -46,7 +47,7 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     variant?: ButtonVariant;
 };
-export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButton: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/ssr/esm/lib/components/canvas.wrapper.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+import type { CanvasSidebarEndWidth, CanvasSidebarStartWidth } from '../types';
+export type PCanvasProps = BaseProps & {
+    /**
+     * Emitted when the component requests to close the sidebar on the end side.
+     */
+    onDismissSidebarEnd?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the component requests to close the sidebar on the start side.
+     */
+    onDismissSidebarStart?: (event: CustomEvent<void>) => void;
+    /**
+     * Open Sidebar on the end side
+     */
+    sidebarEndOpen?: boolean;
+    /**
+     * Defines the width of the sidebar on the end side
+     */
+    sidebarEndWidth?: CanvasSidebarEndWidth;
+    /**
+     * Open Sidebar on the start side
+     */
+    sidebarStartOpen?: boolean;
+    /**
+     * Defines the width of the sidebar on the start side
+     */
+    sidebarStartWidth?: CanvasSidebarStartWidth;
+};
+export declare const PCanvas: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Emitted when the component requests to close the sidebar on the end side.
+     */
+    onDismissSidebarEnd?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the component requests to close the sidebar on the start side.
+     */
+    onDismissSidebarStart?: (event: CustomEvent<void>) => void;
+    /**
+     * Open Sidebar on the end side
+     */
+    sidebarEndOpen?: boolean;
+    /**
+     * Defines the width of the sidebar on the end side
+     */
+    sidebarEndWidth?: CanvasSidebarEndWidth;
+    /**
+     * Open Sidebar on the start side
+     */
+    sidebarStartOpen?: boolean;
+    /**
+     * Defines the width of the sidebar on the start side
+     */
+    sidebarStartWidth?: CanvasSidebarStartWidth;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/carousel.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
-export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */
@@ -71,7 +72,7 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     wrapContent?: boolean;
 };
-export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PCarousel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */

package/ssr/esm/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
-export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PCheckboxWrapperProps = BaseProps & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
@@ -26,7 +27,7 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */

package/ssr/esm/lib/components/content-wrapper.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
-export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PContentWrapperProps = BaseProps & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
@@ -17,7 +18,7 @@ export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     width?: ContentWrapperWidth;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PContentWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PContentWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release

package/ssr/esm/lib/components/crest.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, CrestAriaAttribute, CrestTarget } from '../types';
-export type PCrestProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PCrestProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -14,7 +15,7 @@ export type PCrestProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     target?: CrestTarget;
 };
-export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PCrest: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/ssr/esm/lib/components/display.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
-export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PDisplayProps = BaseProps & {
     /**
      * Text alignment of the component.
      */
@@ -26,7 +27,7 @@ export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PDisplay: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      */

package/ssr/esm/lib/components/divider.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { DividerColor, BreakpointCustomizable, DividerDirection, DividerOrientation, Theme } from '../types';
-export type PDividerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PDividerProps = BaseProps & {
     /**
      * Defines color depending on theme.
      */
@@ -18,7 +19,7 @@ export type PDividerProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PDivider: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines color depending on theme.
      */

package/ssr/esm/lib/components/fieldset-wrapper.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { FieldsetWrapperLabelSize, FieldsetWrapperState, Theme } from '../types';
-export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PFieldsetWrapperProps = BaseProps & {
     /**
      * The label text.
      */
@@ -27,7 +28,7 @@ export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     theme?: Theme;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
-export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The label text.
      */

package/ssr/esm/lib/components/fieldset.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { FieldsetLabelSize, FieldsetState, Theme } from '../types';
-export type PFieldsetProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PFieldsetProps = BaseProps & {
     /**
      * The label text.
      */
@@ -26,7 +27,7 @@ export type PFieldsetProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PFieldset: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The label text.
      */

package/ssr/esm/lib/components/flex-item.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
-export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PFlexItemProps = BaseProps & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */
@@ -27,7 +28,7 @@ export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     width?: BreakpointCustomizable<FlexItemWidth>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-export declare const PFlexItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PFlexItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */

package/ssr/esm/lib/components/flex.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
-export type PFlexProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PFlexProps = BaseProps & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */
@@ -27,7 +28,7 @@ export type PFlexProps = Omit<HTMLAttributes<{}>, 'color'> & {
     wrap?: BreakpointCustomizable<FlexWrap>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-export declare const PFlex: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PFlex: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */

package/ssr/esm/lib/components/flyout-multilevel-item.wrapper.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PFlyoutMultilevelItemProps = BaseProps & {
+    /**
+     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-multilevel is set to this value.
+     */
+    identifier: string;
+    /**
+     * Label of the item.
+     */
+    label?: string;
+};
+export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-multilevel is set to this value.
+     */
+    identifier: string;
+    /**
+     * Label of the item.
+     */
+    label?: string;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;