From 92209452c0a9b2e2d89791883661f2d91bdae674 Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Fri, 13 Sep 2024 10:04:31 +0200
Subject: [PATCH] fix(Select): rename from nativeselect (#2404)

Fixes #2399
---
 .changeset/odd-hornets-sleep.md               |  6 ++
 .../app/komponenter/component-list.ts         |  4 +-
 .../Previews/Components/Components.tsx        |  6 +-
 .../components/ThemeToolbar/ThemeToolbar.tsx  | 10 ++--
 packages/css/index.css                        |  2 +-
 .../css/{native-select.css => select.css}     | 60 +++++++++----------
 .../src/components/Card/Card.stories.tsx      |  6 +-
 .../src/components/form/Checkbox/Checkbox.mdx |  2 +-
 .../src/components/form/NativeSelect/index.ts |  2 -
 .../NativeSelect.mdx => Select/Select.mdx}    | 20 +++----
 .../Select.stories.tsx}                       | 30 +++++-----
 .../Select.test.tsx}                          | 12 ++--
 .../NativeSelect.tsx => Select/Select.tsx}    | 37 +++++-------
 .../react/src/components/form/Select/index.ts |  2 +
 .../useSelect.ts}                             | 47 ++++++---------
 packages/react/src/components/index.ts        |  2 +-
 packages/react/stories/showcase.stories.tsx   |  6 +-
 packages/react/stories/testing.stories.tsx    |  6 +-
 18 files changed, 125 insertions(+), 135 deletions(-)
 create mode 100644 .changeset/odd-hornets-sleep.md
 rename packages/css/{native-select.css => select.css} (52%)
 delete mode 100644 packages/react/src/components/form/NativeSelect/index.ts
 rename packages/react/src/components/form/{NativeSelect/NativeSelect.mdx => Select/Select.mdx} (57%)
 rename packages/react/src/components/form/{NativeSelect/NativeSelect.stories.tsx => Select/Select.stories.tsx} (79%)
 rename packages/react/src/components/form/{NativeSelect/NativeSelect.test.tsx => Select/Select.test.tsx} (90%)
 rename packages/react/src/components/form/{NativeSelect/NativeSelect.tsx => Select/Select.tsx} (75%)
 create mode 100644 packages/react/src/components/form/Select/index.ts
 rename packages/react/src/components/form/{NativeSelect/useNativeSelect.ts => Select/useSelect.ts} (51%)

