@porsche-design-system/components-react 3.6.1 → 3.7.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.7.0-rc.0] - 2023-09-05
+
+#### Added
+
+- `Multi Select` ([#2658](https://github.com/porsche-design-system/porsche-design-system/pull/2658))
+
+#### Changed
+
+- Partials: `Cdn` and `Format` types are exposed
+  ([#2760](https://github.com/porsche-design-system/porsche-design-system/pull/2760))
+
 ### [3.6.1] - 2023-08-29
 
 ### [3.6.1-rc.0] - 2023-08-29

package/cjs/lib/components/multi-select-option.wrapper.cjs

@@ -0,0 +1,25 @@
+'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 PMultiSelectOption = react.forwardRef(({ disabled = false, value, className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-multi-select-option');
+    const propsToSync = [disabled, value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['disabled', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PMultiSelectOption = PMultiSelectOption;

package/cjs/lib/components/multi-select.wrapper.cjs

@@ -0,0 +1,26 @@
+'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 PMultiSelect = react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme = 'light', value = [], className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = hooks.usePrefix('p-multi-select');
+    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme, value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PMultiSelect = PMultiSelect;

package/cjs/public-api.cjs

@@ -32,6 +32,8 @@ var linkTileModelSignature_wrapper = require('./lib/components/link-tile-model-s
 var marque_wrapper = require('./lib/components/marque.wrapper.cjs');
 var modal_wrapper = require('./lib/components/modal.wrapper.cjs');
 var modelSignature_wrapper = require('./lib/components/model-signature.wrapper.cjs');
+var multiSelect_wrapper = require('./lib/components/multi-select.wrapper.cjs');
+var multiSelectOption_wrapper = require('./lib/components/multi-select-option.wrapper.cjs');
 var pagination_wrapper = require('./lib/components/pagination.wrapper.cjs');
 var popover_wrapper = require('./lib/components/popover.wrapper.cjs');
 var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.wrapper.cjs');
@@ -103,6 +105,8 @@ exports.PLinkTileModelSignature = linkTileModelSignature_wrapper.PLinkTileModelS
 exports.PMarque = marque_wrapper.PMarque;
 exports.PModal = modal_wrapper.PModal;
 exports.PModelSignature = modelSignature_wrapper.PModelSignature;
+exports.PMultiSelect = multiSelect_wrapper.PMultiSelect;
+exports.PMultiSelectOption = multiSelectOption_wrapper.PMultiSelectOption;
 exports.PPagination = pagination_wrapper.PPagination;
 exports.PPopover = popover_wrapper.PPopover;
 exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;

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

@@ -29,6 +29,8 @@ export * from './link-tile-model-signature.wrapper';
 export * from './marque.wrapper';
 export * from './modal.wrapper';
 export * from './model-signature.wrapper';
+export * from './multi-select.wrapper';
+export * from './multi-select-option.wrapper';
 export * from './pagination.wrapper';
 export * from './popover.wrapper';
 export * from './radio-button-wrapper.wrapper';

package/esm/lib/components/multi-select-option.wrapper.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes } from 'react';
+export type PMultiSelectOptionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Disables the option.
+     */
+    disabled?: boolean;
+    /**
+     * The option value.
+     */
+    value: string;
+};
+export declare const PMultiSelectOption: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Disables the option.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The option value.
+     */
+    value: string;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PMultiSelectOption = forwardRef(({ disabled = false, value, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-multi-select-option');
+    const propsToSync = [disabled, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['disabled', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PMultiSelectOption };

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

@@ -0,0 +1,104 @@
+import { type HTMLAttributes } from 'react';
+import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectUpdateEvent, MultiSelectState, Theme } from '../types';
+export type PMultiSelectProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the multi-select
+     */
+    disabled?: boolean;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: MultiSelectDropdownDirection;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the control.
+     */
+    name: string;
+    /**
+     * Emitted when the selection is changed.
+     */
+    onUpdate?: (event: CustomEvent<MultiSelectUpdateEvent>) => void;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: MultiSelectState;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The selected values.
+     */
+    value?: string[];
+};
+export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The description text.
+     */
+    description?: string | undefined;
+    /**
+     * Disables the multi-select
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: "auto" | "down" | "up" | undefined;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The label text.
+     */
+    label?: string | undefined;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string | undefined;
+    /**
+     * The name of the control.
+     */
+    name: string;
+    /**
+     * Emitted when the selection is changed.
+     */
+    onUpdate?: ((event: CustomEvent<MultiSelectUpdateEvent>) => void) | undefined;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     */
+    required?: boolean | undefined;
+    /**
+     * The validation state.
+     */
+    state?: "none" | "success" | "error" | undefined;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * The selected values.
+     */
+    value?: string[] | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PMultiSelect = forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme = 'light', 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, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PMultiSelect };

package/esm/lib/types.d.ts

@@ -501,6 +501,12 @@ declare const SCROLL_INDICATOR_POSITIONS: readonly [
 /** @deprecated */
 export type ScrollerScrollIndicatorPosition = (typeof SCROLL_INDICATOR_POSITIONS)[number];
 export type ScrollerAlignScrollIndicator = ScrollerScrollIndicatorPosition;
+declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
+    "down",
+    "up",
+    "auto"
+];
+export type SelectDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
 declare const ALIGN_LABELS: readonly [
     "left",
     "right"
@@ -1006,6 +1012,12 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
     "inherit"
 ];
 export type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
+export type MultiSelectState = FormState;
+export type MultiSelectDropdownDirection = SelectDropdownDirection;
+export type MultiSelectUpdateEvent = {
+    value: string[];
+    name: string;
+};
 declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7

package/esm/public-api.mjs

@@ -30,6 +30,8 @@ export { PLinkTileModelSignature } from './lib/components/link-tile-model-signat
 export { PMarque } from './lib/components/marque.wrapper.mjs';
 export { PModal } from './lib/components/modal.wrapper.mjs';
 export { PModelSignature } from './lib/components/model-signature.wrapper.mjs';
+export { PMultiSelect } from './lib/components/multi-select.wrapper.mjs';
+export { PMultiSelectOption } from './lib/components/multi-select-option.wrapper.mjs';
 export { PPagination } from './lib/components/pagination.wrapper.mjs';
 export { PPopover } from './lib/components/popover.wrapper.mjs';
 export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.6.1",
+  "version": "3.7.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.6.1"
+    "@porsche-design-system/components-js": "3.7.0-rc.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",