@configura/web-ui 1.5.0 → 1.6.0-iotest.1

package/dist/components/icons/DownloadIcon.js

@@ -1,8 +1,8 @@
-import React from "react";
-export const DownloadIcon = (props) => {
-    return (React.createElement("span", { className: `cfgDownloadIcon ${props.className || ""}`, style: props.style },
-        React.createElement("svg", { preserveAspectRatio: "xMidYMid", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("path", { d: "M1.5 11.5V14.5H14.5V11.5" }),
-            React.createElement("path", { d: "M8 1V11" }),
-            React.createElement("path", { d: "M5 9L8 12L11 9" }))));
-};
+import React from "react";
+export const DownloadIcon = (props) => {
+    return (React.createElement("span", { className: `cfgDownloadIcon ${props.className || ""}`, style: props.style },
+        React.createElement("svg", { preserveAspectRatio: "xMidYMid", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M1.5 11.5V14.5H14.5V11.5" }),
+            React.createElement("path", { d: "M8 1V11" }),
+            React.createElement("path", { d: "M5 9L8 12L11 9" }))));
+};

package/dist/components/icons/ErrorIcon.d.ts

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

package/dist/components/icons/ErrorIcon.js

@@ -1,8 +1,8 @@
-import React from "react";
-export const ErrorIcon = (props) => {
-    return (React.createElement("span", { className: `cfgErrorIcon ${props.className || ""}`, style: props.style },
-        React.createElement("svg", { preserveAspectRatio: "xMidYMid", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("path", { d: "M8 11L8 11.5" }),
-            React.createElement("path", { d: "M8 8.5L8 4.5" }),
-            React.createElement("circle", { cx: "8", cy: "8", r: "7.25" }))));
-};
+import React from "react";
+export const ErrorIcon = (props) => {
+    return (React.createElement("span", { className: `cfgErrorIcon ${props.className || ""}`, style: props.style },
+        React.createElement("svg", { preserveAspectRatio: "xMidYMid", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M8 11L8 11.5" }),
+            React.createElement("path", { d: "M8 8.5L8 4.5" }),
+            React.createElement("circle", { cx: "8", cy: "8", r: "7.25" }))));
+};

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

@@ -1,4 +1,4 @@
-import React from "react";
-import { CfgAdditionalProductViewProps } from "./CfgFeatureView.js";
-export declare const CfgAdditionalProductView: React.FC<CfgAdditionalProductViewProps>;
+import React from "react";
+import { CfgAdditionalProductViewProps } from "./CfgFeatureView.js";
+export declare const CfgAdditionalProductView: React.FC<CfgAdditionalProductViewProps>;
 //# sourceMappingURL=CfgAdditionalProductView.d.ts.map

package/dist/components/productConfiguration/CfgAdditionalProductView.js

@@ -1,38 +1,38 @@
-import React, { useState } from "react";
-import { ExpandableHeadingRow, ExpandableHeadingRowSymbol } from "../ExpandableHeadingRow.js";
-import { forwardProps } from "./CfgFeatureView.js";
-import { CfgProductConfigurationView } from "./CfgProductConfigurationView.js";
-export const CfgAdditionalProductView = React.memo((props) => {
-    const { product, permanentlyExpandedLevels, additionalProductComponent } = props;
-    const { partNumber, optional, selected, configuration, additionalProducts, preview, description, visible: configurationVisible, } = product;
-    const [open, setOpen] = useState(false);
-    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 }));
-    }
-    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);
-                }
-                else {
-                    setOpen((prev) => !prev);
-                }
-            }, symbol: optional ? ExpandableHeadingRowSymbol.Checkbox : undefined }, preview && (React.createElement("div", { className: "cfgThumbnailPlaceholder" },
-            React.createElement("img", { alt: `Preview for ${description}`, className: "cfgThumbnailImage", src: preview })))),
-        hasChildren &&
-            (!optional || selected) &&
-            (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("hr", { className: "cfgFeatureItem__hr cfgHr" })));
-});
-const AdditionalProductsView = (props) => {
-    const { additionalProducts, permanentlyExpandedLevels, additionalProductComponent } = props;
-    const AdditionalProductComponent = additionalProductComponent !== null && additionalProductComponent !== void 0 ? additionalProductComponent : CfgAdditionalProductView;
-    return (React.createElement(React.Fragment, null, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({ key: additionalProduct.key }, forwardProps(props), { product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedLevels - 1 }))))));
-};
+import React, { useState } from "react";
+import { ExpandableHeadingRow, ExpandableHeadingRowSymbol } from "../ExpandableHeadingRow.js";
+import { forwardProps } from "./CfgFeatureView.js";
+import { CfgProductConfigurationView } from "./CfgProductConfigurationView.js";
+export const CfgAdditionalProductView = React.memo((props) => {
+    const { product, permanentlyExpandedLevels, additionalProductComponent } = props;
+    const { partNumber, optional, selected, configuration, additionalProducts, preview, description, visible: configurationVisible, } = product;
+    const [open, setOpen] = useState(false);
+    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 }));
+    }
+    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);
+                }
+                else {
+                    setOpen((prev) => !prev);
+                }
+            }, symbol: optional ? ExpandableHeadingRowSymbol.Checkbox : undefined }, preview && (React.createElement("div", { className: "cfgThumbnailPlaceholder" },
+            React.createElement("img", { alt: `Preview for ${description}`, className: "cfgThumbnailImage", src: preview })))),
+        hasChildren &&
+            (!optional || selected) &&
+            (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("hr", { className: "cfgFeatureItem__hr cfgHr" })));
+});
+const AdditionalProductsView = (props) => {
+    const { additionalProducts, permanentlyExpandedLevels, additionalProductComponent } = props;
+    const AdditionalProductComponent = additionalProductComponent !== null && additionalProductComponent !== void 0 ? additionalProductComponent : CfgAdditionalProductView;
+    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

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

package/dist/components/productConfiguration/CfgCheckboxView.js

@@ -1,22 +1,22 @@
-import React from "react";
-import { useUuid } from "../../useUniqueId.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 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)),
-            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)))));
-};
-export const CfgCheckboxViewMemo = React.memo(CfgCheckboxView);
+import React from "react";
+import { useUuid } from "../../useUniqueId.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 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)),
+            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)))));
+};
+export const CfgCheckboxViewMemo = React.memo(CfgCheckboxView);

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

