Update lockfile preactversion to 10.15.1 and fix null default options serialization issue

package.json

@@ -75,6 +75,7 @@
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/preact": "^3.2.3",
+    "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.19",
     "@types/mocha": "^10.0.8",
     "@types/node": "^22.7.0",

packages/form-js-editor/src/features/palette/components/Palette.js

@@ -51,6 +51,7 @@ export function Palette(props) {
 
   const [searchTerm, setSearchTerm] = useState('');
 
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = useRef();
 
   const groups = groupEntries(paletteEntries);

packages/form-js-editor/src/features/properties-panel/entries/DefaultValueEntry.js

@@ -16,7 +16,7 @@ import { useService } from '../hooks';
 import { countDecimals, INPUTS, isValidNumber, OPTIONS_INPUTS } from '../Util';
 import { useCallback } from 'preact/hooks';
 
-export const EMPTY_OPTION = null;
+export const EMPTY_OPTION = '';
 
 export function DefaultValueEntry(props) {
   const { editField, field } = props;

packages/form-js-editor/src/render/components/FormEditor.js

@@ -87,6 +87,7 @@ function Element(props) {
 
   const { id, type, showOutline } = field;
 
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const ref = useRef();
 
   const [hovered, setHovered] = useState(false);

packages/form-js-editor/test/helper/index.js

@@ -4,7 +4,7 @@ import { FormEditorContext } from '../../src/render/context';
 
 import { createMockInjector } from './mocks';
 
-import { act } from 'preact/test-utils';
+import { act } from '@testing-library/preact/pure';
 
 import TestContainer from 'mocha-test-container-support';
 

packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js

@@ -216,7 +216,7 @@ export class RepeatRenderManager {
  * @param {Object} props.itemValue
  * @param {Object} props.parentExpressionContextInfo
  * @param {Object} props.repeaterField
- * @param {Function} props.RowsRenderer
+ * @param {import('preact').FunctionComponent} props.RowsRenderer
  * @param {Object} props.indexes
  * @param {Function} props.onDeleteItem
  * @param {boolean} props.showRemove

packages/form-js-viewer/src/render/components/form-fields/Checklist.js

@@ -21,6 +21,7 @@ export function Checklist(props) {
 
   const { description, label, validate = {} } = field;
 
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const outerDivRef = useRef();
 
   const { required } = validate;

packages/form-js-viewer/src/render/components/form-fields/Datetime.js

@@ -46,6 +46,8 @@ export function Datetime(props) {
 
   const { required } = validate;
   const { formId } = useContext(FormContext);
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const dateTimeGroupRef = useRef();
 
   const [dateTime, setDateTime] = useState(getNullDateTime());

packages/form-js-viewer/src/render/components/form-fields/Number.js

@@ -26,6 +26,7 @@ export function Numberfield(props) {
 
   const { required } = validate;
 
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = useRef();
 
   const [cachedValue, setCachedValue] = useState(value);

packages/form-js-viewer/src/render/components/form-fields/Radio.js

@@ -21,6 +21,7 @@ export function Radio(props) {
 
   const { description, label, validate = {} } = field;
 
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const outerDivRef = useRef();
 
   const { required } = validate;

packages/form-js-viewer/src/render/components/form-fields/Table.js

@@ -41,8 +41,7 @@ export function Table(props) {
   const { field } = props;
   const { columns = [], columnsExpression, dataSource = '', rowCount, id, label } = field;
 
-  /** @type {[(null|Sorting), import("preact/hooks").StateUpdater<null|Sorting>]} */
-  const [sortBy, setSortBy] = useState(null);
+  const [sortBy, setSortBy] = useState(/** @type {Sorting | null} */ null);
   const evaluatedColumns = useEvaluatedColumns(columnsExpression || '', columns);
   const columnKeys = evaluatedColumns.map(({ key }) => key);
   const evaluatedDataSource = useExpressionEvaluation(dataSource);

packages/form-js-viewer/src/render/components/form-fields/Taglist.js

@@ -34,7 +34,11 @@ export function Taglist(props) {
   const [filter, setFilter] = useState('');
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
   const [isEscapeClosed, setIsEscapeClose] = useState(false);
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const focusScopeRef = useRef();
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = useRef();
   const eventBus = useService('eventBus');
 

packages/form-js-viewer/src/render/components/form-fields/parts/Datepicker.js

@@ -24,7 +24,10 @@ export function Datepicker(props) {
     setDate,
   } = props;
 
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const dateInputRef = useRef();
+
+  /** @type {import("preact").RefObject<HTMLElement>} */
   const focusScopeRef = useRef();
 
   const [flatpickrInstance, setFlatpickrInstance] = useState(null);

packages/form-js-viewer/src/render/components/form-fields/parts/DropdownList.js

@@ -19,7 +19,11 @@ export function DropdownList(props) {
   const [mouseControl, setMouseControl] = useState(false);
   const [focusedValueIndex, setFocusedValueIndex] = useState(initialFocusIndex);
   const [smoothScrolling, setSmoothScrolling] = useState(false);
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const dropdownContainer = useRef();
+
+  /** @type {import("preact").RefObject<{ x: number, y: number }>} */
   const mouseScreenPos = useRef();
 
   const focusedItem = useMemo(() => (values.length ? values[focusedValueIndex] : null), [focusedValueIndex, values]);

packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js

@@ -17,6 +17,8 @@ export function SearchableSelect(props) {
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
   const [isFilterActive, setIsFilterActive] = useState(true);
   const [isEscapeClosed, setIsEscapeClose] = useState(false);
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const searchbarRef = useRef();
   const eventBus = useService('eventBus');
 

packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js

@@ -15,6 +15,8 @@ export function SimpleSelect(props) {
 
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
   const selectRef = useRef();
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = useRef();
 
   const { loadState, options } = useOptionsAsync(field);

packages/form-js-viewer/src/render/hooks/useDeepCompareMemoize.js

@@ -9,6 +9,7 @@ import isEqual from 'lodash/isEqual';
  * @returns {T} - Returns the current state.
  */
 export function useDeepCompareMemoize(value) {
+  /** @type {import("preact").RefObject<T>} */
   const ref = useRef();
 
   if (!isEqual(value, ref.current)) {

packages/form-js-viewer/test/spec/Form.spec.js

@@ -1,4 +1,5 @@
 import { act, fireEvent, screen, waitFor } from '@testing-library/preact/pure';
+import userEvent from '@testing-library/user-event';
 
 import { createForm, Form, schemaVersion } from '../../src';
 
@@ -666,12 +667,11 @@ describe('Form', function () {
       const elements = container.querySelector('.fjs-element').querySelectorAll('.fjs-element');
       const element = elements[index];
       const focusTarget = element.querySelector(selector);
+      const formRoot = container.querySelector('.fjs-form');
 
       // when
-      await act(() => {
-        fireEvent.focus(focusTarget);
-        fireEvent.blur(focusTarget);
-      });
+      await userEvent.click(focusTarget);
+      await userEvent.click(formRoot);
 
       // then
       expect(focusSpy).to.have.been.calledWithMatch({ formField });

packages/form-js-viewer/test/spec/render/components/FormField.spec.js

@@ -1,4 +1,5 @@
 import { fireEvent, render } from '@testing-library/preact/pure';
+import userEvent from '@testing-library/user-event';
 
 import { classes } from 'min-dom';
 
@@ -266,8 +267,8 @@ describe('FormField', function () {
   });
 
   describe('eager validation', function () {
-    it('should trigger validation on blur', function () {
-      // when
+    it('should trigger validation on blur', async function () {
+      // given
       const setStateSpy = sinon.spy();
       const { container } = createFormField({
         field: {
@@ -277,15 +278,17 @@ describe('FormField', function () {
         validationErrors: ['validation-error'],
       });
 
-      // then
       const formField = container.querySelector('.fjs-form-field');
       expect(formField).to.exist;
 
       const input = container.querySelector('input[type="text"]');
       expect(setStateSpy).not.to.have.been.called;
 
+      // when
+      await userEvent.click(input);
+      await userEvent.tab();
+
       // then
-      fireEvent.blur(input);
       expect(setStateSpy).to.have.been.calledWith({
         errors: {
           Creditor_ID: ['validation-error'],