chore: upgrade slim-select (@miodec) (#5884)

Finally!

frontend/package.json

@@ -89,7 +89,7 @@
     "konami": "1.6.3",
     "lz-ts": "1.1.2",
     "object-hash": "3.0.0",
-    "slim-select": "2.8.1",
+    "slim-select": "2.9.0",
     "stemmer": "2.0.1",
     "throttle-debounce": "5.0.2",
     "zod": "3.23.8"

frontend/src/ts/elements/account/result-filters.ts

@@ -6,7 +6,6 @@ import Config from "../../config";
 import * as Notifications from "../notifications";
 import Ape from "../../ape/index";
 import * as Loader from "../loader";
-// @ts-expect-error TODO: update slim-select
 import SlimSelect from "slim-select";
 import { QuoteLength } from "@monkeytype/contracts/schemas/configs";
 import {
@@ -346,12 +345,10 @@ export function updateActive(): void {
   }
 
   for (const [id, select] of Object.entries(groupSelects)) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
     const ss = select;
     const group = getGroup(id as ResultFiltersGroup);
     const everythingSelected = Object.values(group).every((v) => v === true);
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
     const newData = ss.store.getData();
 
     const allOption = $(
@@ -680,10 +677,8 @@ function adjustScrollposition(
   group: ResultFiltersGroup,
   topItem: number = 0
 ): void {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
   const slimSelect = groupSelects[group];
   if (slimSelect === undefined) return;
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
   const listElement = slimSelect.render.content.list;
   const topListItem = listElement.children.item(topItem) as HTMLElement;
 
@@ -779,7 +774,6 @@ export async function appendButtons(
     );
     if (el) {
       el.innerHTML = html;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
       groupSelects["language"] = new SlimSelect({
         select: el.querySelector(".languageSelect") as HTMLSelectElement,
         settings: {
@@ -790,16 +784,12 @@ export async function appendButtons(
         },
         events: {
           beforeChange: (
-            // @ts-expect-error TODO: update slim-select
             selectedOptions,
-            // @ts-expect-error TODO: update slim-select
             oldSelectedOptions
           ): void | boolean => {
             return selectBeforeChangeFn(
               "language",
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
               selectedOptions,
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
               oldSelectedOptions
             );
           },
@@ -841,7 +831,6 @@ export async function appendButtons(
     );
     if (el) {
       el.innerHTML = html;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
       groupSelects["funbox"] = new SlimSelect({
         select: el.querySelector(".funboxSelect") as HTMLSelectElement,
         settings: {
@@ -852,16 +841,12 @@ export async function appendButtons(
         },
         events: {
           beforeChange: (
-            // @ts-expect-error TODO: update slim-select
             selectedOptions,
-            // @ts-expect-error TODO: update slim-select
             oldSelectedOptions
           ): void | boolean => {
             return selectBeforeChangeFn(
               "funbox",
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
               selectedOptions,
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
               oldSelectedOptions
             );
           },
@@ -899,7 +884,6 @@ export async function appendButtons(
     );
     if (el) {
       el.innerHTML = html;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
       groupSelects["tags"] = new SlimSelect({
         select: el.querySelector(".tagsSelect") as HTMLSelectElement,
         settings: {
@@ -910,16 +894,12 @@ export async function appendButtons(
         },
         events: {
           beforeChange: (
-            // @ts-expect-error TODO: update slim-select
             selectedOptions,
-            // @ts-expect-error TODO: update slim-select
             oldSelectedOptions
           ): void | boolean => {
             return selectBeforeChangeFn(
               "tags",
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
               selectedOptions,
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
               oldSelectedOptions
             );
           },

frontend/src/ts/elements/leaderboards.ts

@@ -14,7 +14,6 @@ import * as ConnectionState from "../states/connection";
 import * as Skeleton from "../utils/skeleton";
 import { debounce } from "throttle-debounce";
 import Format from "../utils/format";
-// @ts-expect-error TODO: update slim-select
 import SlimSelect from "slim-select";
 import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
 import {
@@ -712,7 +711,6 @@ export function show(): void {
       Config.typingSpeedUnit + '<br><div class="sub">accuracy</div>'
     );
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
     languageSelector = new SlimSelect({
       select:
         "#leaderboardsWrapper #leaderboards .leaderboardsTop .buttonGroup.timeRange .languageSelect",
@@ -737,7 +735,6 @@ export function show(): void {
         selected: lang === currentLanguage,
       })),
       events: {
-        // @ts-expect-error TODO: update slim-select
         afterChange: (newVal): void => {
           currentLanguage = newVal[0]?.value as string;
           updateTitle();

frontend/src/ts/elements/settings/settings-group.ts

@@ -1,7 +1,6 @@
 import { ConfigValue } from "@monkeytype/contracts/schemas/configs";
 import Config from "../../config";
 import * as Notifications from "../notifications";
-// @ts-expect-error TODO: update slim-select
 import SlimSelect from "slim-select";
 import { debounce } from "throttle-debounce";
 
@@ -119,8 +118,7 @@ export default class SettingsGroup<T extends ConfigValue> {
 
       select.value = this.configValue as string;
 
-      //@ts-expect-error
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unnecessary-type-assertion -- TODO: update slim-select
+      //@ts-expect-error this is fine, slimselect adds slim to the element
       const ss = select.slim as SlimSelect | undefined;
       ss?.store.setSelectedBy("value", [this.configValue as string]);
       ss?.render.renderValues();

frontend/src/ts/elements/test-activity.ts

@@ -1,7 +1,5 @@
-// @ts-expect-error TODO: update slim-select
 import SlimSelect from "slim-select";
-// @ts-expect-error TODO: update slim-select
-import type { DataObjectPartial } from "slim-select/dist/store";
+import { DataObjectPartial } from "slim-select/store";
 import { getTestActivityCalendar } from "../db";
 import * as ServerConfiguration from "../ape/server-configuration";
 import * as DB from "../db";
@@ -18,7 +16,6 @@ export function init(
   }
   $("#testActivity").removeClass("hidden");
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
   yearSelector = getYearSelector();
   initYearSelector("current", userSignUpDate?.getFullYear() || 2022);
   update(calendar);
@@ -85,8 +82,8 @@ export function initYearSelector(
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
   const yearSelect = getYearSelector();
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   yearSelect.setData(years);
   years.length > 1 ? yearSelect.enable() : yearSelect.disable();
 }
@@ -104,14 +101,12 @@ function updateMonths(months: MonkeyTypes.TestActivityMonth[]): void {
 
 function getYearSelector(): SlimSelect {
   if (yearSelector !== undefined) return yearSelector;
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
   yearSelector = new SlimSelect({
     select: "#testActivity .yearSelect",
     settings: {
       showSearch: false,
     },
     events: {
-      // @ts-expect-error TODO: update slim-select
       afterChange: async (newVal): Promise<void> => {
         yearSelector?.disable();
         const selected = newVal[0]?.value as string;

frontend/src/ts/modals/quote-report.ts

@@ -5,7 +5,6 @@ import * as Notifications from "../elements/notifications";
 import QuotesController from "../controllers/quotes-controller";
 import * as CaptchaController from "../controllers/captcha-controller";
 import { removeLanguageSize } from "../utils/strings";
-// @ts-expect-error TODO: update slim-select
 import SlimSelect from "slim-select";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 import { CharacterCounter } from "../elements/character-counter";
@@ -46,7 +45,6 @@ export async function show(
       $("#quoteReportModal .reason").val("Grammatical error");
       $("#quoteReportModal .comment").val("");
 
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
       state.reasonSelect = new SlimSelect({
         select: "#quoteReportModal .reason",
         settings: {

frontend/src/ts/modals/quote-search.ts

@@ -16,7 +16,6 @@ import { isAuthenticated } from "../firebase";
 import { debounce } from "throttle-debounce";
 import Ape from "../ape";
 import * as Loader from "../elements/loader";
-// @ts-expect-error TODO: update slim-select
 import SlimSelect from "slim-select";
 import * as TestState from "../test/test-state";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
@@ -273,7 +272,6 @@ export async function show(showOptions?: ShowOptions): Promise<void> {
         $("#quoteSearchModal .goToQuoteApprove").addClass("hidden");
       }
 
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
       lengthSelect = new SlimSelect({
         select: "#quoteSearchModal .quoteLengthFilter",
 

frontend/src/ts/modals/quote-submit.ts

@@ -5,7 +5,6 @@ import * as CaptchaController from "../controllers/captcha-controller";
 import * as Strings from "../utils/strings";
 import * as JSONData from "../utils/json-data";
 import Config from "../config";
-// @ts-expect-error TODO: update slim-select
 import SlimSelect from "slim-select";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 import { CharacterCounter } from "../elements/character-counter";
@@ -65,7 +64,6 @@ export async function show(showOptions: ShowOptions): Promise<void> {
       );
       await initDropdown();
 
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
       select = new SlimSelect({
         select: "#quoteSubmitModal .newQuoteLanguage",
       });

frontend/src/ts/modals/user-report.ts

@@ -2,7 +2,6 @@ import Ape from "../ape";
 import * as Loader from "../elements/loader";
 import * as Notifications from "../elements/notifications";
 import * as CaptchaController from "../controllers/captcha-controller";
-// @ts-expect-error TODO: update slim-select
 import SlimSelect from "slim-select";
 import AnimatedModal from "../utils/animated-modal";
 import { isAuthenticated } from "../firebase";
@@ -51,7 +50,6 @@ export async function show(options: ShowOptions): Promise<void> {
         "Inappropriate name";
       (modalEl.querySelector(".comment") as HTMLTextAreaElement).value = "";
 
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
       select = new SlimSelect({
         select: modalEl.querySelector(".reason") as HTMLElement,
         settings: {

frontend/src/ts/modals/word-filter.ts

@@ -2,7 +2,6 @@ import * as Misc from "../utils/misc";
 import * as JSONData from "../utils/json-data";
 import * as CustomText from "../test/custom-text";
 import * as Notifications from "../elements/notifications";
-// @ts-expect-error TODO: update slim-select
 import SlimSelect from "slim-select";
 import AnimatedModal, {
   HideOptions,
@@ -159,21 +158,18 @@ export async function show(showOptions?: ShowOptions): Promise<void> {
   void modal.show({
     ...showOptions,
     beforeAnimation: async (modalEl) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
       languageSelect = new SlimSelect({
         select: "#wordFilterModal .languageInput",
         settings: {
           contentLocation: modalEl,
         },
       });
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
       layoutSelect = new SlimSelect({
         select: "#wordFilterModal .layoutInput",
         settings: {
           contentLocation: modal.getModal(),
         },
       });
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TODO: update slim-select
       presetSelect = new SlimSelect({
         select: "#wordFilterModal .presetInput",
         settings: {

frontend/src/ts/pages/settings.ts

@@ -17,7 +17,6 @@ import Page from "./page";
 import { isAuthenticated } from "../firebase";
 import { areFunboxesCompatible } from "../test/funbox/funbox-validation";
 import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
-// @ts-expect-error TODO: update slim-select
 import SlimSelect from "slim-select";
 
 import * as Skeleton from "../utils/skeleton";
@@ -559,7 +558,6 @@ async function fillSettingsPage(): Promise<void> {
   new SlimSelect({
     select: themeSelectLightElement,
     events: {
-      // @ts-expect-error TODO: update slim-select
       afterChange: (newVal): void => {
         UpdateConfig.setThemeLight(newVal[0]?.value as string);
       },
@@ -569,7 +567,6 @@ async function fillSettingsPage(): Promise<void> {
   new SlimSelect({
     select: themeSelectDarkElement,
     events: {
-      // @ts-expect-error TODO: update slim-select
       afterChange: (newVal): void => {
         UpdateConfig.setThemeDark(newVal[0]?.value as string);
       },

pnpm-lock.yaml

@@ -322,8 +322,8 @@ importers:
         specifier: 3.0.0
         version: 3.0.0
       slim-select:
-        specifier: 2.8.1
-        version: 2.8.1
+        specifier: 2.9.0
+        version: 2.9.0
       stemmer:
         specifier: 2.0.1
         version: 2.0.1
@@ -8084,8 +8084,8 @@ packages:
   slick@1.12.2:
     resolution: {integrity: sha512-4qdtOGcBjral6YIBCWJ0ljFSKNLz9KkhbWtuGvUyRowl1kxfuE1x/Z/aJcaiilpb3do9bl5K7/1h9XC5wWpY/A==}
 
-  slim-select@2.8.1:
-    resolution: {integrity: sha512-/wi+4dau48edrPZ/ggD+R8qD6FbCLGv5zvrYh4rqp1RNEIbkb1pRYJbljLjvr7/QqBvX3Hjbnvdnw9FPzJ8o5Q==}
+  slim-select@2.9.0:
+    resolution: {integrity: sha512-AwAm4kliM1utztdXfKyiidgnQanAKQVJ1+61rJYHwDfzu3LAn/spFKb+xBiSqr3E/dlZu0MrBxflBL2sN5q2xA==}
 
   slugify@1.4.7:
     resolution: {integrity: sha512-tf+h5W1IrjNm/9rKKj0JU2MDMruiopx0jjVA5zCdBtcGjfp0+c5rHw/zADLC3IeKlGHtVbHtpfzvYA0OYT+HKg==}
@@ -18522,10 +18522,7 @@ snapshots:
 
   slick@1.12.2: {}
 
-  slim-select@2.8.1:
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+  slim-select@2.9.0: {}
 
   slugify@1.4.7: {}