diff --git a/.changeset/odd-hornets-sleep.md b/.changeset/odd-hornets-sleep.md
new file mode 100644
index 0000000000..082f9b9408
--- /dev/null
+++ b/.changeset/odd-hornets-sleep.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Select: Rename from `NativeSelect`
diff --git a/apps/storefront/app/komponenter/component-list.ts b/apps/storefront/app/komponenter/component-list.ts
index 798374a302..d2f614bdd9 100644
--- a/apps/storefront/app/komponenter/component-list.ts
+++ b/apps/storefront/app/komponenter/component-list.ts
@@ -95,9 +95,9 @@ export const data = [
     url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-modal--docs',
   },
   {
-    title: 'Native Select',
+    title: 'Select',
     image: 'Select.svg',
-    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-nativeselect--docs',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-select--docs',
   },
   {
     title: 'Pagination',
diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx
index b705fb5c44..c7cb0aa02e 100644
--- a/apps/theme/components/Previews/Components/Components.tsx
+++ b/apps/theme/components/Previews/Components/Components.tsx
@@ -11,11 +11,11 @@ import {
   Heading,
   HelpText,
   Link,
-  NativeSelect,
   Pagination,
   Paragraph,
   Radio,
   Search,
+  Select,
   Skeleton,
   Spinner,
   Switch,
@@ -86,12 +86,12 @@ export const Components = () => {
         </Heading>
         <div className={classes.tableHeader}>
           <div className={classes.tableAction}>
-            <NativeSelect label='Velg handling' size='sm' hideLabel>
+            <Select label='Velg handling' size='sm' hideLabel>
               <option value='blank'>Velg handling</option>
               <option value='everest'>Dupliser</option>
               <option value='aconcagua'>Slett</option>
               <option value='denali'>Oppdater</option>
-            </NativeSelect>
+            </Select>
             <Button className={classes.tableBtn} size='sm'>
               Utfør
             </Button>
diff --git a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx
index 35a304fd65..d6a4f595bb 100644
--- a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx
+++ b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx
@@ -1,5 +1,5 @@
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import { Button, NativeSelect, Tooltip } from '@digdir/designsystemet-react';
+import { Button, Select, Tooltip } from '@digdir/designsystemet-react';
 import type {
   ColorError,
   ContrastMode,
@@ -107,7 +107,7 @@ export const ThemeToolbar = ({
         />
 
         <div className={classes.dropdown}>
-          <NativeSelect
+          <Select
             label='Kontrastnivå'
             size='md'
             className={classes.contrastSelect}
@@ -118,10 +118,10 @@ export const ThemeToolbar = ({
           >
             <option value='aa'>AA</option>
             <option value='aaa'>AAA (WIP)</option>
-          </NativeSelect>
+          </Select>
         </div>
         <div className={classes.borderRadii}>
-          <NativeSelect
+          <Select
             label='Border radius'
             size='md'
             className={classes.borderRadiiSelect}
@@ -142,7 +142,7 @@ export const ThemeToolbar = ({
                 {key}
               </option>
             ))}
-          </NativeSelect>
+          </Select>
         </div>
         <Tooltip content={toolTipText} portal={false}>
           <Button
diff --git a/packages/css/index.css b/packages/css/index.css
index e9d18df870..f60c02ac0f 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -18,7 +18,7 @@
 @import url('./checkbox.css') layer(ds.components);
 @import url('./radio.css') layer(ds.components);
 @import url('./search.css') layer(ds.components);
-@import url('./native-select.css') layer(ds.components);
+@import url('./select.css') layer(ds.components);
 @import url('./textfield.css') layer(ds.components);
 @import url('./textarea.css') layer(ds.components);
 @import url('./helptext.css') layer(ds.components);
diff --git a/packages/css/native-select.css b/packages/css/select.css
similarity index 52%
rename from packages/css/native-select.css
rename to packages/css/select.css
index 0e866974f2..49ba1cb5aa 100644
--- a/packages/css/native-select.css
+++ b/packages/css/select.css
@@ -1,25 +1,25 @@
-.ds-native-select__wrapper {
+.ds-select__wrapper {
   position: relative;
   display: grid;
   flex: 0 1 auto;
-}
 
-/* chevron for native select */
-.ds-native-select__wrapper::after {
-  content: '';
-  position: absolute;
-  background-color: var(--ds-color-neutral-text-default);
-  pointer-events: none;
-  top: 50%;
-  right: var(--ds-spacing-2);
-  transform: translateY(-50%);
-  width: 1.5em;
-  height: 1.5em;
-  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
-  mask-size: contain;
+  /* chevron for native select */
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: var(--ds-color-neutral-text-default);
+    pointer-events: none;
+    top: 50%;
+    right: var(--ds-spacing-2);
+    transform: translateY(-50%);
+    width: 1.5em;
+    height: 1.5em;
+    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
+    mask-size: contain;
+  }
 }
 
-.ds-native-select {
+.ds-select {
   position: relative;
   font-family: inherit;
   box-sizing: border-box;
@@ -32,67 +32,67 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .ds-native-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
+  .ds-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
     border-color: var(--ds-color-accent-border-strong);
     box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
   }
 }
 
-.ds-native-select.ds-native-select--multiple {
+.ds-select.ds-select--multiple {
   background-image: none;
 }
 
-.ds-native-select--sm {
+.ds-select--sm {
   padding: 0 var(--ds-spacing-2);
   padding-right: var(--ds-spacing-8);
   height: var(--ds-sizing-10);
 }
 
-.ds-native-select--md {
+.ds-select--md {
   padding: 0 var(--ds-spacing-3);
   padding-right: var(--ds-spacing-10);
   height: var(--ds-sizing-12);
 }
 
-.ds-native-select--lg {
+.ds-select--lg {
   padding: 0 var(--ds-spacing-4);
   padding-right: var(--ds-spacing-12);
   height: var(--ds-sizing-14);
 }
 
-.ds-native-select--container {
+.ds-select--container {
   display: grid;
   gap: var(--ds-spacing-2);
 }
 
-.ds-native-select--container:has(.ds-native-select:disabled) {
+.ds-select--container:has(.ds-select:disabled) {
   opacity: var(--ds-disabled-opacity);
 }
 
-.ds-native-select:disabled {
+.ds-select:disabled {
   cursor: not-allowed;
 }
 
-.ds-native-select--readonly .ds-native-select {
+.ds-select--readonly .ds-select {
   background: var(--ds-color-neutral-background-subtle);
   border-color: var(--ds-color-neutral-border-strong);
 }
 
-.ds-native-select--error > .ds-native-select:not(:focus-visible) {
+.ds-select--error > .ds-select:not(:focus-visible) {
   border-color: var(--ds-color-danger-border-default);
   box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
 }
 
-.ds-native-select__readonly__icon {
+.ds-select__readonly__icon {
   height: 1.2em;
   width: 1.2em;
 }
 
-.ds-native-select__error-message:empty {
+.ds-select__error-message:empty {
   display: none;
 }
 
-.ds-native-select__label {
+.ds-select__label {
   min-width: min-content;
   display: inline-flex;
   flex-direction: row;
@@ -100,7 +100,7 @@
   align-items: center;
 }
 
-.ds-native-select__description {
+.ds-select__description {
   color: var(--ds-color-neutral-text-subtle);
   margin-top: calc(var(--ds-spacing-2) * -1);
 }
diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/Card/Card.stories.tsx
index 13ad52066a..7fa0d57f1d 100644
--- a/packages/react/src/components/Card/Card.stories.tsx
+++ b/packages/react/src/components/Card/Card.stories.tsx
@@ -11,7 +11,7 @@ import { Button } from '../Button';
 import { Divider } from '../Divider';
 import { Link } from '../Link';
 import { Heading, Paragraph } from '../Typography';
-import { NativeSelect } from '../form/NativeSelect';
+import { Select } from '../form/Select';
 import { Textfield } from '../form/Textfield';
 
 import { Card } from '.';
@@ -287,13 +287,13 @@ export const Composed: Story = () => (
     </Card.Header>
     <Divider color='subtle' />
     <Card.Content>
-      <NativeSelect label='Velg rolle'>
+      <Select label='Velg rolle'>
         {options.map(({ value, label }, index) => (
           <option key={index} value={value}>
             {label}
           </option>
         ))}
-      </NativeSelect>
+      </Select>
       <Textfield label='Fødsels- eller d-nummer' />
       <Textfield label='Etternavn' />
     </Card.Content>
diff --git a/packages/react/src/components/form/Checkbox/Checkbox.mdx b/packages/react/src/components/form/Checkbox/Checkbox.mdx
index a4039e7bbd..6ab8e56e11 100644
--- a/packages/react/src/components/form/Checkbox/Checkbox.mdx
+++ b/packages/react/src/components/form/Checkbox/Checkbox.mdx
@@ -83,7 +83,7 @@ Unngå deaktiverte tilstander om du kan. De har lav fargekontrast som er problem
 
 ## Retningslinjer for checkbox
 
-Hvis det er flere enn 7 svaralternativer, bruk [`NativeSelect`](/docs/komponenter-nativeselect--docs) eller [`Combobox`](/docs/komponenter-combobox--docs) istedenfor.
+Hvis det er flere enn 7 svaralternativer, bruk [`Select`](/docs/komponenter-select--docs) eller [`Combobox`](/docs/komponenter-combobox--docs) istedenfor.
 
 ### Sortering
 
diff --git a/packages/react/src/components/form/NativeSelect/index.ts b/packages/react/src/components/form/NativeSelect/index.ts
deleted file mode 100644
index 2e4147c1d5..0000000000
--- a/packages/react/src/components/form/NativeSelect/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { NativeSelect } from './NativeSelect';
-export type { NativeSelectProps } from './NativeSelect';
diff --git a/packages/react/src/components/form/NativeSelect/NativeSelect.mdx b/packages/react/src/components/form/Select/Select.mdx
similarity index 57%
rename from packages/react/src/components/form/NativeSelect/NativeSelect.mdx
rename to packages/react/src/components/form/Select/Select.mdx
index 8490b29922..0e285c7be8 100644
--- a/packages/react/src/components/form/NativeSelect/NativeSelect.mdx
+++ b/packages/react/src/components/form/Select/Select.mdx
@@ -1,12 +1,12 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';
 
-import * as NativeSelectStories from './NativeSelect.stories';
+import * as SelectStories from './Select.stories';
 
-<Meta of={NativeSelectStories} />
+<Meta of={SelectStories} />
 
-# NativeSelect
+# Select
 
-`NativeSelect` er en enkel nedtrekksliste som lar brukeren velge ett eller flere alternativer fra et statisk utvalg.
+`Select` er en enkel nedtrekksliste som lar brukeren velge ett eller flere alternativer fra et statisk utvalg.
 Komponenten er bygget på HTML-elementet `select`, som benytter seg av operativsystemets standarder (derav "native").
 Dette sikrer forutsigbarhet og tilgjengelighet, men det setter noen begrensninger på hvordan komponenten kan tilpasses.
 For eksempel er det ikke mulig å overstyre formateringen av alternativene.
@@ -19,25 +19,25 @@ For eksempel er det ikke mulig å overstyre formateringen av alternativene.
 ## Bruk
 
 ```tsx
-import { NativeSelect } from '@digdir/designsystemet-react';
+import { Select } from '@digdir/designsystemet-react';
 
-<NativeSelect label='Ta et valg'>
+<Select label='Ta et valg'>
   <option value='1'>Alternativ 1</option>
   <option value='2'>Alternativ 2</option>
   <option value='3'>Alternativ 3</option>
-</NativeSelect>;
+</Select>;
 ```
 
 ## Eksempler
 
 ### Deaktivert
 
-<Canvas of={NativeSelectStories.Disabled} />
+<Canvas of={SelectStories.Disabled} />
 
 ### Med feil
 
-<Canvas of={NativeSelectStories.WithError} />
+<Canvas of={SelectStories.WithError} />
 
 ### Flervalg
 
-<Canvas of={NativeSelectStories.Multiple} />
+<Canvas of={SelectStories.Multiple} />
diff --git a/packages/react/src/components/form/NativeSelect/NativeSelect.stories.tsx b/packages/react/src/components/form/Select/Select.stories.tsx
similarity index 79%
rename from packages/react/src/components/form/NativeSelect/NativeSelect.stories.tsx
rename to packages/react/src/components/form/Select/Select.stories.tsx
index 5fc4d33c50..db65e35f2d 100644
--- a/packages/react/src/components/form/NativeSelect/NativeSelect.stories.tsx
+++ b/packages/react/src/components/form/Select/Select.stories.tsx
@@ -1,17 +1,17 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { NativeSelect } from './NativeSelect';
+import { Select } from './Select';
 
 export default {
-  title: 'Komponenter/NativeSelect',
-  component: NativeSelect,
+  title: 'Komponenter/Select',
+  component: Select,
   parameters: {
     layout: 'padded',
   },
 } as Meta;
 
-export const Preview: StoryFn<typeof NativeSelect> = (args) => (
-  <NativeSelect {...args}>
+export const Preview: StoryFn<typeof Select> = (args) => (
+  <Select {...args}>
     <option value='blank'>Velg &hellip;</option>
     <option value='everest'>Mount Everest</option>
     <option value='aconcagua'>Aconcagua</option>
@@ -21,7 +21,7 @@ export const Preview: StoryFn<typeof NativeSelect> = (args) => (
     <option value='vinson'>Mount Vinson</option>
     <option value='puncakjaya'>Puncak Jaya</option>
     <option value='kosciuszko'>Mount Kosciuszko</option>
-  </NativeSelect>
+  </Select>
 );
 
 Preview.args = {
@@ -31,8 +31,8 @@ Preview.args = {
   readOnly: false,
 };
 
-export const Disabled: StoryFn<typeof NativeSelect> = (args) => (
-  <NativeSelect {...args}>
+export const Disabled: StoryFn<typeof Select> = (args) => (
+  <Select {...args}>
     <option value='blank'>Velg &hellip;</option>
     <option value='everest'>Mount Everest</option>
     <option value='aconcagua'>Aconcagua</option>
@@ -42,7 +42,7 @@ export const Disabled: StoryFn<typeof NativeSelect> = (args) => (
     <option value='vinson'>Mount Vinson</option>
     <option value='puncakjaya'>Puncak Jaya</option>
     <option value='kosciuszko'>Mount Kosciuszko</option>
-  </NativeSelect>
+  </Select>
 );
 
 Disabled.args = {
@@ -50,8 +50,8 @@ Disabled.args = {
   disabled: true,
 };
 
-export const WithError: StoryFn<typeof NativeSelect> = (args) => (
-  <NativeSelect {...args}>
+export const WithError: StoryFn<typeof Select> = (args) => (
+  <Select {...args}>
     <option value='blank'>Velg &hellip;</option>
     <option value='everest'>Mount Everest</option>
     <option value='aconcagua'>Aconcagua</option>
@@ -61,7 +61,7 @@ export const WithError: StoryFn<typeof NativeSelect> = (args) => (
     <option value='vinson'>Mount Vinson</option>
     <option value='puncakjaya'>Puncak Jaya</option>
     <option value='kosciuszko'>Mount Kosciuszko</option>
-  </NativeSelect>
+  </Select>
 );
 
 WithError.args = {
@@ -69,8 +69,8 @@ WithError.args = {
   error: 'Du må velge et fjell',
 };
 
-export const Multiple: StoryFn<typeof NativeSelect> = (args) => (
-  <NativeSelect {...args}>
+export const Multiple: StoryFn<typeof Select> = (args) => (
+  <Select {...args}>
     <option value='everest'>Mount Everest</option>
     <option value='aconcagua'>Aconcagua</option>
     <option value='denali'>Denali</option>
@@ -79,7 +79,7 @@ export const Multiple: StoryFn<typeof NativeSelect> = (args) => (
     <option value='vinson'>Mount Vinson</option>
     <option value='puncakjaya'>Puncak Jaya</option>
     <option value='kosciuszko'>Mount Kosciuszko</option>
-  </NativeSelect>
+  </Select>
 );
 
 Multiple.args = {
diff --git a/packages/react/src/components/form/NativeSelect/NativeSelect.test.tsx b/packages/react/src/components/form/Select/Select.test.tsx
similarity index 90%
rename from packages/react/src/components/form/NativeSelect/NativeSelect.test.tsx
rename to packages/react/src/components/form/Select/Select.test.tsx
index 46b44a9b2d..6678e999ad 100644
--- a/packages/react/src/components/form/NativeSelect/NativeSelect.test.tsx
+++ b/packages/react/src/components/form/Select/Select.test.tsx
@@ -3,8 +3,8 @@ import userEvent from '@testing-library/user-event';
 import type { RefObject } from 'react';
 import { act, createRef } from 'react';
 
-import type { NativeSelectProps } from './NativeSelect';
-import { NativeSelect } from './NativeSelect';
+import type { SelectProps } from './Select';
+import { Select } from './Select';
 
 const user = userEvent.setup();
 
@@ -19,11 +19,11 @@ const children = options.map(({ label, value }) => (
     {label}
   </option>
 ));
-const defaultProps: NativeSelectProps = {
+const defaultProps: SelectProps = {
   children,
 };
 
-describe('NativeSelect', () => {
+describe('Select', () => {
   it('Renders with given label', () => {
     const label = 'Test label';
     render({ label });
@@ -98,6 +98,6 @@ describe('NativeSelect', () => {
 });
 
 const render = (
-  props?: Partial<NativeSelectProps>,
+  props?: Partial<SelectProps>,
   ref?: RefObject<HTMLSelectElement>,
-) => renderRtl(<NativeSelect {...defaultProps} {...props} ref={ref} />);
+) => renderRtl(<Select {...defaultProps} {...props} ref={ref} />);
diff --git a/packages/react/src/components/form/NativeSelect/NativeSelect.tsx b/packages/react/src/components/form/Select/Select.tsx
similarity index 75%
rename from packages/react/src/components/form/NativeSelect/NativeSelect.tsx
rename to packages/react/src/components/form/Select/Select.tsx
index be869b3629..f755ce93ca 100644
--- a/packages/react/src/components/form/NativeSelect/NativeSelect.tsx
+++ b/packages/react/src/components/form/Select/Select.tsx
@@ -6,9 +6,9 @@ import type { ForwardedRef, ReactNode, SelectHTMLAttributes } from 'react';
 import { omit } from '../../../utilities';
 import { ErrorMessage, Label, Paragraph } from '../../Typography';
 
-import { useNativeSelect } from './useNativeSelect';
+import { useSelect } from './useSelect';
 
-export type NativeSelectProps = {
+export type SelectProps = {
   /**
    * Label that appears over the select box. */
   label?: string;
@@ -40,8 +40,8 @@ export type NativeSelectProps = {
   htmlSize?: number;
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>;
 
-export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
-  (props, ref: ForwardedRef<HTMLSelectElement>) => {
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  function Select(props, ref: ForwardedRef<HTMLSelectElement>) {
     const {
       children,
       disabled = false,
@@ -60,15 +60,15 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
       errorId,
       readOnly,
       size = 'md',
-    } = useNativeSelect(props);
+    } = useSelect(props);
 
     return (
       <Paragraph asChild size={size}>
         <div
           className={cl(
-            'ds-native-select--container',
-            readOnly && 'ds-native-select--readonly',
-            error && 'ds-native-select--error',
+            'ds-select--container',
+            readOnly && 'ds-select--readonly',
+            error && 'ds-select--error',
           )}
         >
           {label && (
@@ -76,15 +76,12 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
               weight='medium'
               size={size}
               htmlFor={selectProps.id}
-              className={cl(
-                'ds-native-select__label',
-                hideLabel && 'ds-sr-only',
-              )}
+              className={cl('ds-select__label', hideLabel && 'ds-sr-only')}
             >
               {readOnly && (
                 <PadlockLockedFillIcon
                   aria-hidden
-                  className={'ds-native-select__readonly__icon'}
+                  className={'ds-select__readonly__icon'}
                 />
               )}
               {label}
@@ -95,7 +92,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
               <div
                 id={descriptionId}
                 className={cl(
-                  `ds-native-select__description`,
+                  `ds-select__description`,
                   hideLabel && `ds-sr-only`,
                 )}
               >
@@ -103,16 +100,16 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
               </div>
             </Paragraph>
           )}
-          <div className='ds-native-select__wrapper'>
+          <div className='ds-select__wrapper'>
             <select
               disabled={disabled}
               ref={ref}
               size={htmlSize}
               className={cl(
-                'ds-native-select',
-                `ds-native-select--${size}`,
+                'ds-select',
+                `ds-select--${size}`,
                 `ds-focus`,
-                props.multiple && 'ds-native-select--multiple',
+                props.multiple && 'ds-select--multiple',
                 className,
               )}
               {...omit(['size', 'error', 'errorId'], rest)}
@@ -125,7 +122,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           {error && (
             <div
               id={errorId}
-              className={'ds-native-select__error-message'}
+              className={'ds-select__error-message'}
               aria-live='polite'
               aria-relevant='additions removals'
             >
@@ -137,5 +134,3 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     );
   },
 );
-
-NativeSelect.displayName = 'NativeSelect';
diff --git a/packages/react/src/components/form/Select/index.ts b/packages/react/src/components/form/Select/index.ts
new file mode 100644
index 0000000000..18e314c6fe
--- /dev/null
+++ b/packages/react/src/components/form/Select/index.ts
@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps } from './Select';
diff --git a/packages/react/src/components/form/NativeSelect/useNativeSelect.ts b/packages/react/src/components/form/Select/useSelect.ts
similarity index 51%
rename from packages/react/src/components/form/NativeSelect/useNativeSelect.ts
rename to packages/react/src/components/form/Select/useSelect.ts
index b1d6c2778c..c16b0eed87 100644
--- a/packages/react/src/components/form/NativeSelect/useNativeSelect.ts
+++ b/packages/react/src/components/form/Select/useSelect.ts
@@ -9,12 +9,9 @@ import { FieldsetContext } from '../Fieldset/FieldsetContext';
 import type { FormField } from '../useFormField';
 import { useFormField } from '../useFormField';
 
-import type { NativeSelectProps } from './NativeSelect';
+import type { SelectProps } from './Select';
 
-type UseNativeSelect = (props: NativeSelectProps) => Omit<
-  FormField,
-  'inputProps'
-> & {
+type UseSelect = (props: SelectProps) => Omit<FormField, 'inputProps'> & {
   selectProps: Pick<
     SelectHTMLAttributes<HTMLSelectElement>,
     | 'name'
@@ -27,8 +24,8 @@ type UseNativeSelect = (props: NativeSelectProps) => Omit<
   >;
 };
 
-/** Handles props for `NativeSelect` in context with `Fieldset` */
-export const useNativeSelect: UseNativeSelect = (props) => {
+/** Handles props for `Select` in context with `Fieldset` */
+export const useSelect: UseSelect = (props) => {
   const fieldset = useContext(FieldsetContext);
   const {
     inputProps: selectProps,
@@ -44,35 +41,27 @@ export const useNativeSelect: UseNativeSelect = (props) => {
     selectProps: {
       ...selectProps,
       readOnly,
-      onClick: (e) => {
-        if (readOnly) {
-          e.preventDefault();
-          return;
-        }
-        props?.onClick?.(e);
+      onClick: (event) => {
+        if (readOnly) return event.preventDefault();
+        props?.onClick?.(event);
       },
-      onKeyDown: (e) => {
+      onKeyDown: (event) => {
         if (readOnly) {
-          if (e.key === 'Tab') return;
-          e.preventDefault();
-          return;
+          if (event.key === 'Tab') return;
+          return event.preventDefault();
         }
-        props?.onKeyDown?.(e);
+        props?.onKeyDown?.(event);
       },
-      onMouseDown: (e) => {
+      onMouseDown: (event) => {
         if (readOnly) {
-          e.preventDefault();
-          if (e.target instanceof HTMLElement) e.target.focus();
-          return;
+          if (event.target instanceof HTMLElement) event.target.focus();
+          return event.preventDefault();
         }
-        props?.onMouseDown?.(e);
+        props?.onMouseDown?.(event);
       },
-      onChange: (e) => {
-        if (readOnly) {
-          e.preventDefault();
-          return;
-        }
-        props?.onChange?.(e);
+      onChange: (event) => {
+        if (readOnly) return event.preventDefault();
+        props?.onChange?.(event);
       },
     },
   };
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 85812a8738..d1bbe9ad95 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -9,7 +9,7 @@ export * from './Link';
 export * from './List';
 export * from './Typography/';
 export * from './Accordion';
-export * from './form/NativeSelect';
+export * from './form/Select';
 export * from './Alert';
 export * from './Tag';
 export * from './Chip';
diff --git a/packages/react/stories/showcase.stories.tsx b/packages/react/stories/showcase.stories.tsx
index 8e656f812f..1442862198 100644
--- a/packages/react/stories/showcase.stories.tsx
+++ b/packages/react/stories/showcase.stories.tsx
@@ -11,11 +11,11 @@ import {
   Divider,
   Heading,
   Link,
-  NativeSelect,
   Pagination,
   Paragraph,
   Radio,
   Search,
+  Select,
   Switch,
   Table,
   Tabs,
@@ -86,12 +86,12 @@ export const Showcase: StoryFn = () => {
         </Heading>
         <div className={classes.tableHeader}>
           <div className={classes.tableAction}>
-            <NativeSelect label='' size='sm'>
+            <Select label='' size='sm'>
               <option value='blank'>Velg handling</option>
               <option value='everest'>Dupliser</option>
               <option value='aconcagua'>Slett</option>
               <option value='denali'>Oppdater</option>
-            </NativeSelect>
+            </Select>
             <Button className={classes.tableBtn} size='sm'>
               Utfør
             </Button>
diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx
index 5dc4306d4d..2815fbd22b 100644
--- a/packages/react/stories/testing.stories.tsx
+++ b/packages/react/stories/testing.stories.tsx
@@ -5,8 +5,8 @@ import {
   Checkbox,
   Chip,
   Combobox,
-  NativeSelect,
   Radio,
+  Select,
   Switch,
   Tag,
   Textfield,
@@ -51,11 +51,11 @@ export const MediumRow: StoryFn<{
           suffix='suffix'
         />
 
-        <NativeSelect size={size}>
+        <Select size={size}>
           <option>opt1</option>
           <option>opt2</option>
           <option>opt3</option>
-        </NativeSelect>
+        </Select>
         <Button size={size}>Knapp</Button>
         <Combobox size={size}>
           <Combobox.Option value='sogndal'>Sogndal</Combobox.Option>