Add clearable prop to single-select SelectField

packages/bento-design-system/src/SelectField/BaseSelect.tsx

@@ -55,6 +55,7 @@ export function BaseSelect<A>(props: Props<A>) {
     autoFocus,
     menuSize = dropdownConfig.defaultMenuSize,
     searchable,
+    clearable = true,
   } = props;
 
   return (
@@ -79,7 +80,11 @@ export function BaseSelect<A>(props: Props<A>) {
             onChange(multiValue.map((a) => a.value));
           } else {
             const singleValue = o as SingleValueT<SelectOption<A>>;
-            onChange(singleValue == null ? undefined : singleValue.value);
+            if (clearable) {
+              onChange(singleValue == null ? undefined : singleValue.value);
+            } else {
+              singleValue != null && onChange(singleValue.value);
+            }
           }
         }}
         onBlur={onBlur}

packages/bento-design-system/src/SelectField/types.ts

@@ -11,13 +11,15 @@ export type SelectOption<A> = Omit<
 
 export type BaseSingleProps = {
   isMulti?: false;
+  clearable?: boolean;
 };
 
 export type BaseMultiProps = {
   isMulti: true;
   showMultiSelectBulkActions?: boolean;
   selectAllButtonLabel?: LocalizedString;
   clearAllButtonLabel?: LocalizedString;
+  clearable?: never;
 } & (
   | {
       multiSelectMode?: "summary";

packages/bento-design-system/stories/Components/SelectField.stories.tsx

@@ -7,7 +7,9 @@ import {
   SelectField,
   BentoConfigProvider,
   SelectFieldProps,
+  SelectOption,
 } from "..";
+import { useState } from "react";
 
 const meta = {
   component: SelectField,
@@ -191,3 +193,23 @@ export const CustomListConfig = {
     ),
   ],
 } satisfies Story;
+
+// NOTE(gabro): using a render function instead of just args, because the `value/onChange` trick we
+// use to make the story controlled doesn't play well with the implementation of `clearable`
+export const NotClearable = {
+  args: {
+    clearable: false,
+  },
+  render: (args) => {
+    const [value, onChange] = useState<number | undefined>(undefined);
+    return (
+      <SelectField
+        label={args.label}
+        clearable={args.clearable}
+        options={args.options as SelectOption<number>[]}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  },
+} satisfies Story;