Create ComboBox from shadcn example (#970)

* Create ComboBox from shadcn example

* Fix issues from review

* Fix ComboBox check marks when no value is selected

* Use better type annotation for ComboBox buttonVariant

* Fix shadcn generated files

* Add ComboBox to basic component preview

* Adjust ComboBox styling

lib/platform-bible-react/dist/index.d.ts

@@ -1,6 +1,6 @@
 // Generated by dts-bundle-generator v9.3.1
 
-import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteValue, SnackbarCloseReason, SnackbarOrigin } from '@mui/material';
+import { SnackbarCloseReason, SnackbarOrigin } from '@mui/material';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -286,40 +286,10 @@ export type ComboBoxLabelOption = {
 	label: string;
 };
 export type ComboBoxOption = string | number | ComboBoxLabelOption;
-export type ComboBoxValue<T, X, Y, Z> = AutocompleteValue<T, X, Y, Z>;
-export type ComboBoxChangeDetails<T> = AutocompleteChangeDetails<T>;
-export type ComboBoxChangeReason = AutocompleteChangeReason;
 export type ComboBoxProps<T> = {
 	/** Optional unique identifier */
 	id?: string;
 	/** Text label title for combobox */
-	title?: string;
-	/**
-	 * If `true`, the component is disabled.
-	 *
-	 * @default false
-	 */
-	isDisabled?: boolean;
-	/**
-	 * If `true`, the component can be cleared, and will have a button to do so
-	 *
-	 * @default true
-	 */
-	isClearable?: boolean;
-	/**
-	 * True when (input related to) switch is erroneous
-	 *
-	 * @default false
-	 */
-	hasError?: boolean;
-	/**
-	 * If `true`, the input will take up the full width of its container.
-	 *
-	 * @default false
-	 */
-	isFullWidth?: boolean;
-	/** Width of the combobox in pixels. Setting this prop overrides the `isFullWidth` prop */
-	width?: number;
 	/** List of available options for the dropdown menu */
 	options?: readonly T[];
 	/** Additional css classes to help with unique styling of the combo box */
@@ -330,21 +300,25 @@ export type ComboBoxProps<T> = {
 	 */
 	value?: T;
 	/** Triggers when content of textfield is changed */
-	onChange?: (event: React$1.SyntheticEvent<Element, Event>, value: ComboBoxValue<T, boolean | undefined, boolean | undefined, boolean | undefined>, reason?: ComboBoxChangeReason, details?: ComboBoxChangeDetails<T> | undefined) => void;
-	/** Triggers when textfield gets focus */
-	onFocus?: React$1.FocusEventHandler<HTMLDivElement>;
-	/** Triggers when textfield loses focus */
-	onBlur?: React$1.FocusEventHandler<HTMLDivElement>;
+	onChange?: (newValue: T) => void;
 	/** Used to determine the string value for a given option. */
 	getOptionLabel?: (option: ComboBoxOption) => string;
+	/** Text displayed on button if `value` is undefined */
+	buttonPlaceholder?: string;
+	/** Placeholder text for text field */
+	textPlaceholder?: string;
+	/** Text to display when no options match input */
+	commandEmptyMessage?: string;
+	/** Variant of button */
+	buttonVariant?: ButtonProps["variant"];
 };
 /**
- * Dropdown selector displaying various options from which to choose
+ * Autocomplete input and command palette with a list of suggestions.
  *
- * Thanks to MUI for heavy inspiration and documentation
- * https://mui.com/material-ui/getting-started/overview/
+ * Thanks to Shadcn for heavy inspiration and documentation
+ * https://ui.shadcn.com/docs/components/combobox
  */
-export declare function ComboBox<T extends ComboBoxOption = ComboBoxOption>({ id, title, isDisabled, isClearable, hasError, isFullWidth, width, options, className, value, onChange, onFocus, onBlur, getOptionLabel, }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBox<T extends ComboBoxOption = ComboBoxOption>({ id, options, className, value, onChange, getOptionLabel, buttonPlaceholder, textPlaceholder, commandEmptyMessage, buttonVariant, }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
 export type MenuItemInfoBase = {
 	/** Text (displayable in the UI) as the name of the menu item */
 	label: string;