@configura/web-ui 1.6.1-alpha.7 → 1.6.2

package/dist/components/ErrorContext.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const ErrorContext: React.Context<(err: unknown) => void>;
+//# sourceMappingURL=ErrorContext.d.ts.map

package/dist/components/ErrorContext.js

@@ -0,0 +1,2 @@
+import React from "react";
+export const ErrorContext = React.createContext(() => undefined);

package/dist/components/TaskListView.js

@@ -1,5 +1,6 @@
 import { isRenderFormat } from "@configura/web-api";
-import React from "react";
+import React, { useContext } from "react";
+import { ErrorContext } from "./ErrorContext.js";
 import { CircleXmarkIcon } from "./icons/CircleXmarkIcon.js";
 import { DownloadIcon } from "./icons/DownloadIcon.js";
 import { ErrorIcon } from "./icons/ErrorIcon.js";
@@ -18,6 +19,7 @@ const spinner = (React.createElement("span", { className: "cfgLoadingSizer" },
 const TaskView = (props) => {
     const { task } = props;
     const { status, format, url, previewUrl } = task;
+    const setError = useContext(ErrorContext);
     let icon;
     let statusMessage;
     switch (status) {
@@ -48,7 +50,20 @@ const TaskView = (props) => {
             url === undefined ? (statusMessage) : (React.createElement("a", { href: url, title: statusMessage }, statusMessage)),
             status === "failed" && (React.createElement(React.Fragment, null,
                 " ",
-                React.createElement("button", { className: "cfgTaskList__restart", onClick: () => task.restart() }, "Restart")))),
-        React.createElement("button", { className: "cfgTaskList__abort", onClick: () => task.abort() },
+                React.createElement("button", { className: "cfgTaskList__restart", onClick: () => {
+                        task.restart().catch((e) => {
+                            setError(e);
+                            throw e;
+                        });
+                    } }, "Restart")))),
+        React.createElement("button", { className: "cfgTaskList__abort", onClick: () => {
+                try {
+                    task.abort();
+                }
+                catch (e) {
+                    setError(e);
+                    throw e;
+                }
+            } },
             React.createElement(CircleXmarkIcon, null))));
 };

package/dist/components/TaskStartView.js

@@ -1,7 +1,9 @@
-import React from "react";
+import React, { useContext } from "react";
+import { ErrorContext } from "./ErrorContext.js";
 export const TaskStartView = (props) => {
     var _a, _b;
     const { taskHandler, product, renderTaskParams, getPreviewUrl } = props;
+    const setError = useContext(ErrorContext);
     const formats = (_a = props.formats) !== null && _a !== void 0 ? _a : taskHandler.availableFormats;
     if (formats.length === 0) {
         return null;
@@ -13,9 +15,14 @@ export const TaskStartView = (props) => {
                     if (index === 0) {
                         return;
                     }
-                    taskHandler.start(formats[index - 1], product, typeof renderTaskParams === "function"
+                    taskHandler
+                        .start(formats[index - 1], product, typeof renderTaskParams === "function"
                         ? renderTaskParams()
-                        : renderTaskParams, getPreviewUrl);
+                        : renderTaskParams, getPreviewUrl)
+                        .catch((e) => {
+                        setError(e);
+                        throw e;
+                    });
                 } },
                 React.createElement("option", { value: "" }, "Export"),
                 formats.map((format) => (React.createElement("option", { value: format, key: format }, format)))))));

package/dist/components/productConfiguration/CfgAdditionalProductView.js

@@ -1,22 +1,27 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
+import { ErrorContext } from "../ErrorContext.js";
 import { ExpandableHeadingRow, ExpandableHeadingRowSymbol } from "../ExpandableHeadingRow.js";
