chore: make autocomplete options readonly

.vscode/settings.json

@@ -30,5 +30,15 @@
     "eds-tokens-sync",
     "eds-tokens-build"
   ],
-  "cSpell.words": ["colorjs", "lightningcss", "OKLCH", "Overridable"]
+  "cSpell.words": [
+    "colorjs",
+    "lightningcss",
+    "OKLCH",
+    "Overridable"
+  ],
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#1C3408",
+    "titleBar.activeBackground": "#27480C",
+    "titleBar.activeForeground": "#F4FCED"
+  }
 }

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

@@ -1,56 +1,56 @@
+import { arrow_drop_down, arrow_drop_up, close } from '@equinor/eds-icons'
 import {
-  forwardRef,
-  useState,
-  HTMLAttributes,
-  useEffect,
-  useRef,
-  useMemo,
-  useCallback,
-  ReactNode,
-  EventHandler,
-  SyntheticEvent,
-  DOMAttributes,
-  FocusEvent,
-} from 'react'
+  bordersTemplate,
+  useIsomorphicLayoutEffect,
+  useToken,
+} from '@equinor/eds-utils'
+import {
+  MiddlewareState,
+  autoUpdate,
+  flip,
+  offset,
+  size,
+  useFloating,
+  useInteractions,
+} from '@floating-ui/react'
+import { useVirtualizer } from '@tanstack/react-virtual'
 import {
-  useCombobox,
   UseComboboxProps,
-  useMultipleSelection,
   UseMultipleSelectionProps,
+  useCombobox,
+  useMultipleSelection,
 } from 'downshift'
-import { pickBy, mergeWith } from 'ramda'
-import { HelperText as _HelperText } from '../InputWrapper/HelperText' /* TODO: Use InputWrapper instead of HelperText once the new token system is in place */
-import { useVirtualizer } from '@tanstack/react-virtual'
+import { mergeWith, pickBy } from 'ramda'
+import {
+  DOMAttributes,
+  EventHandler,
+  FocusEvent,
+  HTMLAttributes,
+  ReactNode,
+  SyntheticEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import styled, { ThemeProvider, css } from 'styled-components'
 import { Button } from '../Button'
-import { List } from '../List'
 import { useEds } from '../EdsProvider'
-import { Label } from '../Label'
 import { Icon } from '../Icon'
 import { Input } from '../Input'
+import { HelperText as _HelperText } from '../InputWrapper/HelperText' /* TODO: Use InputWrapper instead of HelperText once the new token system is in place */
+import { Label } from '../Label'
+import { List } from '../List'
 import { Progress } from '../Progress'
-import { arrow_drop_down, arrow_drop_up, close } from '@equinor/eds-icons'
+import { Variants } from '../types'
 import {
   AutocompleteToken,
   multiSelect as multiSelectTokens,
-  selectTokens as selectTokens,
+  selectTokens,
 } from './Autocomplete.tokens'
-import {
-  useToken,
-  bordersTemplate,
-  useIsomorphicLayoutEffect,
-} from '@equinor/eds-utils'
 import { AutocompleteOption } from './Option'
-import {
-  offset,
-  flip,
-  size,
-  autoUpdate,
-  useFloating,
-  useInteractions,
-  MiddlewareState,
-} from '@floating-ui/react'
-import { Variants } from '../types'
 
 const Container = styled.div`
   position: relative;
@@ -250,7 +250,7 @@ export type AutocompleteChanges<T> = { selectedItems: T[] }
 
 export type AutocompleteProps<T> = {
   /** List of options in dropdown */
-  options: T[]
+  options: readonly T[]
   /** Label for the select element */
   label: ReactNode
   /** Array of initial selected items