@vertesia/ui 1.3.0 → 1.4.0-dev.20260615.042549Z

package/src/__tests__/test-utils.tsx

@@ -0,0 +1,15 @@
+import { type RenderOptions, type RenderResult, render } from '@testing-library/react';
+import type { ReactElement, ReactNode } from 'react';
+// Use the relative source path so Vitest loads the same React instance the
+// tests themselves use. Going through @vertesia/ui/i18n resolves to the
+// built lib/, which links a separate React copy and triggers React's
+// "Invalid hook call" detector in the a11y suite.
+import { I18nProvider } from '../i18n/index.js';
+
+function Providers({ children }: { children: ReactNode }) {
+    return <I18nProvider lng="en">{children}</I18nProvider>;
+}
+
+export function renderWithProviders(ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>): RenderResult {
+    return render(ui, { wrapper: Providers, ...options });
+}

package/src/__tests__/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  // IDE convenience: when VSCode opens a file under src/__tests__/, it walks up
+  // looking for a tsconfig.json. The package-level tsconfig.json excludes this
+  // directory (tests are not built), so without this file VSCode falls back to
+  // an inferred project, loses the test-only `types` (e.g. vitest globals,
+  // vitest-axe matcher augmentation), and flags valid test code as broken.
+  //
+  // CLI tooling continues to use ../../tsconfig.test.json directly — this file
+  // is purely for editor tooling and is otherwise equivalent.
+  "extends": "../../tsconfig.test.json",
+  "include": [
+    "../**/*",
+    "../i18n/locales/*.json"
+  ],
+  "exclude": [
+    "../../node_modules",
+    "../../lib"
+  ]
+}

package/src/__tests__/vitest-axe.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Type augmentation for `vitest-axe` matchers under modern Vitest.
+ *
+ * `vitest-axe@0.1.0` was published against Vitest 0.x and augments the now-deprecated
+ * `Vi.Assertion` namespace. Vitest 4 declares its matchers on the `Assertion` /
+ * `AsymmetricMatchersContaining` interfaces exported from the `vitest` module, so the
+ * upstream augmentation doesn't reach the editor's TypeScript service. The matchers
+ * themselves work at runtime (registered via `expect.extend(matchers)` in `setup.ts`);
+ * this file just re-declares them on the interfaces the editor actually looks at.
+ *
+ * Scoped to the __tests__/ directory; not shipped (the package's tsconfig excludes
+ * __tests__/**, and this file is .d.ts-only).
+ */
+import 'vitest';
+import type { AxeMatchers } from 'vitest-axe';
+
+declare module 'vitest' {
+    interface Assertion<T = unknown> extends AxeMatchers {}
+    interface AsymmetricMatchersContaining extends AxeMatchers {}
+}

package/src/core/components/Avatar.tsx

@@ -1,25 +1,31 @@
-
 function getRealSize(size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl') {
     switch (size) {
-        case 'xs': return 'size-4';
-        case 'sm': return 'size-6';
-        case 'md': return 'size-8';
-        case 'lg': return 'size-10';
-        case 'xl': return 'size-12';
-        case '2xl': return 'size-14';
-        default: throw new Error('Unexpected size: ' + size);
+        case 'xs':
+            return 'size-4';
+        case 'sm':
+            return 'size-6';
+        case 'md':
+            return 'size-8';
+        case 'lg':
+            return 'size-10';
+        case 'xl':
+            return 'size-12';
+        case '2xl':
+            return 'size-14';
+        default:
+            throw new Error(`Unexpected size: ${size}`);
     }
 }
 
 interface AvatarProps {
-    shape?: "circle" | "rect"
-    src?: string
-    name?: string
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+    shape?: 'circle' | 'rect';
+    src?: string;
+    name?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     color?: string; // the color class
-    className?: string
+    className?: string;
 }
-export function Avatar({ size, src, name, shape = "circle", color = 'bg-gray-500', className }: AvatarProps) {
+export function Avatar({ size, src, name, shape = 'circle', color = 'bg-gray-500', className }: AvatarProps) {
     const rounded = shape === 'circle' ? 'rounded-full' : 'rounded-md';
     const sizeClass = getRealSize(size || 'md');
 
@@ -31,37 +37,40 @@ export function Avatar({ size, src, name, shape = "circle", color = 'bg-gray-500
                 alt={name || src}
                 title={name}
             />
-        )
+        );
     }
 
     if (name) {
         const [first, second] = name.split(' ');
-        let text = second ? `${first[0]}${second[0]}` : `${first[0]}${first[1]}`;
+        const text = second ? `${first[0]}${second[0]}` : `${first[0]}${first[1]}`;
         return (
-            <span className={`inline-flex ${sizeClass} items-center justify-center ${rounded} ${color} ${className}`} title={name}>
-                <span className={`${(size != 'xs') ? 'text-xs' : 'text-[0.6rem]'} font-medium leading-none text-white`}>{text}</span>
+            <span
+                className={`inline-flex ${sizeClass} items-center justify-center ${rounded} ${color} ${className}`}
+                title={name}
+            >
+                <span className={`${size !== 'xs' ? 'text-xs' : 'text-[0.6rem]'} font-medium leading-none text-white`}>
+                    {text}
+                </span>
             </span>
-        )
+        );
     }
 
     return (
         <span className={`inline-block ${sizeClass} overflow-hidden ${rounded} ${color}`}>
-            <svg className="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
+            <svg className="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
             </svg>
         </span>
-    )
+    );
 }
 interface SvgAvatarProps extends Omit<AvatarProps, 'src' | 'name'> {
-    children?: React.ReactNode
-    className?: string
+    children?: React.ReactNode;
+    className?: string;
 }
