Merge branch 'develop' of github.com:public-ui/kolibri into 6138-auto…

…-alert * 'develop' of github.com:public-ui/kolibri: Update all snapshots$ $ Refs: #6567 Fix: lint errors Refactor: keyboard navigation Add interactive buttons in tables Fix keyboard navigation Fix keyboard navigation Fix Typescript linting errors detect the currently focused element using tableDivElement Add keyboard navigation in table-stateless
public-ui · Sep 18, 2024 · 48e19b9 · 48e19b9
2 parents b31ac3e + 4b46a6d
commit 48e19b9
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 5 deletions.
diff --git a/packages/components/src/components/table-stateless/component.tsx b/packages/components/src/components/table-stateless/component.tsx
@@ -1,5 +1,5 @@
 import type { JSX } from '@stencil/core';
-import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
 
 import type {
 	KoliBriTableCell,
@@ -55,6 +55,8 @@ export class KolTableStateless implements TableStatelessAPI {
 	private cellsToRenderTimeouts = new Map<HTMLElement, ReturnType<typeof setTimeout>>();
 	private dataToKeyMap = new Map<KoliBriTableDataType, string>();
 
+	private checkboxRefs: HTMLInputElement[] = [];
+
 	@State()
 	private tableDivElementHasScrollbar = false;
 
@@ -136,6 +138,27 @@ export class KolTableStateless implements TableStatelessAPI {
 		validateTableSelection(this, value);
 	}
 
+	@Listen('keydown')
+	public handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+			const focusedElement = this.tableDivElement?.querySelector(':focus') as HTMLInputElement;
+			let index = this.checkboxRefs.indexOf(focusedElement);
+
+			if (index > -1) {
+				event.preventDefault();
+
+				if (event.key === 'ArrowDown') {
+					index = (index + 1) % this.checkboxRefs.length;
+					this.checkboxRefs[index].focus();
+				} else if (event.key === 'ArrowUp') {
+					event.preventDefault();
+					index = (index + this.checkboxRefs.length - 1) % this.checkboxRefs.length;
+					this.checkboxRefs[index].focus();
+				}
+			}
+		}
+	}
+
 	public componentDidRender(): void {
 		this.checkDivElementScrollbar();
 	}
@@ -402,6 +425,7 @@ export class KolTableStateless implements TableStatelessAPI {
 						<label class="checkbox-container">
 							<KolIconTag class="icon" _icons={`codicon ${selected ? 'codicon-check' : ''}`} _label="" />
 							<input
+								ref={(el) => el && this.checkboxRefs.push(el)}
 								{...props}
 								type="checkbox"
 								onInput={(event: Event) => {
@@ -507,6 +531,7 @@ export class KolTableStateless implements TableStatelessAPI {
 					<label class="checkbox-container">
 						<KolIconTag class="icon" _icons={`codicon ${indeterminate ? 'codicon-remove' : isChecked ? 'codicon-check' : ''}`} _label="" />
 						<input
+							ref={(el) => el && this.checkboxRefs.push(el)}
 							name="selection"
 							checked={isChecked && !indeterminate}
 							aria-label={label}
@@ -591,6 +616,7 @@ export class KolTableStateless implements TableStatelessAPI {
 
 	public render(): JSX.Element {
 		const dataField = this.createDataField(this.state._data, this.state._headerCells);
+		this.checkboxRefs = [];
 
 		return (
 			<Host class="kol-table-stateless-wc">

diff --git a/packages/samples/react/src/components/table/stateful-with-selection.tsx b/packages/samples/react/src/components/table/stateful-with-selection.tsx
@@ -1,8 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { KolButton, KolTableStateful } from '@public-ui/react';
+import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components/src/schema';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -43,6 +45,10 @@ export const TableStatefulWithSelection: FC = () => {
 		};
 	}, [kolTableStatefulRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+	};
+
 	return (
 		<>
 			<SampleDescription>
@@ -56,6 +62,7 @@ export const TableStatefulWithSelection: FC = () => {
 						[
 							{ key: 'id', label: '#ID', textAlign: 'left' },
 							{ key: 'name', label: 'Name', textAlign: 'left' },
+							{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
 						],
 					],
 				}}

diff --git a/packages/samples/react/src/components/table/stateful-with-single-selection.tsx b/packages/samples/react/src/components/table/stateful-with-single-selection.tsx
@@ -1,8 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { KolButton, KolTableStateful } from '@public-ui/react';
+import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components/src/schema';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -45,6 +47,10 @@ export const TableStatefulWithSingleSelection: FC = () => {
 		};
 	}, [kolTableStatefulRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+	};
+
 	return (
 		<>
 			<SampleDescription>
@@ -58,6 +64,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 						[
 							{ key: 'id', label: '#ID', textAlign: 'left' },
 							{ key: 'name', label: 'Name', textAlign: 'left' },
+							{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
 						],
 					],
 				}}

diff --git a/packages/samples/react/src/components/table/stateless-with-selection.tsx b/packages/samples/react/src/components/table/stateless-with-selection.tsx
@@ -1,8 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useState, useRef } from 'react';
-import { KolTableStateless } from '@public-ui/react';
+import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components/src/schema';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -39,6 +41,10 @@ export const TableStatelessWithSelection: FC = () => {
 		};
 	}, [kolTableStatelessRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+	};
+
 	return (
 		<>
 			<SampleDescription>
@@ -52,6 +58,7 @@ export const TableStatelessWithSelection: FC = () => {
 						[
 							{ key: 'id', label: '#ID', textAlign: 'left' },
 							{ key: 'name', label: 'Name', textAlign: 'left' },
+							{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
 						],
 					],
 				}}

diff --git a/packages/samples/react/src/components/table/stateless-with-single-selection.tsx b/packages/samples/react/src/components/table/stateless-with-single-selection.tsx
@@ -1,8 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useState, useRef } from 'react';
-import { KolTableStateless } from '@public-ui/react';
+import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components/src/schema';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -40,6 +42,10 @@ export const TableStatelessWithSingleSelection: FC = () => {
 		};
 	}, [kolTableStatelessRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+	};
+
 	return (
 		<>
 			<SampleDescription>
@@ -53,6 +59,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 						[
 							{ key: 'id', label: '#ID', textAlign: 'left' },
 							{ key: 'name', label: 'Name', textAlign: 'left' },
+							{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
 						],
 					],
 				}}

diff --git a/.../theme-bmf/snapshot-for-table-stateless-with-single-selection-firefox-linux.png b/.../theme-bmf/snapshot-for-table-stateless-with-single-selection-firefox-linux.png