@configura/web-ui 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -1,36 +1,32 @@
-import { CfgFeature, CfgOption, 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 CfgOptionViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
-    option: CfgOption;
-};
-export declare type CfgAdditionalProductViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
-    product: CfgProduct;
-    permanentlyExpandedLevels: number;
-};
-export declare type CfgProductConfigurationComponent = {
-    additionalProductComponent: React.ComponentType<CfgAdditionalProductViewProps>;
-    featureFlattenComponent: React.ComponentType<CfgFeatureViewProps>;
-    featureGroupComponent: React.ComponentType<CfgFeatureViewProps>;
-    featureSelectManyComponent: React.ComponentType<CfgFeatureViewProps>;
-    optionSelectManyComponent: React.ComponentType<CfgOptionViewProps>;
-    featureSelectOneComponent: React.ComponentType<CfgFeatureViewProps>;
-    optionSelectOneComponent: React.ComponentType<CfgOptionViewProps>;
-};
-export declare const completeWithDefaultProductConfigurationComponents: <T>(incomplete: T & Partial<CfgProductConfigurationComponent>) => T & CfgProductConfigurationComponent;
-export declare const useCompleteWithDefaultProductConfigurationComponents: (incomplete: Partial<CfgProductConfigurationComponent>) => CfgProductConfigurationComponent;
-export declare type CfgProductConfigurationComponentAndPassthroughProps = PassthroughProps & CfgProductConfigurationComponent & {
-    startOpen?: boolean;
-};
-export declare const forwardProps: (props: CfgProductConfigurationComponentAndPassthroughProps) => CfgProductConfigurationComponentAndPassthroughProps;
-export declare const CfgFeatureView: React.FC<CfgFeatureViewProps & CssProps>;
-export declare const CfgFeatureViewMemo: React.NamedExoticComponent<PassthroughProps & CfgProductConfigurationComponent & {
-    startOpen?: boolean | undefined;
-} & {
-    feature: CfgFeature;
-} & CssProps>;
+import { CfgFeature, CfgOption, 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 CfgOptionViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
+    option: CfgOption;
+};
+export declare type CfgAdditionalProductViewProps = CfgProductConfigurationComponentAndPassthroughProps & {
+    product: CfgProduct;
+    permanentlyExpandedLevels: number;
+};
+export declare type CfgProductConfigurationComponent = {
+    additionalProductComponent: React.ComponentType<CfgAdditionalProductViewProps>;
+    featureFlattenComponent: React.ComponentType<CfgFeatureViewProps>;
+    featureGroupComponent: React.ComponentType<CfgFeatureViewProps>;
+    featureSelectManyComponent: React.ComponentType<CfgFeatureViewProps>;
+    optionSelectManyComponent: React.ComponentType<CfgOptionViewProps>;
+    featureSelectOneComponent: React.ComponentType<CfgFeatureViewProps>;
+    optionSelectOneComponent: React.ComponentType<CfgOptionViewProps>;
+};
+export declare const completeWithDefaultProductConfigurationComponents: <T>(incomplete: T & Partial<CfgProductConfigurationComponent>) => T & CfgProductConfigurationComponent;
+export declare const useCompleteWithDefaultProductConfigurationComponents: (incomplete: Partial<CfgProductConfigurationComponent>) => CfgProductConfigurationComponent;
+export declare type CfgProductConfigurationComponentAndPassthroughProps = PassthroughProps & CfgProductConfigurationComponent;
+export declare const forwardProps: (props: CfgProductConfigurationComponentAndPassthroughProps) => CfgProductConfigurationComponentAndPassthroughProps;
+export declare const CfgFeatureView: React.FC<CfgFeatureViewProps & CssProps>;
+export declare const CfgFeatureViewMemo: React.NamedExoticComponent<PassthroughProps & CfgProductConfigurationComponent & {
+    feature: CfgFeature;
+} & CssProps>;
 //# sourceMappingURL=CfgFeatureView.d.ts.map

package/dist/components/productConfiguration/CfgFeatureView.js

