@configura/web-ui 1.0.0 → 1.1.1

package/dist/components/Configurator.js

@@ -6,7 +6,7 @@ export const Configurator = (props) => {
     const { exportStatus, handleExport, handleRender, product, renderStatus } = props;
     return (React.createElement("div", { className: `cfgConfigurator ${props.className || ""}`, style: props.style }, product !== undefined && (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "cfgConfiguratorHeader" },
-            React.createElement(ProductInformation, { product: product }),
+            React.createElement(ProductInformation, { lang: product.lang, description: product.description, styleNr: product.styleNr, price: product.aggregatedPrice }),
             (handleExport !== undefined || handleRender !== undefined) && (React.createElement("div", { className: "cfgConfiguratorHeader__actions" },
                 React.createElement(ConfigurationActionsButtonRow, { handleExport: handleExport, exportStatus: exportStatus, handleRender: handleRender, renderStatus: renderStatus })))),
         React.createElement("div", { className: "cfgConfiguratorTree" },

package/dist/components/ProductInformation.d.ts

@@ -1,7 +1,10 @@
-import { CfgProduct } from "@configura/web-api";
+import { CfgPrice } from "@configura/web-api";
 import { CssProps } from "../utilities.js";
 interface Props {
-    product: CfgProduct;
+    description: string | undefined;
+    lang: string | undefined;
+    styleNr: string | undefined;
+    price: CfgPrice | undefined;
 }
 export declare function ProductInformation(props: Props & CssProps): JSX.Element;
 export {};

package/dist/components/ProductInformation.js

@@ -1,13 +1,23 @@
 import React from "react";
 import { CurrencyPrice } from "./CurrencyPrice.js";
 export function ProductInformation(props) {
-    const { product } = props;
-    const { styleNr, aggregatedPrice, description, lang } = product;
-    const { listPrice, currency, fractionDigits } = aggregatedPrice;
+    const { styleNr, price, description, lang } = props;
     return (React.createElement("div", { className: `cfgProductInfo ${props.className || ""}`, style: props.style },
         React.createElement("div", { className: "cfgProductInfo__left" },
             React.createElement("h2", { className: "cfgProductInfo__name cfgTextOverflow" }, description),
             React.createElement("div", { className: "cfgProductInfo__number cfgTextOverflow" }, styleNr)),
-        React.createElement("div", { className: "cfgProductInfo__right" }, listPrice > 0 && currency !== "" && (React.createElement("div", { className: "cfgProductInfo__name cfgProductInfo__name--right" },
-            React.createElement(CurrencyPrice, { currency: currency, language: lang, price: listPrice, fractionDigits: fractionDigits }))))));
+        React.createElement(ProductInformationPrice, { price: price, lang: lang })));
+}
+function ProductInformationPrice(props) {
+    const { price, lang } = props;
+    if (price === undefined) {
+        return null;
+    }
+    const { listPrice, currency, fractionDigits } = price;
+    if (listPrice === 0 || currency === "") {
+        return null;
+    }
+    return (React.createElement("div", { className: "cfgProductInfo__right" },
+        React.createElement("div", { className: "cfgProductInfo__name cfgProductInfo__name--right" },
+            React.createElement(CurrencyPrice, { currency: currency, language: lang, price: listPrice, fractionDigits: fractionDigits }))));
 }

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/CanvasWrapper.js";
 export * from "./components/Configurator.js";
 export * from "./components/ConfiguratorWrapper.js";
+export * from "./components/CurrencyPrice.js";
 export * from "./components/ExpandableHeadingRow.js";
 export * from "./components/icons/Checkmark.js";
 export * from "./components/icons/Chevron.js";

package/dist/index.js

@@ -1,6 +1,7 @@
 export * from "./components/CanvasWrapper.js";
 export * from "./components/Configurator.js";
 export * from "./components/ConfiguratorWrapper.js";
+export * from "./components/CurrencyPrice.js";
 export * from "./components/ExpandableHeadingRow.js";
 export * from "./components/icons/Checkmark.js";
 export * from "./components/icons/Chevron.js";

package/dist/useResize.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 function getSize(element) {
     let { innerWidth, innerHeight } = window;
     if (element) {
@@ -18,11 +18,30 @@ export function useResize(element) {
         setSize(current);
     }, [element, size.height, size.width]);
     useEffect(refresh, [element, refresh]);
+    const resizeObserver = useMemo(() => {
+        if ("ResizeObserver" in window) {
+            return new ResizeObserver(refresh);
+        }
+        return undefined;
+    }, [refresh]);
     useEffect(() => {
-        window.addEventListener("resize", refresh);
+        if (element === undefined) {
+            return;
+        }
+        if (resizeObserver === undefined) {
+            window.addEventListener("resize", refresh);
+        }
+        else {
+            resizeObserver.observe(element);
+        }
         return () => {
-            window.removeEventListener("resize", refresh);
+            if (resizeObserver === undefined) {
+                window.removeEventListener("resize", refresh);
+            }
+            else {
+                resizeObserver.unobserve(element);
+            }
         };
-    }, [refresh]);
+    }, [resizeObserver, element, refresh]);
     return [size, refresh];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@configura/web-ui",
-	"version": "1.0.0",
+	"version": "1.1.1",
 	"license": "Apache-2.0",
 	"type": "module",
 	"main": "dist/index.js",
@@ -32,7 +32,7 @@
 		]
 	},
 	"dependencies": {
-		"@configura/web-api": "^1.0.0"
+		"@configura/web-api": "^1.1.1"
 	},
 	"devDependencies": {
 		"@babel/preset-env": "^7.14.4",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "57b715984a126979edd7bf8a6346e2ad1321b36e"
+	"gitHead": "f016a6897c8653f27c9d5a335038c9acbde82f4a"
 }