Revert "initial intern menu component"

This reverts commit 5dfc6fb.

Refs: #4646

packages/components/src/components/component-list.ts

@@ -38,7 +38,6 @@ import { KolLinkWc } from './link/component';
 import { KolLink } from './link/shadow';
 import { KolLogo } from './logo/shadow';
 import { KolModal } from './modal/shadow';
-import { KolMenu } from './menu/component';
 import { KolNav } from './nav/shadow';
 import { KolPagination } from './pagination/shadow';
 import { KolPopover } from './popover/component';
@@ -106,7 +105,6 @@ export const COMPONENTS = [
 	KolLinkWc,
 	KolLogo,
 	KolModal,
-	KolMenu,
 	KolNav,
 	KolPagination,
 	KolPopover,

packages/components/src/components/pagination/shadow.tsx

@@ -27,7 +27,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 import { translate } from '../../i18n';
 import { nonce } from '../../utils/dev.utils';
 import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
-import { KolButtonWcTag, KolSplitButtonTag, KolMenuWcTag } from '../../core/component-names';
+import { KolButtonWcTag, KolSplitButtonTag } from '../../core/component-names';
 
 const leftDoubleArrowIcon = {
 	left: 'codicon codicon-debug-reverse-continue',
@@ -68,6 +68,8 @@ export class KolPagination implements PaginationAPI {
 
 	private readonly getCount = (): number => this.calcCount(this.state._max, this.state._pageSize);
 
+	private listItems: HTMLElement[] = [];
+
 	public render(): JSX.Element {
 		let ellipsis = false;
 		const count = this.getCount();
@@ -166,7 +168,23 @@ export class KolPagination implements PaginationAPI {
 				</nav>
 				{this.state._pageSizeOptions?.length > 0 && (
 					<KolSplitButtonTag _label={`${this.state._pageSize} ${translate('kol-entries-per-site')}`} _id={`pagination-size-${this.nonce}`}>
-						<KolMenuWcTag _menuItems={this.state._pageSizeOptions.map((m) => ({ _label: m.label.toString() }))} />
+						<ul class="dropdown-menu">
+							{this.state._pageSizeOptions.map((option, index) => (
+								<li
+									ref={(el) => (this.listItems[index] = el!)}
+									key={option.value}
+									role="menuitem"
+									tabindex={this.state._pageSize === option.value ? '0' : '-1'}
+									aria-selected={this.state._pageSize === option.value ? 'true' : 'false'}
+									onClick={(event) => {
+										this.onChangePageSize(event, option.value);
+									}}
+									onKeyDown={(event) => this.handleKeyDown(event, index, option.value)}
+								>
+									{option.label} {this.state._pageSize === option.value && <span> </span>}
+								</li>
+							))}
+						</ul>
 					</KolSplitButtonTag>
 				)}
 			</Host>
@@ -246,7 +264,20 @@ export class KolPagination implements PaginationAPI {
 		_siblingCount: 1,
 		_max: 0,
 	};
-
+	private handleKeyDown(event: KeyboardEvent, index: number, value: unknown): void {
+		if (event.key === 'ArrowDown') {
+			const nextIndex = index + 1 < this.listItems.length ? index + 1 : 0;
+			this.listItems[nextIndex].focus();
+			event.preventDefault();
+		} else if (event.key === 'ArrowUp') {
+			const prevIndex = index - 1 >= 0 ? index - 1 : this.listItems.length - 1;
+			this.listItems[prevIndex].focus();
+			event.preventDefault();
+		} else if (event.key === 'Enter' || event.key === ' ') {
+			this.onChangePageSize(event, value);
+			event.preventDefault();
+		}
+	}
 	private onClick = (event: Event, page: number) => {
 		if (typeof this.state._on.onClick === 'function') {
 			this.state._on.onClick(event, page);
@@ -263,17 +294,17 @@ export class KolPagination implements PaginationAPI {
 		});
 	};
 
-	// private onChangePageSize = (event: Event, value: unknown) => {
-	// 	if (typeof value === 'number' && value > 0 && this._pageSize !== value) {
-	// 		this._pageSize = value;
-	// 		const timeout = setTimeout(() => {
-	// 			clearTimeout(timeout);
-	// 			if (typeof this.state._on.onChangePageSize === 'function') {
-	// 				this.state._on.onChangePageSize(event, this._pageSize);
-	// 			}
-	// 		});
-	// 	}
-	// };
+	private onChangePageSize = (event: Event, value: unknown) => {
+		if (typeof value === 'number' && value > 0 && this._pageSize !== value) {
+			this._pageSize = value;
+			const timeout = setTimeout(() => {
+				clearTimeout(timeout);
+				if (typeof this.state._on.onChangePageSize === 'function') {
+					this.state._on.onChangePageSize(event, this._pageSize);
+				}
+			});
+		}
+	};
 
 	private readonly onGoToFirst = {
 		onClick: (event: Event) => {

packages/components/src/components/pagination/style.scss

@@ -33,6 +33,8 @@
 		& li {
 			padding: rem(8);
 			cursor: pointer;
+
 		}
+
 	}
-}
+}

packages/components/src/core/component-names.ts

@@ -38,7 +38,6 @@ export let KolLinkGroupTag = 'kol-link-group' as const;
 export let KolLinkTag = 'kol-link' as const;
 export let KolLinkWcTag = 'kol-link-wc' as const;
 export let KolLogoTag = 'kol-logo' as const;
-export let KolMenuWcTag = 'kol-menu-wc' as const;
 export let KolModalTag = 'kol-modal' as const;
 export let KolNavTag = 'kol-nav' as const;
 export let KolPaginationTag = 'kol-pagination' as const;
@@ -107,7 +106,6 @@ export const setCustomTagNames = (transformTagName: (tagName: string) => string)
 	KolLinkTag = transformTagName(KolLinkTag as string) as 'kol-link';
 	KolLinkWcTag = transformTagName(KolLinkWcTag as string) as 'kol-link-wc';
 	KolLogoTag = transformTagName(KolLogoTag as string) as 'kol-logo';
-	KolMenuWcTag = transformTagName(KolMenuWcTag as string) as 'kol-menu-wc';
 	KolModalTag = transformTagName(KolModalTag as string) as 'kol-modal';
 	KolNavTag = transformTagName(KolNavTag as string) as 'kol-nav';
 	KolPaginationTag = transformTagName(KolPaginationTag as string) as 'kol-pagination';

packages/components/src/schema/components/index.ts

@@ -30,7 +30,6 @@ export * from './kolibri';
 export * from './link';
 export * from './link-button';
 export * from './link-group';
-export * from './menu';
 export * from './modal';
 export * from './nav';
 export * from './pagination';