@@ -1,14 +1,14 @@
-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;
-    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-} & {
-    feature: import("@configura/web-api").CfgFeature;
-} & CssProps>;
+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;
+    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+} & {
+    feature: import("@configura/web-api").CfgFeature;
+} & CssProps>;
 //# sourceMappingURL=CfgCheckboxesView.d.ts.map

package/dist/components/productConfiguration/CfgCheckboxesView.js

@@ -1,19 +1,19 @@
-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;
-    const { feature } = props;
-    if (feature.selectionType !== SelectionType.SelectMany) {
-        throw Error(`Unsupported selection type expected: ${SelectionType.SelectMany}, got: ${feature.selectionType}`);
-    }
-    const { options, description } = 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("ul", { className: "cfgOptionTree" }, options.map((option) => (React.createElement(CfgCheckboxViewMemo, Object.assign({ option: option, key: option.key }, forwardProps(props))))))));
-};
-export const CfgCheckboxesViewMemo = React.memo(CfgCheckboxesView);
+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;
+    const { feature } = props;
+    if (feature.selectionType !== SelectionType.SelectMany) {
+        throw Error(`Unsupported selection type expected: ${SelectionType.SelectMany}, got: ${feature.selectionType}`);
+    }
+    const { options, description } = 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("ul", { className: "cfgOptionTree" }, options.map((option) => (React.createElement(CfgCheckboxViewMemo, Object.assign({ option: option, key: option.key }, forwardProps(props))))))));
+};
+export const CfgCheckboxesViewMemo = React.memo(CfgCheckboxesView);

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

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

package/dist/components/productConfiguration/CfgDropdownOptionView.js

