@balena/ui-shared-components 12.3.2-build-fix-non-unified-os-release-variant-selection-90cd58ee804ea7899167b6feb1468e8a2e6beb56-1 → 12.3.2-build-fix-non-unified-os-release-variant-selection-da43c55fce8efff9448ca4ad4807613647f1195f-1

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

@@ -48,30 +48,35 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
     const showAllVersionsToggle = useMemo(() => preferredSelectionOpts.length < selectionOpts.length, [preferredSelectionOpts.length, selectionOpts.length]);
     const handleVariantChange = useCallback((newVariant) => {
         setVariant(newVariant);
-        onChange('developmentMode', newVariant === 'dev');
+        const newState = {
+            developmentMode: newVariant === 'dev',
+        };
         if (version === null || version === void 0 ? void 0 : version.hasPrebuiltVariants) {
             const rawVersionForVariant = version.rawVersions[newVariant];
-            if (rawVersionForVariant != null &&
-                rawVersionForVariant !== version.value) {
-                onChange('version', rawVersionForVariant);
+            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) {
             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
@@ -103,7 +108,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(Box, { action: downloadUrl, method: "post", component: "form", noValidate: true, autoComplete: "off", p: 2, ref: formElement, 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(Box, { py: 3, display: "flex", flexWrap: "wrap", gap: 2, children: [compatibleDeviceTypes && compatibleDeviceTypes.length > 1 && (_jsxs(Box, { display: "flex", flexDirection: "column", flex: "1", maxWidth: "100%", children: [_jsxs(InputLabel, { htmlFor: "device-type-select", sx: { display: 'flex', alignItems: 'center', mb: 2 }, children: ["Select device type", ' ', _jsx(Tooltip, { title: "Applications can support any devices that share the same architecture as their default device type.", children: _jsx(HelpIcon, { color: "info", sx: { fontSize: '1rem', marginLeft: 1 } }) })] }), _jsx(Autocomplete, { fullWidth: true, id: "device-type-select", value: model.deviceType, options: compatibleDeviceTypes, getOptionLabel: (option) => option.name, renderOption: (props, option) => {
@@ -134,14 +139,17 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                         height: 54, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "e2e-show-all-versions-check", checked: showAllVersions, onChange: handleShowAllVersions }), label: "Show outdated versions" }) }))] })), (!isInitialDefault || !variant) && (_jsx(Box, { sx: { mt: 3 }, children: _jsx(VariantSelector, { version: version, variant: variant, onVariantChange: (v) => {
                         handleVariantChange(v ? 'dev' : 'prod');
                     } }) })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { id: "network-radio-buttons-group-label", 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(_Fragment, { children: [_jsx(InputLabel, { htmlFor: "device-wifi-ssid", sx: { mb: 2 }, children: "WiFi SSID" }), _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 });
                                 } }), _jsx(InputLabel, { htmlFor: "device-wifi-password", sx: { my: 2 }, children: "Wifi Passphrase" }), _jsx(TextField, { type: showPassword ? 'text' : 'password', id: "device-wifi-password", value: model.wifiKey, slotProps: {
                                     htmlInput: {
                                         name: 'wifiKey',
@@ -155,7 +163,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 });
                                 } })] }))] }), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, { onClick: () => {
                     setShowAdvancedSettings(!showAdvancedSettings);
                 }, variant: "outlined", sx: { mb: 2 }, children: [showAdvancedSettings ? _jsx(RemoveIcon, {}) : _jsx(AddIcon, {}), " Advanced settings"] }), _jsx(Collapse, { in: showAdvancedSettings, collapsedSize: 0, children: _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsxs(FormControl, { children: [_jsxs(FormLabel, { htmlFor: "poll-interval-label", sx: { display: 'flex' }, children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, { href: POLL_INTERVAL_DOCS, sx: {
@@ -168,21 +176,23 @@ 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),
+                                        });
                                     } })] }), _jsx(InputLabel, { htmlFor: "provision-key-name", sx: { my: 2 }, children: "Provisioning Key name" }), _jsx(TextField, { name: "provisioningKeyName", id: "provision-key-name", value: (_a = model.provisioningKeyName) !== null && _a !== void 0 ? _a : '', slotProps: {
                                 htmlInput: {
                                     name: 'provisioningKeyName',
                                     autoComplete: 'provisioningKeyName-auto-complete',
                                 },
                             }, onChange: (event) => {
-                                onChange('provisioningKeyName', event.target.value);
+                                onChange({ provisioningKeyName: event.target.value });
                             } }), _jsx(InputLabel, { htmlFor: "provision-key-expiring", sx: { my: 2 }, children: "Provisioning Key expiring on" }), _jsx(TextField, { type: "date", id: "provision-key-expiring", 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 });
                             } })] }) })] }));
 });
 // 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.2-build-fix-non-unified-os-release-variant-selection-90cd58ee804ea7899167b6feb1468e8a2e6beb56-1",
+  "version": "12.3.2-build-fix-non-unified-os-release-variant-selection-da43c55fce8efff9448ca4ad4807613647f1195f-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -138,6 +138,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-04-23T15:21:12.813Z"
+    "publishedAt": "2025-04-24T13:20:07.505Z"
   }
 }