fix selected state

Altinn · Jan 23, 2025 · 97ef13d · 97ef13d
1 parent 0984ca2
commit 97ef13d
Show file tree

Hide file tree

Showing 20 changed files with 299 additions and 544 deletions.
diff --git a/examples/globalMenu.ts b/examples/globalMenu.ts
@@ -1,63 +1,63 @@
-import type { GlobalMenuProps } from "../lib";
-import { accountMenu } from "./index";
+import type { GlobalMenuProps } from '../lib';
+import { accountMenu } from './index';
 
 export const globalMenu: GlobalMenuProps = {
   ...accountMenu,
-  menuLabel: "Meny",
-  backLabel: "Tilbake",
-  logoutButton: { label: "Logg ut" },
-  changeLabel: "Endre",
+  menuLabel: 'Meny',
+  backLabel: 'Tilbake',
+  logoutButton: { label: 'Logg ut' },
+  changeLabel: 'Endre',
   groups: {
     apps: {
-      defaultIconTheme: "surface",
+      defaultIconTheme: 'surface',
       divider: true,
     },
   },
   items: [
     {
-      id: "inbox",
-      groupId: "apps",
-      size: "lg",
-      icon: "inbox",
-      title: "Innboks",
+      id: 'inbox',
+      groupId: 'apps',
+      size: 'lg',
+      icon: 'inbox',
+      title: 'Innboks',
       selected: true,
       badge: {
-        label: "4",
+        label: '4',
       },
       iconBadge: {
-        color: "alert",
-        theme: "base",
-        size: "xs",
-        label: "2",
+        color: 'alert',
+        theme: 'base',
+        size: 'xs',
+        label: '2',
       },
     },
     {
-      id: "access",
-      groupId: "apps",
-      size: "lg",
-      icon: "bookmark",
-      title: "Tilganger",
+      id: 'access',
+      groupId: 'apps',
+      size: 'lg',
+      icon: 'bookmark',
+      title: 'Tilganger',
     },
     {
-      id: "access",
-      groupId: "apps",
-      size: "lg",
-      icon: "menu-grid",
-      title: "Alle skjema",
+      id: 'access',
+      groupId: 'apps',
+      size: 'lg',
+      icon: 'menu-grid',
+      title: 'Alle skjema',
     },
     {
-      id: "startup",
-      groupId: "help",
-      size: "sm",
-      icon: "buildings2",
-      title: "Starte og drive bedrift",
+      id: 'startup',
+      groupId: 'help',
+      size: 'sm',
+      icon: 'buildings2',
+      title: 'Starte og drive bedrift',
     },
     {
-      id: "help",
-      groupId: "help",
-      size: "sm",
-      icon: "chat-exclamationmark",
-      title: "Trenger du hjelp?",
+      id: 'help',
+      groupId: 'help',
+      size: 'sm',
+      icon: 'chat-exclamationmark',
+      title: 'Trenger du hjelp?',
     },
   ],
 };
diff --git a/examples/inboxMenu.tsx b/examples/inboxMenu.tsx
@@ -1,61 +1,62 @@
-import type { MenuProps } from "../lib";
+import type { MenuProps } from '../lib';
 
 export const inboxMenu: MenuProps = {
   groups: {},
-  defaultIconTheme: "default",
+  defaultIconTheme: 'default',
   items: [
     {
-      id: "1",
-      groupId: "1",
-      size: "lg",
-      icon: { name: "inbox", theme: "base", variant: "solid" },
+      id: '1',
+      groupId: '1',
+      size: 'lg',
+      icon: { name: 'inbox', theme: 'base', variant: 'solid' },
       iconBadge: {
-        size: "xs",
-        theme: "base",
-        label: "2 uleste",
+        size: 'xs',
+        theme: 'base',
+        color: 'alert',
+        label: '2 uleste',
       },
       selected: true,
-      title: "Innboks",
+      title: 'Innboks',
       badge: {
-        label: "12",
+        label: '12',
       },
     },
     {
-      id: "2",
-      groupId: "2",
-      icon: "doc-pencil",
-      title: "Utkast",
+      id: '2',
+      groupId: '2',
+      icon: 'doc-pencil',
+      title: 'Utkast',
       badge: {
-        label: "2",
+        label: '2',
       },
     },
     {
-      id: "3",
-      groupId: "2",
-      icon: "file-checkmark",
-      title: "Sendt",
+      id: '3',
+      groupId: '2',
+      icon: 'file-checkmark',
+      title: 'Sendt',
     },
     {
-      id: "4",
-      groupId: "3",
-      icon: "bookmark",
-      title: "Lagrede søk",
+      id: '4',
+      groupId: '3',
+      icon: 'bookmark',
+      title: 'Lagrede søk',
       badge: {
-        label: "5",
+        label: '5',
       },
     },
     {
-      id: "5",
-      groupId: "4",
-      icon: "archive",
-      title: "Arkivert",
+      id: '5',
+      groupId: '4',
+      icon: 'archive',
+      title: 'Arkivert',
     },
     {
-      id: "6",
-      groupId: "4",
+      id: '6',
+      groupId: '4',
       disabled: true,
-      icon: "trash",
-      title: "Papirkurv",
+      icon: 'trash',
+      title: 'Papirkurv',
     },
   ],
 };
