@balena/ui-shared-components 6.1.3 → 6.1.4-build-selectwidget-filterselected-for-multiple-469d47abec00bb1e7a028e71c581353fa628518e-1

package/dist/components/Form/Widgets/SelectWidget.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormControl, Autocomplete, TextField, InputLabel, } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autocomplete, TextField } from '@mui/material';
 import isEqual from 'lodash/isEqual';
 export const SelectWidget = ({ id, label, value, disabled, name, placeholder, onChange, multiple, options, required, uiSchema, }) => {
     const _a = uiSchema !== null && uiSchema !== void 0 ? uiSchema : {}, { inputProps } = _a, otherUiSchema = __rest(_a, ["inputProps"]);
@@ -28,32 +28,37 @@ export const SelectWidget = ({ id, label, value, disabled, name, placeholder, on
     // 	    label: string;
     // 	    schema?: RJSFSchema | undefined;
     // 	}[]
-    return (_jsxs(FormControl, { children: [_jsx(InputLabel, { htmlFor: id, required: required, children: label }), _jsx(Autocomplete, Object.assign({ fullWidth: true, id: id, value: Array.isArray(value)
-                    ? selectOptions.filter((option) => value.some((v) => isEqual(option.value, v)))
-                    : value !== undefined
-                        ? selectOptions.find((option) => isEqual(option.value, value))
-                        : undefined, name,
-                placeholder,
-                multiple, disabled: disabled, options: selectOptions, isOptionEqualToValue: (option, value) => isEqual(option, value), getOptionLabel: (option) => Array.isArray(option)
-                    ? option.map((o) => o.label).join(', ')
-                    : option.label, getOptionDisabled: (option) => Array.isArray(option)
-                    ? option.some((o) => o.disabled)
-                    : option.disabled, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { inputProps: Object.assign(Object.assign({}, params.inputProps), (inputProps !== null && inputProps !== void 0 ? inputProps : {})) }))), onChange: (_event, selected) => {
-                    if (Array.isArray(selected)) {
-                        const val = selected
-                            .map((item) => {
-                            if (item && typeof item === 'object' && 'value' in item) {
-                                return item.value;
-                            }
-                            // this case cover a wrong setup, we just return undefined
-                            return undefined;
-                        })
-                            .filter((v) => v !== undefined);
-                        return onChange(val.length > 0 ? val : options.emptyValue);
+    return (_jsx(Autocomplete, Object.assign({ fullWidth: true, id: id, value: Array.isArray(value)
+            ? selectOptions.filter((option) => value.some((v) => isEqual(option.value, v)))
+            : value !== undefined
+                ? selectOptions.find((option) => isEqual(option.value, value))
+                : undefined, name,
+        placeholder,
+        multiple, filterSelectedOptions: multiple, disabled: disabled, options: selectOptions, isOptionEqualToValue: (option, value) => isEqual(option, value), getOptionLabel: (option) => Array.isArray(option)
+            ? option.map((o) => o.label).join(', ')
+            : option.label, getOptionDisabled: (option) => Array.isArray(option) ? option.some((o) => o.disabled) : option.disabled, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { inputProps: Object.assign(Object.assign({}, params.inputProps), (inputProps !== null && inputProps !== void 0 ? inputProps : {})) }, (multiple && {
+            onKeyDown: (e) => {
+                // Prevent deleting the last chip with backspace or delete https://github.com/mui/material-ui/issues/21129#issuecomment-636919142
+                if (e.key === 'Backspace' || e.key === 'Delete') {
+                    e.stopPropagation();
+                }
+            },
+        }), { label: label, required: required }))), onChange: (_event, selected) => {
+            if (Array.isArray(selected)) {
+                const val = selected
+                    .map((item) => {
+                    if (item && typeof item === 'object' && 'value' in item) {
+                        return item.value;
                     }
-                    if (selected && typeof selected === 'object' && 'value' in selected) {
-                        return onChange(selected.value === '' ? options.emptyValue : selected.value);
-                    }
-                    return onChange(options.emptyValue);
-                }, disableClearable: true }, otherUiSchema))] }));
+                    // this case cover a wrong setup, we just return undefined
+                    return undefined;
+                })
+                    .filter((v) => v !== undefined);
+                return onChange(val.length > 0 ? val : options.emptyValue);
+            }
+            if (selected && typeof selected === 'object' && 'value' in selected) {
+                return onChange(selected.value === '' ? options.emptyValue : selected.value);
+            }
+            return onChange(options.emptyValue);
+        }, disableClearable: true }, otherUiSchema)));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "6.1.3",
+  "version": "6.1.4-build-selectwidget-filterselected-for-multiple-469d47abec00bb1e7a028e71c581353fa628518e-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -112,6 +112,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2024-06-20T21:22:31.290Z"
+    "publishedAt": "2024-06-24T16:12:09.860Z"
   }
 }