@internetarchive/ia-topnav 1.4.1 → 2.0.1-alpha-webdev8396.0

package/eslint.config.mjs

@@ -1,53 +1,53 @@
-import typescriptEslint from '@typescript-eslint/eslint-plugin';
-import html from 'eslint-plugin-html';
-import tsParser from '@typescript-eslint/parser';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import js from '@eslint/js';
-import { FlatCompat } from '@eslint/eslintrc';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
-
-export default [
-  ...compat.extends('plugin:@typescript-eslint/recommended'),
-  {
-    plugins: {
-      '@typescript-eslint': typescriptEslint,
-      html,
-    },
-
-    languageOptions: {
-      parser: tsParser,
-    },
-
-    settings: {
-      'import/resolver': {
-        node: {
-          extensions: ['.ts', '.tsx'],
-          moduleDirectory: ['node_modules', 'src', 'demo'],
-        },
-      },
-    },
-
-    rules: {
-      '@typescript-eslint/no-unsafe-function-type': 'warn',
-      '@typescript-eslint/no-unused-vars': 'warn',
-      '@typescript-eslint/no-explicit-any': 'warn',
-    },
-  },
-  {
-    ignores: ['**/*.js', '**/*.mjs'],
-  },
-  {
-    files: ['**/*.test.ts'],
-    rules: {
-      '@typescript-eslint/no-unused-expressions': 'off',
-    },
-  },
-];
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import html from 'eslint-plugin-html';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends('plugin:@typescript-eslint/recommended'),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      html,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+    },
+
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.ts', '.tsx'],
+          moduleDirectory: ['node_modules', 'src', 'demo'],
+        },
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/no-unsafe-function-type': 'warn',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+  {
+    ignores: ['**/*.js', '**/*.mjs'],
+  },
+  {
+    files: ['**/*.test.ts'],
+    rules: {
+      '@typescript-eslint/no-unused-expressions': 'off',
+    },
+  },
+];

package/package.json

@@ -1,72 +1,72 @@
-{
-  "name": "@internetarchive/ia-topnav",
-  "version": "1.4.1",
-  "description": "Top nav for Internet Archive",
-  "license": "AGPL-3.0-only",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "prepare": "rimraf dist && tsc && husky install",
-    "build": "tsc",
-    "lint": "eslint . && prettier \"**/*.ts\" --check",
-    "format": "eslint . --fix && prettier \"**/*.ts\" --write",
-    "circular": "madge --circular --extensions ts .",
-    "test": "tsc && npm run lint && npm run circular && wtr --coverage",
-    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
-    "ghpages:build": "rimraf ghpages && npm run prepare && vite build",
-    "ghpages:publish": "npm run ghpages:prepare -e $(git branch --show-current)",
-    "ghpages:prepare": "npm run ghpages:build && touch ghpages/.nojekyll && npm run ghpages:generate",
-    "ghpages:generate": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
-  },
-  "dependencies": {
-    "@internetarchive/ia-styles": "^1.0.0",
-    "@internetarchive/ia-wayback-search": "^1.0.4",
-    "lit": "^2.8.0"
-  },
-  "devDependencies": {
-    "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^4.0.0",
-    "@types/mocha": "^10.0.10",
-    "@typescript-eslint/eslint-plugin": "^8.19.1",
-    "@typescript-eslint/parser": "^8.19.1",
-    "@web/dev-server": "^0.4.6",
-    "@web/test-runner": "^0.20.0",
-    "concurrently": "^9.1.2",
-    "eslint": "^9.24.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-html": "^8.1.2",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-lit": "^2.0.0",
-    "eslint-plugin-lit-a11y": "^4.1.4",
-    "eslint-plugin-no-only-tests": "^3.3.0",
-    "eslint-plugin-wc": "^3.0.0",
-    "gh-pages": "^6.3.0",
-    "husky": "^9.1.7",
-    "madge": "^8.0.0",
-    "prettier": "^3.4.2",
-    "rimraf": "^6.0.1",
-    "sinon": "^20.0.0",
-    "ts-lit-plugin": "^2.0.2",
-    "tslib": "^2.8.1",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.7"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.ts": [
-      "eslint --fix",
-      "prettier --write",
-      "git add"
-    ]
-  }
-}
+{
+  "name": "@internetarchive/ia-topnav",
+  "version": "2.0.1-alpha-webdev8396.0",
+  "description": "Top nav for Internet Archive",
+  "license": "AGPL-3.0-only",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "prepare": "rimraf dist && tsc && husky install",
+    "build": "tsc",
+    "lint": "eslint . && prettier \"**/*.ts\" --check",
+    "format": "eslint . --fix && prettier \"**/*.ts\" --write",
+    "circular": "madge --circular --extensions ts .",
+    "test": "tsc && npm run lint && npm run circular && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "ghpages:build": "rimraf ghpages && npm run prepare && vite build",
+    "ghpages:publish": "npm run ghpages:prepare -e $(git branch --show-current)",
+    "ghpages:prepare": "npm run ghpages:build && touch ghpages/.nojekyll && npm run ghpages:generate",
+    "ghpages:generate": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
+  },
+  "dependencies": {
+    "@internetarchive/ia-styles": "^1.0.0",
+    "@internetarchive/ia-wayback-search": "^1.0.4",
+    "lit": "^2.8.0"
+  },
+  "devDependencies": {
+    "@open-wc/eslint-config": "^12.0.3",
+    "@open-wc/testing": "^4.0.0",
+    "@types/mocha": "^10.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "@web/dev-server": "^0.4.6",
+    "@web/test-runner": "^0.20.0",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-html": "^8.1.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-lit": "^2.0.0",
+    "eslint-plugin-lit-a11y": "^4.1.4",
+    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-wc": "^3.0.0",
+    "gh-pages": "^6.3.0",
+    "husky": "^9.1.7",
+    "madge": "^8.0.0",
+    "prettier": "^3.4.2",
+    "rimraf": "^6.0.1",
+    "sinon": "^20.0.0",
+    "ts-lit-plugin": "^2.0.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ]
+  }
+}