@@ -1,36 +1,36 @@
-import React from "react";
-import { useUuid } from "../../useUniqueId.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";
-export const CfgDropdownOptionView = (props) => {
-    var _a;
-    const { option, upchargeDisplayMode } = props;
-    const { code, thumbnail, description, selected } = option;
-    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);
-                }, 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);
-                    }
-                }, type: "radio", value: code }),
-            React.createElement("div", { className: "cfgFeatureItem__radio" }, selected && 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)))));
-};
-export const CfgDropdownOptionViewMemo = React.memo(CfgDropdownOptionView);
+import React from "react";
+import { useUuid } from "../../useUniqueId.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";
+export const CfgDropdownOptionView = (props) => {
+    var _a;
+    const { option, upchargeDisplayMode } = props;
+    const { code, thumbnail, description, selected } = option;
+    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);
+                }, 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);
+                    }
+                }, type: "radio", value: code }),
+            React.createElement("div", { className: "cfgFeatureItem__radio" }, selected && 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)))));
+};
+export const CfgDropdownOptionViewMemo = React.memo(CfgDropdownOptionView);

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

@@ -1,14 +1,14 @@
-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;
-    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-} & {
-    feature: import("@configura/web-api").CfgFeature;
-} & CssProps>;
+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;
+    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+} & {
+    feature: import("@configura/web-api").CfgFeature;
+} & CssProps>;
 //# sourceMappingURL=CfgDropdownView.d.ts.map

package/dist/components/productConfiguration/CfgDropdownView.js

@@ -1,21 +1,21 @@
-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;
-    const { feature } = props;
-    if (feature.selectionType !== SelectionType.SelectOne) {
-        throw Error(`Unsupported selection type expected: ${SelectionType.SelectOne}, got: ${feature.selectionType}`);
-    }
-    const { description, preview, options } = feature;
-    const [open, setOpen] = useState(false);
-    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" },
-            open && (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel  ${preview ? "cfgOptionTree--compThumb" : ""}` }, options.map((option) => (React.createElement(CfgDropdownOptionViewMemo, Object.assign({ key: option.key, option: option }, forwardProps(props))))))),
-            React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" }))));
-};
-export const CfgDropdownViewMemo = React.memo(CfgDropdownView);
+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;
+    const { feature } = props;
+    if (feature.selectionType !== SelectionType.SelectOne) {
+        throw Error(`Unsupported selection type expected: ${SelectionType.SelectOne}, got: ${feature.selectionType}`);
+    }
+    const { description, preview, options } = feature;
+    const [open, setOpen] = useState(false);
+    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" },
+            open && (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel  ${preview ? "cfgOptionTree--compThumb" : ""}` }, options.map((option) => (React.createElement(CfgDropdownOptionViewMemo, Object.assign({ key: option.key, option: option }, forwardProps(props))))))),
+            React.createElement("hr", { className: "cfgFeatureItem__hr cfgHr" }))));
+};
+export const CfgDropdownViewMemo = React.memo(CfgDropdownView);

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

@@ -1,30 +1,30 @@
-import { CfgFeature, CfgProduct } from "@configura/web-api";
-import React from "react";
-import { CssProps } from "../../utilities.js";
-import { PassthroughProps } from "./CfgProductConfigurationView.js";
-export declare type CfgFeatureViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
-    feature: CfgFeature;
-};
-export declare type CfgAdditionalProductViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
-    product: CfgProduct;
-    permanentlyExpandedLevels: number;
-};
-export declare type CfgProductConfigurationComponentAndPassthroughProps = PassthroughProps & {
-    additionalProductComponent?: React.ComponentType<CfgAdditionalProductViewProps>;
-    featureFlattenComponent?: React.ComponentType<CfgFeatureViewProps>;
-    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps>;
-    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps>;
-    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps>;
-};
-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;
-    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
-} & {
-    feature: CfgFeature;
-} & CssProps>;
+import { CfgFeature, CfgProduct } from "@configura/web-api";
+import React from "react";
+import { CssProps } from "../../utilities.js";
+import { PassthroughProps } from "./CfgProductConfigurationView.js";
+export declare type CfgFeatureViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
+    feature: CfgFeature;
+};
+export declare type CfgAdditionalProductViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
+    product: CfgProduct;
+    permanentlyExpandedLevels: number;
+};
+export declare type CfgProductConfigurationComponentAndPassthroughProps = PassthroughProps & {
+    additionalProductComponent?: React.ComponentType<CfgAdditionalProductViewProps>;
+    featureFlattenComponent?: React.ComponentType<CfgFeatureViewProps>;
+    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps>;
+    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps>;
+    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps>;
+};
+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;
+    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+} & {
+    feature: CfgFeature;
+} & CssProps>;
 //# sourceMappingURL=CfgFeatureView.d.ts.map