@configura/web-ui 1.3.0-alpha.7 → 1.3.0

package/dist/components/productConfiguration/CfgDropdownOptionView.js

@@ -1,35 +1,35 @@
-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) => {
-    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 ${props.className || ""}`, 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) => {
+    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 ${props.className || ""}`, 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,13 +1,13 @@
-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;
-    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;
+    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,20 +1,20 @@
-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) => {
-    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 ${props.className || ""}`, 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) => {
+    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 ${props.className || ""}`, 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,28 +1,28 @@
-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>;
-    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;
-    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>;
+    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;
+    featureGroupComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+    featureSelectManyComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+    featureSelectOneComponent?: React.ComponentType<CfgFeatureViewProps> | undefined;
+} & {
+    feature: CfgFeature;
+} & CssProps>;
 //# sourceMappingURL=CfgFeatureView.d.ts.map

package/dist/components/productConfiguration/CfgFeatureView.js

@@ -1,34 +1,34 @@
-import { SelectionType } from "@configura/web-api";
-import React from "react";
-import { CfgCheckboxesViewMemo } from "./CfgCheckboxesView.js";
-import { CfgDropdownViewMemo } from "./CfgDropdownView.js";
-import { CfgGroupViewMemo } from "./CfgGroupView.js";
-export const forwardProps = (props) => {
-    return {
-        upchargeDisplayMode: props.upchargeDisplayMode,
-        additionalProductComponent: props.additionalProductComponent,
-        featureGroupComponent: props.featureGroupComponent,
-        featureSelectManyComponent: props.featureSelectManyComponent,
-        featureSelectOneComponent: props.featureSelectOneComponent,
-    };
-};
-export const CfgFeatureView = (props) => {
-    const { feature } = props;
-    if (!feature.visible) {
-        return null;
-    }
-    const GroupComponent = props.featureGroupComponent || CfgGroupViewMemo;
-    const SelectManyComponent = props.featureSelectManyComponent || CfgCheckboxesViewMemo;
-    const SelectOneComponent = props.featureSelectOneComponent || CfgDropdownViewMemo;
-    switch (feature.selectionType) {
-        case SelectionType.Group:
-            return React.createElement(GroupComponent, Object.assign({}, props));
-        case SelectionType.SelectMany:
-            return React.createElement(SelectManyComponent, Object.assign({}, props));
-        case SelectionType.SelectOne:
-            return React.createElement(SelectOneComponent, Object.assign({}, props));
-        default:
-            throw Error("Unsupported viewType");
-    }
-};
-export const CfgFeatureViewMemo = React.memo(CfgFeatureView);
+import { SelectionType } from "@configura/web-api";
+import React from "react";
+import { CfgCheckboxesViewMemo } from "./CfgCheckboxesView.js";
+import { CfgDropdownViewMemo } from "./CfgDropdownView.js";
+import { CfgGroupViewMemo } from "./CfgGroupView.js";
+export const forwardProps = (props) => {
+    return {
+        upchargeDisplayMode: props.upchargeDisplayMode,
+        additionalProductComponent: props.additionalProductComponent,
+        featureGroupComponent: props.featureGroupComponent,
+        featureSelectManyComponent: props.featureSelectManyComponent,
+        featureSelectOneComponent: props.featureSelectOneComponent,
+    };
+};
+export const CfgFeatureView = (props) => {
+    const { feature } = props;
+    if (!feature.visible) {
+        return null;
+    }
+    const GroupComponent = props.featureGroupComponent || CfgGroupViewMemo;
+    const SelectManyComponent = props.featureSelectManyComponent || CfgCheckboxesViewMemo;
+    const SelectOneComponent = props.featureSelectOneComponent || CfgDropdownViewMemo;
+    switch (feature.selectionType) {
+        case SelectionType.Group:
+            return React.createElement(GroupComponent, Object.assign({}, props));
+        case SelectionType.SelectMany:
+            return React.createElement(SelectManyComponent, Object.assign({}, props));
+        case SelectionType.SelectOne:
+            return React.createElement(SelectOneComponent, Object.assign({}, props));
+        default:
+            throw Error("Unsupported viewType");
+    }
+};
+export const CfgFeatureViewMemo = React.memo(CfgFeatureView);

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { CfgFeatureViewProps } from "./CfgFeatureView.js";
-export declare const CfgGroupView: React.FC<CfgFeatureViewProps>;
-export declare const CfgGroupViewMemo: React.NamedExoticComponent<CfgFeatureViewProps>;
+import React from "react";
+import { CfgFeatureViewProps } from "./CfgFeatureView.js";
+export declare const CfgGroupView: React.FC<CfgFeatureViewProps>;
+export declare const CfgGroupViewMemo: React.NamedExoticComponent<CfgFeatureViewProps>;
 //# sourceMappingURL=CfgGroupView.d.ts.map

package/dist/components/productConfiguration/CfgGroupView.js

