@configura/web-ui 2.0.0-alpha.9 → 2.1.0-alpha.0

package/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+	"parser": "@typescript-eslint/parser",
+	"plugins": ["@typescript-eslint"],
+	"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"]
+}

package/dist/components/ExpandableHeadingRow.js

@@ -9,13 +9,15 @@ export var ExpandableHeadingRowSymbol;
 export const ExpandableHeadingRow = (props) => {
     const { heading, open: active, onClick, children } = props;
     const symbol = props.symbol === undefined ? ExpandableHeadingRowSymbol.Chevron : props.symbol;
+    const inner = (React.createElement(React.Fragment, null,
+        children,
+        React.createElement("div", { className: "cfgExpandableHeadingRow__title" },
+            React.createElement("div", { className: "cfgTextOverflow" }, heading))));
     if (props.expandable === false) {
-        return (React.createElement("div", { className: "cfgExpandableHeadingRow" },
-            children,
-            React.createElement("div", { className: "cfgExpandableHeadingRow__title cfgTextOverflow" }, heading)));
+        return React.createElement("div", { className: "cfgExpandableHeadingRow" }, inner);
     }
-    return (React.createElement("button", { className: `cfgExpandableHeadingRow cfgExpandableHeadingRow--expandable ${props.className || ""}`, style: props.style, onClick: onClick },
-        children,
-        React.createElement("div", { className: "cfgExpandableHeadingRow__title cfgTextOverflow" }, heading),
-        React.createElement("div", { className: "cfgExpandableHeadingRow__icon" }, symbol === ExpandableHeadingRowSymbol.Chevron ? (React.createElement(Chevron, { active: active })) : (React.createElement(CheckmarkWithBorder, { active: active })))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { className: `cfgExpandableHeadingRow cfgExpandableHeadingRow--expandable ${props.className || ""}`, style: props.style, onClick: onClick },
+            inner,
+            React.createElement("div", { className: "cfgExpandableHeadingRow__icon" }, symbol === ExpandableHeadingRowSymbol.Chevron ? (React.createElement(Chevron, { active: active })) : (React.createElement(CheckmarkWithBorder, { active: active }))))));
 };

package/dist/components/ResetButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { CssProps } from "../utilities";
+declare type Props = {
+    callback: () => void;
+    tooltip: string;
+};
+export declare const ResetButton: React.FC<Props & CssProps>;
+export {};
+//# sourceMappingURL=ResetButton.d.ts.map

package/dist/components/ResetButton.js

