@porsche-design-system/components-react 2.17.0 → 2.18.0-rc.0

package/lib/components/text-list-item.wrapper.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PTextListItem = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-text-list-item');
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PTextListItem = PTextListItem;

package/lib/components/text-list.wrapper.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PTextList = /*#__PURE__*/ react.forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-text-list');
+    const propsToSync = [listType, orderType, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['listType', 'orderType', 'theme'].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.PTextList = PTextList;

package/lib/components/text.wrapper.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PText = /*#__PURE__*/ react.forwardRef(({ align = 'left', color = 'default', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-text');
+    const propsToSync = [align, color, ellipsis, size, tag, theme, weight];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].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.PText = PText;

package/lib/components/textarea-wrapper.wrapper.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PTextareaWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-textarea-wrapper');
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, state];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state'].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.PTextareaWrapper = PTextareaWrapper;

package/lib/components/toast.wrapper.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PToast = /*#__PURE__*/ react.forwardRef(({ theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-toast');
+    hooks.useBrowserLayoutEffect(() => {
+        elementRef.current.theme = theme;
+    }, [theme]);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PToast = PToast;

package/package.json

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

package/provider.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var componentsJs = require('@porsche-design-system/components-js');
+
+// to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
+const PorscheDesignSystemContext = react.createContext({
+    prefix: undefined,
+});
+const PorscheDesignSystemProvider = ({ prefix = '', ...props }) => {
+    react.useEffect(() => {
+        componentsJs.load({ prefix });
+    }, [prefix]);
+    return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
+};
+
+exports.PorscheDesignSystemContext = PorscheDesignSystemContext;
+exports.PorscheDesignSystemProvider = PorscheDesignSystemProvider;