Merge branch 'develop' of https://github.com/cyrinermd/kolibri into 5…

…744_Bug/appointment-form

packages/components/src/components/table/component.tsx

@@ -60,6 +60,11 @@ export class KolTable implements TableAPI {
 	private pageStartSlice = 0;
 	private pageEndSlice = 10;
 	private disableSort = false;
+	private tableDivElement?: HTMLDivElement;
+	private tableDivElementResizeObserver?: ResizeObserver;
+
+	@State()
+	private tableDivElementHasScrollbar = false;
 
 	/**
 	 * @deprecated only for backward compatibility
@@ -385,6 +390,27 @@ export class KolTable implements TableAPI {
 		);
 	}
 
+	public componentDidRender(): void {
+		this.checkDivElementScrollbar();
+	}
+
+	public componentDidLoad() {
+		if (this.tableDivElement && ResizeObserver) {
+			this.tableDivElementResizeObserver = new ResizeObserver(this.checkDivElementScrollbar.bind(this));
+			this.tableDivElementResizeObserver.observe(this.tableDivElement);
+		}
+	}
+
+	public disconnectedCallback() {
+		this.tableDivElementResizeObserver?.disconnect();
+	}
+
+	private checkDivElementScrollbar() {
+		if (this.tableDivElement) {
+			this.tableDivElementHasScrollbar = this.tableDivElement.scrollWidth > this.tableDivElement.clientWidth;
+		}
+	}
+
 	public componentWillLoad(): void {
 		this.validateAllowMultiSort(this._allowMultiSort);
 		this.validateData(this._data);
@@ -809,13 +835,27 @@ export class KolTable implements TableAPI {
 		return (
 			<Host>
 				{this.pageEndSlice > 0 && this.showPagination && paginationTop}
-				<div class="table" tabindex="0">
+
+				{/* Firefox automatically makes the following div focusable when it has a scrollbar. We implement a similar behavior cross-browser by allowing the
+				 * <caption> to receive focus. Hence, we disable focus for the div to avoid having two focusable elements:
+				 *   tabindex="-1" prevents keyboard-focus,
+				 *   catching the mouseDown event prevents click-focus
+				 */}
+				{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+				<div
+					ref={(element) => (this.tableDivElement = element)}
+					class="table"
+					tabindex="-1"
+					onMouseDown={(event) => {
+						event.preventDefault();
+					}}
+				>
 					<table
 						style={{
 							minWidth: this.state._minWidth,
 						}}
 					>
-						<caption>{this.state._label}</caption>
+						<caption tabindex={this.tableDivElementHasScrollbar ? '0' : undefined}>{this.state._label}</caption>
 						{Array.isArray(this.state._headers.horizontal) && (
 							<thead>
 								{this.state._headers.horizontal.map((cols, rowIndex) => (

packages/components/src/components/table/style.css

@@ -15,6 +15,20 @@
 		width: 100%;
 	}
 
+	caption {
+		text-align: start;
+	}
+	caption:focus {
+		outline: 0 !important;
+	}
+
+	.table:has(caption:focus) {
+		/* @see https://remysharp.com/til/css/focus-ring-default-styles */
+		outline: 5px auto Highlight;
+		outline: 5px auto -webkit-focus-ring-color;
+		outline-offset: 2px;
+	}
+
 	.table-sort-button .button {
 		color: inherit;
 	}

packages/components/src/components/textarea/component.tsx

@@ -120,7 +120,7 @@ export class KolTextarea implements TextareaAPI {
 							placeholder={this.state._placeholder}
 							spellcheck="false"
 							{...this.controller.onFacade}
-							onKeyUp={this.onKeyUp}
+							onInput={this.onInput}
 							style={{
 								resize: this.state._resize,
 							}}
@@ -393,16 +393,23 @@ export class KolTextarea implements TextareaAPI {
 		this.controller.validateValue(value);
 	}
 
+	public componentDidLoad(): void {
+		setTimeout(() => {
+			if (this.ref instanceof HTMLTextAreaElement) {
+				this._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ref) ? this.state._rows : increaseTextareaHeight(this.ref);
+			}
+		}, 0);
+	}
+
 	public componentWillLoad(): void {
 		this._alert = this._alert === true;
 		this._touched = this._touched === true;
 		this.controller.componentWillLoad();
-
 		this.state._hasValue = !!this.state._value;
 		this.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));
 	}
 
-	private readonly onKeyUp = () => {
+	private readonly onInput = () => {
 		if (this.ref instanceof HTMLTextAreaElement) {
 			setState(this, '_currentLength', this.ref.value.length);
 			if (this.state._adjustHeight) {

packages/samples/react/src/components/table/horizontal-scrollbar.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useState } from 'react';
+
+import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import { KoliBriTableHeaders } from '@public-ui/components/src';
+import { SampleDescription } from '../SampleDescription';
+
+const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '400px' },
+			{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },
+		],
+	],
+};
+
+export const TableHorizontalScrollbar: FC = () => {
+	const [hasWidthRestriction, setHasWidthRestriction] = useState(true);
+
+	return (
+		<>
+			<SampleDescription>
+				Table examples with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table container and to scroll it
+				using arrow keys.
+			</SampleDescription>
+
+			<KolHeading _label="Table with scrollbar" _level={2} />
+
+			<KolTable
+				_label="Table for demonstration purposes with horizontal scrollbar."
+				_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+				_headers={HEADERS}
+				_data={DATA}
+				className="block"
+				style={{ width: '400px' }}
+			/>
+
+			<KolInputCheckbox
+				_checked={hasWidthRestriction}
+				_label="Toggle width restriction"
+				_variant="switch"
+				_on={{
+					onChange: (_event, value) => {
+						setHasWidthRestriction(Boolean(value));
+					},
+				}}
+			></KolInputCheckbox>
+
+			<KolHeading _label="Same table without scrollbar" _level={2} className="block mt-4" />
+			<p className="mt-0">
+				<i>Scrollbar appears on very small viewport sizes</i>
+			</p>
+
+			<KolTable _label="Table for demonstration purposes without horizontal scrollbar" _minWidth="600px" _headers={HEADERS} _data={DATA} className="block" />
+		</>
+	);
+};

packages/samples/react/src/components/table/routes.ts

@@ -6,11 +6,13 @@ import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-data';
 import { TableWithPagination } from './with-pagination';
 import { PaginationPosition } from './pagination-position';
+import { TableHorizontalScrollbar } from './horizontal-scrollbar';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
 		'badge-size': TableBadgeSize,
 		'column-alignment': TableColumnAlignment,
+		'horizontal-scrollbar': TableHorizontalScrollbar,
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
 		'with-pagination': TableWithPagination,

packages/themes/bmf/src/index.ts

@@ -1558,8 +1558,14 @@ export const BMF = KoliBri.createTheme('bmf', {
 			overflow-x: auto;
 			overflow-y: hidden;
 		}
+
+		.table:has(caption:focus) {
+			outline-color: var(--color-ocean);
+			outline-style: solid;
+			outline-width: 3px;
+			transition: outline-offset 0.2s linear;
+		}
 		caption {
-			position: absolute;
 			width: 1px;
 			height: 1px;
 			padding: 0;

packages/themes/default/src/components/table.scss

@@ -23,6 +23,16 @@
 		border-style: solid;
 		border-color: var(--color-primary-variant);
 	}
+	.table {
+		padding: 0.5rem;
+	}
+	.table:has(caption:focus) {
+		outline-color: var(--color-primary-variant);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 3px;
+		transition: outline-offset 0.2s linear;
+	}
 	table {
 		width: 100%;
 		border-spacing: 0;
@@ -56,16 +66,6 @@
 	th[aria-sort='descending'] {
 		font-weight: 700;
 	}
-	:host > div:last-child {
-		padding: 0.5rem;
-	}
-	:host > div:last-child,
-	:host > div:last-child > div:last-child {
-		display: grid;
-		align-items: center;
-		justify-items: center;
-		gap: 1rem;
-	}
 
 	@media (min-width: 1024px) {
 		div.pagination kol-pagination {

packages/themes/ecl/src/ecl-ec.ts

@@ -1359,6 +1359,15 @@ export const ECL_EC = KoliBri.createTheme('ecl-ec', {
 		border-style: solid;
 		border-color: var(--color-ice);
 	}
+	.table {
+		padding: 0.5em;
+	}
+	.table:has(caption:focus) {
+		outline-color: var(--color-blue);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 2px;
+	}
 	table {
 		width: 100%;
 		border-spacing: 0;
@@ -1392,16 +1401,6 @@ export const ECL_EC = KoliBri.createTheme('ecl-ec', {
 	th[aria-sort="descending"] {
 		font-weight: 700;
 	}
-	:host > div:last-child {
-		padding: 0.5em;
-	}
-	:host > div:last-child,
-	:host > div:last-child > div:last-child {
-		display: grid;
-		align-items: center;
-		justify-items: center;
-		gap: 1em;
-	}
 	@media (min-width: 1024px) {
 		:host > div:last-child,
 		:host > div:last-child > div:last-child {

packages/themes/ecl/src/ecl-eu.ts

@@ -1376,6 +1376,15 @@ export const ECL_EU = KoliBri.createTheme('ecl-eu', {
 			border-style: solid;
 			border-color: var(--color-ice);
 		}
+		.table {
+			padding: 0.5em;
+		}
+		.table:has(caption:focus) {
+			outline-color: var(--color-blue);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 2px;
+		}
 		table {
 			width: 100%;
 			border-spacing: 0;
@@ -1409,16 +1418,6 @@ export const ECL_EU = KoliBri.createTheme('ecl-eu', {
 		th[aria-sort='descending'] {
 			font-weight: 700;
 		}
-		:host > div:last-child {
-			padding: 0.5em;
-		}
-		:host > div:last-child,
-		:host > div:last-child > div:last-child {
-			display: grid;
-			align-items: center;
-			justify-items: center;
-			gap: 1em;
-		}
 		@media (min-width: 1024px) {
 			:host > div:last-child,
 			:host > div:last-child > div:last-child {

packages/themes/itzbund/src/index.ts

@@ -1142,6 +1142,16 @@ export const ITZBund = KoliBri.createTheme('itzbund', {
 			border-width: 1px;
 			border-color: var(--border-color);
 		}
+		.table {
+			padding: 0.5em;
+		}
+		.table:has(caption:focus) {
+			outline-color: var(--color-petrol);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+			transition: outline-offset 0.2s linear;
+		}
 		table {
 			width: 100%;
 			border-collapse: collapse;
@@ -1170,16 +1180,6 @@ export const ITZBund = KoliBri.createTheme('itzbund', {
 		.table-sort-button .button {
 			font-weight: bold;
 		}
-		:host > div.pagination {
-			padding: 0.5em;
-		}
-		:host > div.pagination,
-		:host > div.pagination > div:last-child {
-			display: grid;
-			align-items: center;
-			justify-items: center;
-			gap: 0.5em;
-		}
 		@media (min-width: 1024px) {
 			:host > div.pagination,
 			:host > div.pagination > div:last-child {