Komp-226-asyncSelect (#408)

* AsyncSelect (#407)

* Draft AsyncSelect

* Search icon

* controlShouldRenderValue

---------

Co-authored-by: stianStensli <stian.hs@hotmail.com>

* Bytter til chakra-react-select og legger til dokumentasjon

* Rydder opp searchAsync

---------

Co-authored-by: stianStensli <stian.hs@hotmail.com>

.changeset/yellow-rockets-cry.md

@@ -0,0 +1,5 @@
+---
+"@kvib/react": minor
+---
+
+Legger til SearchAsync-komponent - dette gjør at det er mulig med en dropdown i et søkefelt.

apps/storybook/stories/components/search/search-async/SearchAsync.mdx

@@ -0,0 +1,39 @@
+import { Meta, Canvas, Story, Controls } from "@storybook/blocks";
+import * as SearchAsyncStories from "./SearchAsync.stories";
+
+<Meta of={SearchAsyncStories} />
+
+# SearchAsync
+
+SearchAsync er et søkefelt som laster inn søkeresultater fra en liste med objekter. Resultatene blir vist i en dropdown der brukeren kan velge hvilket resultat som skal bli valgt.
+
+## Ta i bruk
+
+```jsx
+import { SearchAsync } from "@kvib/react";
+```
+
+## Props
+
+<Canvas of={SearchAsyncStories.SearchAsync} />
+<Controls of={SearchAsyncStories.SearchAsync} />
+
+## Async søkeresultater
+
+<Canvas of={SearchAsyncStories.SearchAsyncResults} />
+
+## Søkeresultater med delay
+
+<Canvas of={SearchAsyncStories.SearchAsyncResultsDebounce} />
+
+## Standardalternativer
+
+<Canvas of={SearchAsyncStories.SearchAsyncDropdownIndicator} />
+
+## Størrelser
+
+<Canvas of={SearchAsyncStories.SearchAsyncSizes} />
+
+## Varianter
+
+<Canvas of={SearchAsyncStories.SearchAsyncVariants} />

apps/storybook/stories/components/search/search-async/SearchAsync.stories.tsx

@@ -0,0 +1,193 @@
+import { SearchAsync as KvibSearchAsync, Stack as KvibStack, Box, Icon } from "@kvib/react/src";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof KvibSearchAsync> = {
+  title: "Komponenter/Search/SearchAsync",
+  component: KvibSearchAsync,
+  parameters: {
+    docs: {
+      story: { inline: true },
+      canvas: { sourceState: "shown" },
+    },
+    a11y: {
+      // Label warnings + contrast ratio because of chakra wrapper.
+      disable: true,
+    },
+  },
+  argTypes: {
+    loadOptions: {
+      control: "text",
+    },
+    handleFromChange: {
+      control: "text",
+    },
+    placeholder: {
+      table: {
+        type: { summary: "string" },
+      },
+      control: "text",
+    },
+    autoFocus: {
+      table: {
+        type: { summary: "boolean" },
+      },
+      control: "boolean",
+    },
+    debounceTime: {
+      table: {
+        type: { summary: "number" },
+      },
+      control: "number",
+    },
+    className: {
+      table: {
+        type: { summary: "string" },
+      },
+      control: "text",
+    },
+    isClearable: {
+      table: {
+        type: { summary: "boolean" },
+      },
+      control: "boolean",
+    },
+    dropdownIndicator: {
+      table: {
+        type: { summary: "Element" },
+      },
+      control: "text",
+    },
+    size: {
+      table: {
+        type: { summary: "sm | md | lg" },
+        defaultValue: { summary: "md" },
+      },
+      options: ["sm", "md", "lg"],
+      control: { type: "radio" },
+    },
+    defaultOptions: {
+      table: {
+        type: { summary: "OptionsOrGroups<T, GroupBase<T>>" },
+      },
+      control: "array",
+    },
+    variant: {
+      table: {
+        type: { summary: "outline | filled | flushed | unstyled" },
+        defaultValue: { summary: "outline" },
+      },
+      options: ["outline", "filled", "flushed", "unstyled"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof KvibSearchAsync>;
+
+export const SearchAsync: Story = {
+  args: {},
+  render: (args) => (
+    <Box h={20}>
+      <KvibSearchAsync {...args} />
+    </Box>
+  ),
+};
+
+const fruits = [
+  { label: "Eple", value: "eple" },
+  { label: "Banan", value: "banan" },
+  { label: "Kirsebær", value: "kirsebær" },
+  { label: "Pære", value: "pære" },
+  { label: "Svarthyll", value: "svarthyll" },
+];
+
+const mockLoadOptions = (inputValue: string, callback: (options: typeof fruits) => void) => {
+  setTimeout(() => {
+    const filteredFruits = fruits.filter((fruit) => fruit.label.toLowerCase().includes(inputValue.toLowerCase()));
+    callback(filteredFruits);
+  }, 500);
+};
+
+export const SearchAsyncResults: Story = {
+  args: {
+    loadOptions: mockLoadOptions,
+    handleFromChange: (selectedOption) => {
+      console.log("Selected Option:", selectedOption);
+    },
+    placeholder: "Søk etter frukt...",
+  },
+  render: (args) => (
+    <Box h={40}>
+      <KvibSearchAsync {...args} />
+    </Box>
+  ),
+};
+
+export const SearchAsyncResultsDebounce: Story = {
+  args: {
+    loadOptions: mockLoadOptions,
+    handleFromChange: (selectedOption) => {
+      console.log("Selected Option:", selectedOption);
+    },
+    debounceTime: 3000,
+    placeholder: "Søk etter frukt...",
+  },
+  render: (args) => (
+    <Box h={40}>
+      <KvibSearchAsync {...args} />
+    </Box>
+  ),
+};
+
+export const SearchAsyncDropdownIndicator: Story = {
+  args: {
+    loadOptions: mockLoadOptions,
+    handleFromChange: (selectedOption) => {
+      console.log("Selected Option:", selectedOption);
+    },
+    dropdownIndicator: <Icon icon="expand_more" weight={400} />,
+    defaultOptions: fruits,
+    placeholder: "Søk etter frukt...",
+  },
+  render: (args) => (
+    <Box h={60}>
+      <KvibSearchAsync {...args} />
+    </Box>
+  ),
+};
+
+export const SearchAsyncSizes: Story = {
+  args: {
+    loadOptions: mockLoadOptions,
+    handleFromChange: (selectedOption) => {
+      console.log("Selected Option:", selectedOption);
+    },
+    placeholder: "Søk etter frukt...",
+  },
+  render: (args) => (
+    <KvibStack>
+      <KvibSearchAsync {...args} size="sm" />
+      <KvibSearchAsync {...args} size="md" />
+      <KvibSearchAsync {...args} size="lg" />
+    </KvibStack>
+  ),
+};
+
+export const SearchAsyncVariants: Story = {
+  args: {
+    loadOptions: mockLoadOptions,
+    handleFromChange: (selectedOption) => {
+      console.log("Selected Option:", selectedOption);
+    },
+    placeholder: "Søk etter frukt...",
+  },
+  render: (args) => (
+    <KvibStack h={60}>
+      <KvibSearchAsync {...args} variant="outline" />
+      <KvibSearchAsync {...args} variant="filled" />
+      <KvibSearchAsync {...args} variant="flushed" />
+      <KvibSearchAsync {...args} variant="unstyled" />
+    </KvibStack>
+  ),
+};

apps/storybook/stories/components/search/Search.stories.tsx → apps/storybook/stories/components/search/search/Search.stories.tsx

@@ -2,7 +2,7 @@ import { Search as KvibSearch } from "@kvib/react/src/search";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof KvibSearch> = {
-  title: "Komponenter/Search",
+  title: "Komponenter/Search/Search",
   component: KvibSearch,
   parameters: {
     docs: {