@@ -0,0 +1,7 @@
+import React from "react";
+export const ResetButton = (props) => {
+    var _a;
+    const { callback, tooltip } = props;
+    return (React.createElement("div", { className: `cfgReset ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
+        React.createElement("button", { title: tooltip, className: "cfgInput", onClick: callback }, "Reset")));
+};

package/dist/components/ShareView.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CssProps } from "../utilities";
+export declare const ShareView: React.FC<CssProps>;
+//# sourceMappingURL=ShareView.d.ts.map

package/dist/components/ShareView.js

@@ -0,0 +1,21 @@
+import { CfgHistoryManager } from "@configura/web-api";
+import React, { useState } from "react";
+const shareLabel = "Share";
+export const ShareView = (props) => {
+    var _a;
+    const [value, setValue] = useState(shareLabel);
+    // No need for a useMemo, this will always be the same instance
+    const historyManager = CfgHistoryManager.instance;
+    return (React.createElement("div", { className: `cfgShare ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
+        React.createElement("input", { title: "Click to copy a share-link to the clipboard", className: "cfgInput", readOnly: true, value: value, onBlur: () => setValue(shareLabel), onFocus: (event) => {
+                const url = historyManager.getUrl();
+                setValue(url);
+                event.target.value = url;
+                event.target.select();
+                navigator.clipboard.writeText(url).catch((err) => {
+                    // In Firefox we get "Error DOMException: Clipboard write was blocked due to lack of user activation." when we
+                    // tab between windows, because the focus event triggers but is not user initiated. We just swallow any error.
+                    console.error("Error", err);
+                });
+            } })));
+};

package/dist/components/productConfiguration/CfgAdditionalProductView.js

@@ -4,6 +4,7 @@ import { ExpandableHeadingRow, ExpandableHeadingRowSymbol } from "../ExpandableH
 import { forwardProps, } from "./CfgFeatureView.js";
 import { CfgProductConfigurationView } from "./CfgProductConfigurationView.js";
 export const CfgAdditionalProductView = React.memo((props) => {
+    var _a;
     const { product, permanentlyExpandedLevels, startOpen } = props;
     const { partNumber, optional, selected, configuration, additionalProducts, preview, description, visible: configurationVisible, } = product;
     const setError = useContext(ErrorContext);
@@ -14,8 +15,11 @@ export const CfgAdditionalProductView = React.memo((props) => {
         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" },
+    const hasChildren = configuration.features.length !== 0 ||
+        additionalProducts.length !== 0 ||
+        product.notes.length !== 0 ||
+        product.miscFiles.length !== 0;
+    return (React.createElement("li", { className: `cfgFeatureItem cfgAdditionalProduct ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
         React.createElement(ExpandableHeadingRow, { heading: description || partNumber, expandable: optional || (hasChildren && permanentlyExpandedLevels <= 0), open: openOrSelected, onClick: () => {
                 if (optional) {
                     product.setSelected(!selected).catch((e) => {
@@ -38,5 +42,5 @@ export const CfgAdditionalProductView = React.memo((props) => {
 });
 const AdditionalProductsView = (props) => {
     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 }))))));
+    return (React.createElement(React.Fragment, null, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({}, forwardProps(props), { key: additionalProduct.key, product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedLevels - 1 }))))));
 };

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

@@ -1,8 +1,5 @@
 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 & import("./CfgFeatureView.js").CfgProductConfigurationComponent & {
-    option: import("@configura/web-api").CfgOption;
-} & CssProps>;
+export declare const CfgCheckboxView: React.FC<CfgOptionViewProps>;
+export declare const CfgCheckboxViewMemo: React.NamedExoticComponent<CfgOptionViewProps>;
 //# sourceMappingURL=CfgCheckboxView.d.ts.map

package/dist/components/productConfiguration/CfgCheckboxView.js

@@ -1,29 +1,7 @@
-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";
+import React from "react";
+import { CfgOptionCommonView } from "./CfgOptionCommonView.js";
 export const CfgCheckboxView = (props) => {
-    const { option, upchargeDisplayMode } = props;
-    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).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" },
-                    description || code,
-                    React.createElement(CfgOptionPriceView, { option: option, upchargeDisplayMode: upchargeDisplayMode })))),
-        React.createElement(CfgOptionFeaturesView, Object.assign({ option: option }, forwardProps(props)))));
+    var _a;
+    return (React.createElement(CfgOptionCommonView, Object.assign({}, props, { className: `cfgFeatureItem ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })));
 };
 export const CfgCheckboxViewMemo = React.memo(CfgCheckboxView);

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

@@ -1,8 +1,5 @@
 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 & import("./CfgFeatureView.js").CfgProductConfigurationComponent & {
-    feature: import("@configura/web-api").CfgFeature;
-} & CssProps>;
+export declare const CfgCheckboxesView: React.FC<CfgFeatureViewProps>;
+export declare const CfgCheckboxesViewMemo: React.NamedExoticComponent<CfgFeatureViewProps>;
 //# sourceMappingURL=CfgCheckboxesView.d.ts.map

package/dist/components/productConfiguration/CfgCheckboxesView.js

@@ -1,5 +1,6 @@
 import { SelectionType } from "@configura/web-api";
 import React from "react";
+import { CfgConfigurationCommonView } from "./CfgConfigurationCommonView.js";
 import { forwardProps } from "./CfgFeatureView.js";
 export const CfgCheckboxesView = (props) => {
     var _a;
@@ -7,12 +8,13 @@ export const CfgCheckboxesView = (props) => {
     if (feature.selectionType !== SelectionType.SelectMany) {
         throw Error(`Unsupported selection type expected: ${SelectionType.SelectMany}, got: ${feature.selectionType}`);
     }
-    const { options, description } = feature;
+    const { options, description, code, notes } = feature;
     if (options.length === 0) {
         return null;
     }
     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("h3", { className: "cfgFeatureItemOptional__header" }, description || code),
+        React.createElement(CfgConfigurationCommonView, Object.assign({}, forwardProps(props), { notes: notes })),
         React.createElement("ul", { className: "cfgOptionTree" }, options.map((option) => (React.createElement(OptionComponent, Object.assign({ option: option, key: option.key }, forwardProps(props))))))));
 };
 export const CfgCheckboxesViewMemo = React.memo(CfgCheckboxesView);

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

@@ -0,0 +1,8 @@
+import { DtoMiscFile, DtoNote } from "@configura/web-api";
+import React from "react";
+import { CfgProductConfigurationComponentAndPassthroughProps } from "./CfgFeatureView.js";
+export declare const CfgConfigurationCommonView: React.FC<CfgProductConfigurationComponentAndPassthroughProps & {
+    notes?: DtoNote[];
+    miscFiles?: DtoMiscFile[];
+}>;
+//# sourceMappingURL=CfgConfigurationCommonView.d.ts.map

package/dist/components/productConfiguration/CfgConfigurationCommonView.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { forwardProps, } from "./CfgFeatureView.js";
+export const CfgConfigurationCommonView = (props) => {
+    const { notesComponent: NotesComponent, miscFilesComponent: MiscFilesComponent, notes, miscFiles, } = props;
+    return (React.createElement(React.Fragment, null,
+        notes && notes.length !== 0 && (React.createElement(NotesComponent, Object.assign({}, forwardProps(props), { notes: notes }))),
+        miscFiles && miscFiles.length !== 0 && (React.createElement(MiscFilesComponent, Object.assign({}, forwardProps(props), { miscFiles: miscFiles })))));
+};

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

@@ -1,8 +1,5 @@
 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 & import("./CfgFeatureView.js").CfgProductConfigurationComponent & {
-    option: import("@configura/web-api").CfgOption;
-} & CssProps>;
+export declare const CfgDropdownOptionView: React.FC<CfgOptionViewProps>;
+export declare const CfgDropdownOptionViewMemo: React.NamedExoticComponent<CfgOptionViewProps>;
 //# sourceMappingURL=CfgDropdownOptionView.d.ts.map

package/dist/components/productConfiguration/CfgDropdownOptionView.js

@@ -1,44 +1,23 @@
 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 { CfgOptionNumericView } from "./CfgOptionNumericView.js";
-import { CfgOptionPriceView } from "./CfgOptionPriceView.js";
+import { CfgOptionCommonView } from "./CfgOptionCommonView.js";
 export const CfgDropdownOptionView = (props) => {
     var _a;
-    const { option, upchargeDisplayMode } = props;
-    const { code, thumbnail, description, selected, selectedChangeInProgress } = option;
+    const { option } = props;
+    const { selected } = 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).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).catch((e) => {
-                            setError(e);
-                            throw e;
-                        });
-                    }
-                }, type: "radio", value: code }),
-            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" },
-                    description || code,
-                    React.createElement(CfgOptionPriceView, { option: option, upchargeDisplayMode: upchargeDisplayMode })))),
-        selected && React.createElement(CfgOptionNumericView, { option: option }),
-        React.createElement(CfgOptionFeaturesView, Object.assign({ option: option }, forwardProps(props)))));
+    const 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).catch((e) => {
+                setError(e);
+                throw e;
+            });
+        }
+    };
+    return (React.createElement(CfgOptionCommonView, Object.assign({}, props, { className: `cfgFeatureItem cfgMb1 ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, labelClassName: selected ? "cfgFeatureItemOption--checked" : "", onClick: onClick })));
 };
 export const CfgDropdownOptionViewMemo = React.memo(CfgDropdownOptionView);

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

@@ -1,8 +1,5 @@
 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 & import("./CfgFeatureView.js").CfgProductConfigurationComponent & {
-    feature: import("@configura/web-api").CfgFeature;
-} & CssProps>;
+export declare const CfgDropdownView: React.FC<CfgFeatureViewProps>;
+export declare const CfgDropdownViewMemo: React.NamedExoticComponent<CfgFeatureViewProps>;
 //# sourceMappingURL=CfgDropdownView.d.ts.map

package/dist/components/productConfiguration/CfgDropdownView.js

@@ -1,6 +1,7 @@
 import { SelectionType } from "@configura/web-api";
 import React, { useState } from "react";
 import { ExpandableHeadingRow } from "../ExpandableHeadingRow.js";
+import { CfgConfigurationCommonView } from "./CfgConfigurationCommonView.js";
 import { forwardProps } from "./CfgFeatureView.js";
 export const CfgDropdownView = (props) => {
     var _a;
@@ -8,13 +9,15 @@ export const CfgDropdownView = (props) => {
     if (feature.selectionType !== SelectionType.SelectOne) {
         throw Error(`Unsupported selection type expected: ${SelectionType.SelectOne}, got: ${feature.selectionType}`);
     }
-    const { description, preview, options } = feature;
+    const { description, preview, options, code, notes } = feature;
     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(ExpandableHeadingRow, { heading: description || code, 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" },
-            open && (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel  ${preview ? "cfgOptionTree--compThumb" : ""}` }, options.map((option) => (React.createElement(OptionComponent, Object.assign({ key: option.key, option: option }, forwardProps(props))))))),
-            React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" }))));
+        (options || notes.length !== 0) && (React.createElement("div", { className: "cfgFeatureItem__subTree" },
+            open && (React.createElement(React.Fragment, null,
+                React.createElement(CfgConfigurationCommonView, Object.assign({}, forwardProps(props), { notes: notes })),
+                React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel  ${preview ? "cfgOptionTree--compThumb" : ""}` }, options.map((option) => (React.createElement(OptionComponent, Object.assign({}, forwardProps(props), { key: option.key, option: option }))))))),
+            React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" })))));
 };
 export const CfgDropdownViewMemo = React.memo(CfgDropdownView);

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

@@ -1,4 +1,4 @@
-import { CfgFeature, CfgOption, CfgProduct } from "@configura/web-api";
+import { CfgFeature, CfgOption, CfgProduct, DtoMiscFile, DtoNote } from "@configura/web-api";
 import React from "react";
 import { CssProps } from "../../utilities.js";
 import { PassthroughProps } from "./CfgProductConfigurationView.js";
@@ -12,6 +12,24 @@ export declare type CfgAdditionalProductViewProps = CfgProductConfigurationCompo
     product: CfgProduct;
     permanentlyExpandedLevels: number;
 };
+export declare type CfgNoteViewProps = CssProps & {
+    note: DtoNote;
+};
+declare type CfgNoteComponent = {
+    noteComponent: React.ComponentType<CfgNoteViewProps>;
+};
+export declare type CfgNotesViewProps = CssProps & CfgNoteComponent & {
+    notes: DtoNote[];
+};
+export declare type CfgMiscFileViewProps = CssProps & {
+    miscFile: DtoMiscFile;
+};
+declare type CfgMiscFileComponent = {
+    miscFileComponent: React.ComponentType<CfgMiscFileViewProps>;
+};
+export declare type CfgMiscFilesViewProps = CssProps & CfgMiscFileComponent & {
+    miscFiles: DtoMiscFile[];
+};
 export declare type CfgProductConfigurationComponent = {
     additionalProductComponent: React.ComponentType<CfgAdditionalProductViewProps>;
     featureFlattenComponent: React.ComponentType<CfgFeatureViewProps>;
@@ -20,13 +38,36 @@ export declare type CfgProductConfigurationComponent = {
     optionSelectManyComponent: React.ComponentType<CfgOptionViewProps>;
     featureSelectOneComponent: React.ComponentType<CfgFeatureViewProps>;
     optionSelectOneComponent: React.ComponentType<CfgOptionViewProps>;
-};
-export declare const completeWithDefaultProductConfigurationComponents: <T>(incomplete: T & Partial<CfgProductConfigurationComponent>) => T & CfgProductConfigurationComponent;
+    notesComponent: React.ComponentType<CfgNotesViewProps>;
+    miscFilesComponent: React.ComponentType<CfgMiscFilesViewProps>;
+} & CfgMiscFileComponent & CfgNoteComponent;
+export declare const completeWithDefaultProductConfigurationComponents: <T>(incomplete: T & Partial<CfgProductConfigurationComponent>) => T & {
+    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>;
+    notesComponent: React.ComponentType<CfgNotesViewProps>;
+    miscFilesComponent: React.ComponentType<CfgMiscFilesViewProps>;
+} & CfgMiscFileComponent & CfgNoteComponent;
 export declare const useCompleteWithDefaultProductConfigurationComponents: (incomplete: Partial<CfgProductConfigurationComponent>) => CfgProductConfigurationComponent;
-export declare type CfgProductConfigurationComponentAndPassthroughProps = PassthroughProps & CfgProductConfigurationComponent;
+export declare type CfgProductConfigurationComponentAndPassthroughProps = PassthroughProps & CssProps & CfgProductConfigurationComponent;
 export declare const forwardProps: (props: CfgProductConfigurationComponentAndPassthroughProps) => CfgProductConfigurationComponentAndPassthroughProps;
 export declare const CfgFeatureView: React.FC<CfgFeatureViewProps & CssProps>;
-export declare const CfgFeatureViewMemo: React.NamedExoticComponent<PassthroughProps & CfgProductConfigurationComponent & {
+export declare const CfgFeatureViewMemo: React.NamedExoticComponent<PassthroughProps & CssProps & {
+    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>;
+    notesComponent: React.ComponentType<CfgNotesViewProps>;
+    miscFilesComponent: React.ComponentType<CfgMiscFilesViewProps>;
+} & CfgMiscFileComponent & CfgNoteComponent & {
     feature: CfgFeature;
-} & CssProps>;
+}>;
+export {};
 //# sourceMappingURL=CfgFeatureView.d.ts.map

package/dist/components/productConfiguration/CfgFeatureView.js

@@ -1,4 +1,4 @@
-import { SelectionType } from "@configura/web-api";
+import { SelectionType, } from "@configura/web-api";
 import React, { useMemo } from "react";
 import { CfgAdditionalProductView } from "./CfgAdditionalProductView.js";
 import { CfgCheckboxesViewMemo } from "./CfgCheckboxesView.js";
@@ -6,12 +6,16 @@ import { CfgCheckboxViewMemo } from "./CfgCheckboxView.js";
 import { CfgDropdownOptionViewMemo } from "./CfgDropdownOptionView.js";
 import { CfgDropdownViewMemo } from "./CfgDropdownView.js";
 import { CfgGroupViewMemo } from "./CfgGroupView.js";
+import { CfgMiscFile } from "./CfgMiscFile.js";
+import { CfgMiscFiles } from "./CfgMiscFiles.js";
+import { CfgNote } from "./CfgNote.js";
+import { CfgNotes } from "./CfgNotes.js";
 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 }));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    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, noteComponent: (_h = incomplete.noteComponent) !== null && _h !== void 0 ? _h : CfgNote, notesComponent: (_j = incomplete.notesComponent) !== null && _j !== void 0 ? _j : CfgNotes, miscFileComponent: (_k = incomplete.miscFileComponent) !== null && _k !== void 0 ? _k : CfgMiscFile, miscFilesComponent: (_l = incomplete.miscFilesComponent) !== null && _l !== void 0 ? _l : CfgMiscFiles }));
 };
 export const useCompleteWithDefaultProductConfigurationComponents = (incomplete) => {
-    const { additionalProductComponent, featureFlattenComponent, featureGroupComponent, featureSelectManyComponent, featureSelectOneComponent, optionSelectManyComponent, optionSelectOneComponent, } = incomplete;
+    const { additionalProductComponent, featureFlattenComponent, featureGroupComponent, featureSelectManyComponent, featureSelectOneComponent, optionSelectManyComponent, optionSelectOneComponent, noteComponent, notesComponent, miscFileComponent, miscFilesComponent, } = incomplete;
     return useMemo(() => completeWithDefaultProductConfigurationComponents({
         additionalProductComponent,
         featureFlattenComponent,
@@ -20,6 +24,10 @@ export const useCompleteWithDefaultProductConfigurationComponents = (incomplete)
         featureSelectOneComponent,
         optionSelectManyComponent,
         optionSelectOneComponent,
+        noteComponent,
+        notesComponent,
+        miscFileComponent,
+        miscFilesComponent,
     }), [
         additionalProductComponent,
         featureFlattenComponent,
@@ -28,6 +36,10 @@ export const useCompleteWithDefaultProductConfigurationComponents = (incomplete)
         featureSelectOneComponent,
         optionSelectManyComponent,
         optionSelectOneComponent,
+        noteComponent,
+        notesComponent,
+        miscFileComponent,
+        miscFilesComponent,
     ]);
 };
 export const forwardProps = (props) => ({
@@ -40,6 +52,10 @@ export const forwardProps = (props) => ({
     optionSelectManyComponent: props.optionSelectManyComponent,
     featureSelectOneComponent: props.featureSelectOneComponent,
     optionSelectOneComponent: props.optionSelectOneComponent,
+    noteComponent: props.noteComponent,
+    notesComponent: props.notesComponent,
+    miscFileComponent: props.miscFileComponent,
+    miscFilesComponent: props.miscFilesComponent,
 });
 export const CfgFeatureView = (props) => {
     const { feature, featureFlattenComponent: FlattenComponent, featureGroupComponent: GroupComponent, featureSelectManyComponent: SelectManyComponent, featureSelectOneComponent: SelectOneComponent, } = props;

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { CssProps } from "../../utilities";
+import { CfgMiscFileViewProps } from "./CfgFeatureView.js";
+export declare const CfgMiscFile: React.FC<CfgMiscFileViewProps & CssProps>;
+//# sourceMappingURL=CfgMiscFile.d.ts.map

package/dist/components/productConfiguration/CfgMiscFile.js

@@ -0,0 +1,9 @@
+import React from "react";
+export const CfgMiscFile = (props) => {
+    const { url, preview } = props.miscFile;
+    const split = url.lastIndexOf("/");
+    const name = split ? decodeURI(url.substring(split + 1)) : url;
+    return (React.createElement("li", { className: `cfgMiscFiles__item ${props.className || ""}`, style: props.style },
+        preview !== undefined && (React.createElement("img", { className: "cfgMiscFiles__thumbnail cfgThumbnailImage", src: preview, alt: "Preview for file URL." })),
+        React.createElement("a", { href: url, className: "cfgMiscFiles__link cfgTextOverflow", target: "_blank", rel: "noopener noreferrer" }, name)));
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { CssProps } from "../../utilities";
+import { CfgMiscFilesViewProps } from "./CfgFeatureView.js";
+export declare const CfgMiscFiles: React.FC<CfgMiscFilesViewProps & CssProps>;
+//# sourceMappingURL=CfgMiscFiles.d.ts.map

package/dist/components/productConfiguration/CfgMiscFiles.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const CfgMiscFiles = (props) => {
+    const { miscFileComponent: MiscFileComponent } = props;
+    return (React.createElement("ul", { className: `cfgMiscFiles ${props.className || ""}`, style: props.style }, props.miscFiles.map((f) => (React.createElement(MiscFileComponent, { key: f.key + f.url + f.preview, miscFile: f })))));
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { CssProps } from "../../utilities";
+import { CfgNoteViewProps } from "./CfgFeatureView.js";
+export declare const CfgNote: React.FC<CfgNoteViewProps & CssProps>;
+//# sourceMappingURL=CfgNote.d.ts.map

package/dist/components/productConfiguration/CfgNote.js

@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import { ExpandableHeadingRow } from "../ExpandableHeadingRow.js";
+export const CfgNote = (props) => {
+    const { code, body, key, title } = props.note;
+    const [open, setOpen] = useState(false);
+    const hasNoTitle = !title;
+    const hasNoBody = !body;
+    if (hasNoBody && hasNoTitle) {
+        console.info(`Note has neither title nor body and will not be visible. (${code})`);
+        return null;
+    }
+    return (React.createElement("li", { className: "cfgNotes__item" },
+        React.createElement(ExpandableHeadingRow, { heading: title || key || code, open: open, onClick: () => setOpen((prev) => !prev), expandable: !hasNoBody, className: "cfgNotes__title" }),
+        open && React.createElement("div", { className: "cfgNotes__body" }, body)));
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { CssProps } from "../../utilities.js";
+import { CfgNotesViewProps } from "./CfgFeatureView.js";
+export declare const CfgNotes: React.FC<CfgNotesViewProps & CssProps>;
+//# sourceMappingURL=CfgNotes.d.ts.map

package/dist/components/productConfiguration/CfgNotes.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const CfgNotes = (props) => {
+    const { noteComponent: NoteComponent } = props;
+    return (React.createElement("ul", { className: "cfgNotes", style: props.style }, props.notes.map((n) => (React.createElement(NoteComponent, { note: n, key: n.code })))));
+};

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { CfgOptionViewProps } from "./CfgFeatureView.js";
+export declare const CfgOptionCommonView: React.FC<CfgOptionViewProps & {
+    labelClassName?: string;
+    onClick?: () => void;
+}>;
+//# sourceMappingURL=CfgOptionCommonView.d.ts.map

package/dist/components/productConfiguration/CfgOptionCommonView.js

@@ -0,0 +1,48 @@
+import { SelectionType } from "@configura/web-api";
+import React, { useContext } from "react";
+import { useUuid } from "../../useUniqueId.js";
+import { ErrorContext } from "../ErrorContext.js";
+import { Checkmark } from "../icons/Checkmark.js";
+import { CfgConfigurationCommonView } from "./CfgConfigurationCommonView.js";
+import { CfgFeatureView, forwardProps } from "./CfgFeatureView.js";
+import { CfgOptionNumericView } from "./CfgOptionNumericView.js";
+import { CfgOptionPriceView } from "./CfgOptionPriceView.js";
+export const CfgOptionCommonView = (props) => {
+    const { option, upchargeDisplayMode, onClick, labelClassName } = props;
+    const { features, thumbnail, description, selected, code, selectedChangeInProgress, miscFiles, notes, } = option;
+    const setError = useContext(ErrorContext);
+    const uniqueId = useUuid();
+    const selectionType = option.parent.selectionType;
+    let inputType;
+    let typeClassNameFragment;
+    switch (selectionType) {
+        case SelectionType.SelectMany:
+            inputType = "checkbox";
+            typeClassNameFragment = "Optional";
+            break;
+        case SelectionType.SelectOne:
+            inputType = "radio";
+            typeClassNameFragment = "Option";
+            break;
+        default:
+            throw new Error(`Unsupported selectionType ${selectionType}`);
+    }
+    return (React.createElement("li", { className: props.className, style: props.style },
+        React.createElement("label", { className: `cfgFeatureItem${typeClassNameFragment} ${labelClassName !== null && labelClassName !== void 0 ? labelClassName : ""}`, htmlFor: uniqueId },
+            React.createElement("input", { checked: selected, className: "cfgFeatureItem__hiddenInput", id: uniqueId, name: uniqueId, onChange: () => {
+                    option.setSelected(!selected).catch((e) => {
+                        setError(e);
+                        throw e;
+                    });
+                }, onClick: onClick, type: inputType }),
+            React.createElement("div", { className: `cfgFeatureItem__${inputType}` }, selected === !selectedChangeInProgress && React.createElement(Checkmark, null)),
+            thumbnail && (React.createElement("img", { alt: `Thumbnail for ${description}`, className: "cfgThumbnailImage cfgMl1", src: thumbnail })),
+            React.createElement("div", { className: `cfgFeatureItem${typeClassNameFragment}__titleWrapper` },
+                React.createElement("div", { className: `cfgFeatureItem${typeClassNameFragment}__title` },
+                    description || code,
+                    React.createElement(CfgOptionPriceView, { option: option, upchargeDisplayMode: upchargeDisplayMode })))),
+        selected && (React.createElement(React.Fragment, null,
+            React.createElement(CfgOptionNumericView, { option: option }),
+            React.createElement(CfgConfigurationCommonView, Object.assign({}, forwardProps(props), { notes: notes, miscFiles: miscFiles })),
+            features.length !== 0 && (React.createElement("ul", { className: "cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent" }, features.map((f) => (React.createElement(CfgFeatureView, Object.assign({}, forwardProps(props), { feature: f, key: f.key }))))))))));
+};