package/prettier.config.js

@@ -1,9 +1,9 @@
-/**
-  * @see https://prettier.io/docs/configuration
-  * @type {import("prettier").Config}
-  */
- const config = {
-   singleQuote: true,
- };
-
- export default config;
+/**
+  * @see https://prettier.io/docs/configuration
+  * @type {import("prettier").Config}
+  */
+ const config = {
+   singleQuote: true,
+ };
+
+ export default config;

package/src/data/menus.ts

@@ -5,8 +5,6 @@ import { IATopNavConfig, IATopNavMenuConfig } from '../models';
 export const defaultTopNavConfig: IATopNavConfig = {
   // Google Analytics event category
   eventCategory: 'TopNav',
-  // Array of strings representing the values of options that should be hidden from search options
-  hiddenSearchOptions: [],
   // Default value, if more accurate value is not passed in to `buildTopNavMenus()`
   waybackPagesArchived: '1 trillion',
 };

package/src/dropdown-menu.ts

@@ -1,4 +1,4 @@
-import { CSSResult, html, nothing, PropertyValues, TemplateResult } from 'lit';
+import { html, nothing, PropertyValues, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import icons from './assets/img/icons';
@@ -14,7 +14,6 @@ import KeyboardNavigation from './lib/keyboard-navigation';
 export default class DropdownMenu extends TrackedElement {
   @property({ type: String }) baseHost = '';
   @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
-  @property({ type: Boolean }) hideSearch = false;
   @property({ type: Array }) menuItems: IATopNavLink[] | IATopNavLink[][] = [];
   @property({ type: Boolean }) animated = false;
   @property({ type: Boolean }) open = false;
@@ -22,8 +21,8 @@ export default class DropdownMenu extends TrackedElement {
   private previousKeydownListener?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (this: HTMLElement, ev: KeyboardEvent) => any;
 
-  static get styles(): CSSResult[] {
-    return [dropdownMenuCSS];
+  static get styles() {
+    return dropdownMenuCSS;
   }
 
   updated(props: PropertyValues) {
@@ -104,14 +103,9 @@ export default class DropdownMenu extends TrackedElement {
   }
 
   get menuClass() {
-    const hiddenClass = this.hideSearch ? ' search-hidden' : '';
-    if (this.open) {
-      return `open${hiddenClass}`;
-    }
-    if (this.animated) {
-      return `closed${hiddenClass}`;
-    }
-    return `initial${hiddenClass}`;
+    if (this.open) return 'open';
+    if (this.animated) return 'closed';
+    return 'initial';
   }
 
   render() {

package/src/ia-topnav.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues, html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 
 import { buildTopNavMenus, defaultTopNavConfig } from './data/menus';
 import './desktop-subnav';
@@ -11,11 +11,10 @@ import {
   IATopNavSecondIdentitySlotMode,
 } from './models';
 import './primary-nav';
-import './search-menu';
+import type { PrimaryNav } from './primary-nav';
 import './signed-out-dropdown';
 import iaTopNavCSS from './styles/ia-topnav';
 import './user-menu';
-import KeyboardNavigation from './lib/keyboard-navigation';
 
 @customElement('ia-topnav')
 export class IATopNav extends LitElement {
@@ -43,10 +42,6 @@ export class IATopNav extends LitElement {
 
   @property({ type: String }) screenName: string = '';
 
-  @property({ type: String }) searchIn = '';
-
-  @property({ type: String }) searchQuery = '';
-
   @property({ type: String }) selectedMenuOption = '';
 
   @property({ type: String }) username: string = '';
@@ -62,11 +57,16 @@ export class IATopNav extends LitElement {
     moveTo: string;
   };
 
+  @query('primary-nav') private primaryNav?: PrimaryNav;
+  /** Only one of user-menu or signed-out-dropdown is rendered at a time. */
+  @query('user-menu, signed-out-dropdown')
+  private accountDropdown?: HTMLElement;
+
   @state() private menus: IATopNavMenuConfig = buildTopNavMenus();
-  private previousKeydownListener: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ((this: HTMLElement, ev: KeyboardEvent) => any) | undefined;
 
-  private keyboardNavigation?: KeyboardNavigation;
+  private boundHandleKeydown = this.handleDocumentKeydown.bind(this);
+
+  private boundHandleClick = this.handleDocumentClick.bind(this);
 
   private get normalizedBaseHost() {
     return !this.localLinks ? this.baseHost : '';
@@ -86,37 +86,33 @@ export class IATopNav extends LitElement {
     ) {
       this.menuSetup();
     }
+  }
 
-    if (this.openMenu === 'search') {
-      const targetElement =
-        this.renderRoot.querySelector('search-menu')?.shadowRoot;
-      if (targetElement) {
-        this.keyboardNavigation = new KeyboardNavigation(
-          targetElement as unknown as HTMLElement,
-          this.openMenu,
-        );
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('keydown', this.boundHandleKeydown);
+    document.addEventListener('click', this.boundHandleClick);
+  }
 
-        if (this.previousKeydownListener) {
-          this.removeEventListener('keydown', this.previousKeydownListener);
-        }
-        this.addEventListener('keydown', this.keyboardNavigation.handleKeyDown);
-        this.previousKeydownListener = this.keyboardNavigation.handleKeyDown;
-      }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this.boundHandleKeydown);
+    document.removeEventListener('click', this.boundHandleClick);
+  }
+
+  private handleDocumentKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      this.openMenu = '';
+      this.mediaSliderOpen = false;
     }
   }
 
-  firstUpdated() {
-    // close open menu on `esc` click
-    document.addEventListener(
-      'keydown',
-      (e) => {
-        if (e.key === 'Escape') {
-          this.openMenu = '';
-          this.mediaSliderOpen = false;
-        }
-      },
-      false,
-    );
+  private handleDocumentClick(e: MouseEvent) {
+    if (!this.openMenu) return;
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this.closeMenus();
+    }
   }
 
   menuSetup() {
@@ -137,21 +133,14 @@ export class IATopNav extends LitElement {
       return;
     }
     this.closeMediaSlider();
-  }
 
-  navSearchBlurEvent(e: CustomEvent) {
-    if (this.previousKeydownListener) {
-      this.removeEventListener('keydown', this.previousKeydownListener);
-    }
-
-    const isUploadButton = e.detail?.isUploadButton;
-    if (!isUploadButton) {
-      const searchMenu = this.renderRoot.querySelector(
-        'search-menu',
-      ) as HTMLElement;
-      const elements = this.keyboardNavigation?.getFocusableElements();
-      if (searchMenu && elements?.length) {
-        elements[0].focus();
+    if (this.openMenu === 'user' || this.openMenu === 'login') {
+      if (this.primaryNav && this.accountDropdown) {
+        const right = this.primaryNav.getAccountDropdownOffset();
+        this.accountDropdown.style.setProperty(
+          '--dropdownMenuRight',
+          `${right}px`,
+        );
       }
     }
   }
@@ -170,10 +159,6 @@ export class IATopNav extends LitElement {
     this.closeMediaSlider();
   }
 
-  searchInChanged(e: CustomEvent) {
-    this.searchIn = e.detail.searchIn;
-  }
-
   trackClick(e: CustomEvent) {
     this.dispatchEvent(
       new CustomEvent('analyticsClick', {
@@ -203,10 +188,6 @@ export class IATopNav extends LitElement {
     this.openMediaSlider();
   }
 
-  get searchMenuOpened() {
-    return this.openMenu === 'search';
-  }
-
   get signedOutOpened() {
     return this.openMenu === 'login';
   }
@@ -215,10 +196,6 @@ export class IATopNav extends LitElement {
     return this.openMenu === 'user';
   }
 
-  get searchMenuTabIndex() {
-    return this.searchMenuOpened ? '' : '-1';
-  }
-
   get userMenuTabIndex() {
     return this.userMenuOpened ? '' : '-1';
   }
@@ -239,7 +216,6 @@ export class IATopNav extends LitElement {
         .menuItems=${this.userMenuItems}
         ?open=${this.openMenu === 'user'}
         .username=${this.username}
-        ?hideSearch=${this.hideSearch}
         tabindex="${this.userMenuTabIndex}"
         @menuToggled=${this.menuToggled}
         @trackClick=${this.trackClick}
@@ -255,7 +231,6 @@ export class IATopNav extends LitElement {
         .baseHost=${this.normalizedBaseHost}
         .config=${this.config}
         .open=${this.signedOutOpened}
-        ?hideSearch=${this.hideSearch}
         tabindex="${this.signedOutTabIndex}"
         .menuItems=${this.signedOutMenuItems}
         @focusToOtherMenuItem=${(e: CustomEvent) => {
@@ -291,6 +266,10 @@ export class IATopNav extends LitElement {
     return this.secondIdentitySlotMode === 'allow';
   }
 
+  get searchSlot() {
+    return html`<slot name="search" slot="search"></slot>`;
+  }
+
   get secondLogoSlot() {
     return this.allowSecondaryIcon
       ? html`
@@ -313,8 +292,6 @@ export class IATopNav extends LitElement {
           .config=${this.config}
           .openMenu=${this.openMenu}
           .screenName=${this.screenName}
-          .searchIn=${this.searchIn}
-          .searchQuery=${this.searchQuery}
           .secondIdentitySlotMode=${this.secondIdentitySlotMode}
           .selectedMenuOption=${this.selectedMenuOption}
           .username=${this.username}
@@ -325,9 +302,8 @@ export class IATopNav extends LitElement {
           @trackClick=${this.trackClick}
           @trackSubmit=${this.trackSubmit}
           @menuToggled=${this.menuToggled}
-          @navSearchBlur=${this.navSearchBlurEvent}
         >
-          ${this.secondLogoSlot}
+          ${this.secondLogoSlot} ${this.searchSlot}
         </primary-nav>
         <media-slider
           .baseHost=${this.normalizedBaseHost}
@@ -341,16 +317,6 @@ export class IATopNav extends LitElement {
         ></media-slider>
       </div>
       ${this.username ? this.userMenu : this.signedOutDropdown}
-      <search-menu
-        .baseHost=${this.normalizedBaseHost}
-        .config=${this.config}
-        .openMenu=${this.openMenu}
-        tabindex="${this.searchMenuTabIndex}"
-        ?hideSearch=${this.hideSearch}
-        @searchInChanged=${this.searchInChanged}
-        @trackClick=${this.trackClick}
-        @trackSubmit=${this.trackSubmit}
-      ></search-menu>
       <desktop-subnav
         .baseHost=${this.normalizedBaseHost}
         .menuItems=${this.menus.more.links}

package/src/login-button.ts

@@ -4,7 +4,7 @@ import icons from './assets/img/icons';
 import loginButtonCSS from './styles/login-button';
 import formatUrl from './lib/format-url';
 import { makeBooleanString } from './lib/make-boolean-string';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { IATopNavConfig } from './models';
 import { defaultTopNavConfig } from './data/menus';
 
@@ -14,12 +14,23 @@ export class LoginButton extends TrackedElement {
   @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
   @property({ type: String }) openMenu = '';
 
+  @query('button.logged-out-menu') private toggleButton?: HTMLButtonElement;
+
   @state() private dropdownTabIndex = '';
 
   static get styles() {
     return loginButtonCSS;
   }
 
+  /** Distance (px) from this element's right edge to the right edge of the dropdown toggle icon. */
+  getDropdownToggleOffset(): number {
+    if (!this.toggleButton) return 0;
+    return (
+      this.getBoundingClientRect().right -
+      this.toggleButton.getBoundingClientRect().right
+    );
+  }
+
   get signupPath() {
     return formatUrl('/signup', this.baseHost);
   }

package/src/models.ts

@@ -11,11 +11,6 @@ export interface IATopNavConfig {
    */
   waybackPagesArchived?: string;
 
-  /**
-   * Array of strings representing the values of options that should be hidden from search options
-   */
-  hiddenSearchOptions?: string[];
-
   /**
    * Map from dropdown item ids to any callout text that should be applied beside them
    */