-export function SvgAvatar({ size, shape = "circle", color = 'bg-gray-500', className, children }: SvgAvatarProps) {
+export function SvgAvatar({ size, shape = 'circle', color = 'bg-gray-500', className, children }: SvgAvatarProps) {
     const rounded = shape === 'circle' ? 'rounded-full' : 'rounded-md';
     const sizeClass = getRealSize(size || 'md');
     return (
-        <span className={`inline-block ${sizeClass} overflow-hidden ${rounded} ${color} ${className}`}>
-            {children}
-        </span>
-    )
-}
+        <span className={`inline-block ${sizeClass} overflow-hidden ${rounded} ${color} ${className}`}>{children}</span>
+    );
+}

package/src/core/components/Center.tsx

@@ -1,12 +1,10 @@
-import clsx from "clsx";
-import { ReactNode } from "react";
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
 
 interface CenterProps {
-    children: ReactNode | ReactNode[]
+    children: ReactNode | ReactNode[];
     className?: string;
 }
 export function Center({ className, children }: CenterProps) {
-    return (
-        <div className={clsx('flex items-center justify-center', className)}>{children}</div>
-    )
-}
+    return <div className={clsx('flex items-center justify-center', className)}>{children}</div>;
+}

package/src/core/components/ComboBox.tsx

@@ -1,12 +1,13 @@
-import { ChevronDownIcon, ChevronUpIcon, XIcon } from 'lucide-react';
 import clsx from 'clsx';
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
-import { AlignType, Popup, PopupController } from "./popup/index";
+import { ChevronDownIcon, ChevronUpIcon, XIcon } from 'lucide-react';
+import React, { type ReactNode, useEffect, useRef, useState } from 'react';
+import { type AlignType, Popup, type PopupController } from './popup/index';
 
