Update dependency @digdir/design-system-react to v0.53.12

.prettierignore

@@ -8,3 +8,4 @@ yarn.lock
 .eslintignore
 *.snap
 *.yaml
+eidlogger/

frontend/app-development/features/appPublish/components/DeployDropdown.test.tsx

@@ -100,7 +100,7 @@ describe('DeployDropdown', () => {
         screen.queryByTitle(textMock('app_deployment.releases_loading')),
       );
 
-      const select = screen.getByLabelText(textMock('app_deployment.choose_version'));
+      const select = await screen.findByLabelText(textMock('app_deployment.choose_version'));
       await user.click(select);
 
       expect(screen.getByText(textMock('app_deployment.no_versions'))).toBeInTheDocument();

frontend/app-development/features/appPublish/components/DeployDropdown.tsx

@@ -59,7 +59,7 @@ export const DeployDropdown = ({
       <div>
         <Combobox
           size='small'
-          value={selectedImageTag ? [selectedImageTag] : undefined}
+          value={selectedImageTag && imageOptions?.length > 0 ? [selectedImageTag] : undefined}
           label={t('app_deployment.choose_version')}
           onValueChange={(selectedImageOptions: string[]) =>
             setSelectedImageTag(selectedImageOptions[0])

frontend/app-development/features/overview/components/News.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Heading, Paragraph, Label, Alert } from '@digdir/design-system-react';
+import { Heading, Paragraph, Alert } from '@digdir/design-system-react';
 import { useNewsListQuery } from 'app-development/hooks/queries/useNewsListQuery';
 import { StudioSpinner } from '@studio/components';
 import { useTranslation } from 'react-i18next';
@@ -30,9 +30,9 @@ export const News = () => {
       <NewsTemplate>
         {newsList.news?.map(({ title, content }) => (
           <div className={classes.newsContent} key={title}>
-            <Label level={3} size='medium'>
+            <Heading level={3} size='xxsmall'>
               {title}
-            </Label>
+            </Heading>
             <Paragraph size='small'>{content}</Paragraph>
           </div>
         ))}

frontend/app-development/features/simpleMerge/DownloadRepoPopoverContent/DownloadRepoPopoverContent.tsx

@@ -24,7 +24,7 @@ export const DownloadRepoPopoverContent = ({
       <Paragraph spacing size='small'>
         <Trans i18nKey={'overview.download_repo_info'} />
       </Paragraph>
-      <Link className={classes.link} size='small' href={repoDownloadPath(org, app)}>
+      <Link className={classes.link} href={repoDownloadPath(org, app)}>
         {t('overview.download_repo_changes')}
       </Link>
       <Link className={classes.link} href={repoDownloadPath(org, app, true)}>

frontend/libs/studio-components/.storybook/preview.tsx

@@ -5,6 +5,7 @@ import { Unstyled } from '@storybook/blocks';
 
 import '@altinn/figma-design-tokens/dist/tokens.css';
 import '@digdir/design-system-tokens/brand/altinn/tokens.css';
+import '@digdir/designsystemet-css';
 
 const preview: Preview = {
   parameters: {

frontend/libs/studio-components/src/components/StudioButton/StudioButton.module.css

@@ -3,6 +3,21 @@
   gap: var(--fds-spacing-1);
 }
 
+.innerContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--fds-spacing-2);
+}
+
 .iconWrapper {
   display: contents;
 }
+
+.inverted {
+  color: var(--fds-semantic-text-neutral-on_inverted);
+  background: transparent;
+}
+
+.inverted:hover {
+  background: var(--fds-semantic-surface-on_inverted-no_fill-hover);
+}

frontend/libs/studio-components/src/components/StudioButton/StudioButton.test.tsx

@@ -54,10 +54,10 @@ describe('StudioButton', () => {
     expect(ref.current).toBe(screen.getByRole('button'));
   });
 
-  it('Supports polymorphism', () => {
+  it('Supports render asChild', () => {
     render(
-      <StudioButton as='a' href='/'>
-        Test
+      <StudioButton asChild>
+        <a href='/'>Test</a>
       </StudioButton>,
     );
     expect(screen.queryByRole('button')).not.toBeInTheDocument();

frontend/libs/studio-components/src/components/StudioButton/StudioButton.tsx

@@ -7,25 +7,40 @@
 import type { OverridableComponent } from '../../types/OverridableComponent';
 import type { IconPlacement } from '../../types/IconPlacement';
 
-export type StudioButtonProps = {
+export type StudioButtonProps = Omit<ButtonProps, 'icon' | 'color'> & {
   icon?: ReactNode;
   iconPlacement?: IconPlacement;
-} & Omit<ButtonProps, 'icon'>;
+  color?: ButtonProps['color'] | 'inverted';
+};
 
 const StudioButton: OverridableComponent<StudioButtonProps, HTMLButtonElement> = forwardRef<
   HTMLButtonElement,
   StudioButtonProps
->(({ icon, iconPlacement = 'left', children, className, ...rest }, ref) => {
+>(({ icon, iconPlacement = 'left', children, className: givenClassName, color, ...rest }, ref) => {
   const iconComponent = (
     <span aria-hidden className={classes.iconWrapper}>
       {icon}
     </span>
   );
+
+  // This is a temporary mapping to still support the old inverted prop. This will be removed when migrating to V1.
+  // Information can be found here: https://www.designsystemet.no/bloggen/2024/v1rc1#fargemodus
+  const classNames = cn(givenClassName, classes.studioButton, {
+    [classes.inverted]: color === 'inverted',
+  });
+  const selectedColor = color === 'inverted' ? undefined : color;
+
   return (
-    <Button {...rest} className={cn(className, classes.studioButton)} icon={!children} ref={ref}>
-      {icon && iconPlacement === 'left' && iconComponent}
-      {children}
-      {icon && iconPlacement === 'right' && iconComponent}
+    <Button {...rest} color={selectedColor} className={classNames} icon={!children} ref={ref}>
+      {icon ? (
+        <span className={classes.innerContainer}>
+          {icon && iconPlacement === 'left' && iconComponent}
+          {children}
+          {icon && iconPlacement === 'right' && iconComponent}
+        </span>
+      ) : (
+        children
+      )}
     </Button>
   );
 });

frontend/libs/studio-components/src/components/StudioDeleteButton/StudioDeleteButton.test.tsx

@@ -62,8 +62,8 @@ describe('StudioDeleteButton', () => {
 
   it('Supports polymorphism', () => {
     render(
-      <StudioButton as='a' href='/'>
-        {buttonLabel}
+      <StudioButton asChild>
+        <a href='/'>{buttonLabel}</a>
       </StudioButton>,
     );
     expect(screen.getByRole('link')).toBeInTheDocument();

frontend/libs/studio-components/src/components/StudioDropdownMenu/StudioDropdownMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { DropdownMenu } from '@digdir/design-system-react';
 import type { DropdownMenuProps } from '@digdir/design-system-react';
 import type { StudioButtonProps } from '../StudioButton';
@@ -15,25 +15,19 @@
   children,
   ...rest
 }: StudioDropdownMenuProps) => {
-  const anchorRef = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState<boolean>(false);
   return (
     <>
-      <StudioButton
-        aria-expanded={open}
-        aria-haspopup='menu'
-        ref={anchorRef}
-        size={rest.size}
-        onClick={() => setOpen(!open)}
-        {...anchorButtonProps}
-      />
-      <DropdownMenu
-        portal
-        {...rest}
-        anchorEl={anchorRef.current}
-        onClose={() => setOpen(false)}
-        open={open}
-      >
+      <DropdownMenu portal {...rest} onClose={() => setOpen(false)} open={open}>
+        <DropdownMenu.Trigger asChild>
+          <StudioButton
+            aria-expanded={open}
+            aria-haspopup='menu'
+            size={rest.size}
+            onClick={() => setOpen(!open)}
+            {...anchorButtonProps}
+          />
+        </DropdownMenu.Trigger>
         <DropdownMenu.Content>
           <StudioDropdownMenuContext.Provider value={{ setOpen }}>
             {children}

frontend/libs/studio-components/src/components/StudioNotFoundPage/StudioNotFoundPage.tsx

@@ -26,7 +26,7 @@ export const StudioNotFoundPage = forwardRef<HTMLDivElement, StudioNotFoundPageP
               {title}
             </Heading>
             <div className={classes.body}>{body}</div>
-            <Link href={redirectHref} size='small' className={classes.link}>
+            <Link href={redirectHref} className={classes.link}>
               {redirectLinkText}
             </Link>
           </div>

frontend/libs/studio-components/src/components/StudioTreeView/StudioTreeViewItem/StudioTreeViewItem.tsx

@@ -104,7 +104,6 @@ export const StudioTreeViewItem = ({
       aria-level={level}
       aria-owns={listId}
       aria-selected={selected}
-      as='div' // Cannot be button because of dragging issues in Firefox
       className={classes.button}
       color='first'
       icon={<Icon customIcon={icon} hasChildren={hasChildren} open={open} />}
@@ -118,6 +117,7 @@ export const StudioTreeViewItem = ({
       tabIndex={focusable ? 0 : -1}
       type='button'
       variant='tertiary'
+      asChild
     >
       <div className={classes.label}>{label}</div>
     </StudioButton>

frontend/packages/policy-editor/src/components/PolicyCardRules/PolicyRule/ExpandablePolicyElement/PolicyEditorDropdownMenu/PolicyEditorDropdownMenu.module.css

@@ -5,3 +5,7 @@
 .icon {
   font-size: var(--fds-sizing-5);
 }
+
+.deleteButton {
+  color: var(--fds-semantic-text-danger-default);
+}

frontend/packages/policy-editor/src/components/PolicyCardRules/PolicyRule/ExpandablePolicyElement/PolicyEditorDropdownMenu/PolicyEditorDropdownMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import classes from './PolicyEditorDropdownMenu.module.css';
 import { DropdownMenu } from '@digdir/design-system-react';
 import { MenuElipsisVerticalIcon, TabsIcon, TrashIcon } from '@studio/icons';
@@ -24,36 +24,29 @@
 }: PolicyEditorDropdownMenuProps): React.ReactNode => {
   const { t } = useTranslation();
 
-  const anchorEl = useRef(null);
-
   return (
     <>
-      <StudioButton
-        aria-expanded={isOpen}
-        aria-haspopup='menu'
-        className={isError && classes.errorButton}
-        color={isError ? 'danger' : 'second'}
-        icon={<MenuElipsisVerticalIcon fontSize='1.8rem' />}
-        onClick={handleClickMoreIcon}
-        ref={anchorEl}
-        size='small'
-        title={t('policy_editor.more')}
-        variant='tertiary'
-      />
-      <DropdownMenu
-        anchorEl={anchorEl.current}
-        onClose={handleCloseMenu}
-        placement='bottom-end'
-        size='small'
-        open={isOpen}
-      >
+      <DropdownMenu onClose={handleCloseMenu} placement='bottom-end' size='small' open={isOpen}>
+        <DropdownMenu.Trigger asChild>
+          <StudioButton
+            aria-expanded={isOpen}
+            aria-haspopup='menu'
+            className={isError && classes.errorButton}
+            color={isError ? 'danger' : 'second'}
+            icon={<MenuElipsisVerticalIcon fontSize='1.8rem' />}
+            onClick={handleClickMoreIcon}
+            size='small'
+            title={t('policy_editor.more')}
+            variant='tertiary'
+          />
+        </DropdownMenu.Trigger>
         <DropdownMenu.Content>
           <DropdownMenu.Group>
             <DropdownMenu.Item onClick={handleClone}>
               <TabsIcon className={classes.icon} />
               {t('policy_editor.expandable_card_dropdown_copy')}
             </DropdownMenu.Item>
-            <DropdownMenu.Item color='danger' onClick={handleDelete}>
+            <DropdownMenu.Item className={classes.deleteButton} onClick={handleDelete}>
               <TrashIcon className={classes.icon} />
               {t('general.delete')}
             </DropdownMenu.Item>

frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/ConfigEndEvent.test.tsx

@@ -24,10 +24,11 @@ describe('ConfigEndEvent', () => {
   it('should hide the custom receipt content behind closed accordion initially', () => {
     renderConfigEndEventPanel();
 
-    const informationTextDefaultReceipt = screen.queryByText(
-      textMock('process_editor.configuration_panel_custom_receipt_default_receipt_info'),
-    );
-    expect(informationTextDefaultReceipt).not.toBeVisible();
+    const accordion = screen.getByRole('button', {
+      name: textMock('process_editor.configuration_panel_custom_receipt_accordion_header'),
+    });
+
+    expect(accordion).toHaveAttribute('aria-expanded', 'false');
   });
 
   it('should display the informal text, the link to read more, and the custom receipt content when opening the accordion', async () => {

frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/ConfigEndEvent.tsx

@@ -40,7 +40,6 @@ export const ConfigEndEvent = () => {
                   )}
                   rel='noopener noreferrer'
                   target='_newTab'
-                  size='small'
                 >
                   {t('process_editor.configuration_panel_custom_receipt_default_receipt_link')}
                 </Link>

frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/RedirectToCreatePageButton/RedirectToCreatePageButton.tsx

@@ -27,15 +27,16 @@ export const RedirectToCreatePageButton = (): React.ReactElement => {
         title={t('process_editor.configuration_panel_custom_receipt_navigate_to_lage_title')}
       >
         <StudioButton
-          as='a'
+          asChild
           size='small'
           variant='primary'
           color='second'
           icon={<PencilWritingIcon />}
-          href={packagesRouter.getPackageNavigationUrl('editorUiEditor')}
           onClick={handleClick}
         >
-          {t('process_editor.configuration_panel_custom_receipt_navigate_to_lage_button')}
+          <a href={packagesRouter.getPackageNavigationUrl('editorUiEditor')}>
+            {t('process_editor.configuration_panel_custom_receipt_navigate_to_lage_button')}
+          </a>
         </StudioButton>
       </RedirectBox>
     </div>

frontend/packages/process-editor/src/components/ConfigPanel/EditDataTypes/SelectDataTypes/SelectDataTypes.test.tsx

@@ -59,7 +59,6 @@ describe('SelectDataTypes', () => {
     const combobox = screen.getByRole('combobox', {
       name: textMock('process_editor.configuration_panel_set_data_model'),
     });
-    expect(combobox).toHaveValue(existingDataType);
 
     await user.click(combobox);
     const addedOption = screen.getByRole('option', { name: 'dataModel0' });

frontend/packages/process-editor/src/components/ConfigPanel/EditDataTypes/SelectDataTypes/SelectDataTypes.tsx

@@ -42,11 +42,13 @@ export const SelectDataTypes = ({
     ? [...new Set([...dataModelIds, existingDataType])]
     : dataModelIds;
 
+  console.log(dataModelOptionsToDisplay);
+
   return (
     <div className={classes.dataTypeSelectAndButtons}>
       <Combobox
         label={t('process_editor.configuration_panel_set_data_model')}
-        value={currentValue}
+        value={currentValue && dataModelIds.includes(existingDataType) ? currentValue : undefined}
         description={t('process_editor.configuration_panel_data_model_selection_description')}
         size='small'
         className={classes.dataTypeSelect}

frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/ActionButtons/AddPropertyMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAddProperty } from '../../../../hooks/useAddProperty';
 import { ObjectKind } from '@altinn/schema-model';
@@ -13,7 +13,6 @@
 
 export const AddPropertyMenu = ({ pointer }: AddPropertyMenuProps) => {
   const { setSelectedNodePointer } = useSchemaEditorAppContext();
-  const addButtonRef = useRef<HTMLButtonElement>(null);
   const { t } = useTranslation();
   const [isAddDropdownOpen, setIsAddDropdownOpen] = useState(false);
   const addProperty = useAddProperty();
@@ -31,22 +30,17 @@
   const closeDropdown = () => setIsAddDropdownOpen(false);
 
   return (
     <>
-      <ActionButton
-        aria-expanded={isAddDropdownOpen}
-        aria-haspopup='menu'
-        icon={<PlusIcon />}
-        onClick={() => setIsAddDropdownOpen(true)}
-        ref={addButtonRef}
-        titleKey='schema_editor.add_node_of_type'
-      />
-      <DropdownMenu
-        anchorEl={addButtonRef.current}
-        open={isAddDropdownOpen}
-        onClose={closeDropdown}
-        size='small'
-        portal
-      >
+      <DropdownMenu open={isAddDropdownOpen} onClose={closeDropdown} size='small' portal>
+        <DropdownMenu.Trigger asChild>
+          <ActionButton
+            aria-expanded={isAddDropdownOpen}
+            aria-haspopup='menu'
+            icon={<PlusIcon />}
+            onClick={() => setIsAddDropdownOpen(true)}
+            titleKey='schema_editor.add_node_of_type'
+          />
+        </DropdownMenu.Trigger>
         <DropdownMenu.Content>
           <DropdownMenu.Group>
             <DropdownMenu.Item onClick={addField}>