@balena/ui-shared-components 12.3.4-build-renovate-virtua-ae170de1ccec9b655c424b4ed8cd7f80017d4545-1 → 12.3.4

package/dist/components/DownloadImageDialog/ImageForm.d.ts

@@ -14,7 +14,7 @@ interface ImageFormProps {
     model: DownloadImageFormModel;
     hasEsrVersions?: boolean;
     onSelectedOsTypeChange: (osType: string) => void;
-    onChange: (key: keyof DownloadImageFormModel, value: DownloadImageFormModel[keyof DownloadImageFormModel]) => void;
+    onChange: (obj: Partial<DownloadImageFormModel>) => void;
 }
 export declare const ImageForm: import("react").NamedExoticComponent<ImageFormProps>;
 export {};

package/dist/components/DownloadImageDialog/ImageForm.js

@@ -44,25 +44,42 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
     const { selectionOpts, preferredSelectionOpts } = useMemo(() => getCategorizedVersions(osVersions, model.deviceType, osType), [osVersions, model.deviceType, osType]);
     const versionSelectionOpts = useMemo(() => (showAllVersions ? selectionOpts : preferredSelectionOpts), [preferredSelectionOpts, selectionOpts, showAllVersions]);
     const showAllVersionsToggle = useMemo(() => preferredSelectionOpts.length < selectionOpts.length, [preferredSelectionOpts.length, selectionOpts.length]);
