Bind List/MultipleSelect/Checkboxes to a repeating group

src/app-components/Label/Label.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import type { JSX, PropsWithChildren, ReactElement } from 'react';
 
 import { Label as DesignsystemetLabel } from '@digdir/designsystemet-react';
@@ -22,19 +22,22 @@ type LabelProps = {
   style?: DesignsystemetLabelProps['style'];
 };
 
-export function Label({
-  label,
-  htmlFor,
-  required,
-  requiredIndicator,
-  optionalIndicator,
-  help,
-  description,
-  className,
-  grid,
-  style,
-  children,
-}: PropsWithChildren<LabelProps>) {
+export const Label = forwardRef<HTMLLabelElement, PropsWithChildren<LabelProps>>(function Label(
+  {
+    label,
+    htmlFor,
+    required,
+    requiredIndicator,
+    optionalIndicator,
+    help,
+    description,
+    className,
+    grid,
+    style,
+    children,
+  },
+  ref,
+) {
   if (!label) {
     return children;
   }
@@ -52,6 +55,7 @@ export function Label({
         <span className={classes.labelAndDescWrapper}>
           <span className={classes.labelAndHelpWrapper}>
             <DesignsystemetLabel
+              ref={ref}
               weight='medium'
               size='md'
               htmlFor={htmlFor}
@@ -72,4 +76,4 @@ export function Label({
       {children}
     </Flex>
   );
-}
+});

src/components/label/LabelContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import cn from 'classnames';
 
@@ -23,16 +23,10 @@ export type LabelContentProps = Readonly<{
   labelSettings?: ILabelSettings;
 }> & { className?: string };
 
-export function LabelContent({
-  componentId,
-  label,
-  description,
-  required,
-  readOnly,
-  help,
-  labelSettings,
-  className,
-}: LabelContentProps) {
+export const LabelContent = forwardRef<HTMLSpanElement, LabelContentProps>(function LabelContent(
+  { componentId, label, description, required, readOnly, help, labelSettings, className },
+  ref,
+) {
   const { overrideDisplay } = useFormComponentCtx() ?? {};
   const { elementAsString } = useLanguage();
 
@@ -41,7 +35,10 @@ export function LabelContent({
   }
 
   return (
-    <span className={cn(classes.labelWrapper, className)}>
+    <span
+      className={cn(classes.labelWrapper, className)}
+      ref={ref}
+    >
       <span className={classes.labelContainer}>
         <span className={classes.labelContent}>
           {typeof label === 'string' ? <Lang id={label} /> : label}
@@ -70,4 +67,4 @@ export function LabelContent({
       )}
     </span>
   );
-}
+});

src/features/alertOnChange/DeleteWarningPopover.module.css

@@ -1,3 +1,6 @@
+.popoverContent {
+  z-index: 1700;
+}
 .popoverButtonContainer {
   display: flex;
   flex-direction: row;

src/features/alertOnChange/DeleteWarningPopover.tsx

@@ -35,7 +35,7 @@ export function DeleteWarningPopover({
       onOpenChange={() => setOpen(!open)}
     >
       <Popover.Trigger asChild>{children}</Popover.Trigger>
-      <Popover.Content>
+      <Popover.Content className={classes.popoverContent}>
         <div>{messageText}</div>
         <div className={classes.popoverButtonContainer}>
           <Button

src/features/devtools/layoutValidation/types.ts

@@ -1,12 +1,12 @@
 import type { lookupBindingInSchema } from 'src/features/datamodel/SimpleSchemaTraversal';
 import type { IDataModelReference } from 'src/layout/common.generated';
-import type { CompIntermediate, CompTypes } from 'src/layout/layout';
+import type { CompIntermediateExact, CompTypes } from 'src/layout/layout';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 import type { NodeDataSelector } from 'src/utils/layout/NodesContext';
 
 export interface LayoutValidationCtx<T extends CompTypes> {
   node: LayoutNode<T>;
-  item: CompIntermediate<T>;
+  item: CompIntermediateExact<T>;
   nodeDataSelector: NodeDataSelector;
   lookupBinding(reference: IDataModelReference): ReturnType<typeof lookupBindingInSchema>;
 }

src/features/saveToGroup/ObjectToGroupLayoutValidator.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+
+import { useLanguage } from 'src/features/language/useLanguage';
+import { NodesInternal } from 'src/utils/layout/NodesContext';
+import type { NodeValidationProps } from 'src/layout/layout';
+
+export function ObjectToGroupLayoutValidator(props: NodeValidationProps<'List' | 'Checkboxes' | 'MultipleSelect'>) {
+  const { node, externalItem } = props;
+  const { langAsString } = useLanguage();
+  const group = externalItem.dataModelBindings?.group;
+  const deletionStrategy = externalItem.deletionStrategy;
+  const checkedBinding = externalItem.dataModelBindings?.checked;
+
+  const addError = NodesInternal.useAddError();
+
+  useEffect(() => {
+    let error: string | null = null;
+
+    if (!group) {
+      if (!!deletionStrategy || !!checkedBinding) {
+        error = langAsString('config_error.deletion_strategy_no_group');
+      }
+    } else if (group) {
+      if (!deletionStrategy) {
+        error = langAsString('config_error.group_no_deletion_strategy');
+      }
+      if (deletionStrategy === 'soft' && !checkedBinding) {
+        error = langAsString('config_error.soft_delete_no_checked');
+      }
+      if (deletionStrategy === 'hard' && !!checkedBinding) {
+        error = langAsString('config_error.hard_delete_with_checked');
+      }
+    }
+
+    if (error) {
+      addError(error, node);
+      window.logErrorOnce(`Validation error for '${node.id}': ${error}`);
+    }
+  }, [addError, node, deletionStrategy, checkedBinding, langAsString, group]);
+
+  return null;
+}

src/features/saveToGroup/layoutValidation.ts

@@ -0,0 +1,40 @@
+import { lookupErrorAsText } from 'src/features/datamodel/lookupErrorAsText';
+import type { LayoutValidationCtx } from 'src/features/devtools/layoutValidation/types';
+import type { FormComponent } from 'src/layout/LayoutComponent';
+
+export function validateSimpleBindingWithOptionalGroup<T extends 'Checkboxes' | 'MultipleSelect'>(
+  def: FormComponent<T>,
+  ctx: LayoutValidationCtx<T>,
+) {
+  const errors: string[] = [];
+  const allowedLeafTypes = ['string', 'boolean', 'number', 'integer'];
+  const dataModelBindings = ctx.item.dataModelBindings ?? {};
+  const groupBinding = dataModelBindings?.group;
+  const simpleBinding = dataModelBindings?.simpleBinding;
+
+  if (groupBinding) {
+    const [groupErrors] = def.validateDataModelBindingsAny(ctx, 'group', ['array'], false);
+    errors.push(...(groupErrors || []));
+
+    if (!simpleBinding.field.startsWith(`${groupBinding.field}.`)) {
+      errors.push(`simpleBinding must start with the group binding field (must point to a property inside the group)`);
+    }
+    const simpleBindingsWithoutGroup = simpleBinding.field.replace(`${groupBinding.field}.`, '');
+    const fieldWithIndex = `${groupBinding.field}[0].${simpleBindingsWithoutGroup}`;
+    const [schema, err] = ctx.lookupBinding({
+      field: fieldWithIndex,
+      dataType: simpleBinding.dataType,
+    });
+
+    if (err) {
+      errors.push(lookupErrorAsText(err));
+    } else if (typeof schema?.type !== 'string' || !allowedLeafTypes.includes(schema.type)) {
+      errors.push(`Field ${simpleBinding} in group must be one of types ${allowedLeafTypes.join(', ')}`);
+    }
+  } else {
+    const [newErrors] = def.validateDataModelBindingsSimple(ctx);
+    errors.push(...(newErrors || []));
+  }
+
+  return errors;
+}

src/features/saveToGroup/useSaveToGroup.ts

@@ -0,0 +1,162 @@
+import dot from 'dot-object';
+import { v4 as uuidv4 } from 'uuid';
+
+import { FD } from 'src/features/formData/FormDataWrite';
+import { ALTINN_ROW_ID } from 'src/features/formData/types';
+import type { IDataModelBindingsForGroupCheckbox } from 'src/layout/Checkboxes/config.generated';
+import type { IDataModelReference } from 'src/layout/common.generated';
+import type { IDataModelBindingsForList } from 'src/layout/List/config.generated';
+import type { IDataModelBindingsForGroupMultiselect } from 'src/layout/MultipleSelect/config.generated';
+
+type Row = Record<string, unknown>;
+
+interface Bindings {
+  group?: IDataModelReference;
+  checked?: IDataModelReference;
+  values: Record<string, IDataModelReference>;
+}
+
+function toRelativePath(group: IDataModelReference | undefined, binding: IDataModelReference | undefined) {
+  if (group && binding && binding.field.startsWith(`${group.field}.`)) {
+    return binding.field.substring(group.field.length + 1);
+  }
+  return undefined;
+}
+
+function isEqual({ group, values }: Bindings, source: Row, formDataRow: Row) {
+  for (const key in values) {
+    const path = toRelativePath(group, values[key]);
+    if (path && source[key] !== dot.pick(path, formDataRow)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function findRowInFormData(
+  bindings: Bindings,
+  row: Row,
+  formData: Row[] | undefined,
+): [number | undefined, Row | undefined] {
+  for (const [index, formDataRow] of formData?.entries() ?? []) {
+    if (isEqual(bindings, row, formDataRow)) {
+      return [index, formDataRow];
+    }
+  }
+
+  return [undefined, undefined];
+}
+
+function useSaveToGroup(bindings: Bindings) {
+  const { group, checked, values } = bindings;
+  const formData = FD.useFreshBindings(group ? { group } : {}, 'raw').group as Row[] | undefined;
+  const setLeafValue = FD.useSetLeafValue();
+  const appendToList = FD.useAppendToList();
+  const removeFromList = FD.useRemoveIndexFromList();
+  const checkedPath = toRelativePath(group, checked);
+
+  function toggle(row: Row): void {
+    if (!group) {
+      return;
+    }
+
+    const [index, formDataRow] = findRowInFormData(bindings, row, formData);
+    const isChecked = !!(checkedPath ? dot.pick(checkedPath, formDataRow) : true);
+    if (isChecked) {
+      if (checked && checkedPath) {
+        const field = `${group.field}[${index}].${checkedPath}`;
+        setLeafValue({ reference: { ...checked, field }, newValue: false });
+      } else if (index !== undefined) {
+        removeFromList({ reference: group, index });
+      }
+    } else {
+      if (checked && checkedPath && index !== undefined) {
+        const field = `${group.field}[${index}].${checkedPath}`;
+        setLeafValue({ reference: { ...checked, field }, newValue: true });
+      } else {
+        const uuid = uuidv4();
+        const newRow: Row = { [ALTINN_ROW_ID]: uuid };
+        if (checkedPath) {
+          dot.str(checkedPath, true, newRow);
+        }
+        for (const key in values) {
+          const path = toRelativePath(group, values[key]);
+          if (path) {
+            dot.str(path, row[key], newRow);
+          }
+        }
+        appendToList({ reference: group, newValue: newRow });
+      }
+    }
+  }
+
+  return { toggle, formData, checkedPath, enabled: !!group };
+}
+
+/**
+ * Hook used to store List-component objects (rows from the DataList API) to a repeating group
+ * structure in the data model (aka object[])
+ */
+export function useSaveObjectToGroup(listBindings: IDataModelBindingsForList) {
+  const values: Record<string, IDataModelReference> = {};
+  for (const key in listBindings) {
+    const binding = listBindings[key];
+    if (key !== 'group' && key !== 'checked' && binding) {
+      values[key] = binding;
+    }
+  }
+  const bindings: Bindings = { group: listBindings.group, checked: listBindings.checked, values };
+  const { formData, enabled, toggle, checkedPath } = useSaveToGroup(bindings);
+
+  function isChecked(row: Row) {
+    const [, formDataObject] = findRowInFormData(bindings, row, formData);
+    if (checkedPath && formDataObject) {
+      return !!dot.pick(checkedPath, formDataObject);
+    }
+    return false;
+  }
+
+  return { toggle, isChecked, enabled };
+}
+
+/**
+ * Hook used to store simple values to a repeating group structure in the data model (aka. object[])
+ */
+export function useSaveValueToGroup(
+  bindings: IDataModelBindingsForGroupCheckbox | IDataModelBindingsForGroupMultiselect,
+) {
+  const { formData, enabled, toggle, checkedPath } = useSaveToGroup({
+    group: bindings.group,
+    checked: bindings.checked,
+    values: bindings.simpleBinding ? { value: bindings.simpleBinding } : {},
+  });
+  const valuePath = toRelativePath(bindings.group, bindings.simpleBinding);
+
+  const selectedValues =
+    valuePath && enabled && formData
+      ? formData
+          .filter((row) => (checkedPath ? dot.pick(checkedPath, row) : true))
+          .map((row) => `${dot.pick(valuePath, row)}`)
+      : [];
+
+  function toggleValue(value: string) {
+    enabled && toggle({ value });
+  }
+
+  function setCheckedValues(values: string[]) {
+    if (!enabled) {
+      return;
+    }
+
+    const valuesToSet = values.filter((value) => !selectedValues.includes(value));
+    const valuesToRemove = selectedValues.filter((value) => !values.includes(value));
+    const valuesToToggle = [...valuesToSet, ...valuesToRemove];
+
+    for (const value of valuesToToggle) {
+      toggle({ value });
+    }
+  }
+
+  return { selectedValues, toggleValue, setCheckedValues, enabled };
+}

src/language/texts/en.ts

@@ -374,6 +374,11 @@ export function en() {
       "Data type '{0}' is marked as 'disallowUserCreate=true', but the subform component is configured with 'showAddButton=true'. This is a contradiction, as the user will never be permitted to perform the add-button operation.",
     'config_error.file_upload_same_binding':
       'There are multiple FileUpload components with the same data model binding. Each component must have a unique binding. Other components with the same binding: {0}',
+    'config_error.deletion_strategy_no_group':
+      'The fields deletionStrategy and checked can only be used together with group.',
+    'config_error.group_no_deletion_strategy': 'When you have set group, you must also set deletionStrategy.',
+    'config_error.soft_delete_no_checked': 'When you have set deletionStrategy to soft, you must also set "checked".',
+    'config_error.hard_delete_with_checked': 'When you have set deletionStrategy to hard, you cannot set "checked".',
     'version_error.version_mismatch': 'Version mismatch',
     'version_error.version_mismatch_message':
       'This version of the app frontend is not compatible with the version of the backend libraries you are using. Update to the latest version of the packages and try again.',