@porsche-design-system/components-react 3.30.0 → 3.31.0-rc.0

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3282,7 +3282,8 @@ const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-s
 
 const fontHyphenationStyle = {
     overflowWrap: 'break-word',
-    hyphens: 'auto',
+    // @ts-ignore
+    hyphens: 'var(--p-hyphens, auto)',
 };
 
 const fontLineHeight = 'calc(6px + 2.125ex)';
@@ -3443,6 +3444,12 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
+const prefix = `[Porsche Design System v${"3.31.0-rc.0"}]` // this part isn't covered by unit tests
+    ;
+const consoleError$1 = (...messages) => {
+    console.error(prefix, ...messages); // eslint-disable-line no-console
+};
+
 // This class is shared since the popover needs to register a scroll listener to this node in order to hide the popover when the table is scrolled
 const scrollAreaClass = 'scroll-area';
 const isScrollable = (isPrevHidden, isNextHidden) => {
@@ -3534,7 +3541,96 @@ const formatObjectOutput = (value) => {
         .replace(/(})/g, ' $1') // add space before following: }
         .replace(/^"(.+)"$/, '$1'); // remove wrapping double quotes
 };
-`value, ${formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '')}`;
+const formatArrayOutput = (value) => {
+    return (
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    JSON.stringify(value.map((x) => (x === undefined ? `${x}` : x))) // wrap undefined in quotes to not convert it to null
+        .replace(/'/g, '') // remove single quotes
+        // eslint-disable-next-line @typescript-eslint/quotes
+        .replace(/"/g, "'") // replace double quotes with single quotes
+        .replace(/'(undefined)'/, '$1') // remove quotes around undefined
+        .replace(/,/g, ', ') // add space after comma
+    );
+};
+const printErrorMessage = ({ propName, propValue, // TODO: might be nicer if this is always a string
+propType, componentName, }) => {
+    consoleError$1(`Invalid property '${propName}' with value '${internalValidateProps.formatObjectOutput(propValue)}' supplied to ${componentName}, expected one of: ${propType}`);
+};
+const isValueNotOfType = (propValue, propType) => {
+    return propValue !== undefined && typeof propValue !== propType;
+};
+const validateValueOfType = (propName, propValue, propType) => {
+    if (internalValidateProps.isValueNotOfType(propValue, propType)) {
+        return { propName, propValue, propType };
+    }
+    return undefined;
+};
+const getBreakpointCustomizableStructure = (allowedValues) => {
+    return breakpointCustomizableTemplate.replace(/value/g, allowedValues !== 'boolean' && allowedValues !== 'number'
+        ? internalValidateProps
+            .formatArrayOutput(allowedValues)
+            .replace(/\[/g, '(') // starting inline type literal array
+            .replace(/]/g, ')[]') // ending inline type literal array
+            .replace(/,/g, ' |') // replace commas with a pipe
+        : allowedValues);
+};
+const getAriaStructure = (allowedAriaAttributes) => {
+    return (internalValidateProps
+        .formatObjectOutput(allowedAriaAttributes.reduce((prev, key) => ({
+        ...prev,
+        [key]: 'value',
+    }), {}))
+        .replace(/":/g, '"?:') // add optional modifier on keys before colon
+        // eslint-disable-next-line @typescript-eslint/quotes
+        .replace(/"/g, "'") // replace double quotes with single quotes
+    );
+};
+const getShapeStructure = (shapeStructure) => {
+    return internalValidateProps
+        .formatObjectOutput(Object.keys(shapeStructure).reduce((prev, key) => ({ ...prev, [key]: shapeStructure[key].name }), {}))
+        .replace(/"/g, ''); // remove double quotes
+};
+const isBreakpointCustomizableValueInvalid = (value, allowedValues) => {
+    return allowedValues === 'boolean' || allowedValues === 'number'
+        ? internalValidateProps.isValueNotOfType(value, allowedValues)
+        : !allowedValues.includes(value);
+};
+/**
+ * Validates an array using a provided validator function and returns the first encountered validation error.
+ *
+ * @param {string} propName - The name of the property being validated.
+ * @param {any} arr - The input to be validated.
+ * @param {ValidatorFunction} validator - The validator function that checks each array item.
+ * @returns {ValidationError | undefined} The first encountered validation error object, or undefined if the array is valid.
+ */
+const isValidArray = (propName, arr, validator) => {
+    const validationError = Array.isArray(arr)
+        ? validator(propName, arr.find((item) => validator(propName, item)))
+        : {
+            propName,
+            propValue: arr,
+            propType: validator(propName, null).propType, // Get propType by passing in null which will always result in error
+        };
+    if (validationError) {
+        return { ...validationError, propType: `${validationError.propType}[]` };
+    }
+    return undefined;
+};
+const internalValidateProps = {
+    isValueNotOfType,
+    formatArrayOutput,
+    formatObjectOutput,
+    printErrorMessage,
+    validateValueOfType,
+    isValidArray,
+    isBreakpointCustomizableValueInvalid,
+    getBreakpointCustomizableStructure,
+    getAriaStructure,
+    getShapeStructure,
+};
+const breakpointCustomizableTemplate = `value, ${internalValidateProps
+    .formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {}))
+    .replace(/"/g, '')}`;
 const getButtonPureAriaAttributes = (isDisabled, isLoading, aria) => {
     return {
         ...parseAndGetAriaAttributes(aria),
@@ -3589,17 +3685,6 @@ const getDisplayTagType = (host, size, tag) => {
     }
     return displaySizeToTagMap[size] || 'h1';
 };
-/**
- * Updates the state of the drilldown and its children based on the provided activeItem and value.
- *
- * @param {string | undefined} activeItem - The drilldown-item element which is currently active (which has the activeIdentifier as identifier). If undefined, updates the root element.
- * @param {boolean} value - The new state value to apply.
- * @returns {void}
- */
-const updateDrilldownItemState = (activeItem, value) => {
-    activeItem.secondary = value;
-    traverseTreeAndUpdateState(activeItem.parentElement, 'primary', value);
-};
 /**
  * Recursively updates the state of a drilldown item's parent elements by traversing up the DOM tree.
  *
@@ -3610,9 +3695,23 @@ const updateDrilldownItemState = (activeItem, value) => {
 const traverseTreeAndUpdateState = (activeItem, prop, value) => {
     if (isElementOfKind(activeItem, 'p-drilldown-item')) {
         activeItem[prop] = value;
-        traverseTreeAndUpdateState(activeItem.parentElement, 'cascade', value);
+        internalDrilldown.traverseTreeAndUpdateState(activeItem.parentElement, 'cascade', value);
     }
 };
+const internalDrilldown = {
+    traverseTreeAndUpdateState,
+};
+/**
+ * Updates the state of the drilldown and its children based on the provided activeItem and value.
+ *
+ * @param {string | undefined} activeItem - The drilldown-item element which is currently active (which has the activeIdentifier as identifier). If undefined, updates the root element.
+ * @param {boolean} value - The new state value to apply.
+ * @returns {void}
+ */
+const updateDrilldownItemState = (activeItem, value) => {
+    activeItem.secondary = value;
+    internalDrilldown.traverseTreeAndUpdateState(activeItem.parentElement, 'primary', value);
+};
 const getFieldsetAriaAttributes = (isRequired, isInvalid, aria) => {
     const ariaAttrs = parseAndGetAriaAttributes(aria);
     return {
@@ -3893,4 +3992,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getSelectedOptionsString, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, buildImgSrc, buildSrcSet, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getSelectedOptionsString, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

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

@@ -15,7 +15,7 @@ id, label, description, loading, initialLoading, required, disabled, state, mess
 // onWheel,
 // onChange,
 // onBlur,
-onKeyDown, 
+// onKeyDown,
 // refElement,
 start, end, }) => {
     const { namedSlotChildren } = splitChildren(children);

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-group-option.mjs

@@ -21,7 +21,6 @@ class DSRRadioGroupOption extends Component {
         const style = minifyCss(getComponentCss$y(isDisabled, isLoading, state, theme));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), jsxs("div", { className: "wrapper", children: [jsx("input", { id: id, type: "radio", name: name, checked: isSelected, disabled: isDisabled || isLoading, value: this.props.value, onClick: (e) => {
                                                 e.stopPropagation();
-                                                e.stopImmediatePropagation();
                                             }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingId : `${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" }))] }), !this.props.loadingParent && (jsx(LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }) }));
     }
 }

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

@@ -25,7 +25,8 @@ class DSRSegmentedControl extends Component {
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, selected: child.props?.value === this.props.value, backgroundColor: this.props.backgroundColor, theme: this.props.theme } }
             : child);
-        const style = minifyCss(getComponentCss$u(100, this.props.columns, this.props.compact));
+        const { minWidth, maxWidth } = { minWidth: 100, maxWidth: 100 };
+        const style = minifyCss(getComponentCss$u(minWidth, maxWidth, this.props.columns, this.props.compact));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("slot", {}) })] }), manipulatedChildren] }));
     }
 }

package/ssr/esm/lib/dsr-components/input-base.d.ts

@@ -28,7 +28,6 @@ type InputBaseProps = {
     value?: string;
     step?: number;
     spellCheck?: boolean;
-    onKeyDown?: (e: KeyboardEvent) => void;
     start?: JSX.Element;
     end?: JSX.Element;
 };