feat: implement dropdown menu with checkboxes

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/index.ts

@@ -3,10 +3,3 @@
  */
 
 import './styles.scss';
-
-function onToggleDropdown(event: PointerEvent): void {
-  (event.target as HTMLButtonElement).classList.toggle('button_dropdown_active');
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(window as any).onToggleDropdown = onToggleDropdown;

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss

@@ -96,7 +96,7 @@
 
     &:hover,
     .theme-dark &:hover {
-      background-color: lighten(rgb(48, 127, 255), 10%);
+      background-color: lighten(rgb(48, 127, 255), 10%); // color-key-blue
     }
 
     &::after {

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/checkbox/index.ts

@@ -0,0 +1,5 @@
+/*
+ * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+
+import './styles.scss';

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/checkbox/styles.scss

@@ -0,0 +1,7 @@
+/*!
+ * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import '../tokens/index';
+
+.checkbox {
+}

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+
+import './styles.scss';
+
+function onToggleDropdown(event: PointerEvent): void {
+  const target = event.target as HTMLButtonElement;
+  target.classList.toggle('button_dropdown_active');
+  target.parentNode?.querySelector('.dropdown--list')?.classList.toggle('dropdown--list_expanded');
+}
+
+function onToggleOption(event: PointerEvent): void {
+  const target = event.target as HTMLButtonElement;
+  console.log('onToggleOption', target);
+  target.classList.toggle('dropdown--option_active');
+  target.querySelector('.dropdown--checkbox')?.toggleAttribute('checked');
+}
+
+function doParentsHaveClass(element: HTMLElement, className: string): boolean {
+  if (element && element.classList.contains(className)) {
+    return true;
+  }
+  if (element.parentElement) {
+    return doParentsHaveClass(element.parentElement as HTMLElement, className);
+  }
+  return false;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('click', (event) => {
+    const target = event.target as HTMLElement;
+    if (!doParentsHaveClass(target, 'dropdown')) {
+      const dropdowns = document.querySelectorAll('.button_dropdown');
+      dropdowns.forEach((dropdown) => {
+        dropdown.classList.remove('button_dropdown_active');
+        dropdown.parentNode?.querySelector('.dropdown--list')?.classList.remove('dropdown--list_expanded');
+      });
+    }
+  });
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as any).onToggleDropdown = onToggleDropdown;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as any).onToggleOption = onToggleOption;

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss

@@ -0,0 +1,70 @@
+/*!
+ * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import '../tokens/index';
+
+.dropdown {
+  position: relative;
+
+  &--list {
+    position: absolute;
+    top: 44px;
+
+    right: 0;
+
+    display: none;
+
+    min-width: 272px;
+    max-width: 360px;
+    max-height: 400px;
+    padding: 0;
+
+    border: 1px solid lighten(rgb(50, 50, 55), 15%); // color-background-nav-dt
+
+    box-shadow: 0 2px 8px 0 #00000040;
+
+    &_expanded {
+      display: block;
+    }
+  }
+
+  &--option {
+    position: relative;
+
+    display: block;
+
+    padding: var(--size-s2) 44px;
+
+    list-style-type: none;
+
+    cursor: pointer;
+    letter-spacing: -0.03em;
+
+    text-transform: capitalize;
+
+    border: none;
+    background-color: var(--color-background-nav-dt);
+
+    font: var(--font-text-m);
+
+    &:hover {
+      background-color: lighten(rgb(50, 50, 55), 10%); // color-background-nav-dt
+    }
+
+    &_active {
+      background-color: var(--color-key-blue);
+
+      &:hover {
+        background-color: lighten(rgb(48, 127, 255), 10%); // color-key-blue
+      }
+    }
+  }
+
+  &--checkbox {
+    position: absolute;
+
+    left: var(--size-s3);
+
+    pointer-events: none;
+  }
+}

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss

@@ -0,0 +1,2 @@
+@import './dropdown/styles';
+@import './checkbox/styles';

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts

@@ -2,6 +2,8 @@
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */
 import * as button from './button/index';
+import * as checkbox from './checkbox/index';
+import * as dropdown from './dropdown/index';
 import * as filterSection from './filter-section/index';
 import * as icon from './icon/index';
 import * as libraryName from './library-name/index';
@@ -16,6 +18,8 @@ import './global.scss';
 
 export {
   button,
+  checkbox,
+  dropdown,
   filterSection,
   icon,
   libraryName,

dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl

@@ -2,9 +2,24 @@
     <#if sourceSets?has_content>
         <div class="filter-section" id="filter-section">
             <#list sourceSets as ss>
-                <button class="platform-tag platform-selector ${ss.platform}-like" data-active="" data-filter="${ss.filter}">${ss.name}</button>
+                <button class="platform-tag platform-selector ${ss.platform}-like" data-active=""
+                        data-filter="${ss.filter}">${ss.name}</button>
             </#list>
-            <button class="button button_dropdown" onclick="onToggleDropdown(event)"></button>
+            <div class="dropdown">
+                <button class="button button_dropdown" onclick="onToggleDropdown(event)" role="combobox"
+                        aria-controls="platform-tags-listbox"
+                        aria-haspopup="listbox"
+                        aria-expanded="false"
+                ></button>
+                <ul role="listbox" id="platform-tags-listbox" class="dropdown--list">
+                    <#list sourceSets as ss>
+                        <li role="option" class="dropdown--option" onclick="onToggleOption(event)">
+                            <input type="checkbox" class="checkbox dropdown--checkbox" id="${ss.filter}" data-filter="${ss.filter}" />
+                            ${ss.name}
+                        </li>
+                    </#list>
+                </ul>
+            </div>
         </div>
     </#if>
 </#macro>