diff --git a/examples/loginMenu.tsx b/examples/loginMenu.tsx
@@ -1,27 +1,27 @@
-import type { MenuProps } from "../lib";
+import type { MenuProps } from '../lib';
 
 export const loginMenu: MenuProps = {
   items: [
     {
-      id: "login",
-      groupId: "login",
-      size: "lg",
-      icon: { name: "padlock-locked", theme: "base", variant: "solid" },
-      title: "Logg inn",
+      id: 'login',
+      groupId: 'login',
+      size: 'lg',
+      icon: { name: 'padlock-locked', theme: 'base', variant: 'solid' },
+      title: 'Logg inn',
     },
     {
-      id: "startup",
-      groupId: "help",
-      size: "sm",
-      icon: "buildings2",
-      title: "Starte og drive bedrift",
+      id: 'startup',
+      groupId: 'help',
+      size: 'sm',
+      icon: 'buildings2',
+      title: 'Starte og drive bedrift',
     },
     {
-      id: "help",
-      groupId: "help",
-      size: "sm",
-      icon: "chat-exclamationmark",
-      title: "Trenger du hjelp?",
+      id: 'help',
+      groupId: 'help',
+      size: 'sm',
+      icon: 'chat-exclamationmark',
+      title: 'Trenger du hjelp?',
     },
   ],
 };
diff --git a/lib/components/Autocomplete/AutocompleteItem.tsx b/lib/components/Autocomplete/AutocompleteItem.tsx
@@ -39,14 +39,14 @@ export type AutocompleteItemProps =
 export const AutocompleteItem = ({ type, ...props }: AutocompleteItemProps) => {
   switch (type) {
     case 'scope':
-      return <ScopeListItem {...(props as ScopeAutocompleteItemProps)} theme="transparent" tabIndex={-1} />;
+      return <ScopeListItem {...(props as ScopeAutocompleteItemProps)} theme="default" tabIndex={-1} />;
     case 'bookmark':
-      return <BookmarksListItem {...(props as BookmarksListItemProps)} theme="transparent" size="sm" tabIndex={-1} />;
+      return <BookmarksListItem {...(props as BookmarksListItemProps)} theme="default" size="sm" tabIndex={-1} />;
     case 'dialog':
-      return <DialogListItem {...(props as DialogListItemProps)} theme="transparent" size="sm" tabIndex={-1} />;
+      return <DialogListItem {...(props as DialogListItemProps)} theme="default" size="sm" tabIndex={-1} />;
     case 'information':
-      return <ListItem {...(props as ListItemProps)} theme="transparent" tabIndex={-1} disabled />;
+      return <ListItem {...(props as ListItemProps)} theme="default" tabIndex={-1} disabled />;
     default:
-      return <ListItem {...(props as ListItemProps)} theme="transparent" size="sm" tabIndex={-1} />;
+      return <ListItem {...(props as ListItemProps)} theme="default" size="sm" tabIndex={-1} />;
   }
 };
