Rebuilding hideEmptyFields in Summary2

src/app-components/Flex/Flex.tsx

@@ -51,17 +51,13 @@ export const Flex = forwardRef<HTMLDivElement, Props>(
 
     const styles: CSSProperties | undefined = container
       ? {
-          display: 'flex',
           flexDirection: direction,
           flexWrap,
           justifyContent,
           alignItems,
           ...style,
         }
-      : {
-          display: 'block',
-          ...style,
-        };
+      : style;
 
     return (
       <Tag

src/features/form/layout/LayoutsContext.tsx

@@ -97,7 +97,7 @@ export function useLayoutSetId() {
   return layoutSetId ?? currentProcessLayoutSetId;
 }
 
-export function useDataTypeFromLayoutSet(layoutSetName: string) {
+export function useDataTypeFromLayoutSet(layoutSetName: string | undefined) {
   const layoutSets = useLayoutSets();
   return layoutSets.find((set) => set.id === layoutSetName)?.dataType;
 }

src/features/pdf/PdfView2.tsx

@@ -198,7 +198,7 @@ function PdfForNode({ nodeId }: { nodeId: string }) {
 
   const betaEnabled = getFeature('betaPDFenabled');
   if (betaEnabled.value) {
-    return <ComponentSummary componentNode={node} />;
+    return <ComponentSummary target={node} />;
   }
 
   return (

src/layout/AddToList/index.tsx

@@ -17,7 +17,7 @@ export class AddToList extends AddToListDef {
     return <AddToListFeatureFlagLayoutValidator {...props} />;
   }
   renderSummary(_: SummaryRendererProps<'AddToList'>): JSX.Element | null {
-    return <div>summary</div>;
+    return <div>summary</div>; // TODO: Implment?
   }
   render = forwardRef<HTMLElement, PropsFromGenericComponent<'AddToList'>>(
     function LayoutComponentAddToListRender(props, _): JSX.Element | null {

src/layout/Address/AddressSummary/AddressSummary.tsx

@@ -6,6 +6,8 @@ import { ComponentValidations } from 'src/features/validation/ComponentValidatio
 import { useBindingValidationsForNode } from 'src/features/validation/selectors/bindingValidationsForNode';
 import classes from 'src/layout/Address/AddressSummary/AddressSummary.module.css';
 import { SingleValueSummary } from 'src/layout/Summary2/CommonSummaryComponents/SingleValueSummary';
+import { useHasNoDataInBindings } from 'src/layout/Summary2/isEmpty/isEmptyComponent';
+import { SummaryContains, SummaryFlex } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
 import { useSummaryOverrides, useSummaryProp } from 'src/layout/Summary2/summaryStoreContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
@@ -15,124 +17,137 @@ interface AddressSummaryProps {
 }
 
 export function AddressSummary({ componentNode }: AddressSummaryProps) {
-  const { textResourceBindings, dataModelBindings, simplified } = useNodeItem(componentNode, (i) => ({
+  const { textResourceBindings, dataModelBindings, simplified, required } = useNodeItem(componentNode, (i) => ({
     textResourceBindings: i.textResourceBindings,
     dataModelBindings: i.dataModelBindings,
     simplified: i.simplified,
+    required: i.required,
   }));
   const { title, careOfTitle, zipCodeTitle, postPlaceTitle, houseNumberTitle } = textResourceBindings ?? {};
   const { formData } = useDataModelBindings(dataModelBindings);
   const { address, postPlace, zipCode, careOf, houseNumber } = formData;
   const emptyFieldText = useSummaryOverrides(componentNode)?.emptyFieldText;
   const isCompact = useSummaryProp('isCompact');
+  const isEmpty = useHasNoDataInBindings(componentNode);
 
   const bindingValidations = useBindingValidationsForNode(componentNode);
 
   return (
-    <div className={classes.addressSummaryComponent}>
-      <div>
-        <SingleValueSummary
-          title={
-            <Lang
-              id={title || 'address_component.address'}
-              node={componentNode}
-            />
-          }
-          displayData={address}
-          componentNode={componentNode}
-          isCompact={isCompact}
-          emptyFieldText={emptyFieldText}
-        />
-        <ComponentValidations
-          validations={bindingValidations?.address}
-          node={componentNode}
-        />
-      </div>
-
-      {!simplified && (
+    <SummaryFlex
+      target={componentNode}
+      content={
+        isEmpty
+          ? required
+            ? SummaryContains.EmptyValueRequired
+            : SummaryContains.EmptyValueNotRequired
+          : SummaryContains.SomeUserContent
+      }
+    >
+      <div className={classes.addressSummaryComponent}>
         <div>
           <SingleValueSummary
             title={
               <Lang
-                id={careOfTitle || 'address_component.care_of'}
+                id={title || 'address_component.address'}
                 node={componentNode}
               />
             }
-            displayData={careOf}
+            displayData={address}
             componentNode={componentNode}
-            hideEditButton={true}
             isCompact={isCompact}
             emptyFieldText={emptyFieldText}
           />
           <ComponentValidations
-            validations={bindingValidations?.careOf}
+            validations={bindingValidations?.address}
             node={componentNode}
           />
         </div>
-      )}
 
-      <div className={classes.addressSummaryComponentZipCode}>
-        <div className={classes.addressComponentZipCode}>
-          <SingleValueSummary
-            title={
-              <Lang
-                id={zipCodeTitle || 'address_component.zip_code'}
-                node={componentNode}
-              />
-            }
-            displayData={zipCode}
-            componentNode={componentNode}
-            hideEditButton={true}
-            isCompact={isCompact}
-            emptyFieldText={emptyFieldText}
-          />
-          <ComponentValidations
-            validations={bindingValidations?.zipCode}
-            node={componentNode}
-          />
-        </div>
-
-        <div className={classes.addressSummaryComponentPostplace}>
-          <SingleValueSummary
-            title={
-              <Lang
-                id={postPlaceTitle || 'address_component.post_place'}
-                node={componentNode}
-              />
-            }
-            displayData={postPlace}
-            componentNode={componentNode}
-            hideEditButton={true}
-            isCompact={isCompact}
-            emptyFieldText={emptyFieldText}
-          />
-          <ComponentValidations
-            validations={bindingValidations?.postPlace}
-            node={componentNode}
-          />
-        </div>
         {!simplified && (
           <div>
             <SingleValueSummary
               title={
                 <Lang
-                  id={houseNumberTitle || 'address_component.house_number'}
+                  id={careOfTitle || 'address_component.care_of'}
                   node={componentNode}
                 />
               }
-              displayData={houseNumber}
+              displayData={careOf}
               componentNode={componentNode}
               hideEditButton={true}
               isCompact={isCompact}
               emptyFieldText={emptyFieldText}
             />
             <ComponentValidations
-              validations={bindingValidations?.houseNumber}
+              validations={bindingValidations?.careOf}
               node={componentNode}
             />
           </div>
         )}
+
+        <div className={classes.addressSummaryComponentZipCode}>
+          <div className={classes.addressComponentZipCode}>
+            <SingleValueSummary
+              title={
+                <Lang
+                  id={zipCodeTitle || 'address_component.zip_code'}
+                  node={componentNode}
+                />
+              }
+              displayData={zipCode}
+              componentNode={componentNode}
+              hideEditButton={true}
+              isCompact={isCompact}
+              emptyFieldText={emptyFieldText}
+            />
+            <ComponentValidations
+              validations={bindingValidations?.zipCode}
+              node={componentNode}
+            />
+          </div>
+
+          <div className={classes.addressSummaryComponentPostplace}>
+            <SingleValueSummary
+              title={
+                <Lang
+                  id={postPlaceTitle || 'address_component.post_place'}
+                  node={componentNode}
+                />
+              }
+              displayData={postPlace}
+              componentNode={componentNode}
+              hideEditButton={true}
+              isCompact={isCompact}
+              emptyFieldText={emptyFieldText}
+            />
+            <ComponentValidations
+              validations={bindingValidations?.postPlace}
+              node={componentNode}
+            />
+          </div>
+          {!simplified && (
+            <div>
+              <SingleValueSummary
+                title={
+                  <Lang
+                    id={houseNumberTitle || 'address_component.house_number'}
+                    node={componentNode}
+                  />
+                }
+                displayData={houseNumber}
+                componentNode={componentNode}
+                hideEditButton={true}
+                isCompact={isCompact}
+                emptyFieldText={emptyFieldText}
+              />
+              <ComponentValidations
+                validations={bindingValidations?.houseNumber}
+                node={componentNode}
+              />
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </SummaryFlex>
   );
 }

src/layout/Checkboxes/CheckboxesSummary.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 
 import { useDisplayData } from 'src/features/displayData/useDisplayData';
 import { Lang } from 'src/features/language/Lang';
-import { MultipleValueSummary } from 'src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary';
+import {
+  MultipleValueSummary,
+  useMultipleValuesForSummary,
+} from 'src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary';
+import { SummaryContains, SummaryFlex } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
 import { useSummaryOverrides, useSummaryProp } from 'src/layout/Summary2/summaryStoreContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { Summary2Props } from 'src/layout/Summary2/SummaryComponent2/types';
@@ -18,19 +22,33 @@ export function CheckboxesSummary({ target }: Summary2Props<'Checkboxes'>) {
     summaryOverride?.displayType === 'list' ||
     (!summaryOverride?.displayType && displayData?.length >= maxStringLength);
   const title = useNodeItem(componentNode, (i) => i.textResourceBindings?.title);
+  const required = useNodeItem(componentNode, (i) => i.required);
+  const displayValues = useMultipleValuesForSummary(target);
 
   return (
-    <MultipleValueSummary
-      title={
-        <Lang
-          id={title}
-          node={componentNode}
-        />
+    <SummaryFlex
+      target={target}
+      content={
+        displayValues.length === 0
+          ? required
+            ? SummaryContains.EmptyValueRequired
+            : SummaryContains.EmptyValueNotRequired
+          : SummaryContains.SomeUserContent
       }
-      componentNode={componentNode}
-      isCompact={isCompact}
-      showAsList={showAsList}
-      emptyFieldText={emptyFieldText}
-    />
+    >
+      <MultipleValueSummary
+        title={
+          <Lang
+            id={title}
+            node={componentNode}
+          />
+        }
+        componentNode={componentNode}
+        displayValues={displayValues}
+        isCompact={isCompact}
+        showAsList={showAsList}
+        emptyFieldText={emptyFieldText}
+      />
+    </SummaryFlex>
   );
 }

src/layout/Custom/index.tsx

@@ -5,7 +5,9 @@ import { useDisplayData } from 'src/features/displayData/useDisplayData';
 import { CustomDef } from 'src/layout/Custom/config.def.generated';
 import { CustomWebComponent } from 'src/layout/Custom/CustomWebComponent';
 import { SummaryItemSimple } from 'src/layout/Summary/SummaryItemSimple';
-import { useNodeFormData, useNodeFormDataWhenType } from 'src/utils/layout/useNodeItem';
+import { useHasBindingsAndNoData } from 'src/layout/Summary2/isEmpty/isEmptyComponent';
+import { SummaryContains, SummaryFlex } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
+import { useNodeFormData, useNodeFormDataWhenType, useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { SummaryRendererProps } from 'src/layout/LayoutComponent';
 import type { Summary2Props } from 'src/layout/Summary2/SummaryComponent2/types';
@@ -29,13 +31,26 @@ export class Custom extends CustomDef {
 
   renderSummary2(props: Summary2Props<'Custom'>): JSX.Element | null {
     const formData = useNodeFormData(props.target);
+    const isEmpty = useHasBindingsAndNoData(props.target);
+    const required = useNodeItem(props.target, (i) => i.required);
     return (
-      <CustomWebComponent
-        summaryMode={true}
-        formData={formData}
-        node={props.target}
-        containerDivRef={React.createRef()}
-      />
+      <SummaryFlex
+        target={props.target}
+        content={
+          isEmpty
+            ? required
+              ? SummaryContains.EmptyValueRequired
+              : SummaryContains.EmptyValueNotRequired
+            : SummaryContains.SomeUserContent
+        }
+      >
+        <CustomWebComponent
+          summaryMode={true}
+          formData={formData}
+          node={props.target}
+          containerDivRef={React.createRef()}
+        />
+      </SummaryFlex>
     );
   }