From dfb3e4fc7ea178b9d1eed0bf361247d3e6e6a7a1 Mon Sep 17 00:00:00 2001
From: Magnus Natrud Holta <maghol@equinor.com>
Date: Wed, 5 Jun 2024 08:32:08 +0200
Subject: [PATCH] chore: make autocomplete options readonly

---
 .vscode/settings.json                         | 12 ++-
 .../components/Autocomplete/Autocomplete.tsx  | 76 +++++++++----------
 2 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1320e7a1ba..17494cc55d 100644
--- a/.vscode/settings.json
+++ b/.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"
+  }
 }
diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
index d75aa32d46..ee5b2c8653 100644
--- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
+++ b/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