-const INPUT_UNSTYLED = "block m-0 p-0 border-0 focus:outline-none focus:ring-0";
-const INPUT_NO_PADDING = "block sm:text-sm sm:leading-6 bg-muted rounded-md border-0 shadow-sm ring-1 ring-inset ring-muted placeholder:text-muted focus:ring-2 focus:ring-inset focus:ring-primary"
-const INPUT = INPUT_NO_PADDING + " py-1.5";
-const COMBOBOX_POPUP = "combobox-popup";
+const INPUT_UNSTYLED = 'block m-0 p-0 border-0 focus:outline-none focus:ring-0';
+const INPUT_NO_PADDING =
+    'block sm:text-sm sm:leading-6 bg-muted rounded-md border-0 shadow-sm ring-1 ring-inset ring-muted placeholder:text-muted focus:ring-2 focus:ring-inset focus:ring-primary';
+const INPUT = `${INPUT_NO_PADDING} py-1.5`;
+const COMBOBOX_POPUP = 'combobox-popup';
 
 function genComboboxPopupId() {
     return `combobox-popup-${Math.floor(Math.random() * 1000000)}`;
@@ -23,7 +24,7 @@ export abstract class OptionAdapter<T> {
         return this.valueOf(item);
     }
     findById(items: T[], id: string) {
-        return items.find(item => this.idOf(item) === id);
+        return items.find((item) => this.idOf(item) === id);
     }
     // override to support creating new items
     createItem(_value: string): T | null {
@@ -59,20 +60,21 @@ export interface ComboBoxLayoutProps<T> {
     Toggle?: React.ComponentType<ComboToggleProps<T>> | null;
 }
 
-export type ComboBoxLayout<T> = Required<ComboBoxLayoutProps<T>>
+export type ComboBoxLayout<T> = Required<ComboBoxLayoutProps<T>>;
 
 export function getDefaultComboBoxLayout<T>(fullWidth?: boolean, unstyledInput?: boolean): ComboBoxLayout<T> {
     return {
         buttonRight: 4,
         buttonWidth: 24,
         maxMenuHeight: 240,
-        menuClass: "w-72 mt-1 border-popover bg-popover text-popover-foreground shadow-md overflow-auto p-0 z-10",
-        inputClass: clsx(unstyledInput ? INPUT_UNSTYLED : INPUT, fullWidth ? "w-full" : "!w-auto"),
-        optionClass: "py-2 px-3 shadow-sm flex flex-col [&.option-selected]:font-semibold [&.option-highlighted]:bg-blue-300",
+        menuClass: 'w-72 mt-1 border-popover bg-popover text-popover-foreground shadow-md overflow-auto p-0 z-10',
+        inputClass: clsx(unstyledInput ? INPUT_UNSTYLED : INPUT, fullWidth ? 'w-full' : '!w-auto'),
+        optionClass:
+            'py-2 px-3 shadow-sm flex flex-col [&.option-selected]:font-semibold [&.option-highlighted]:bg-blue-300',
         Input: ComboInput<T>,
         Menu: ComboMenu<T>,
         Toggle: ComboToggle<T>,
-    }
+    };
 }
 
 export interface ComboBoxApi<T> {
@@ -100,7 +102,7 @@ export interface ComboBoxProps<T> {
     onSelect?: (value: T | null) => void;
     // menu zIndex
     zIndex?: number;
-    focusOnMount?: boolean
+    focusOnMount?: boolean;
     menuGap?: number;
     menuAlign?: AlignType;
     // show X button to clear the current selection
@@ -110,62 +112,101 @@ export interface ComboBoxProps<T> {
     // open the menu when the input is focused
     openOnFocus?: boolean;
 }
-export function ComboBox<T>({ menuAlign = "fill", menuGap, focusOnMount, onSelect, value, zIndex, unstyledInput, fullWidth, api, layout: layoutOpts, adapter, items, placeholder, clearable, noMatchMessage, openOnFocus }: ComboBoxProps<T>) {
+export function ComboBox<T>({
+    menuAlign = 'fill',
+    menuGap,
+    focusOnMount,
+    onSelect,
+    value,
+    zIndex,
+    unstyledInput,
+    fullWidth,
+    api,
+    layout: layoutOpts,
+    adapter,
+    items,
+    placeholder,
+    clearable,
+    noMatchMessage,
+    openOnFocus,
+}: ComboBoxProps<T>) {
     const [popupId] = useState(genComboboxPopupId());
     const popupCtrl = useRef<PopupController | undefined>(undefined);
     const inputRef = useRef<HTMLInputElement>(null);
-    const layout: ComboBoxLayout<T> = layoutOpts ? Object.assign(getDefaultComboBoxLayout<T>(fullWidth, unstyledInput), layoutOpts) : getDefaultComboBoxLayout<T>(fullWidth, unstyledInput);
+    const layout: ComboBoxLayout<T> = layoutOpts
+        ? Object.assign(getDefaultComboBoxLayout<T>(fullWidth, unstyledInput), layoutOpts)
+        : getDefaultComboBoxLayout<T>(fullWidth, unstyledInput);
     const inputBoxRef = React.useRef<HTMLDivElement>(null);
     const ctrl = useComboboxCtrl<T>({
         adapter,
         items,
         value,
-        popupId
+        popupId,
     });
     useEffect(() => {
         if (inputRef.current) {
-            focusOnMount && inputRef.current.focus();
+            if (focusOnMount) inputRef.current.focus();
         }
-    }, [inputRef.current]);
+    }, [focusOnMount]);
     // the onSelect callback may change so we need to refresh it.
     useEffect(() => {
-        ctrl.onSelect = onSelect
+        ctrl.onSelect = onSelect;
         ctrl.popupCtrl = popupCtrl.current;
-    }, [onSelect, popupCtrl.current]);
+    }, [ctrl, onSelect]);
     useEffect(() => {
         if (api && ctrl && inputRef.current) {
             api.current = {
                 open: () => ctrl.openMenu(),
                 close: () => ctrl.closeMenu(),
                 toggle: () => ctrl.toggleMenu(),
-                setInputValue: (value: string) => ctrl.inputText = value,
+                setInputValue: (value: string) => (ctrl.inputText = value),
                 inputValue: ctrl.inputText || '',
                 selectedItem: ctrl.selectedItem,
-                focus: () => inputRef.current?.focus()
-            }
+                focus: () => inputRef.current?.focus(),
+            };
             return () => {
                 api.current = null;
-            }
+            };
         }
-    }, [api, ctrl, inputRef.current]);
+    }, [api, ctrl]);
 
     const showMenu = ctrl.isMenuOpen && (ctrl.filteredItems.length > 0 || !!noMatchMessage);
 
     return (
         <>
-            <layout.Input boxRef={inputBoxRef} inputRef={inputRef} ctrl={ctrl} layout={layout} placeholder={placeholder} clearable={clearable} openOnFocus={openOnFocus} />
+            <layout.Input
+                boxRef={inputBoxRef}
+                inputRef={inputRef}
+                ctrl={ctrl}
+                layout={layout}
+                placeholder={placeholder}
+                clearable={clearable}
+                openOnFocus={openOnFocus}
+            />
             <Popup
                 id={popupId}
                 ctrlRef={popupCtrl}
                 className={COMBOBOX_POPUP}
-                closeOnClick closeOnEsc
+                closeOnClick
+                closeOnEsc
                 onClose={() => ctrl.closeMenu()}
-                isOpen={showMenu} anchor={inputBoxRef} zIndex={zIndex} constraints={{
-                    position: "bottom",
+                isOpen={showMenu}
+                anchor={inputBoxRef}
+                zIndex={zIndex}
+                constraints={{
+                    position: 'bottom',
                     align: menuAlign,
-                    gap: menuGap != null ? menuGap : 4
-                }}>
-                <layout.Menu fillWidth={menuAlign === "fill"} items={ctrl.filteredItems} ctrl={ctrl} layout={layout} adapter={adapter} noMatchMessage={noMatchMessage} />
+                    gap: menuGap != null ? menuGap : 4,
+                }}
+            >
+                <layout.Menu
+                    fillWidth={menuAlign === 'fill'}
+                    items={ctrl.filteredItems}
+                    ctrl={ctrl}
+                    layout={layout}
+                    adapter={adapter}
+                    noMatchMessage={noMatchMessage}
+                />
             </Popup>
         </>
     );
