From 7058b690e82951e9d9a2be1f2a6853f70f1f824c Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Thu, 31 Oct 2024 15:52:36 +0100
Subject: [PATCH] fix(Select): use field (#2709)

Part of #2311
---
 .../src/components/form/Select/Select.mdx     | 18 +++---
 .../components/form/Select/Select.stories.tsx | 48 ++++----------
 .../src/components/form/Select/Select.tsx     |  4 +-
 .../react/src/components/form/Select/index.ts | 13 ++--
 .../src/components/form/Select/useSelect.ts   | 64 -------------------
 5 files changed, 30 insertions(+), 117 deletions(-)
 delete mode 100644 packages/react/src/components/form/Select/useSelect.ts

diff --git a/packages/react/src/components/form/Select/Select.mdx b/packages/react/src/components/form/Select/Select.mdx
index b56fe8f323..6109a6e38d 100644
--- a/packages/react/src/components/form/Select/Select.mdx
+++ b/packages/react/src/components/form/Select/Select.mdx
@@ -18,14 +18,16 @@ For eksempel er det ikke mulig å overstyre formateringen av alternativene.
 ## Bruk
 
 ```tsx
-import { Select } from '@digdir/designsystemet-react';
-
-<Label htmlFor='my-select'>Ta et valg</Label>
-<Select id='my-select'>
-  <Select.Option value='1'>Alternativ 1</Select.Option>
-  <Select.Option value='2'>Alternativ 2</Select.Option>
-  <Select.Option value='3'>Alternativ 3</Select.Option>
-</Select>;
+import { Select, Field } from '@digdir/designsystemet-react';
+
+<Field>
+  <Label>Ta et valg</Label>
+  <Select>
+    <Select.Option value='1'>Alternativ 1</Select.Option>
+    <Select.Option value='2'>Alternativ 2</Select.Option>
+    <Select.Option value='3'>Alternativ 3</Select.Option>
+  </Select>
+</Field>
 ```
 
 ## Eksempler
diff --git a/packages/react/src/components/form/Select/Select.stories.tsx b/packages/react/src/components/form/Select/Select.stories.tsx
index 301628f919..9edbd811e6 100644
--- a/packages/react/src/components/form/Select/Select.stories.tsx
+++ b/packages/react/src/components/form/Select/Select.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Label } from '../../Label';
-import { Select } from './';
+import { Field, Label, Select, ValidationMessage } from '../../';
 
 export default {
   title: 'Komponenter/Select',
@@ -9,24 +8,11 @@ export default {
   parameters: {
     layout: 'padded',
   },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          display: 'flex',
-          gap: 'var(--ds-spacing-2)',
-          flexDirection: 'column',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta;
 
 export const Preview: StoryFn<typeof Select> = (args) => (
-  <>
-    <Label htmlFor={args.id}>Velg et fjell</Label>
+  <Field>
+    <Label>Velg et fjell</Label>
     <Select {...args}>
       <Select.Option value='blank'>Velg &hellip;</Select.Option>
       <Select.Option value='everest'>Mount Everest</Select.Option>
@@ -38,7 +24,7 @@ export const Preview: StoryFn<typeof Select> = (args) => (
       <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
       <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
     </Select>
-  </>
+  </Field>
 );
 
 Preview.args = {
@@ -46,12 +32,11 @@ Preview.args = {
   'data-size': 'md',
   disabled: false,
   readOnly: false,
-  id: 'my-select',
 };
 
 export const Disabled: StoryFn<typeof Select> = (args) => (
-  <>
-    <Label htmlFor={args.id}>Velg et fjell</Label>
+  <Field>
+    <Label>Velg et fjell</Label>
     <Select {...args}>
       <Select.Option value='blank'>Velg &hellip;</Select.Option>
       <Select.Option value='everest'>Mount Everest</Select.Option>
@@ -63,17 +48,16 @@ export const Disabled: StoryFn<typeof Select> = (args) => (
       <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
       <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
     </Select>
-  </>
+  </Field>
 );
 
 Disabled.args = {
   disabled: true,
-  id: 'my-select',
 };
 
 export const WithError: StoryFn<typeof Select> = (args) => (
-  <>
-    <Label htmlFor={args.id}>Velg et fjell</Label>
+  <Field>
+    <Label>Velg et fjell</Label>
     <Select {...args}>
       <Select.Option value='blank'>Velg &hellip;</Select.Option>
       <Select.Option value='everest'>Mount Everest</Select.Option>
@@ -85,17 +69,17 @@ export const WithError: StoryFn<typeof Select> = (args) => (
       <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
       <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
     </Select>
-  </>
+    <ValidationMessage>Velg et fjell</ValidationMessage>
+  </Field>
 );
 
 WithError.args = {
   'aria-invalid': true,
-  id: 'my-select',
 };
 
 export const WithOptgroup: StoryFn<typeof Select> = (args) => (
-  <>
-    <Label htmlFor={args.id}>Velg et fjell</Label>
+  <Field>
+    <Label>Velg et fjell</Label>
     <Select {...args}>
       <Select.Optgroup label='Gruppe 1'>
         <Select.Option value='everest'>Mount Everest</Select.Option>
@@ -110,9 +94,5 @@ export const WithOptgroup: StoryFn<typeof Select> = (args) => (
         <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
       </Select.Optgroup>
     </Select>
-  </>
+  </Field>
 );
-
-WithOptgroup.args = {
-  id: 'my-select',
-};
diff --git a/packages/react/src/components/form/Select/Select.tsx b/packages/react/src/components/form/Select/Select.tsx
index f4ec2454bf..004a9a482f 100644
--- a/packages/react/src/components/form/Select/Select.tsx
+++ b/packages/react/src/components/form/Select/Select.tsx
@@ -8,10 +8,10 @@ export type SelectProps = {
    * @default false
    */
   readOnly?: boolean;
-  /** Defines the width of <Select> in count of characters.
+  /** Defines the width of Select in count of characters.
    */
   size?: number;
-} & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'multiple'> &
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'multiple'> &
   DefaultProps;
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
diff --git a/packages/react/src/components/form/Select/index.ts b/packages/react/src/components/form/Select/index.ts
index eee6c6cbf3..624cc6b71f 100644
--- a/packages/react/src/components/form/Select/index.ts
+++ b/packages/react/src/components/form/Select/index.ts
@@ -2,15 +2,10 @@ import { Select as SelectParent } from './Select';
 import { SelectOptgroup } from './SelectOptgroup';
 import { SelectOption } from './SelectOption';
 
-type SelectComponent = typeof SelectParent & {
-  Option: typeof SelectOption;
-  Optgroup: typeof SelectOptgroup;
-};
-
-const Select = SelectParent as SelectComponent;
-
-Select.Option = SelectOption;
-Select.Optgroup = SelectOptgroup;
+const Select = Object.assign(SelectParent, {
+  Option: SelectOption,
+  Optgroup: SelectOptgroup,
+});
 
 Select.Option.displayName = 'Select.Option';
 Select.Optgroup.displayName = 'Select.Optgroup';
diff --git a/packages/react/src/components/form/Select/useSelect.ts b/packages/react/src/components/form/Select/useSelect.ts
deleted file mode 100644
index c1919ec59e..0000000000
--- a/packages/react/src/components/form/Select/useSelect.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { SelectHTMLAttributes } from 'react';
-import { useContext } from 'react';
-
-import { FieldsetContext } from '../Fieldset/FieldsetContext';
-import type { FormField } from '../useFormField';
-import { useFormField } from '../useFormField';
-
-import type { SelectProps } from './Select';
-
-type UseSelect = (props: SelectProps) => Omit<FormField, 'inputProps'> & {
-  selectProps: Pick<
-    SelectHTMLAttributes<HTMLSelectElement>,
-    | 'name'
-    | 'required'
-    | 'onClick'
-    | 'onChange'
-    | 'id'
-    | 'onKeyDown'
-    | 'onMouseDown'
-  >;
-};
-
-/** Handles props for `Select` in context with `Fieldset` */
-export const useSelect: UseSelect = ({ size: htmlSize, ...props }) => {
-  const fieldset = useContext(FieldsetContext);
-  const {
-    inputProps: selectProps,
-    readOnly = false,
-    size = fieldset?.size ?? 'md',
-    ...rest
-  } = useFormField(props, 'select');
-
-  return {
-    ...rest,
-    readOnly,
-    size,
-    selectProps: {
-      ...selectProps,
-      readOnly,
-      onClick: (event) => {
-        if (readOnly) return event.preventDefault();
-        props?.onClick?.(event);
-      },
-      onKeyDown: (event) => {
-        if (readOnly) {
-          if (event.key === 'Tab') return;
-          return event.preventDefault();
-        }
-        props?.onKeyDown?.(event);
-      },
-      onMouseDown: (event) => {
-        if (readOnly) {
-          if (event.target instanceof HTMLElement) event.target.focus();
-          return event.preventDefault();
-        }
-        props?.onMouseDown?.(event);
-      },
-      onChange: (event) => {
-        if (readOnly) return event.preventDefault();
-        props?.onChange?.(event);
-      },
-    },
-  };
-};