fix(Select): option and optgroup compond components

digdir · Sep 15, 2024 · c406f4d · c406f4d
1 parent ab65142
commit c406f4d
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 61 deletions.
diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx
@@ -87,10 +87,10 @@ export const Components = () => {
         <div className={classes.tableHeader}>
           <div className={classes.tableAction}>
             <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>
+              <Select.Option value='blank'>Velg handling</Select.Option>
+              <Select.Option value='everest'>Dupliser</Select.Option>
+              <Select.Option value='aconcagua'>Slett</Select.Option>
+              <Select.Option value='denali'>Oppdater</Select.Option>
             </Select>
             <Button className={classes.tableBtn} size='sm'>
               Utfør

diff --git a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx
@@ -116,8 +116,8 @@ export const ThemeToolbar = ({
               onContrastModeChanged(e.target.value as 'aa' | 'aaa');
             }}
           >
-            <option value='aa'>AA</option>
-            <option value='aaa'>AAA (WIP)</option>
+            <Select.Option value='aa'>AA</Select.Option>
+            <Select.Option value='aaa'>AAA (WIP)</Select.Option>
           </Select>
         </div>
         <div className={classes.borderRadii}>
@@ -132,15 +132,15 @@ export const ThemeToolbar = ({
             }}
           >
             {Object.entries(borderRadii).map(([key, value]) => (
-              <option
+              <Select.Option
                 key={key}
                 value={value}
                 style={{
                   textTransform: 'capitalize',
                 }}
               >
                 {key}
-              </option>
+              </Select.Option>
             ))}
           </Select>
         </div>

diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/Card/Card.stories.tsx
@@ -289,9 +289,9 @@ export const Composed: Story = () => (
     <Card.Content>
       <Select label='Velg rolle'>
         {options.map(({ value, label }, index) => (
-          <option key={index} value={value}>
+          <Select.Option key={index} value={value}>
             {label}
-          </option>
+          </Select.Option>
         ))}
       </Select>
       <Textfield label='Fødsels- eller d-nummer' />

diff --git a/packages/react/src/components/form/Select/Select.mdx b/packages/react/src/components/form/Select/Select.mdx
@@ -22,9 +22,9 @@ For eksempel er det ikke mulig å overstyre formateringen av alternativene.
 import { Select } from '@digdir/designsystemet-react';
 
 <Select label='Ta et valg'>
-  <option value='1'>Alternativ 1</option>
-  <option value='2'>Alternativ 2</option>
-  <option value='3'>Alternativ 3</option>
+  <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>;
 ```
 

diff --git a/packages/react/src/components/form/Select/Select.stories.tsx b/packages/react/src/components/form/Select/Select.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Select } from './Select';
+import { Select } from './';
 
 export default {
   title: 'Komponenter/Select',
@@ -12,15 +12,15 @@ export default {
 
 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>
-    <option value='denali'>Denali</option>
-    <option value='kilimanjaro'>Kilimanjaro</option>
-    <option value='elbrus'>Elbrus</option>
-    <option value='vinson'>Mount Vinson</option>
-    <option value='puncakjaya'>Puncak Jaya</option>
-    <option value='kosciuszko'>Mount Kosciuszko</option>
+    <Select.Option value='blank'>Velg &hellip;</Select.Option>
+    <Select.Option value='everest'>Mount Everest</Select.Option>
+    <Select.Option value='aconcagua'>Aconcagua</Select.Option>
+    <Select.Option value='denali'>Denali</Select.Option>
+    <Select.Option value='kilimanjaro'>Kilimanjaro</Select.Option>
+    <Select.Option value='elbrus'>Elbrus</Select.Option>
+    <Select.Option value='vinson'>Mount Vinson</Select.Option>
+    <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
+    <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
   </Select>
 );
 
@@ -33,15 +33,15 @@ Preview.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>
-    <option value='denali'>Denali</option>
-    <option value='kilimanjaro'>Kilimanjaro</option>
-    <option value='elbrus'>Elbrus</option>
-    <option value='vinson'>Mount Vinson</option>
-    <option value='puncakjaya'>Puncak Jaya</option>
-    <option value='kosciuszko'>Mount Kosciuszko</option>
+    <Select.Option value='blank'>Velg &hellip;</Select.Option>
+    <Select.Option value='everest'>Mount Everest</Select.Option>
+    <Select.Option value='aconcagua'>Aconcagua</Select.Option>
+    <Select.Option value='denali'>Denali</Select.Option>
+    <Select.Option value='kilimanjaro'>Kilimanjaro</Select.Option>
+    <Select.Option value='elbrus'>Elbrus</Select.Option>
+    <Select.Option value='vinson'>Mount Vinson</Select.Option>
+    <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
+    <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
   </Select>
 );
 
@@ -52,15 +52,15 @@ Disabled.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>
-    <option value='denali'>Denali</option>
-    <option value='kilimanjaro'>Kilimanjaro</option>
-    <option value='elbrus'>Elbrus</option>
-    <option value='vinson'>Mount Vinson</option>
-    <option value='puncakjaya'>Puncak Jaya</option>
-    <option value='kosciuszko'>Mount Kosciuszko</option>
+    <Select.Option value='blank'>Velg &hellip;</Select.Option>
+    <Select.Option value='everest'>Mount Everest</Select.Option>
+    <Select.Option value='aconcagua'>Aconcagua</Select.Option>
+    <Select.Option value='denali'>Denali</Select.Option>
+    <Select.Option value='kilimanjaro'>Kilimanjaro</Select.Option>
+    <Select.Option value='elbrus'>Elbrus</Select.Option>
+    <Select.Option value='vinson'>Mount Vinson</Select.Option>
+    <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
+    <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
   </Select>
 );
 
@@ -71,14 +71,14 @@ WithError.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>
-    <option value='kilimanjaro'>Kilimanjaro</option>
-    <option value='elbrus'>Elbrus</option>
-    <option value='vinson'>Mount Vinson</option>
-    <option value='puncakjaya'>Puncak Jaya</option>
-    <option value='kosciuszko'>Mount Kosciuszko</option>
+    <Select.Option value='everest'>Mount Everest</Select.Option>
+    <Select.Option value='aconcagua'>Aconcagua</Select.Option>
+    <Select.Option value='denali'>Denali</Select.Option>
+    <Select.Option value='kilimanjaro'>Kilimanjaro</Select.Option>
+    <Select.Option value='elbrus'>Elbrus</Select.Option>
+    <Select.Option value='vinson'>Mount Vinson</Select.Option>
+    <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
+    <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
   </Select>
 );
 

diff --git a/packages/react/src/components/form/Select/Select.test.tsx b/packages/react/src/components/form/Select/Select.test.tsx
@@ -3,8 +3,7 @@ import userEvent from '@testing-library/user-event';
 import type { RefObject } from 'react';
 import { act, createRef } from 'react';
 
-import type { SelectProps } from './Select';
-import { Select } from './Select';
+import { Select, type SelectProps } from './';
 
 const user = userEvent.setup();
 
@@ -15,9 +14,9 @@ const options: { label: string; value: string }[] = [
   { label: 'Option 3', value: '3' },
 ];
 const children = options.map(({ label, value }) => (
-  <option key={value} value={value}>
+  <Select.Option key={value} value={value}>
     {label}
-  </option>
+  </Select.Option>
 ));
 const defaultProps: SelectProps = {
   children,

diff --git a/packages/react/src/components/form/Select/SelectOptgroup.tsx b/packages/react/src/components/form/Select/SelectOptgroup.tsx
@@ -0,0 +1,20 @@
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import type { OptgroupHTMLAttributes } from 'react';
+
+export type SelectOptgroupProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & OptgroupHTMLAttributes<HTMLOptGroupElement>;
+
+export const SelectOptgroup = forwardRef<
+  HTMLOptGroupElement,
+  SelectOptgroupProps
+>(function SelectOptgroup({ asChild, ...rest }, ref) {
+  const Component = asChild ? Slot : 'optgroup';
+
+  return <Component {...rest} ref={ref} />;
+});
diff --git a/packages/react/src/components/form/Select/SelectOption.tsx b/packages/react/src/components/form/Select/SelectOption.tsx
@@ -0,0 +1,19 @@
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import type { OptionHTMLAttributes } from 'react';
+
+export type SelectOptionProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & OptionHTMLAttributes<HTMLOptionElement>;
+
+export const SelectOption = forwardRef<HTMLOptionElement, SelectOptionProps>(
+  function SelectOption({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'option';
+
+    return <Component {...rest} ref={ref} />;
+  },
+);
diff --git a/packages/react/src/components/form/Select/index.ts b/packages/react/src/components/form/Select/index.ts
@@ -1,2 +1,21 @@
-export { Select } from './Select';
+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;
+
+Select.Option.displayName = 'Select.Option';
+Select.Optgroup.displayName = 'Select.Optgroup';
+
 export type { SelectProps } from './Select';
+export type { SelectOptionProps } from './SelectOption';
+export type { SelectOptgroupProps } from './SelectOptgroup';
+export { Select, SelectOption, SelectOptgroup };
diff --git a/packages/react/stories/showcase.stories.tsx b/packages/react/stories/showcase.stories.tsx
@@ -87,10 +87,10 @@ export const Showcase: StoryFn = () => {
         <div className={classes.tableHeader}>
           <div className={classes.tableAction}>
             <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>
+              <Select.Option value='blank'>Velg handling</Select.Option>
+              <Select.Option value='everest'>Dupliser</Select.Option>
+              <Select.Option value='aconcagua'>Slett</Select.Option>
+              <Select.Option value='denali'>Oppdater</Select.Option>
             </Select>
             <Button className={classes.tableBtn} size='sm'>
               Utfør

diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx
@@ -52,9 +52,9 @@ export const MediumRow: StoryFn<{
         />
 
         <Select size={size}>
-          <option>opt1</option>
-          <option>opt2</option>
-          <option>opt3</option>
+          <Select.Option>opt1</Select.Option>
+          <Select.Option>opt2</Select.Option>
+          <Select.Option>opt3</Select.Option>
         </Select>
         <Button size={size}>Knapp</Button>
         <Combobox size={size}>