-import { forwardProps } from "./CfgFeatureView.js";
+import { forwardProps, } from "./CfgFeatureView.js";
 import { CfgProductConfigurationView } from "./CfgProductConfigurationView.js";
 export const CfgAdditionalProductView = React.memo((props) => {
-    const { product, permanentlyExpandedLevels, additionalProductComponent } = props;
+    const { product, permanentlyExpandedLevels, startOpen } = props;
     const { partNumber, optional, selected, configuration, additionalProducts, preview, description, visible: configurationVisible, } = product;
-    const [open, setOpen] = useState(false);
+    const setError = useContext(ErrorContext);
+    const [open, setOpen] = useState(startOpen === true);
     if (!configurationVisible) {
         // Visibility of a Product should not affect its Additional Products.
         // (Those have their own visibility.)
-        return (React.createElement(AdditionalProductsView, { additionalProducts: additionalProducts, permanentlyExpandedLevels: permanentlyExpandedLevels, additionalProductComponent: additionalProductComponent }));
+        return (React.createElement(AdditionalProductsView, Object.assign({}, forwardProps(props), { additionalProducts: additionalProducts, permanentlyExpandedLevels: permanentlyExpandedLevels })));
     }
     const openOrSelected = optional ? selected : open;
     const hasChildren = configuration.features.length !== 0 || additionalProducts.length !== 0;
     return (React.createElement("li", { className: "cfgFeatureItem cfgAdditionalProduct" },
         React.createElement(ExpandableHeadingRow, { heading: description || partNumber, expandable: optional || (hasChildren && permanentlyExpandedLevels <= 0), open: openOrSelected, onClick: () => {
                 if (optional) {
-                    product.setSelected(!selected);
+                    product.setSelected(!selected).catch((e) => {
+                        setError(e);
+                        throw e;
+                    });
                 }
                 else {
                     setOpen((prev) => !prev);
@@ -28,11 +33,10 @@ export const CfgAdditionalProductView = React.memo((props) => {
             (openOrSelected || 0 < permanentlyExpandedLevels) && (React.createElement("div", { className: "cfgFeatureItem__subTree" },
             React.createElement(CfgProductConfigurationView, Object.assign({}, forwardProps(props), { productOrConfiguration: configuration })),
             additionalProducts.length !== 0 && (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--topLevel` },
-                React.createElement(AdditionalProductsView, { additionalProducts: additionalProducts, permanentlyExpandedLevels: permanentlyExpandedLevels, additionalProductComponent: additionalProductComponent }))))),
+                React.createElement(AdditionalProductsView, Object.assign({}, forwardProps(props), { additionalProducts: additionalProducts, permanentlyExpandedLevels: permanentlyExpandedLevels })))))),
         React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" })));
 });
 const AdditionalProductsView = (props) => {
-    const { additionalProducts, permanentlyExpandedLevels, additionalProductComponent } = props;
-    const AdditionalProductComponent = additionalProductComponent !== null && additionalProductComponent !== void 0 ? additionalProductComponent : CfgAdditionalProductView;
+    const { additionalProducts, permanentlyExpandedLevels, additionalProductComponent: AdditionalProductComponent, } = props;
     return (React.createElement(React.Fragment, null, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({ key: additionalProduct.key }, forwardProps(props), { product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedLevels - 1 }))))));
 };

package/dist/components/productConfiguration/CfgCheckboxView.d.ts

@@ -2,16 +2,7 @@ import React from "react";
 import { CssProps } from "../../utilities.js";
 import { CfgOptionViewProps } from "./CfgFeatureView.js";
 export declare const CfgCheckboxView: React.FC<CfgOptionViewProps & CssProps>;
-export declare const CfgCheckboxViewMemo: React.NamedExoticComponent<import("./CfgProductConfigurationView.js").PassthroughProps & {
-    additionalProductComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgAdditionalProductViewProps> | undefined;
-    featureFlattenComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgFeatureViewProps> | undefined;
-    optionFlattenComponent?: React.ComponentType<CfgOptionViewProps> | undefined;
-    featureGroupComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgFeatureViewProps> | undefined;
-    featureSelectManyComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgFeatureViewProps> | undefined;
-    optionSelectManyComponent?: React.ComponentType<CfgOptionViewProps> | undefined;
-    featureSelectOneComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgFeatureViewProps> | undefined;
-    optionSelectOneComponent?: React.ComponentType<CfgOptionViewProps> | undefined;
-} & {
+export declare const CfgCheckboxViewMemo: React.NamedExoticComponent<import("./CfgProductConfigurationView.js").PassthroughProps & import("./CfgFeatureView.js").CfgProductConfigurationComponent & {
     option: import("@configura/web-api").CfgOption;
 } & CssProps>;
 //# sourceMappingURL=CfgCheckboxView.d.ts.map

package/dist/components/productConfiguration/CfgCheckboxView.js

@@ -1,17 +1,24 @@
-import React from "react";
+import React, { useContext } from "react";
 import { useUuid } from "../../useUniqueId.js";
+import { ErrorContext } from "../ErrorContext.js";
 import { Checkmark } from "../icons/Checkmark.js";
 import { forwardProps } from "./CfgFeatureView.js";
 import { CfgOptionFeaturesView } from "./CfgOptionFeaturesView.js";
 import { CfgOptionPriceView } from "./CfgOptionPriceView.js";
 export const CfgCheckboxView = (props) => {
     const { option, upchargeDisplayMode } = props;
-    const { thumbnail, description, selected, code } = option;
+    const setError = useContext(ErrorContext);
+    const { thumbnail, description, selected, code, selectedChangeInProgress } = option;
     const uniqueId = useUuid();
     return (React.createElement("li", { className: props.className, style: props.style },
         React.createElement("label", { className: "cfgFeatureItemOptional", htmlFor: uniqueId },
-            React.createElement("input", { checked: selected, className: "cfgFeatureItem__hiddenInput", id: uniqueId, name: uniqueId, onChange: () => option.setSelected(!selected), type: "checkbox" }),
-            React.createElement("div", { className: "cfgFeatureItem__checkbox" }, selected && React.createElement(Checkmark, null)),
+            React.createElement("input", { checked: selected, className: "cfgFeatureItem__hiddenInput", id: uniqueId, name: uniqueId, onChange: () => {
+                    option.setSelected(!selected).catch((e) => {
+                        setError(e);
+                        throw e;
+                    });
+                }, type: "checkbox" }),
+            React.createElement("div", { className: "cfgFeatureItem__checkbox" }, selected === !selectedChangeInProgress && React.createElement(Checkmark, null)),
             thumbnail && (React.createElement("img", { alt: `Thumbnail for ${description}`, className: "cfgThumbnailImage cfgMl1", src: thumbnail })),
             React.createElement("div", { className: "cfgFeatureItemOptional__titleWrapper" },
                 React.createElement("div", { className: "cfgFeatureItemOptional__title" },

package/dist/components/productConfiguration/CfgCheckboxesView.d.ts

@@ -2,16 +2,7 @@ import React from "react";
 import { CssProps } from "../../utilities.js";
 import { CfgFeatureViewProps } from "./CfgFeatureView.js";
 export declare const CfgCheckboxesView: React.FC<CfgFeatureViewProps & CssProps>;
-export declare const CfgCheckboxesViewMemo: React.NamedExoticComponent<import("./CfgProductConfigurationView.js").PassthroughProps & {
-    additionalProductComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgAdditionalProductViewProps> | undefined;
-    featureFlattenComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    optionFlattenComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgOptionViewProps> | undefined;
-    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    optionSelectManyComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgOptionViewProps> | undefined;
-    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    optionSelectOneComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgOptionViewProps> | undefined;
-} & {
+export declare const CfgCheckboxesViewMemo: React.NamedExoticComponent<import("./CfgProductConfigurationView.js").PassthroughProps & import("./CfgFeatureView.js").CfgProductConfigurationComponent & {
     feature: import("@configura/web-api").CfgFeature;
 } & CssProps>;
 //# sourceMappingURL=CfgCheckboxesView.d.ts.map

package/dist/components/productConfiguration/CfgCheckboxesView.js

@@ -1,10 +1,9 @@
 import { SelectionType } from "@configura/web-api";
 import React from "react";
-import { CfgCheckboxViewMemo } from "./CfgCheckboxView.js";
 import { forwardProps } from "./CfgFeatureView.js";
 export const CfgCheckboxesView = (props) => {
-    var _a, _b;
-    const { feature } = props;
+    var _a;
+    const { feature, optionSelectManyComponent: OptionComponent } = props;
     if (feature.selectionType !== SelectionType.SelectMany) {
         throw Error(`Unsupported selection type expected: ${SelectionType.SelectMany}, got: ${feature.selectionType}`);
     }
@@ -12,8 +11,7 @@ export const CfgCheckboxesView = (props) => {
     if (options.length === 0) {
         return null;
     }
-    const OptionComponent = (_a = props.optionSelectManyComponent) !== null && _a !== void 0 ? _a : CfgCheckboxViewMemo;
-    return (React.createElement("li", { className: `cfgFeatureItem cfgFeatureItem--optional ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, style: props.style },
+    return (React.createElement("li", { className: `cfgFeatureItem cfgFeatureItem--optional ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
         React.createElement("h3", { className: "cfgFeatureItemOptional__header" }, description),
         React.createElement("ul", { className: "cfgOptionTree" }, options.map((option) => (React.createElement(OptionComponent, Object.assign({ option: option, key: option.key }, forwardProps(props))))))));
 };

package/dist/components/productConfiguration/CfgDropdownOptionView.d.ts

@@ -2,16 +2,7 @@ import React from "react";
 import { CssProps } from "../../utilities.js";
 import { CfgOptionViewProps } from "./CfgFeatureView.js";
 export declare const CfgDropdownOptionView: React.FC<CfgOptionViewProps & CssProps>;
-export declare const CfgDropdownOptionViewMemo: React.NamedExoticComponent<import("./CfgProductConfigurationView.js").PassthroughProps & {
-    additionalProductComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgAdditionalProductViewProps> | undefined;
-    featureFlattenComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgFeatureViewProps> | undefined;
-    optionFlattenComponent?: React.ComponentType<CfgOptionViewProps> | undefined;
-    featureGroupComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgFeatureViewProps> | undefined;
-    featureSelectManyComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgFeatureViewProps> | undefined;
-    optionSelectManyComponent?: React.ComponentType<CfgOptionViewProps> | undefined;
-    featureSelectOneComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgFeatureViewProps> | undefined;
-    optionSelectOneComponent?: React.ComponentType<CfgOptionViewProps> | undefined;
-} & {
+export declare const CfgDropdownOptionViewMemo: React.NamedExoticComponent<import("./CfgProductConfigurationView.js").PassthroughProps & import("./CfgFeatureView.js").CfgProductConfigurationComponent & {
     option: import("@configura/web-api").CfgOption;
 } & CssProps>;
 //# sourceMappingURL=CfgDropdownOptionView.d.ts.map

package/dist/components/productConfiguration/CfgDropdownOptionView.js

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useContext } from "react";
 import { useUuid } from "../../useUniqueId.js";
+import { ErrorContext } from "../ErrorContext.js";
 import { Checkmark } from "../icons/Checkmark.js";
 import { forwardProps } from "./CfgFeatureView.js";
 import { CfgOptionFeaturesView } from "./CfgOptionFeaturesView.js";
@@ -8,23 +9,30 @@ import { CfgOptionPriceView } from "./CfgOptionPriceView.js";
 export const CfgDropdownOptionView = (props) => {
     var _a;
     const { option, upchargeDisplayMode } = props;
-    const { code, thumbnail, description, selected } = option;
+    const { code, thumbnail, description, selected, selectedChangeInProgress } = option;
+    const setError = useContext(ErrorContext);
     const optionClasses = selected ? "cfgFeatureItemOption--checked" : "";
     const uniqueId = useUuid();
     return (React.createElement("li", { className: `cfgFeatureItem cfgMb1 ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
         React.createElement("label", { className: `cfgFeatureItemOption ${optionClasses}`, htmlFor: uniqueId },
             React.createElement("input", { checked: selected, className: "cfgFeatureItem__hiddenInput", id: uniqueId, name: uniqueId, onChange: () => {
-                    option.setSelected(true);
+                    option.setSelected(true).catch((e) => {
+                        setError(e);
+                        throw e;
+                    });
                 }, onClick: () => {
                     // As a convenience for when wanting to re-select something already
                     // selected to use the propagation side effects we have added this
                     // which will trigger a setSelected even though this is strictly not
                     // a change.
                     if (selected) {
-                        option.setSelected(true);
+                        option.setSelected(true).catch((e) => {
+                            setError(e);
+                            throw e;
+                        });
                     }
                 }, type: "radio", value: code }),
-            React.createElement("div", { className: "cfgFeatureItem__radio" }, selected && React.createElement(Checkmark, null)),
+            React.createElement("div", { className: "cfgFeatureItem__radio" }, selected === !selectedChangeInProgress && React.createElement(Checkmark, null)),
             thumbnail && (React.createElement("img", { alt: `Thumbnail for ${description}`, className: "cfgThumbnailImage cfgMl1", src: thumbnail })),
             React.createElement("div", { className: "cfgFeatureItemOption__titleWrapper" },
                 React.createElement("div", { className: "cfgFeatureItemOption__title" },

package/dist/components/productConfiguration/CfgDropdownView.d.ts

@@ -2,16 +2,7 @@ import React from "react";
 import { CssProps } from "../../utilities.js";
 import { CfgFeatureViewProps } from "./CfgFeatureView.js";
 export declare const CfgDropdownView: React.FC<CfgFeatureViewProps & CssProps>;
-export declare const CfgDropdownViewMemo: React.NamedExoticComponent<import("./CfgProductConfigurationView.js").PassthroughProps & {
-    additionalProductComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgAdditionalProductViewProps> | undefined;
-    featureFlattenComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    optionFlattenComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgOptionViewProps> | undefined;
-    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    optionSelectManyComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgOptionViewProps> | undefined;
-    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    optionSelectOneComponent?: React.ComponentType<import("./CfgFeatureView.js").CfgOptionViewProps> | undefined;
-} & {
+export declare const CfgDropdownViewMemo: React.NamedExoticComponent<import("./CfgProductConfigurationView.js").PassthroughProps & import("./CfgFeatureView.js").CfgProductConfigurationComponent & {
     feature: import("@configura/web-api").CfgFeature;
 } & CssProps>;
 //# sourceMappingURL=CfgDropdownView.d.ts.map

package/dist/components/productConfiguration/CfgDropdownView.js

@@ -1,18 +1,16 @@
 import { SelectionType } from "@configura/web-api";
 import React, { useState } from "react";
 import { ExpandableHeadingRow } from "../ExpandableHeadingRow.js";
-import { CfgDropdownOptionViewMemo } from "./CfgDropdownOptionView.js";
 import { forwardProps } from "./CfgFeatureView.js";
 export const CfgDropdownView = (props) => {
-    var _a, _b;
-    const { feature } = props;
+    var _a;
+    const { feature, optionSelectOneComponent: OptionComponent, startOpen } = props;
     if (feature.selectionType !== SelectionType.SelectOne) {
         throw Error(`Unsupported selection type expected: ${SelectionType.SelectOne}, got: ${feature.selectionType}`);
     }
-    const OptionComponent = (_a = props.optionSelectOneComponent) !== null && _a !== void 0 ? _a : CfgDropdownOptionViewMemo;
     const { description, preview, options } = feature;
-    const [open, setOpen] = useState(false);
-    return (React.createElement("li", { className: `cfgFeatureItem ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, style: props.style },
+    const [open, setOpen] = useState(startOpen === true);
+    return (React.createElement("li", { className: `cfgFeatureItem ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
         React.createElement(ExpandableHeadingRow, { heading: description, open: open, onClick: () => setOpen((prev) => !prev) }, preview && (React.createElement("div", { className: "cfgThumbnailPlaceholder" },
             React.createElement("img", { alt: `Preview for ${description}`, className: "cfgThumbnailImage", src: preview })))),
         React.createElement("div", { className: "cfgFeatureItem__subTree" },

package/dist/components/productConfiguration/CfgFeatureView.d.ts

@@ -12,28 +12,21 @@ export declare type CfgAdditionalProductViewProps = CfgProductConfigurationCompo
     product: CfgProduct;
     permanentlyExpandedLevels: number;
 };
-export declare type CfgProductConfigurationComponentAndPassthroughProps = PassthroughProps & {
-    additionalProductComponent?: React.ComponentType<CfgAdditionalProductViewProps>;
-    featureFlattenComponent?: React.ComponentType<CfgFeatureViewProps>;
-    optionFlattenComponent?: React.ComponentType<CfgOptionViewProps>;
-    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps>;
-    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps>;
-    optionSelectManyComponent?: React.ComponentType<CfgOptionViewProps>;
-    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps>;
-    optionSelectOneComponent?: React.ComponentType<CfgOptionViewProps>;
+export declare type CfgProductConfigurationComponent = {
+    additionalProductComponent: React.ComponentType<CfgAdditionalProductViewProps>;
+    featureFlattenComponent: React.ComponentType<CfgFeatureViewProps>;
+    featureGroupComponent: React.ComponentType<CfgFeatureViewProps>;
+    featureSelectManyComponent: React.ComponentType<CfgFeatureViewProps>;
+    optionSelectManyComponent: React.ComponentType<CfgOptionViewProps>;
+    featureSelectOneComponent: React.ComponentType<CfgFeatureViewProps>;
+    optionSelectOneComponent: React.ComponentType<CfgOptionViewProps>;
 };
+export declare const completeWithDefaultProductConfigurationComponents: <T>(incomplete: T & Partial<CfgProductConfigurationComponent>) => T & CfgProductConfigurationComponent;
+export declare const useCompleteWithDefaultProductConfigurationComponents: (incomplete: Partial<CfgProductConfigurationComponent>) => CfgProductConfigurationComponent;
+export declare type CfgProductConfigurationComponentAndPassthroughProps = PassthroughProps & CfgProductConfigurationComponent;
 export declare const forwardProps: (props: CfgProductConfigurationComponentAndPassthroughProps) => CfgProductConfigurationComponentAndPassthroughProps;
 export declare const CfgFeatureView: React.FC<CfgFeatureViewProps & CssProps>;
-export declare const CfgFeatureViewMemo: React.NamedExoticComponent<PassthroughProps & {
-    additionalProductComponent?: React.ComponentType<CfgAdditionalProductViewProps> | undefined;
-    featureFlattenComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    optionFlattenComponent?: React.ComponentType<CfgOptionViewProps> | undefined;
-    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    optionSelectManyComponent?: React.ComponentType<CfgOptionViewProps> | undefined;
-    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    optionSelectOneComponent?: React.ComponentType<CfgOptionViewProps> | undefined;
-} & {
+export declare const CfgFeatureViewMemo: React.NamedExoticComponent<PassthroughProps & CfgProductConfigurationComponent & {
     feature: CfgFeature;
 } & CssProps>;
 //# sourceMappingURL=CfgFeatureView.d.ts.map

package/dist/components/productConfiguration/CfgFeatureView.js

@@ -1,31 +1,51 @@
 import { SelectionType } from "@configura/web-api";
-import React from "react";
+import React, { useMemo } from "react";
+import { CfgAdditionalProductView } from "./CfgAdditionalProductView.js";
 import { CfgCheckboxesViewMemo } from "./CfgCheckboxesView.js";
+import { CfgCheckboxViewMemo } from "./CfgCheckboxView.js";
+import { CfgDropdownOptionViewMemo } from "./CfgDropdownOptionView.js";
 import { CfgDropdownViewMemo } from "./CfgDropdownView.js";
 import { CfgGroupViewMemo } from "./CfgGroupView.js";
-export const forwardProps = (props) => {
-    return {
-        upchargeDisplayMode: props.upchargeDisplayMode,
-        additionalProductComponent: props.additionalProductComponent,
-        featureFlattenComponent: props.featureFlattenComponent,
-        optionFlattenComponent: props.optionFlattenComponent,
-        featureGroupComponent: props.featureGroupComponent,
-        featureSelectManyComponent: props.featureSelectManyComponent,
-        optionSelectManyComponent: props.optionSelectManyComponent,
-        featureSelectOneComponent: props.featureSelectOneComponent,
-        optionSelectOneComponent: props.optionSelectOneComponent,
-    };
+export const completeWithDefaultProductConfigurationComponents = (incomplete) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return (Object.assign(Object.assign({}, incomplete), { additionalProductComponent: (_a = incomplete.additionalProductComponent) !== null && _a !== void 0 ? _a : CfgAdditionalProductView, featureFlattenComponent: (_b = incomplete.featureFlattenComponent) !== null && _b !== void 0 ? _b : CfgGroupViewMemo, featureGroupComponent: (_c = incomplete.featureGroupComponent) !== null && _c !== void 0 ? _c : CfgGroupViewMemo, featureSelectManyComponent: (_d = incomplete.featureSelectManyComponent) !== null && _d !== void 0 ? _d : CfgCheckboxesViewMemo, optionSelectManyComponent: (_e = incomplete.optionSelectManyComponent) !== null && _e !== void 0 ? _e : CfgCheckboxViewMemo, featureSelectOneComponent: (_f = incomplete.featureSelectOneComponent) !== null && _f !== void 0 ? _f : CfgDropdownViewMemo, optionSelectOneComponent: (_g = incomplete.optionSelectOneComponent) !== null && _g !== void 0 ? _g : CfgDropdownOptionViewMemo }));
 };
+export const useCompleteWithDefaultProductConfigurationComponents = (incomplete) => {
+    const { additionalProductComponent, featureFlattenComponent, featureGroupComponent, featureSelectManyComponent, featureSelectOneComponent, optionSelectManyComponent, optionSelectOneComponent, } = incomplete;
+    return useMemo(() => completeWithDefaultProductConfigurationComponents({
+        additionalProductComponent,
+        featureFlattenComponent,
+        featureGroupComponent,
+        featureSelectManyComponent,
+        featureSelectOneComponent,
+        optionSelectManyComponent,
+        optionSelectOneComponent,
+    }), [
+        additionalProductComponent,
+        featureFlattenComponent,
+        featureGroupComponent,
+        featureSelectManyComponent,
+        featureSelectOneComponent,
+        optionSelectManyComponent,
+        optionSelectOneComponent,
+    ]);
+};
+export const forwardProps = (props) => ({
+    upchargeDisplayMode: props.upchargeDisplayMode,
+    startOpen: props.startOpen,
+    additionalProductComponent: props.additionalProductComponent,
+    featureFlattenComponent: props.featureFlattenComponent,
+    featureGroupComponent: props.featureGroupComponent,
+    featureSelectManyComponent: props.featureSelectManyComponent,
+    optionSelectManyComponent: props.optionSelectManyComponent,
+    featureSelectOneComponent: props.featureSelectOneComponent,
+    optionSelectOneComponent: props.optionSelectOneComponent,
+});
 export const CfgFeatureView = (props) => {
-    var _a, _b, _c;
-    const { feature } = props;
-    const FlattenComponent = props.featureFlattenComponent || CfgGroupViewMemo;
+    const { feature, featureFlattenComponent: FlattenComponent, featureGroupComponent: GroupComponent, featureSelectManyComponent: SelectManyComponent, featureSelectOneComponent: SelectOneComponent, } = props;
     if (!feature.visible) {
         return React.createElement(FlattenComponent, Object.assign({}, props));
     }
-    const GroupComponent = (_a = props.featureGroupComponent) !== null && _a !== void 0 ? _a : CfgGroupViewMemo;
-    const SelectManyComponent = (_b = props.featureSelectManyComponent) !== null && _b !== void 0 ? _b : CfgCheckboxesViewMemo;
-    const SelectOneComponent = (_c = props.featureSelectOneComponent) !== null && _c !== void 0 ? _c : CfgDropdownViewMemo;
     switch (feature.selectionType) {
         case SelectionType.Group:
             return React.createElement(GroupComponent, Object.assign({}, props));

package/dist/components/productConfiguration/CfgOptionNumericView.js

@@ -8,14 +8,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useRerender } from "../../useRerender.js";
 import { useUuid } from "../../useUniqueId.js";
+import { ErrorContext } from "../ErrorContext.js";
 import { Checkmark } from "../icons/Checkmark.js";
 import { ErrorIcon } from "../icons/ErrorIcon.js";
 export const CfgOptionNumericView = (props) => {
     const { option } = props;
     const { isUseNumericValue } = option;
+    const setError = useContext(ErrorContext);
     // Contrary to most other components this one has its own connection to the
     // option that is backing it. This is for it to be able to "live" update
     // as we drag sliders. The value is not "commited" at immediate drag, and so
@@ -42,7 +44,12 @@ export const CfgOptionNumericView = (props) => {
     if (isSingleRange && ranges[0] instanceof NumericValueDiscrete) {
         return null;
     }
-    return (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent ${props.className || ""}`, style: props.style }, ranges.map((range) => (React.createElement(NumericValueView, { currentValue: numericValue, unit: unit, range: range, key: range.first, hasNoSiblings: isSingleRange, updateValue: (value, commit) => __awaiter(void 0, void 0, void 0, function* () { return yield option.setNumericValue(value, commit); }) })))));
+    return (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent ${props.className || ""}`, style: props.style }, ranges.map((range) => (React.createElement(NumericValueView, { currentValue: numericValue, unit: unit, range: range, key: range.first, hasNoSiblings: isSingleRange, updateValue: (value, commit) => __awaiter(void 0, void 0, void 0, function* () {
+            return yield option.setNumericValue(value, commit).catch((e) => {
+                setError(e);
+                throw e;
+            });
+        }) })))));
 };
 /**
  * Displays GUI for selecting in one "range". Please note that the range

package/dist/components/productConfiguration/CfgProductConfigurationView.d.ts

@@ -1,19 +1,23 @@
 import { CfgProduct, CfgProductConfiguration } from "@configura/web-api";
 import React from "react";
 import { CssProps } from "../../utilities.js";
-import { CfgProductConfigurationComponentAndPassthroughProps } from "./CfgFeatureView.js";
+import { CfgProductConfigurationComponent } from "./CfgFeatureView.js";
 export declare enum UpchargeDisplayMode {
     SelectionImpact = 0,
     None = 1,
     Price = 2
 }
+/**
+ * @param upchargeDisplayMode How upcharge on Options is displayed
+ * @param startOpen Setting this to true will make all selected options be expanded from start. This is bad for performance when viewing large products.
+ */
 export declare type PassthroughProps = {
     upchargeDisplayMode?: UpchargeDisplayMode;
+    startOpen?: boolean;
 };
-declare type Props = PassthroughProps & {
+export declare type CfgProductConfigurationViewProps = PassthroughProps & Partial<CfgProductConfigurationComponent> & CssProps & {
     productOrConfiguration: CfgProductConfiguration | CfgProduct;
     permanentlyExpandedAdditionalProductLevels?: number;
 };
-export declare const CfgProductConfigurationView: React.FC<Props & CfgProductConfigurationComponentAndPassthroughProps & CssProps>;
-export {};
+export declare const CfgProductConfigurationView: React.FC<CfgProductConfigurationViewProps>;
 //# sourceMappingURL=CfgProductConfigurationView.d.ts.map

package/dist/components/productConfiguration/CfgProductConfigurationView.js

@@ -1,8 +1,7 @@
 import { CfgProduct, CfgProductConfiguration } from "@configura/web-api";
 import React, { useEffect } from "react";
 import { useRerender } from "../../useRerender.js";
-import { CfgAdditionalProductView } from "./CfgAdditionalProductView.js";
-import { CfgFeatureViewMemo, forwardProps, } from "./CfgFeatureView.js";
+import { CfgFeatureViewMemo, forwardProps, useCompleteWithDefaultProductConfigurationComponents, } from "./CfgFeatureView.js";
 export var UpchargeDisplayMode;
 (function (UpchargeDisplayMode) {
     UpchargeDisplayMode[UpchargeDisplayMode["SelectionImpact"] = 0] = "SelectionImpact";
@@ -10,11 +9,13 @@ export var UpchargeDisplayMode;
     UpchargeDisplayMode[UpchargeDisplayMode["Price"] = 2] = "Price";
 })(UpchargeDisplayMode || (UpchargeDisplayMode = {}));
 export const CfgProductConfigurationView = React.memo((props) => {
-    const { productOrConfiguration, permanentlyExpandedAdditionalProductLevels, additionalProductComponent, } = props;
+    const completedProps = Object.assign(Object.assign({}, props), useCompleteWithDefaultProductConfigurationComponents(props));
+    const { productOrConfiguration, permanentlyExpandedAdditionalProductLevels, additionalProductComponent: AdditionalProductComponent, } = completedProps;
     const configuration = productOrConfiguration instanceof CfgProduct
         ? productOrConfiguration.configuration
         : productOrConfiguration;
-    const configurationVisible = productOrConfiguration instanceof CfgProductConfiguration || productOrConfiguration.visible;
+    const configurationVisible = productOrConfiguration instanceof CfgProductConfiguration ||
+        productOrConfiguration.visible;
     const features = configuration.features.reduce((agg, feature) => {
         // It is possible in Cat Creator to double add a Feature. This fills no known
         // purpose and React can not handle this, so we filter out the duplicates.
@@ -27,7 +28,7 @@ export const CfgProductConfigurationView = React.memo((props) => {
     const additionalProducts = productOrConfiguration instanceof CfgProduct
         ? productOrConfiguration.additionalProducts
         : undefined;
-    const AdditionalProductComponent = additionalProductComponent || CfgAdditionalProductView;
+    // const AdditionalProductComponent = additionalProductComponent || CfgAdditionalProductView;
     // Re-rendering is driven from the very top of the tree. However, when selecting an option
     // the change is not bubbled all the way to the top (and then down again) until after
     // validation has been done. This keeps the 3D-view from re-rendering until after validation
@@ -41,6 +42,6 @@ export const CfgProductConfigurationView = React.memo((props) => {
         };
     }, [configuration, rerender]);
     return (React.createElement(React.Fragment, null,
-        configurationVisible && (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--topLevel ${props.className || ""}`, style: props.style }, features.map((f) => (React.createElement(CfgFeatureViewMemo, Object.assign({ feature: f, key: f.key }, forwardProps(props))))))),
-        additionalProducts !== undefined && (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--topLevel` }, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({ key: additionalProduct.key }, forwardProps(props), { additionalProductComponent: AdditionalProductComponent, product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedAdditionalProductLevels !== null && permanentlyExpandedAdditionalProductLevels !== void 0 ? permanentlyExpandedAdditionalProductLevels : 0 }))))))));
+        configurationVisible && (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--topLevel ${props.className || ""}`, style: props.style }, features.map((f) => (React.createElement(CfgFeatureViewMemo, Object.assign({ feature: f, key: f.key }, forwardProps(completedProps))))))),
+        additionalProducts !== undefined && (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--topLevel` }, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({ key: additionalProduct.key }, forwardProps(completedProps), { product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedAdditionalProductLevels !== null && permanentlyExpandedAdditionalProductLevels !== void 0 ? permanentlyExpandedAdditionalProductLevels : 0 }))))))));
 });

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

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