diff --git a/lib/components/GlobalMenu/AccountMenu.tsx b/lib/components/GlobalMenu/AccountMenu.tsx
@@ -1,20 +1,15 @@
-"use client";
-import { useState } from "react";
-import type { BadgeProps } from "../Badge";
-import {
-  Menu,
-  type MenuItemGroups,
-  type MenuItemProps,
-  type MenuSearchProps,
-} from "../Menu";
+'use client';
+import { useState } from 'react';
+import type { BadgeProps } from '../Badge';
+import { Menu, type MenuItemGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
 
 export interface AccountSearchProps extends MenuSearchProps {
   getResultsLabel?: (hits: number) => string;
   hidden?: boolean;
 }
 
 export interface AccountMenuItem {
-  type: "person" | "company";
+  type: 'person' | 'company';
   name: string;
   id: string;
   groupId?: string;
@@ -43,7 +38,7 @@ export const AccountMenu = ({
 }: AccountMenuProps) => {
   const accountMenu: MenuItemProps[] = accounts.map((account) => ({
     id: account.id || account.name,
-    groupId: account.groupId || "search",
+    groupId: account.groupId || 'search',
     selected: account.selected ?? currentAccount?.id === account.id,
     title: account.name,
     ...(account?.accountNames && {
@@ -65,17 +60,15 @@ export const AccountMenu = ({
     onClick: () => onSelectAccount?.(account.id || account.name),
   }));
 
-  const [filterString, setFilterString] = useState<string>("");
+  const [filterString, setFilterString] = useState<string>('');
 
   const filteredAccountMenu = filterString
     ? accountMenu
-        .filter((item) =>
-          item?.title?.toLowerCase().includes(filterString.toLowerCase())
-        )
+        .filter((item) => item?.title?.toLowerCase().includes(filterString.toLowerCase()))
         .map((item) => {
           return {
             ...item,
-            groupId: "search",
+            groupId: 'search',
           };
         })
     : accountMenu;
@@ -91,18 +84,15 @@ export const AccountMenu = ({
     : accountGroups;
 
   const accountSearchItem: MenuSearchProps = {
-    name: "account-search",
+    name: 'account-search',
     value: filterString,
-    placeholder: accountSearch?.placeholder ?? "Find account",
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
-      setFilterString(event.target.value),
-    onClear: () => setFilterString(""),
+    placeholder: accountSearch?.placeholder ?? 'Find account',
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => setFilterString(event.target.value),
+    onClear: () => setFilterString(''),
   };
 
   const accountSwitcher: MenuItemProps[] = [
-    ...(filteredAccountMenu.length > 0
-      ? filteredAccountMenu
-      : [{ id: "search", groupId: "search", hidden: true }]),
+    ...(filteredAccountMenu.length > 0 ? filteredAccountMenu : [{ id: 'search', groupId: 'search', hidden: true }]),
   ];
 
   return (

diff --git a/lib/components/GlobalMenu/BackButton.tsx b/lib/components/GlobalMenu/BackButton.tsx
@@ -8,5 +8,5 @@ export interface BackButtonProps {
 }
 
 export const BackButton = ({ label, onClick, as }: BackButtonProps) => {
-  return <MenuItem size="sm" id="back" icon="arrow-undo" theme="transparent" title={label} onClick={onClick} as={as} />;
+  return <MenuItem size="sm" id="back" icon="arrow-undo" title={label} onClick={onClick} as={as} />;
 };
diff --git a/lib/components/GlobalMenu/GlobalMenu.tsx b/lib/components/GlobalMenu/GlobalMenu.tsx
@@ -1,20 +1,11 @@
-"use client";
-import { useMemo, useState } from "react";
-import {
-  Menu,
-  type MenuItemGroups,
-  type MenuItemProps,
-  MenuListItem,
-} from "../Menu";
-import { type Account, AccountButton } from "./AccountButton";
-import { AccountMenu, type AccountMenuProps } from "./AccountMenu";
-import { BackButton } from "./BackButton";
-import {
-  GlobalMenuBase,
-  GlobalMenuFooter,
-  GlobalMenuHeader,
-} from "./GlobalMenuBase";
-import { LogoutButton, type LogoutButtonProps } from "./LogoutButton";
+'use client';
+import { useMemo, useState } from 'react';
+import { Menu, type MenuItemGroups, type MenuItemProps, MenuListItem } from '../Menu';
+import { type Account, AccountButton } from './AccountButton';
+import { AccountMenu, type AccountMenuProps } from './AccountMenu';
+import { BackButton } from './BackButton';
+import { GlobalMenuBase, GlobalMenuFooter, GlobalMenuHeader } from './GlobalMenuBase';
+import { LogoutButton, type LogoutButtonProps } from './LogoutButton';
 
 export interface GlobalMenuProps extends AccountMenuProps {
   items: MenuItemProps[];
@@ -35,8 +26,8 @@ export const GlobalMenu = ({
   accountSearch,
   items = [],
   groups,
-  changeLabel = "Change",
-  backLabel = "Back",
+  changeLabel = 'Change',
+  backLabel = 'Back',
   currentAccount,
   onSelectAccount,
   onClose,