wrap Autocomplete component

src/renderer/features/tag-editor/components/song-edit-modal.tsx

@@ -1,4 +1,3 @@
-import { Autocomplete } from '@mantine/core';
 import { closeAllModals } from '@mantine/modals';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +11,7 @@ import { TagEditorSettings } from './tag-editor-settings';
 import { TagFieldRow } from './tag-field-row';
 
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Autocomplete } from '/@/shared/components/autocomplete/autocomplete';
 import { Button } from '/@/shared/components/button/button';
 import { Checkbox } from '/@/shared/components/checkbox/checkbox';
 import { Group } from '/@/shared/components/group/group';

src/renderer/features/tag-editor/components/tag-editor-settings.tsx

@@ -1,4 +1,3 @@
-import { Autocomplete } from '@mantine/core';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiAddLine, RiCloseLine } from 'react-icons/ri';
@@ -7,6 +6,7 @@ import { KNOWN_TAG_MAP, KNOWN_TAGS, resolveTagKey } from '../utils/known-tags';
 
 import { useSettingsStoreActions, useTagEditorSettings } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Autocomplete } from '/@/shared/components/autocomplete/autocomplete';
 import { Fieldset } from '/@/shared/components/fieldset/fieldset';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';

src/shared/components/autocomplete/autocomplete.module.css

@@ -0,0 +1,49 @@
+.root {
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
+}
+
+.input {
+    width: 100%;
+    border: 1px solid transparent;
+
+    &[data-variant='default'] {
+        color: var(--theme-colors-surface-foreground);
+        background: var(--theme-colors-surface);
+    }
+
+    &[data-variant='filled'] {
+        color: var(--theme-colors-foreground);
+        background: var(--theme-colors-background);
+    }
+}
+
+.input:focus,
+.input:focus-visible {
+    border-color: lighten(var(--theme-colors-border), 10%);
+}
+
+.label {
+    margin-bottom: var(--theme-spacing-sm);
+}
+
+.section {
+    color: var(--theme-colors-foreground-muted);
+}
+
+.dropdown {
+    padding: var(--theme-spacing-xs);
+    color: var(--theme-colors-surface-foreground);
+    background: var(--theme-colors-surface);
+    border: 1px solid var(--theme-colors-border);
+}
+
+.option {
+    position: relative;
+    padding: var(--theme-spacing-sm) var(--theme-spacing-md);
+}
+
+.option:hover {
+    background: lighten(var(--theme-colors-surface), 5%);
+}

src/shared/components/autocomplete/autocomplete.tsx

@@ -0,0 +1,46 @@
+import type { AutocompleteProps as MantineAutocompleteProps } from '@mantine/core';
+
+import { Autocomplete as MantineAutocomplete } from '@mantine/core';
+import { CSSProperties, forwardRef } from 'react';
+
+import styles from './autocomplete.module.css';
+
+export interface AutocompleteProps extends MantineAutocompleteProps {
+    maxWidth?: CSSProperties['maxWidth'];
+    width?: CSSProperties['width'];
+}
+
+export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
+    (
+        {
+            classNames,
+            maxWidth,
+            size = 'sm',
+            style,
+            variant = 'default',
+            width,
+            ...props
+        }: AutocompleteProps,
+        ref,
+    ) => {
+        return (
+            <MantineAutocomplete
+                classNames={{
+                    dropdown: styles.dropdown,
+                    input: styles.input,
+                    label: styles.label,
+                    option: styles.option,
+                    root: styles.root,
+                    section: styles.section,
+                    ...classNames,
+                }}
+                ref={ref}
+                size={size}
+                spellCheck={false}
+                style={{ maxWidth, width, ...style }}
+                variant={variant}
+                {...props}
+            />
+        );
+    },
+);