@@ -1,64 +1,60 @@
-import { SelectionType } from "@configura/web-api";
-import React, { useMemo } from "react";
-import { CfgAdditionalProductView } from "./CfgAdditionalProductView.js";
-import { CfgCheckboxesViewMemo } from "./CfgCheckboxesView.js";
-import { CfgCheckboxViewMemo } from "./CfgCheckboxView.js";
-import { CfgDropdownOptionViewMemo } from "./CfgDropdownOptionView.js";
-import { CfgDropdownViewMemo } from "./CfgDropdownView.js";
-import { CfgGroupViewMemo } from "./CfgGroupView.js";
-export const completeWithDefaultProductConfigurationComponents = (incomplete) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return (Object.assign(Object.assign({}, incomplete), { additionalProductComponent: (_a = incomplete.additionalProductComponent) !== null && _a !== void 0 ? _a : CfgAdditionalProductView, featureFlattenComponent: (_b = incomplete.featureFlattenComponent) !== null && _b !== void 0 ? _b : CfgGroupViewMemo, featureGroupComponent: (_c = incomplete.featureGroupComponent) !== null && _c !== void 0 ? _c : CfgGroupViewMemo, featureSelectManyComponent: (_d = incomplete.featureSelectManyComponent) !== null && _d !== void 0 ? _d : CfgCheckboxesViewMemo, optionSelectManyComponent: (_e = incomplete.optionSelectManyComponent) !== null && _e !== void 0 ? _e : CfgCheckboxViewMemo, featureSelectOneComponent: (_f = incomplete.featureSelectOneComponent) !== null && _f !== void 0 ? _f : CfgDropdownViewMemo, optionSelectOneComponent: (_g = incomplete.optionSelectOneComponent) !== null && _g !== void 0 ? _g : CfgDropdownOptionViewMemo }));
-};
-export const useCompleteWithDefaultProductConfigurationComponents = (incomplete) => {
-    const { additionalProductComponent, featureFlattenComponent, featureGroupComponent, featureSelectManyComponent, featureSelectOneComponent, optionSelectManyComponent, optionSelectOneComponent, } = incomplete;
-    return useMemo(() => {
-        return completeWithDefaultProductConfigurationComponents({
-            additionalProductComponent,
-            featureFlattenComponent,
-            featureGroupComponent,
-            featureSelectManyComponent,
-            featureSelectOneComponent,
-            optionSelectManyComponent,
-            optionSelectOneComponent,
-        });
-    }, [
-        additionalProductComponent,
-        featureFlattenComponent,
-        featureGroupComponent,
-        featureSelectManyComponent,
-        featureSelectOneComponent,
-        optionSelectManyComponent,
-        optionSelectOneComponent,
-    ]);
-};
-export const forwardProps = (props) => {
-    return {
-        upchargeDisplayMode: props.upchargeDisplayMode,
-        startOpen: props.startOpen,
-        additionalProductComponent: props.additionalProductComponent,
-        featureFlattenComponent: props.featureFlattenComponent,
-        featureGroupComponent: props.featureGroupComponent,
-        featureSelectManyComponent: props.featureSelectManyComponent,
-        optionSelectManyComponent: props.optionSelectManyComponent,
-        featureSelectOneComponent: props.featureSelectOneComponent,
-        optionSelectOneComponent: props.optionSelectOneComponent,
-    };
-};
-export const CfgFeatureView = (props) => {
-    const { feature, featureFlattenComponent: FlattenComponent, featureGroupComponent: GroupComponent, featureSelectManyComponent: SelectManyComponent, featureSelectOneComponent: SelectOneComponent, } = props;
-    if (!feature.visible) {
-        return React.createElement(FlattenComponent, Object.assign({}, props));
-    }
-    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, { useMemo } from "react";
+import { CfgAdditionalProductView } from "./CfgAdditionalProductView.js";
+import { CfgCheckboxesViewMemo } from "./CfgCheckboxesView.js";
+import { CfgCheckboxViewMemo } from "./CfgCheckboxView.js";
+import { CfgDropdownOptionViewMemo } from "./CfgDropdownOptionView.js";
+import { CfgDropdownViewMemo } from "./CfgDropdownView.js";
+import { CfgGroupViewMemo } from "./CfgGroupView.js";
+export const completeWithDefaultProductConfigurationComponents = (incomplete) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return (Object.assign(Object.assign({}, incomplete), { additionalProductComponent: (_a = incomplete.additionalProductComponent) !== null && _a !== void 0 ? _a : CfgAdditionalProductView, featureFlattenComponent: (_b = incomplete.featureFlattenComponent) !== null && _b !== void 0 ? _b : CfgGroupViewMemo, featureGroupComponent: (_c = incomplete.featureGroupComponent) !== null && _c !== void 0 ? _c : CfgGroupViewMemo, featureSelectManyComponent: (_d = incomplete.featureSelectManyComponent) !== null && _d !== void 0 ? _d : CfgCheckboxesViewMemo, optionSelectManyComponent: (_e = incomplete.optionSelectManyComponent) !== null && _e !== void 0 ? _e : CfgCheckboxViewMemo, featureSelectOneComponent: (_f = incomplete.featureSelectOneComponent) !== null && _f !== void 0 ? _f : CfgDropdownViewMemo, optionSelectOneComponent: (_g = incomplete.optionSelectOneComponent) !== null && _g !== void 0 ? _g : CfgDropdownOptionViewMemo }));
+};
+export const useCompleteWithDefaultProductConfigurationComponents = (incomplete) => {
+    const { additionalProductComponent, featureFlattenComponent, featureGroupComponent, featureSelectManyComponent, featureSelectOneComponent, optionSelectManyComponent, optionSelectOneComponent, } = incomplete;
+    return useMemo(() => completeWithDefaultProductConfigurationComponents({
+        additionalProductComponent,
+        featureFlattenComponent,
+        featureGroupComponent,
+        featureSelectManyComponent,
+        featureSelectOneComponent,
+        optionSelectManyComponent,
+        optionSelectOneComponent,
+    }), [
+        additionalProductComponent,
+        featureFlattenComponent,
+        featureGroupComponent,
+        featureSelectManyComponent,
+        featureSelectOneComponent,
+        optionSelectManyComponent,
+        optionSelectOneComponent,
+    ]);
+};
+export const forwardProps = (props) => ({
+    upchargeDisplayMode: props.upchargeDisplayMode,
+    startOpen: props.startOpen,
+    additionalProductComponent: props.additionalProductComponent,
+    featureFlattenComponent: props.featureFlattenComponent,
+    featureGroupComponent: props.featureGroupComponent,
+    featureSelectManyComponent: props.featureSelectManyComponent,
+    optionSelectManyComponent: props.optionSelectManyComponent,
+    featureSelectOneComponent: props.featureSelectOneComponent,
+    optionSelectOneComponent: props.optionSelectOneComponent,
+});
+export const CfgFeatureView = (props) => {
+    const { feature, featureFlattenComponent: FlattenComponent, featureGroupComponent: GroupComponent, featureSelectManyComponent: SelectManyComponent, featureSelectOneComponent: SelectOneComponent, } = props;
+    if (!feature.visible) {
+        return React.createElement(FlattenComponent, Object.assign({}, props));
+    }
+    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,7 +1,7 @@
-import React from "react";
-import { CfgFeatureViewMemo, forwardProps } from "./CfgFeatureView.js";
-export const CfgGroupView = (props) => {
-    const { feature } = props;
-    return (React.createElement(React.Fragment, null, feature.selectedOptions.map((o) => o.features.map((f) => (React.createElement(CfgFeatureViewMemo, Object.assign({ key: f.key, feature: f }, forwardProps(props))))))));
-};
-export const CfgGroupViewMemo = React.memo(CfgGroupView);
+import React from "react";
+import { CfgFeatureViewMemo, forwardProps } from "./CfgFeatureView.js";
+export const CfgGroupView = (props) => {
+    const { feature } = props;
+    return (React.createElement(React.Fragment, null, feature.selectedOptions.map((o) => 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,4 +1,4 @@
-import React from "react";
-import { CfgOptionViewProps } from "./CfgFeatureView.js";
-export declare const CfgOptionFeaturesView: React.FC<CfgOptionViewProps>;
+import React from "react";
+import { CfgOptionViewProps } from "./CfgFeatureView.js";
+export declare const CfgOptionFeaturesView: React.FC<CfgOptionViewProps>;
 //# 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,30 +1,30 @@
-import { CfgOption, NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
-import { LengthUnit } from "@configura/web-utilities";
-import React from "react";
-import { CssProps } from "../../utilities.js";
-declare type Props = {
-    option: CfgOption;
-} & CssProps;
-export declare const CfgOptionNumericView: React.FC<Props>;
-/**
- * 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>;
-export {};
+import { CfgOption, NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
+import { LengthUnit } from "@configura/web-utilities";
+import React from "react";
+import { CssProps } from "../../utilities.js";
+declare type Props = {
+    option: CfgOption;
+} & CssProps;
+export declare const CfgOptionNumericView: React.FC<Props>;
+/**
+ * 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>;
+export {};
 //# sourceMappingURL=CfgOptionNumericView.d.ts.map

package/dist/components/productConfiguration/CfgOptionNumericView.js

@@ -1,132 +1,132 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
-import React, { useContext, useEffect, useState } from "react";
-import { useRerender } from "../../useRerender.js";
-import { useUuid } from "../../useUniqueId.js";
-import { ErrorContext } from "../ErrorContext.js";
-import { Checkmark } from "../icons/Checkmark.js";
-import { ErrorIcon } from "../icons/ErrorIcon.js";
-export const CfgOptionNumericView = (props) => {
-    const { option } = props;
-    const { isUseNumericValue } = option;
-    const setError = useContext(ErrorContext);
-    // Contrary to most other components this one has its own connection to the
-    // option that is backing it. This is for it to be able to "live" update
-    // as we drag sliders. The value is not "commited" at immediate drag, and so
-    // the full machinery of validations and such is not run until later.
-    const rerender = useRerender();
-    useEffect(() => {
-        option.listenForChange(rerender);
-        return () => {
-            option.stopListenForChange(rerender);
-        };
-    }, [option, rerender]);
-    if (!isUseNumericValue) {
-        return null;
-    }
-    const { allowedNumericValues, numericValue, unit } = option;
-    if (allowedNumericValues === undefined) {
-        throw new Error("AllowedNumericValues undefined for numeric option");
-    }
-    if (numericValue === undefined) {
-        throw new Error("Numeric value not set for numeric option");
-    }
-    const { ranges } = allowedNumericValues;
-    const isSingleRange = ranges.length === 1;
-    if (isSingleRange && ranges[0] instanceof NumericValueDiscrete) {
-        return null;
-    }
-    return (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent ${props.className || ""}`, style: props.style }, ranges.map((range) => (React.createElement(NumericValueView, { currentValue: numericValue, unit: unit, range: range, key: range.first, hasNoSiblings: isSingleRange, updateValue: (value, commit) => __awaiter(void 0, void 0, void 0, function* () {
-            return yield option.setNumericValue(value, commit).catch((e) => {
-                setError(e);
-                throw e;
-            });
-        }) })))));
-};
-/**
- * Displays GUI for selecting in one "range". Please note that the range
- * parameter can also be a discrete value.
- */
-export const NumericValueView = (props) => {
-    const { range, currentValue, updateValue, hasNoSiblings } = props;
-    const { legend, first } = range;
-    const selected = range.includesValue(currentValue);
-    const optionClasses = selected ? "cfgFeatureItemOption--checked" : "";
-    const uniqueId = useUuid();
-    const [inputValue, setInputValue] = useState(first);
-    const [inputCommited, setInputCommited] = useState(true);
-    const [showRangeError, setShowRangeError] = useState(false);
-    if (inputCommited && inputValue !== currentValue && range.includesValue(currentValue)) {
-        setInputValue(currentValue);
-    }
-    function isAcceptableValue(value) {
-        return !isNaN(value) && range.includesValue(value);
-    }
-    return (React.createElement("li", { className: `cfgFeatureItem cfgMb1 ${hasNoSiblings ? "" : "cfgMt1"}` },
-        !hasNoSiblings && (React.createElement("label", { className: `cfgFeatureItemOption ${optionClasses}`, htmlFor: uniqueId },
-            React.createElement("input", { checked: selected, className: "cfgFeatureItem__hiddenInput", id: uniqueId, name: uniqueId, onChange: (event) => {
-                    if (event.target.checked) {
-                        updateValue(inputValue, true);
-                    }
-                }, type: "radio", value: first }),
-            React.createElement("div", { className: "cfgFeatureItem__radio" }, selected && React.createElement(Checkmark, null)),
-            React.createElement("div", { className: "cfgFeatureItemOption__titleWrapper" },
-                React.createElement("div", { className: "cfgFeatureItemOption__title" }, legend)))),
-        selected && range instanceof NumericValueRangeDefinition && (React.createElement(RangeView, Object.assign({}, props, { className: hasNoSiblings ? undefined : "cfgOptionTree--indent", range: range, onChange: (val, instantUpdate) => {
-                setInputValue(val);
-                if (!isAcceptableValue(inputValue)) {
-                    return;
-                }
-                if (instantUpdate) {
-                    updateValue(val, false);
-                }
-                setShowRangeError(false);
-                setInputCommited(false);
-            }, onCommit: () => {
-                if (inputCommited) {
-                    return;
-                }
-                if (!isAcceptableValue(inputValue)) {
-                    setShowRangeError(true);
-                    return;
-                }
-                updateValue(inputValue, true);
-                setShowRangeError(false);
-                setInputCommited(true);
-            }, inputValue: inputValue, showRangeError: showRangeError })))));
-};
-export const RangeView = (props) => {
-    const { currentValue, unit, inputValue, range, onChange, onCommit, showRangeError } = props;
-    const { minValue, maxValue, increment, legend } = range;
-    const getOnChange = (instant) => (event) => onChange(event.currentTarget.valueAsNumber, instant);
-    const inputProps = {
-        min: minValue,
-        max: maxValue,
-        step: increment || Math.pow(10, Math.round(Math.log10(maxValue - minValue)) - 3),
-        enterKeyHint: "enter",
-        onBlur: onCommit,
-        onMouseUp: onCommit,
-        onKeyPress: (event) => {
-            if (event.key === "Enter") {
-                onCommit();
-            }
-        },
-    };
-    return (React.createElement("div", { className: `cfgRangeView cfgMt1 ${props.className || ""}`, style: props.style },
-        React.createElement("div", { className: "cfgRangeView__inputs" },
-            React.createElement("input", Object.assign({}, inputProps, { type: "number", value: isNaN(inputValue) ? "" : inputValue, onChange: getOnChange(false), className: "cfgInput cfgRangeView__number-input" })),
-            React.createElement("span", { className: "cfgRangeView__unit-label" }, unit),
-            React.createElement("input", Object.assign({}, inputProps, { type: "range", className: "cfgSlider cfgRangeView__slider-input", value: currentValue, onChange: getOnChange(true) }))),
-        showRangeError && (React.createElement("div", { className: "cfgRangeView__error" },
-            React.createElement(ErrorIcon, null),
-            " Value not allowed, allowed values are ",
-            legend))));
-};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
+import React, { useContext, useEffect, useState } from "react";
+import { useRerender } from "../../useRerender.js";
+import { useUuid } from "../../useUniqueId.js";
+import { ErrorContext } from "../ErrorContext.js";
+import { Checkmark } from "../icons/Checkmark.js";
+import { ErrorIcon } from "../icons/ErrorIcon.js";
+export const CfgOptionNumericView = (props) => {
+    const { option } = props;
+    const { isUseNumericValue } = option;
+    const setError = useContext(ErrorContext);
+    // Contrary to most other components this one has its own connection to the
+    // option that is backing it. This is for it to be able to "live" update
+    // as we drag sliders. The value is not "commited" at immediate drag, and so
+    // the full machinery of validations and such is not run until later.
+    const rerender = useRerender();
+    useEffect(() => {
+        option.listenForChange(rerender);
+        return () => {
+            option.stopListenForChange(rerender);
+        };
+    }, [option, rerender]);
+    if (!isUseNumericValue) {
+        return null;
+    }
+    const { allowedNumericValues, numericValue, unit } = option;
+    if (allowedNumericValues === undefined) {
+        throw new Error("AllowedNumericValues undefined for numeric option");
+    }
+    if (numericValue === undefined) {
+        throw new Error("Numeric value not set for numeric option");
+    }
+    const { ranges } = allowedNumericValues;
+    const isSingleRange = ranges.length === 1;
+    if (isSingleRange && ranges[0] instanceof NumericValueDiscrete) {
+        return null;
+    }
+    return (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent ${props.className || ""}`, style: props.style }, ranges.map((range) => (React.createElement(NumericValueView, { currentValue: numericValue, unit: unit, range: range, key: range.first, hasNoSiblings: isSingleRange, updateValue: (value, commit) => __awaiter(void 0, void 0, void 0, function* () {
+            return yield option.setNumericValue(value, commit).catch((e) => {
+                setError(e);
+                throw e;
+            });
+        }) })))));
+};
+/**
+ * Displays GUI for selecting in one "range". Please note that the range
+ * parameter can also be a discrete value.
+ */
+export const NumericValueView = (props) => {
+    const { range, currentValue, updateValue, hasNoSiblings } = props;
+    const { legend, first } = range;
+    const selected = range.includesValue(currentValue);
+    const optionClasses = selected ? "cfgFeatureItemOption--checked" : "";
+    const uniqueId = useUuid();
+    const [inputValue, setInputValue] = useState(first);
+    const [inputCommited, setInputCommited] = useState(true);
+    const [showRangeError, setShowRangeError] = useState(false);
+    if (inputCommited && inputValue !== currentValue && range.includesValue(currentValue)) {
+        setInputValue(currentValue);
+    }
+    function isAcceptableValue(value) {
+        return !isNaN(value) && range.includesValue(value);
+    }
+    return (React.createElement("li", { className: `cfgFeatureItem cfgMb1 ${hasNoSiblings ? "" : "cfgMt1"}` },
+        !hasNoSiblings && (React.createElement("label", { className: `cfgFeatureItemOption ${optionClasses}`, htmlFor: uniqueId },
+            React.createElement("input", { checked: selected, className: "cfgFeatureItem__hiddenInput", id: uniqueId, name: uniqueId, onChange: (event) => {
+                    if (event.target.checked) {
+                        updateValue(inputValue, true);
+                    }
+                }, type: "radio", value: first }),
+            React.createElement("div", { className: "cfgFeatureItem__radio" }, selected && React.createElement(Checkmark, null)),
+            React.createElement("div", { className: "cfgFeatureItemOption__titleWrapper" },
+                React.createElement("div", { className: "cfgFeatureItemOption__title" }, legend)))),
+        selected && range instanceof NumericValueRangeDefinition && (React.createElement(RangeView, Object.assign({}, props, { className: hasNoSiblings ? undefined : "cfgOptionTree--indent", range: range, onChange: (val, instantUpdate) => {
+                setInputValue(val);
+                if (!isAcceptableValue(inputValue)) {
+                    return;
+                }
+                if (instantUpdate) {
+                    updateValue(val, false);
+                }
+                setShowRangeError(false);
+                setInputCommited(false);
+            }, onCommit: () => {
+                if (inputCommited) {
+                    return;
+                }
+                if (!isAcceptableValue(inputValue)) {
+                    setShowRangeError(true);
+                    return;
+                }
+                updateValue(inputValue, true);
+                setShowRangeError(false);
+                setInputCommited(true);
+            }, inputValue: inputValue, showRangeError: showRangeError })))));
+};
+export const RangeView = (props) => {
+    const { currentValue, unit, inputValue, range, onChange, onCommit, showRangeError } = props;
+    const { minValue, maxValue, increment, legend } = range;
+    const getOnChange = (instant) => (event) => onChange(event.currentTarget.valueAsNumber, instant);
+    const inputProps = {
+        min: minValue,
+        max: maxValue,
+        step: increment || Math.pow(10, Math.round(Math.log10(maxValue - minValue)) - 3),
+        enterKeyHint: "enter",
+        onBlur: onCommit,
+        onMouseUp: onCommit,
+        onKeyPress: (event) => {
+            if (event.key === "Enter") {
+                onCommit();
+            }
+        },
+    };
+    return (React.createElement("div", { className: `cfgRangeView cfgMt1 ${props.className || ""}`, style: props.style },
+        React.createElement("div", { className: "cfgRangeView__inputs" },
+            React.createElement("input", Object.assign({}, inputProps, { type: "number", value: isNaN(inputValue) ? "" : inputValue, onChange: getOnChange(false), className: "cfgInput cfgRangeView__number-input" })),
+            React.createElement("span", { className: "cfgRangeView__unit-label" }, unit),
+            React.createElement("input", Object.assign({}, inputProps, { type: "range", className: "cfgSlider cfgRangeView__slider-input", value: currentValue, onChange: getOnChange(true) }))),
+        showRangeError && (React.createElement("div", { className: "cfgRangeView__error" },
+            React.createElement(ErrorIcon, null),
+            " Value not allowed, allowed values are ",
+            legend))));
+};

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

@@ -1,10 +1,10 @@
-import { CfgOption } from "@configura/web-api";
-import React from "react";
-import { UpchargeDisplayMode } from "./CfgProductConfigurationView.js";
-declare type Props = {
-    option: CfgOption;
-    upchargeDisplayMode: UpchargeDisplayMode | undefined;
-};
-export declare const CfgOptionPriceView: React.FC<Props>;
-export {};
+import { CfgOption } from "@configura/web-api";
+import React from "react";
+import { UpchargeDisplayMode } from "./CfgProductConfigurationView.js";
+declare type Props = {
+    option: CfgOption;
+    upchargeDisplayMode: UpchargeDisplayMode | undefined;
+};
+export declare const CfgOptionPriceView: React.FC<Props>;
+export {};
 //# sourceMappingURL=CfgOptionPriceView.d.ts.map