feat(comp): add defaultSelected and disabledKeys prop to Select

docs/content/components/select.mdx

@@ -10,13 +10,17 @@ Dropdown for selecting an item among different options.
 
 ## Properties
 
-| Property                 | Type      | Default |
-| :----------------------- | :-------- | :------ |
-| `label` (optional)       | `string`  |         |
-| `placeholder` (optional) | `string`  |         |
-| `disabled` (optional)    | `boolean` |         |
-| `required` (optional)    | `boolean` |         |
-| `error` (optional)       | `string`  |         |
+| Property                        | Type                                                                                                     | Default |
+| :------------------------------ | :------------------------------------------------------------------------------------------------------- | :------ |
+| `label` (optional)              | `string`                                                                                                 |         |
+| `placeholder` (optional)        | `string`                                                                                                 |         |
+| `disabled` (optional)           | `boolean`                                                                                                |         |
+| `selectedKey` (optional)        | [Key](https://reactjs.org/docs/lists-and-keys.html)                                                      |         |
+| `defaultSelectedKey` (optional) | [Key](https://reactjs.org/docs/lists-and-keys.html)                                                      |         |
+| `disabledKeys` (optional)       | [Iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)`<Key>` |         |
+| `required` (optional)           | `boolean`                                                                                                |         |
+| `error` (optional)              | `string`                                                                                                 |         |
+| `onSelectionChange` (optional)  | `(key: Key) => any`                                                                                      |         |
 
 ## Import
 
@@ -56,14 +60,67 @@ import { Item } from '@marigold/components';
 </Select>
 ```
 
-### Disabeld Select
+### Default selected Key (uncontrolled)
+
+```tsx
+<Select
+  label="Choose Color (uncontrolled)"
+  htmlFor="id"
+  defaultSelectedKey="Red"
+>
+  <Item key="Red">Red</Item>
+  <Item key="Orange">Orange</Item>
+  <Item key="Yellow">Yellow</Item>
+  <Item key="Green">Green</Item>
+  <Item key="Blue">Blue</Item>
+  <Item key="Purple">Purple</Item>
+</Select>
+```
+
+### Selected Key (controlled)
+
+```tsx
+() => {
+  const [color, setColor] = React.useState('Red');
+  return (
+    <Select
+      label="Choose Color (controlled)"
+      htmlFor="id"
+      selectedKey={color}
+      onSelectionChange={selected => setColor(selected)}
+    >
+      <Item key="Red">Red</Item>
+      <Item key="Orange">Orange</Item>
+      <Item key="Yellow">Yellow</Item>
+      <Item key="Green">Green</Item>
+      <Item key="Blue">Blue</Item>
+      <Item key="Purple">Purple</Item>
+    </Select>
+  );
+};
+```
+
+### Disabled Select
 
 ```tsx
 <Select label="Disabled Select:" disabled placeholder="disabled Select">
   <Item>disabled Item</Item>
 </Select>
 ```
 
+### Disabled Keys
+
+```tsx
+<Select label="Favorite Color" htmlFor="id" disabledKeys={['Orange', 'Yellow']}>
+  <Item key="Red">Red</Item>
+  <Item key="Orange">Orange</Item>
+  <Item key="Yellow">Yellow</Item>
+  <Item key="Green">Green</Item>
+  <Item key="Blue">Blue</Item>
+  <Item key="Purple">Purple</Item>
+</Select>
+```
+
 ### Required label Select
 
 ```tsx

packages/components/src/Select/Option.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import type { ListState } from '@react-stately/list';
 import type { Node } from '@react-types/shared';
 import { useOption } from '@react-aria/listbox';
@@ -12,6 +12,7 @@ interface OptionProps {
 
 export const Option = ({ item, state }: OptionProps) => {
   const ref = useRef<HTMLLIElement>(null);
+  const [disabled, setDisabled] = useState(false);
   const { optionProps, isSelected } = useOption(
     {
       key: item.key,
@@ -20,12 +21,26 @@ export const Option = ({ item, state }: OptionProps) => {
     ref
   );
 
+  useEffect(() => {
+    for (const key of state.disabledKeys.values()) {
+      if (key === item.key) {
+        setDisabled(true);
+      }
+    }
+  }, [state.disabledKeys, item.key]);
+
   return (
     <Box
       as="li"
       {...optionProps}
       ref={ref}
-      variant={isSelected ? 'select.option.selected' : 'select.option'}
+      variant={
+        isSelected
+          ? 'select.option.selected'
+          : disabled
+          ? 'select.option.disabled'
+          : 'select.option'
+      }
     >
       {item.rendered}
     </Box>

packages/components/src/Select/Select.stories.mdx

@@ -53,16 +53,16 @@ import { Item } from '@marigold/components';
 # Select
 
 export const Template = args => (
-    <Select label="Favorite Color" htmlFor="id" {...args}>
-      {/* Storybook crashes with imported <Item> component
+  <Select label="Favorite Color" htmlFor="id" {...args}>
+    {/* Storybook crashes with imported <Item> component
       <Item>Red</Item>
       <Item>Orange</Item>
       <Item>Yellow</Item> */}
-    </Select>
+  </Select>
 );
 
 <Canvas>
   <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-<ArgsTable story="Default" />
+<ArgsTable story="Default" />

packages/components/src/Select/Select.test.tsx

@@ -227,3 +227,55 @@ test('allow users to dismiss the popup with hidden dismiss button', () => {
   fireEvent.click(dismissButton);
   expect(selectButton).toHaveAttribute('aria-expanded', 'false');
 });
+
+test('supports default selectedKey prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId" defaultSelectedKey="Red">
+        <Item key="Red">Red</Item>
+        <Item key="Orange">Orange</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  expect(button).toHaveTextContent('Red');
+});
+
+test('supports change default selectedKey', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId" defaultSelectedKey="Red">
+        <Item key="Red">Red</Item>
+        <Item key="Orange">Orange</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  expect(button).toHaveTextContent('Red');
+
+  fireEvent.click(button);
+  const items = screen.getAllByText(/Red/);
+  fireEvent.click(items[1]);
+
+  expect(button).toHaveTextContent('Red');
+});
+
+test('supports disabled item prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId" disabledKeys={['Red']}>
+        <Item key="Red">Red</Item>
+        <Item key="Orange">Orange</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  fireEvent.click(button);
+  const redItem = screen.getAllByText(/Red/);
+  fireEvent.click(redItem[1]);
+  expect(button).toHaveTextContent('Select an option');
+
+  const orangeItem = screen.getAllByText(/Orange/);
+  fireEvent.click(orangeItem[1]);
+  expect(button).toHaveTextContent('Orange');
+});

packages/components/src/Select/Select.tsx

@@ -7,6 +7,7 @@ import { HiddenSelect, useSelect } from '@react-aria/select';
 import type { AriaSelectProps } from '@react-types/select';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 import { useOverlayTrigger, useOverlayPosition } from '@react-aria/overlays';
+import { SingleSelection } from '@react-types/shared';
 
 import { ComponentProps } from '@marigold/types';
 import { ArrowDown, ArrowUp, Exclamation, Required } from '@marigold/icons';
@@ -24,7 +25,8 @@ export type SelectProps = {
   required?: boolean;
   error?: string;
 } & ComponentProps<'select'> &
-  AriaSelectProps<object>;
+  AriaSelectProps<object> &
+  SingleSelection;
 
 export const Select = ({
   placeholder = 'Select an option',

themes/theme-b2b/src/index.ts

@@ -548,6 +548,11 @@ const theme: BaseTheme = {
         color: colors.gray00,
         bg: colors.blue60,
       },
+      disabled: {
+        ...selectOption,
+        cursor: 'not-allowed',
+        color: colors.gray40,
+      },
     },
   },
   validation: {

themes/theme-unicorn/src/index.ts

@@ -556,6 +556,10 @@ const theme: BaseTheme = {
         color: colors.gray00,
         bg: colors.blue60,
       },
+      disabled: {
+        ...selectOption,
+        color: colors.gray40,
+      },
     },
   },
   validation: {