@@ -173,8 +214,8 @@ export function ComboBox<T>({ menuAlign = "fill", menuGap, focusOnMount, onSelec
 
 export interface ComboInputProps<T> {
     layout: ComboBoxLayout<T>;
-    ctrl: ComboboxController<T>,
-    placeholder?: string
+    ctrl: ComboboxController<T>;
+    placeholder?: string;
     boxRef?: React.RefObject<HTMLDivElement | null>;
     inputRef?: React.RefObject<HTMLInputElement | null>;
     clearable?: boolean;
@@ -184,7 +225,8 @@ function ComboInput<T>({ inputRef, placeholder, boxRef, ctrl, layout, clearable,
     const Toggle = layout.Toggle;
     const showClear = clearable && ctrl.selectedItem != null;
     const buttonCount = (Toggle ? 1 : 0) + (showClear ? 1 : 0);
-    const style = buttonCount > 0 ? { paddingRight: `${layout.buttonWidth * buttonCount + layout.buttonRight}px` } : undefined;
+    const style =
+        buttonCount > 0 ? { paddingRight: `${layout.buttonWidth * buttonCount + layout.buttonRight}px` } : undefined;
     return (
         <div className="relative" ref={boxRef}>
             <input
@@ -195,18 +237,51 @@ function ComboInput<T>({ inputRef, placeholder, boxRef, ctrl, layout, clearable,
                 style={style}
                 className={layout.inputClass}
             />
-            <div style={{ position: 'absolute', right: `${layout.buttonRight}px`, top: 0, bottom: 0, display: 'flex', alignItems: 'center', gap: '2px' }}>
+            <div
+                style={{
+                    position: 'absolute',
+                    right: `${layout.buttonRight}px`,
+                    top: 0,
+                    bottom: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '2px',
+                }}
+            >
                 {showClear && (
                     <button
-                        style={{ border: 'none', padding: 0, margin: 0, backgroundColor: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', width: `${layout.buttonWidth}px` }}
-                        onClick={() => { ctrl.selectedItem = null; }}
+                        type="button"
+                        style={{
+                            border: 'none',
+                            padding: 0,
+                            margin: 0,
+                            backgroundColor: 'transparent',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            width: `${layout.buttonWidth}px`,
+                        }}
+                        onClick={() => {
+                            ctrl.selectedItem = null;
+                        }}
                     >
                         <XIcon className="w-4 h-4" />
                     </button>
                 )}
                 {Toggle && (
+                    // Raw <button> — spreads ctrl.getToggleButtonProps() from downshift; props must attach to the DOM element directly.
                     <button
-                        style={{ width: `${layout.buttonWidth}px`, border: 'none', padding: 0, margin: 0, backgroundColor: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                        type="button"
+                        style={{
+                            width: `${layout.buttonWidth}px`,
+                            border: 'none',
+                            padding: 0,
+                            margin: 0,
+                            backgroundColor: 'transparent',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
                         {...ctrl.getToggleButtonProps()}
                     >
                         <Toggle ctrl={ctrl} layout={layout} />
@@ -214,7 +289,7 @@ function ComboInput<T>({ inputRef, placeholder, boxRef, ctrl, layout, clearable,
                 )}
             </div>
         </div>
-    )
+    );
 }
 
 export interface ComboToggleProps<T> {
@@ -236,47 +311,53 @@ export interface ComboMenuProps<T> {
 function ComboMenu<T>({ fillWidth, items, layout, ctrl, adapter, noMatchMessage }: ComboMenuProps<T>) {
     const { highlightedIndex, selectedItem } = ctrl;
     if (items.length === 0) {
-        return noMatchMessage
-            ? <div style={{ width: fillWidth ? '100%' : undefined }} className={layout.menuClass}>{noMatchMessage}</div>
-            : null;
+        return noMatchMessage ? (
+            <div style={{ width: fillWidth ? '100%' : undefined }} className={layout.menuClass}>
+                {noMatchMessage}
+            </div>
+        ) : null;
     }
     return (
-        <ul style={{ width: fillWidth ? "100%" : undefined, maxHeight: layout.maxMenuHeight ? `${layout.maxMenuHeight}px` : '240px' }}
-            className={layout.menuClass} {...ctrl.getMenuProps()}>
+        <ul
+            style={{
+                width: fillWidth ? '100%' : undefined,
+                maxHeight: layout.maxMenuHeight ? `${layout.maxMenuHeight}px` : '240px',
+            }}
+            className={layout.menuClass}
+            {...ctrl.getMenuProps()}
+        >
             {items.map((item, index) => (
                 <li
                     data-index={index}
                     key={adapter.idOf(item)}
-                    className={clsx(layout.optionClass,
-                        highlightedIndex === index && "option-highlighted",
-                        selectedItem === item && "option-selected")}
+                    className={clsx(
+                        layout.optionClass,
+                        highlightedIndex === index && 'option-highlighted',
+                        selectedItem === item && 'option-selected',
+                    )}
                     {...ctrl.getItemProps(item, index)}
                 >
                     {adapter.renderOption(item)}
                 </li>
-            ))
-            }
-        </ul >
-    )
+            ))}
+        </ul>
+    );
 }
 
-
-
 export interface ComboboxControllerProps<ItemT> {
-    adapter: OptionAdapter<ItemT>,
-    items: ItemT[],
-    value?: ItemT | string | null,
+    adapter: OptionAdapter<ItemT>;
+    items: ItemT[];
+    value?: ItemT | string | null;
     popupId: string;
 }
 export function useComboboxCtrl<ItemT>(props: ComboboxControllerProps<ItemT>): ComboboxController<ItemT> {
     const [ctrl, setCtrl] = useState<ComboboxController<ItemT>>(new ComboboxController(props));
     useEffect(() => {
         ctrl?.withState(setCtrl);
-    }, []);
+    }, [ctrl]);
     return ctrl;
 }
 
-
 class ComboboxController<ItemT> {
     private popupId: string;
     public items: ItemT[];
@@ -285,7 +366,7 @@ class ComboboxController<ItemT> {
     private setState?: (ctrl: ComboboxController<ItemT>) => void;
     private _selectedItem: ItemT | null = null;
     private _filteredItems: ItemT[];
-    private _inputText: string = "";
+    private _inputText: string = '';
     private _highlightedIndex: number | null = null;
     private _isMenuOpen: boolean = false;
     popupCtrl?: PopupController;
@@ -294,7 +375,7 @@ class ComboboxController<ItemT> {
         this.adapter = adapter;
         this.items = items;
         this.popupId = popupId;
-        if (typeof value === "string") {
+        if (typeof value === 'string') {
             this._inputText = value;
         } else if (value) {
             this._selectedItem = adapter.findById(items, adapter.idOf(value)) || null;
@@ -328,7 +409,7 @@ class ComboboxController<ItemT> {
     }
 
     private updateState() {
-        this.setState?.(this.clone())
+        this.setState?.(this.clone());
     }
 
     get filteredItems() {
@@ -344,10 +425,8 @@ class ComboboxController<ItemT> {
 
     set selectedItem(item: ItemT | null) {
         this._selectedItem = item;
-        this._inputText = item ? this.adapter.valueOf(item) : "";
-        this._filteredItems = this._inputText ?
-            this.adapter.filter(this.items, this._inputText)
-            : this.items;
+        this._inputText = item ? this.adapter.valueOf(item) : '';
+        this._filteredItems = this._inputText ? this.adapter.filter(this.items, this._inputText) : this.items;
         this.updateState();
         this.onSelect?.(item);
     }
@@ -371,7 +450,7 @@ class ComboboxController<ItemT> {
         if (this.isMenuOpen && this.popupCtrl) {
             const popupCtrl = this.popupCtrl;
             const popupPosition = popupCtrl.context?.position?.position;
-            if (popupPosition && popupPosition === "top") {
+            if (popupPosition && popupPosition === 'top') {
                 window.setTimeout(() => {
                     popupCtrl.update();
                 }, 100);
@@ -428,7 +507,7 @@ class ComboboxController<ItemT> {
     }
 
     getMenuProps() {
-        return {}
+        return {};
     }
 
     getToggleButtonProps() {
@@ -436,13 +515,13 @@ class ComboboxController<ItemT> {
             onClick: () => {
                 this._isMenuOpen = !this._isMenuOpen;
                 this.updateState();
-            }
-        }
+            },
+        };
     }
 
     getItemProps(item: ItemT, index: number): React.HTMLProps<HTMLLIElement> {
         return {
-            "aria-selected": this._highlightedIndex === index,
+            'aria-selected': this._highlightedIndex === index,
             onClick: () => {
                 this.selectedItem = item;
                 this.closeMenu();
@@ -456,8 +535,8 @@ class ComboboxController<ItemT> {
                 if (this.highlightedIndex === index) {
                     this.highlightedIndex = null;
                 }
-            }
-        }
+            },
+        };
     }
 
     getInputProps() {
@@ -474,7 +553,7 @@ class ComboboxController<ItemT> {
             value: this.inputText,
             onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {
                 const key = ev.key;
-                if (key === "Enter") {
+                if (key === 'Enter') {
                     if (this.highlightedIndex != null) {
                         this.selectedItem = items[this.highlightedIndex || 0];
                     } else {
@@ -488,23 +567,28 @@ class ComboboxController<ItemT> {
                         }
                     }
                     this.closeMenu();
-                } else if (key === "ArrowDown") {
+                } else if (key === 'ArrowDown') {
                     if (this.isMenuOpen) {
-                        this.highlightIndex(this.highlightedIndex === null ? 0 : incrModulo(this.highlightedIndex, items.length), false);
+                        this.highlightIndex(
+                            this.highlightedIndex === null ? 0 : incrModulo(this.highlightedIndex, items.length),
+                            false,
+                        );
                     } else {
                         this.openMenu();
                     }
-                } else if (key === "ArrowUp") {
+                } else if (key === 'ArrowUp') {
                     if (this.isMenuOpen) {
-                        this.highlightIndex(this.highlightedIndex === null ? 0 : decrModulo(this.highlightedIndex, items.length), true);
+                        this.highlightIndex(
+                            this.highlightedIndex === null ? 0 : decrModulo(this.highlightedIndex, items.length),
+                            true,
+                        );
                     }
                 }
-            }
-        }
+            },
+        };
     }
 }
 
-
 function incrModulo(value: number, max: number) {
     return (value + 1) % max;
 }
@@ -522,4 +606,4 @@ export function SimpleCombobox({
 }) {
     const adapter = creatable ? StringOptionAdapterWithCreate.instance : StringOptionAdapter.instance;
     return <ComboBox adapter={adapter} items={options} {...rest} />;
-}
+}