-    const handleVariantChange = useCallback((v) => {
-        setVariant(v);
-        onChange('developmentMode', v === 'dev');
-    }, [onChange]);
+    const handleVariantChange = useCallback((newVariant) => {
+        setVariant(newVariant);
+        const newState = {
+            developmentMode: newVariant === 'dev',
+        };
+        // For non-unified OS releases (ones w/ separate prod & dev releases)
+        // we also need to update raw version string, since it's different
+        // depending on the variant selected.
+        if (version === null || version === void 0 ? void 0 : version.hasPrebuiltVariants) {
+            const rawVersionForVariant = version.rawVersions[newVariant];
+            if (rawVersionForVariant != null) {
+                newState.version = rawVersionForVariant;
+            }
+        }
+        onChange(newState);
+    }, [onChange, version]);
     const handleVersionChange = useCallback((ver) => {
         var _a;
         ver !== null && ver !== void 0 ? ver : (ver = (_a = versionSelectionOpts.find((v) => v.isRecommended)) !== null && _a !== void 0 ? _a : versionSelectionOpts[0]);
+        const newState = {
+            developmentMode: variant === 'dev',
+        };
         if (ver === null || ver === void 0 ? void 0 : ver.hasPrebuiltVariants) {
+            // For non-unified OS releases (ones w/ separate prod & dev releases)
+            // we need to set the correct raw version string based on the selected variant.
             const rawVersionForVariant = ver.rawVersions[variant];
-            if (rawVersionForVariant) {
-                onChange('version', rawVersionForVariant);
-                setVersion(ver);
-            }
-            else {
+            if (!rawVersionForVariant) {
                 handleVariantChange(variant === 'dev' ? 'prod' : 'dev');
+                return;
             }
-            return;
+            newState.version = rawVersionForVariant;
+        }
+        else {
+            newState.version = ver === null || ver === void 0 ? void 0 : ver.rawVersion;
         }
-        onChange('version', ver === null || ver === void 0 ? void 0 : ver.rawVersion);
+        onChange(newState);
         setVersion(ver);
     }, [versionSelectionOpts, variant, onChange, handleVariantChange]);
     // TODO: Revisit this as it is clearly not using hooks as intended
@@ -94,7 +111,7 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
         if (!newDeviceType) {
             return;
         }
-        onChange('deviceType', newDeviceType);
+        onChange({ deviceType: newDeviceType });
     }, [compatibleDeviceTypes, model.deviceType.slug, onChange]);
     const recommendedVersion = useMemo(() => { var _a; return (_a = versionSelectionOpts.find((v) => { var _a; return !((_a = v.knownIssueList) === null || _a === void 0 ? void 0 : _a.length); })) === null || _a === void 0 ? void 0 : _a.value; }, [versionSelectionOpts]);
     return (_jsxs(Stack, { action: downloadUrl, method: "post", component: "form", noValidate: true, autoComplete: "off", ref: formElement, gap: 3, children: [_jsx("input", { type: "hidden", name: "deviceType", value: model.deviceType.slug }), _jsx("input", { type: "hidden", name: "_token", value: authToken }), _jsx("input", { type: "hidden", name: "appId", value: applicationId }), _jsx("input", { type: "hidden", name: "fileType", value: ".zip" }), _jsx("input", { type: "hidden", name: "version", value: model.version }), _jsxs(Stack, { direction: "row", flexWrap: "wrap", gap: 2, children: [compatibleDeviceTypes && compatibleDeviceTypes.length > 1 && (_jsx(Autocomplete, { fullWidth: true, value: model.deviceType, options: compatibleDeviceTypes, getOptionLabel: (option) => option.name, renderOption: (props, option) => {
@@ -129,14 +146,17 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                         sx: { mt: 3 } }))] })), _jsx(Divider, { variant: "fullWidth", flexItem: true, sx: { borderStyle: 'dashed' } }), (!isInitialDefault || !variant) && (_jsx(VariantSelector, { version: version, variant: variant, onVariantChange: (v) => {
                     handleVariantChange(v ? 'dev' : 'prod');
                 } })), _jsx(Divider, { variant: "fullWidth", flexItem: true, sx: { borderStyle: 'dashed' } }), _jsxs(Stack, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { id: "network-radio-buttons-group-label", children: _jsx(Typography, { variant: "titleSm", children: "Network" }) }), _jsxs(RadioGroup, { "aria-labelledby": "network-radio-buttons-group-label", value: model.network, name: "network", onChange: (event) => {
-                                    onChange('network', event.target.value);
+                                    onChange({
+                                        network: event.target
+                                            .value,
+                                    });
                                 }, children: [_jsx(FormControlLabel, { value: "ethernet", control: _jsx(Radio, {}), label: "Ethernet only" }), _jsx(FormControlLabel, { value: "wifi", control: _jsx(Radio, {}), label: "Wifi + Ethernet" })] })] }), model.network === 'wifi' && (_jsxs(Stack, { gap: 3, children: [_jsx(TextField, { value: model.wifiSsid, id: "device-wifi-ssid", slotProps: {
                                     htmlInput: {
                                         name: 'wifiSsid',
                                         autoComplete: 'wifiSsid-auto-complete',
                                     },
                                 }, onChange: (event) => {
-                                    onChange('wifiSsid', event.target.value);
+                                    onChange({ wifiSsid: event.target.value });
                                 }, label: "WiFi SSID" }), _jsx(TextField, { type: showPassword ? 'text' : 'password', id: "device-wifi-password", value: model.wifiKey, slotProps: {
                                     htmlInput: {
                                         name: 'wifiKey',
@@ -150,7 +170,7 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                                                 }, edge: "end", children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) })),
                                     },
                                 }, onChange: (event) => {
-                                    onChange('wifiKey', event.target.value);
+                                    onChange({ wifiKey: event.target.value });
                                 }, label: "Wifi Passphrase" })] }))] }), _jsx(Divider, { variant: "fullWidth", sx: { borderStyle: 'dashed' } }), _jsxs(Accordion, { disableGutters: true, elevation: 0, expanded: showAdvancedSettings, onChange: () => {
                     setShowAdvancedSettings(!showAdvancedSettings);
                 }, sx: {
@@ -167,7 +187,9 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                                         autoComplete: 'appUpdatePollInterval-auto-complete',
                                     },
                                 }, onChange: (event) => {
-                                    onChange('appUpdatePollInterval', event.target.value);
+                                    onChange({
+                                        appUpdatePollInterval: parseInt(event.target.value, 10),
+                                    });
                                 }, label: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, { href: POLL_INTERVAL_DOCS, sx: {
                                                 display: 'flex',
                                                 alignItems: 'center',
@@ -178,14 +200,14 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                                         autoComplete: 'provisioningKeyName-auto-complete',
                                     },
                                 }, onChange: (event) => {
-                                    onChange('provisioningKeyName', event.target.value);
+                                    onChange({ provisioningKeyName: event.target.value });
                                 }, label: "Provisioning Key name" }), _jsx(TextField, { type: "date", value: (_b = model.provisioningKeyExpiryDate) !== null && _b !== void 0 ? _b : '', slotProps: {
                                     htmlInput: {
                                         name: 'provisioningKeyExpiryDate',
                                         autoComplete: 'provisioningKeyExpiryDate-auto-complete',
                                     },
                                 }, onChange: (event) => {
-                                    onChange('provisioningKeyExpiryDate', event.target.value);
+                                    onChange({ provisioningKeyExpiryDate: event.target.value });
                                 }, label: "Provisioning Key expiring on" })] })] })] }));
 });
 // TODO: We need a better way than just copying the styling. Consider creating a component to export

package/dist/components/DownloadImageDialog/index.js

@@ -242,13 +242,13 @@ export const DownloadImageDialog = ({ open, applicationId, releaseId, compatible
     const setOsTypeCallback = useCallback((osT) => {
         setOsType(osT);
     }, []);
-    const handleChange = useCallback((key, value) => {
+    const handleChange = useCallback((updatedProps) => {
         let newFormModelState;
-        if (key === 'deviceType') {
-            newFormModelState = getInitialState(value, applicationId, releaseId);
+        if (updatedProps.deviceType != null) {
+            newFormModelState = getInitialState(updatedProps.deviceType, applicationId, releaseId);
         }
         else {
-            newFormModelState = Object.assign(Object.assign({}, formModel), { [key]: value });
+            newFormModelState = Object.assign(Object.assign({}, formModel), updatedProps);
             onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(newFormModelState);
         }
         setFormModel(newFormModelState);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "12.3.4-build-renovate-virtua-ae170de1ccec9b655c424b4ed8cd7f80017d4545-1",
+  "version": "12.3.4",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -50,7 +50,7 @@
     "rimraf": "^6.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.8.2",
-    "virtua": "^0.40.0",
+    "virtua": "^0.37.3",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
@@ -138,6 +138,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-04-24T14:06:33.910Z"
+    "publishedAt": "2025-04-24T13:53:05.428Z"
   }
 }