docs(eds-core-react): 📝 Update Autocomplete story (#3817)

Author: pomfrida

packages/eds-core-react/src/components/Autocomplete/Autocomplete.docs.mdx

@@ -159,3 +159,7 @@ Use prop `allowSelectAll`
 
 <Canvas of={ComponentStories.Variants} />
 
+### Large Datasets
+
+<Canvas of={ComponentStories.LargeDatasets} />
+

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unescaped-entities */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import { useState, useEffect, useRef } from 'react'
 import styled from 'styled-components'
@@ -184,17 +185,18 @@ Introduction.args = {
 
 export const Multiple: StoryFn<AutocompleteProps<MyOptionType>> = (args) => {
   const { options } = args
+
   return (
-    <>
-      <Autocomplete
-        label="Select multiple stocks"
-        options={options}
-        multiple
-        optionLabel={optionLabel}
-      />
-    </>
+    <Autocomplete
+      label="Select multiple stocks"
+      options={options}
+      multiple
+      placeholder="Select your stocks"
+      optionLabel={optionLabel}
+    />
   )
 }
+
 Multiple.args = {
   options: stocks,
 }
@@ -1002,3 +1004,38 @@ Variants.args = {
   label: 'Select a stock',
   options: stocks.map((item) => item.label),
 }
+
+export const LargeDatasets: StoryFn<AutocompleteProps<MyOptionType>> = (
+  args,
+) => {
+  const { options } = args
+  const [selectedItems, setSelectedItems] = useState<MyOptionType[]>([])
+
+  const handleChange = (changes: AutocompleteChanges<MyOptionType>) => {
+    setSelectedItems(changes.selectedItems)
+  }
+
+  return (
+    <>
+      <Typography style={{ marginBottom: '1rem' }}>
+        This example simulates an API that returns 13 stocks from a total of
+        1,500 available stocks. Notice how the selection counter shows "x/1,500
+        selected" instead of "x/13 selected".
+      </Typography>
+      <Autocomplete
+        label="Select from paginated stock results"
+        options={options}
+        multiple
+        placeholder="Search and select stocks"
+        totalOptions={1500} // Total available options from API
+        selectedOptions={selectedItems}
+        onOptionsChange={handleChange}
+        optionLabel={optionLabel}
+      />
+    </>
+  )
+}
+
+LargeDatasets.args = {
+  options: stocks,
+}