@@ -1,13 +1,13 @@
-import { SelectionType } from "@configura/web-api";
-import React from "react";
-import { CfgFeatureViewMemo, forwardProps } from "./CfgFeatureView.js";
-export const CfgGroupView = (props) => {
-    const { feature } = props;
-    if (feature.selectionType !== SelectionType.Group) {
-        throw Error(`Unsupported selection type expected: ${SelectionType.Group}, got: ${feature.selectionType}`);
-    }
-    return (React.createElement(React.Fragment, null, feature.options.map((o) => {
-        return o.features.map((f) => (React.createElement(CfgFeatureViewMemo, Object.assign({ key: f.key, feature: f }, forwardProps(props)))));
-    })));
-};
-export const CfgGroupViewMemo = React.memo(CfgGroupView);
+import { SelectionType } from "@configura/web-api";
+import React from "react";
+import { CfgFeatureViewMemo, forwardProps } from "./CfgFeatureView.js";
+export const CfgGroupView = (props) => {
+    const { feature } = props;
+    if (feature.selectionType !== SelectionType.Group) {
+        throw Error(`Unsupported selection type expected: ${SelectionType.Group}, got: ${feature.selectionType}`);
+    }
+    return (React.createElement(React.Fragment, null, feature.options.map((o) => {
+        return o.features.map((f) => (React.createElement(CfgFeatureViewMemo, Object.assign({ key: f.key, feature: f }, forwardProps(props)))));
+    })));
+};
+export const CfgGroupViewMemo = React.memo(CfgGroupView);

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

@@ -1,7 +1,7 @@
-import { CfgOption } from "@configura/web-api";
-import React from "react";
-import { PassthroughProps } from "./CfgProductConfigurationView.js";
-export declare const CfgOptionFeaturesView: React.FC<{
-    option: CfgOption;
-} & PassthroughProps>;
+import { CfgOption } from "@configura/web-api";
+import React from "react";
+import { PassthroughProps } from "./CfgProductConfigurationView.js";
+export declare const CfgOptionFeaturesView: React.FC<{
+    option: CfgOption;
+} & PassthroughProps>;
 //# sourceMappingURL=CfgOptionFeaturesView.d.ts.map

package/dist/components/productConfiguration/CfgOptionFeaturesView.js

@@ -1,13 +1,13 @@
-import React from "react";
-import { CfgFeatureView, forwardProps } from "./CfgFeatureView.js";
-export const CfgOptionFeaturesView = (props) => {
-    const { option } = props;
-    const { features, selected } = option;
-    if (!selected) {
-        return null;
-    }
-    if (features.length === 0) {
-        return null;
-    }
-    return (React.createElement("ul", { className: "cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent" }, features.map((f) => (React.createElement(CfgFeatureView, Object.assign({ feature: f, key: f.key }, forwardProps(props)))))));
-};
+import React from "react";
+import { CfgFeatureView, forwardProps } from "./CfgFeatureView.js";
+export const CfgOptionFeaturesView = (props) => {
+    const { option } = props;
+    const { features, selected } = option;
+    if (!selected) {
+        return null;
+    }
+    if (features.length === 0) {
+        return null;
+    }
+    return (React.createElement("ul", { className: "cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent" }, features.map((f) => (React.createElement(CfgFeatureView, Object.assign({ feature: f, key: f.key }, forwardProps(props)))))));
+};

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

@@ -1,28 +1,28 @@
-import { CfgOption, NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
-import { LengthUnit } from "@configura/web-utilities";
-import React from "react";
-import { CssProps } from "../../utilities.js";
-export declare const CfgOptionNumericView: React.FC<{
-    option: CfgOption;
-} & CssProps>;
-/**
- * Displays GUI for selecting in one "range". Please note that the range
- * parameter can also be a discrete value.
- */
-export declare const NumericValueView: React.FC<{
-    currentValue: number;
-    unit: LengthUnit;
-    range: NumericValueRangeDefinition | NumericValueDiscrete;
-    updateValue: (val: number, commit: boolean) => void;
-    hasNoSiblings: boolean;
-}>;
-export declare const RangeView: React.FC<{
-    currentValue: number;
-    unit: LengthUnit;
-    range: NumericValueRangeDefinition;
-    inputValue: number;
-    onChange: (val: number, instantUpdate: boolean) => void;
-    onCommit: () => void;
-    showRangeError: boolean;
-} & CssProps>;
+import { CfgOption, NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
+import { LengthUnit } from "@configura/web-utilities";
+import React from "react";
+import { CssProps } from "../../utilities.js";
+export declare const CfgOptionNumericView: React.FC<{
+    option: CfgOption;
+} & CssProps>;
+/**
+ * Displays GUI for selecting in one "range". Please note that the range
+ * parameter can also be a discrete value.
+ */
+export declare const NumericValueView: React.FC<{
+    currentValue: number;
+    unit: LengthUnit;
+    range: NumericValueRangeDefinition | NumericValueDiscrete;
+    updateValue: (val: number, commit: boolean) => void;
+    hasNoSiblings: boolean;
+}>;
+export declare const RangeView: React.FC<{
+    currentValue: number;
+    unit: LengthUnit;
+    range: NumericValueRangeDefinition;
+    inputValue: number;
+    onChange: (val: number, instantUpdate: boolean) => void;
+    onCommit: () => void;
+    showRangeError: boolean;
+} & CssProps>;
 //# sourceMappingURL=CfgOptionNumericView.d.ts.map