fix: icon id for next.js

package.json

@@ -67,5 +67,6 @@
     "prettier": "3.3.3",
     "typescript": "^5.5.4"
   },
-  "browserslist": "last 2 Chrome versions, last 2 firefox versions, last 2 safari versions, last 2 edge versions, not dead"
+  "browserslist": "last 2 Chrome versions, last 2 firefox versions, last 2 safari versions, last 2 edge versions, not dead",
+  "packageManager": "[email protected]+sha1.8bfdb6d72b4d5fdf87d21d27f2bfbe2b21dd2629"
 }

packages/eds-core-react/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -101,7 +101,7 @@ exports[`Accordion Matches snapshot 1`] = `
         class="c0"
       >
         <button
-          aria-controls="eds-accordion-12345-panel-1"
+          aria-controls="eds-accordion-1-panel-1"
           aria-expanded="true"
           class="c1"
           data-testid="header1"
@@ -133,9 +133,9 @@ exports[`Accordion Matches snapshot 1`] = `
         </button>
       </h2>
       <div
-        aria-labelledby="eds-accordion-12345-header-1"
+        aria-labelledby="eds-accordion-1-header-1"
         class="c5"
-        id="eds-accordion-12345-panel-1"
+        id="eds-accordion-1-panel-1"
         role="region"
       >
         Details 1

packages/eds-core-react/src/components/Icon/Icon.tsx

@@ -1,5 +1,6 @@
-import { forwardRef, Ref, SVGProps } from 'react'
 import type { IconData } from '@equinor/eds-icons'
+import { useId } from '@equinor/eds-utils'
+import { Ref, SVGProps, forwardRef } from 'react'
 import styled from 'styled-components'
 import type { Name } from './Icon.types'
 import { get } from './library'
@@ -47,21 +48,16 @@ const StyledPath = styled.path.attrs<PathProps>(({ $height, $size }) => ({
   transform: $size / $height !== 1 ? `scale(${$size / $height})` : null,
 }))``
 
-const customIcon = (icon: IconData) => ({
-  icon,
-  count: Math.floor(Math.random() * 1000),
-})
-
 const findIcon = (name: string, data: IconData, size: number) => {
   // eslint-disable-next-line prefer-const
-  let { icon, count } = data ? customIcon(data) : get(name)
+  const icon = data ?? get(name)
 
   if (size < 24) {
     // fallback to normal icon if small is not made yet
-    icon = icon.sizes?.small || icon
+    return icon.sizes?.small || icon
   }
 
-  return { icon, count }
+  return icon
 }
 
 export type IconProps = (
@@ -105,7 +101,7 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
   ref,
 ) {
   // eslint-disable-next-line prefer-const
-  const { icon, count } = findIcon(name, data, size)
+  const icon = findIcon(name, data, size)
 
   if (typeof icon === 'undefined') {
     throw Error(
@@ -132,10 +128,8 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
   }
 
   // Accessibility
-  let titleId = ''
-
+  const titleId = useId(null, `${icon.prefix}-${icon.name}`)
   if (title) {
-    titleId = `${icon.prefix}-${icon.name}-${count}`
     svgProps = {
       ...svgProps,
       title,

packages/eds-core-react/src/components/Icon/Icon.types.tsx

@@ -1,9 +1,7 @@
-import type { IconData, IconName } from '@equinor/eds-icons'
+import type { IconName } from '@equinor/eds-icons'
 import { Icon } from './Icon'
 import { add } from './library'
 
-export type IconBasket = { icon?: IconData; count: number }
-
 export type Name = IconName
 
 export type IconType = typeof Icon & {

packages/eds-core-react/src/components/Icon/library.ts

@@ -1,10 +1,9 @@
 import type { IconData } from '@equinor/eds-icons'
-import type { IconBasket, Name } from './Icon.types'
+import type { Name } from './Icon.types'
 
 type IconRecord = Record<Name, IconData>
 
 let _icons: IconRecord = {}
-let count = 0
 /** Add icons to library to be used for rendering using name.
 This needs to be done lonly once */
 export const add = (icons: IconRecord): void => {
@@ -14,7 +13,6 @@ export const add = (icons: IconRecord): void => {
   }
 }
 
-export const get = (name: Name): IconBasket => {
-  count += 1
-  return { icon: _icons[name], count }
+export const get = (name: Name): IconData | undefined => {
+  return _icons[name]
 }

packages/eds-utils/src/hooks/useId.ts

@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react'
 
-export const useId = (idOverride: string, type?: string): string => {
+let counter = 0
+
+export const useId = (idOverride?: string, type?: string): string => {
   const [defaultId, setDefaultId] = useState(idOverride)
   const id = idOverride || defaultId
 
   useEffect(() => {
     if (defaultId == null) {
-      setDefaultId(
-        `eds-${type ? type + `-` : ''}${Math.round(Math.random() * 1e5)}`,
-      )
+      setDefaultId(`eds-${type ? type + `-` : ''}${counter++}`)
     }
   }, [defaultId, type])
   return id