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

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

@@ -3284,7 +3284,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)';
@@ -3445,6 +3446,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) => {
@@ -3536,7 +3543,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),
@@ -3591,17 +3687,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.
  *
@@ -3612,9 +3697,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 {
@@ -3907,6 +4006,7 @@ exports.buildFlagUrl = buildFlagUrl;
 exports.buildIconUrl = buildIconUrl;
 exports.buildImgSrc = buildImgSrc;
 exports.buildSrcSet = buildSrcSet;
+exports.consoleError = consoleError$1;
 exports.createPaginationItems = createPaginationItems;
 exports.createRange = createRange;
 exports.crestSize = crestSize;
@@ -3950,6 +4050,7 @@ exports.hasSpecificDirectChildTag = hasSpecificDirectChildTag;
 exports.hasVisibleIcon = hasVisibleIcon;
 exports.hasWindow = hasWindow$1;
 exports.headerSlot = headerSlot;
+exports.internalDrilldown = internalDrilldown;
 exports.isCurrentInput = isCurrentInput;
 exports.isCustomDropdown = isCustomDropdown;
 exports.isDisabledOrLoading = isDisabledOrLoading;

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

@@ -17,7 +17,7 @@ id, label: label$1, description, loading, initialLoading, required, disabled, st
 // onWheel,
 // onChange,
 // onBlur,
-onKeyDown, 
+// onKeyDown,
 // refElement,
 start, end, }) => {
     const { namedSlotChildren } = splitChildren.splitChildren(children);

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

@@ -23,7 +23,6 @@ class DSRRadioGroupOption extends react.Component {
         const style = minifyCss.minifyCss(stylesEntry.getRadioGroupOptionCss(isDisabled, isLoading, state, theme));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.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 ? loadingMessage.loadingId : `${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" }))] }), !this.props.loadingParent && (jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }) }));
     }
 }

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

@@ -27,7 +27,8 @@ class DSRSegmentedControl extends react.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.minifyCss(stylesEntry.getSegmentedControlCss(100, this.props.columns, this.props.compact));
+        const { minWidth, maxWidth } = { minWidth: 100, maxWidth: 100 };
+        const style = minifyCss.minifyCss(stylesEntry.getSegmentedControlCss(minWidth, maxWidth, this.props.columns, this.props.compact));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("slot", {}) })] }), manipulatedChildren] }));
     }
 }