Merge branch 'develop' into 7077-clean-console

docs/BREAKING_CHANGES.v3.md

@@ -23,6 +23,14 @@ The following components have been removed:
 - Visually, the tooltip has been replaced by a simple label shown in parentheses after the abbreviation.
 - The property `_tooltipAlign` has been removed.
 
+### kol-modal
+
+- The property `_activeElement` has been removed. Use the methods `openModal` and `closeModal` instead.
+
+### kol-table-stateful
+
+- The table header property `sort` has been removed. Use `compareFn` instead.
+
 ### kol-input-file
 
 - The property `_value` has been removed as it never served a purpose. Use the `getValue()` method instead to access the FileList.
@@ -44,6 +52,10 @@ The public `focus`-methods have been removed from all components. Use `kolFocus`
 - The property `_alert` has been removed. It's now being handled automatically based on `_msg` and the touched state. See #6138.
 - The property `_error` has been removed. Use `_msg_` instead.
 
+## Toaster
+
+- The toast default `alertVariant` and options property `defaultAlertVariant` have been removed. Use `variant` and `defaultVariant` instead.
+
 ## Themes
 
 ### BMF-Theme (Bundesministerium der Finanzen)

packages/components/src/components/modal/modal.e2e.ts

@@ -29,25 +29,7 @@ test.describe('kol-modal', () => {
 		});
 	});
 
-	test.describe('legacy attribute API', () => {
-		test('it opens and closes the dialog', async ({ page }) => {
-			await page.setContent('<kol-modal _label="">Modal content</kol-modal>');
-			const kolModal = page.locator('kol-modal');
-			const dialog = page.locator('dialog');
-
-			await expect(dialog).toBeHidden();
-			await kolModal.evaluate((element: HTMLKolModalElement) => {
-				element._activeElement = document.createElement('button');
-			});
-			await expect(dialog).toBeVisible();
-			await kolModal.evaluate((element: HTMLKolModalElement) => {
-				element._activeElement = null;
-			});
-			await expect(dialog).toBeHidden();
-		});
-	});
-
-	test.describe('Callbacks', () => {
+	test.describe('events', () => {
 		test('it calls the onClose callback when the closeModal-method has been called', async ({ page }) => {
 			await page.setContent('<kol-modal _label="">Modal content</kol-modal>');
 			const kolModal = page.locator('kol-modal');

packages/components/src/components/modal/shadow.tsx

@@ -1,8 +1,7 @@
 import type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';
-import { setState, validateLabel, watchString, watchValidator } from '../../schema';
+import { setState, validateLabel, watchString } from '../../schema';
 import type { JSX } from '@stencil/core';
-import { Method } from '@stencil/core';
-import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';
 import { dispatchDomEvent, KolEvent } from '../../utils/events';
 
 /**
@@ -21,12 +20,6 @@ export class KolModal implements ModalAPI {
 	@Element() private readonly host?: HTMLKolModalElement;
 	private refDialog?: HTMLDialogElement;
 
-	public componentDidRender(): void {
-		if (this.state._activeElement) {
-			this.refDialog?.showModal();
-		}
-	}
-
 	public disconnectedCallback(): void {
 		void this.closeModal();
 	}
@@ -47,8 +40,6 @@ export class KolModal implements ModalAPI {
 	@Method()
 	// eslint-disable-next-line @typescript-eslint/require-await
 	public async closeModal() {
-		this._activeElement = null;
-
 		/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */
 		this.refDialog?.close?.();
 	}
@@ -74,12 +65,6 @@ export class KolModal implements ModalAPI {
 		);
 	}
 
-	/**
-	 * Legacy property - while set to an HTMLElement, the modal is open.
-	 * @deprecated Use methode `openModal` and `closeModal` instead.
-	 */
-	@Prop({ mutable: true }) public _activeElement?: HTMLElement | null;
-
 	/**
 	 * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
 	 */
@@ -96,27 +81,10 @@ export class KolModal implements ModalAPI {
 	@Prop() public _width?: string = '100%';
 
 	@State() public state: ModalStates = {
-		_activeElement: null,
 		_label: '', // ⚠ required
 		_width: '100%',
 	};
 
-	@Watch('_activeElement')
-	public validateActiveElement(value?: HTMLElement | null): void {
-		watchValidator(this, '_activeElement', (value): boolean => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
-			defaultValue: null,
-			hooks: {
-				afterPatch: () => {
-					if (this.state._activeElement) {
-						void this.openModal();
-					} else {
-						void this.closeModal();
-					}
-				},
-			},
-		});
-	}
-
 	@Watch('_label')
 	public validateLabel(value?: LabelPropType): void {
 		validateLabel(this, value, {
@@ -143,7 +111,6 @@ export class KolModal implements ModalAPI {
 	}
 
 	public componentWillLoad(): void {
-		this.validateActiveElement(this._activeElement);
 		this.validateLabel(this._label);
 		this.validateOn(this._on);
 		this.validateWidth(this._width);

packages/components/src/components/table-stateful/shadow.tsx

@@ -3,12 +3,10 @@ import type {
 	KoliBriDataCompareFn,
 	KoliBriPaginationButtonCallbacks,
 	KoliBriSortDirection,
-	KoliBriSortFunction,
 	KoliBriTableDataType,
 	KoliBriTableHeaderCellWithLogic,
 	KoliBriTableHeaders,
 	KoliBriTablePaginationProps,
-	KoliBriTableSelectedHead,
 	LabelPropType,
 	PaginationPositionPropType,
 	SortEventPayload,
@@ -70,25 +68,12 @@ export class KolTableStateful implements TableAPI {
 		this.tableWcRef = ref;
 	};
 
-	/**
-	 * @deprecated only for backward compatibility
-	 */
-	private sortFunction?: KoliBriSortFunction;
-	/**
-	 * @deprecated only for backward compatibility
-	 */
-	private sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();
 	private sortData: SortData[] = [];
 	private showPagination = false;
 	private pageStartSlice = 0;
 	private pageEndSlice = 10;
 	private disableSort = false;
 
-	/**
-	 * @deprecated only for backward compatibility
-	 */
-	private sortedColumnHead: KoliBriTableSelectedHead = { label: '', key: '', sortDirection: 'NOS' };
-
 	/**
 	 * Defines whether to allow multi sort.
 	 */
@@ -185,29 +170,11 @@ export class KolTableStateful implements TableAPI {
 		validatePaginationPosition(this, value);
 	}
 
-	/**
-	 * @deprecated only for backward compatibility
-	 */
-	private setSortDirection = (sort: KoliBriSortFunction, direction: KoliBriSortDirection) => {
-		/**
-		 * Durch des Clearen, ist es nicht möglich eine Mehr-Spalten-Sortierung
-		 * darzustellen. Das wäre der Fall, wenn man ggf. Daten in außerhalb der
-		 * Komponente sortiert und diese sortiert von außen rein gibt und der
-		 * Sortierungsalgorithmus mehrere Spalten zusammen sortierte.
-		 *
-		 * Beachte auch col.sort !== this.sortFunction
-		 */
-		this.sortDirections.clear();
-		this.sortDirections.set(sort, direction);
-		this.sortFunction = sort;
-	};
-
 	/**
 	 * Handles sorting logic for table columns.
 	 * If multi-sort is enabled (`_allowMultiSort`), multiple columns can be sorted at once.
 	 * Otherwise, sorting is cleared when switching between columns.
 	 */
-
 	private changeCellSort(headerCell: KoliBriTableHeaderCellWithLogic) {
 		if (typeof headerCell.compareFn === 'function') {
 			if (!this.state._allowMultiSort && headerCell.key != this.sortData[0]?.key) {
@@ -238,20 +205,7 @@ export class KolTableStateful implements TableAPI {
 				});
 			}
 
-			this.updateSortedData(headerCell as KoliBriTableSelectedHead);
-		} else if (typeof headerCell.sort === 'function') {
-			this.sortFunction = headerCell.sort;
-			switch (this.sortDirections.get(this.sortFunction)) {
-				case 'ASC':
-					this.setSortDirection(this.sortFunction, 'DESC');
-					break;
-				case 'DESC':
-					this.setSortDirection(this.sortFunction, 'NOS');
-					break;
-				default:
-					this.setSortDirection(this.sortFunction, 'ASC');
-			}
-			this.updateSortedData(headerCell as KoliBriTableSelectedHead);
+			this.updateSortedData();
 		}
 	}
 
@@ -292,9 +246,6 @@ export class KolTableStateful implements TableAPI {
 												this.sortData.push({ label: cell.label, key, compareFn: cell.compareFn, direction: sortDirection });
 											}
 											hasSortedCells = true;
-										} else if (typeof cell.sort === 'function') {
-											this.setSortDirection(cell.sort, sortDirection);
-											setTimeout(() => this.updateSortedData({ key, label: cell.label, sortDirection }));
 										}
 									}
 								});
@@ -439,11 +390,7 @@ export class KolTableStateful implements TableAPI {
 		}
 	}
 
-	/**
-	 *
-	 * @param cell only used for old single sort. Can be removed when sort is removed.
-	 */
-	private updateSortedData = (cell: KoliBriTableSelectedHead = this.sortedColumnHead) => {
+	private updateSortedData = () => {
 		if (this.disableSort) {
 			setState(this, '_sortedData', this.state._data);
 			return;
@@ -461,21 +408,6 @@ export class KolTableStateful implements TableAPI {
 				}
 				return 0;
 			});
-		} else if (typeof this.sortFunction === 'function') {
-			switch (this.sortDirections.get(this.sortFunction)) {
-				case 'ASC':
-					sortedData = this.sortFunction([...this.state._data]);
-					this.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'ASC' };
-					break;
-				case 'DESC':
-					sortedData = this.sortFunction([...this.state._data]).reverse();
-					this.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'DESC' };
-					break;
-				case 'NOS':
-				default:
-					sortedData = [...this.state._data];
-					this.sortedColumnHead = { label: '', key: '', sortDirection: 'NOS' };
-			}
 		}
 		setState(this, '_sortedData', sortedData);
 	};
@@ -522,10 +454,7 @@ export class KolTableStateful implements TableAPI {
 	}
 
 	private getHeaderCellSortState(headerCell: KoliBriTableHeaderCellWithLogic): KoliBriSortDirection | undefined {
-		if (!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function')) {
-			if (headerCell.key === this.sortedColumnHead.key) {
-				return this.sortedColumnHead.sortDirection;
-			}
+		if (!this.disableSort && typeof headerCell.compareFn === 'function') {
 			if (headerCell.key) {
 				const data = this.sortData.find((value) => value.key === headerCell.key);
 				if (data?.direction) {

packages/components/src/components/toaster/toaster.tsx

@@ -48,12 +48,7 @@ export class ToasterService {
 		 * so we can't enqueue toasts.
 		 */
 		if (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') {
-			const defaultVariant = this.options?.defaultVariant ?? undefined;
-			const defaultAlertVariant = this.options?.defaultAlertVariant ?? undefined;
-			if (!toast.alertVariant && !toast.variant && this.options) {
-				toast.variant = defaultAlertVariant ?? defaultVariant;
-			}
-
+			toast.variant ??= this.options?.defaultVariant;
 			return this.toastContainerElement.enqueue(toast);
 		}
 	}

packages/components/src/functional-components/ToastItem/ToastItem.tsx

@@ -12,7 +12,7 @@ type ToastItemProps = JSXBase.HTMLAttributes<HTMLDivElement> & {
 };
 
 const ToastItemFc: FC<ToastItemProps> = ({ status, toast, onClose, ...other }) => {
-	const { type, label, description, variant, alertVariant } = toast;
+	const { type, label, description, variant } = toast;
 
 	return (
 		<div class={clsx('kol-toast-item', `kol-toast-item--${status}`)}>
@@ -23,7 +23,7 @@ const ToastItemFc: FC<ToastItemProps> = ({ status, toast, onClose, ...other }) =
 				level={0}
 				hasCloser={true}
 				type={type}
-				variant={alertVariant || variant || 'card'}
+				variant={variant || 'card'}
 				onCloserClick={onClose}
 			>
 				<div {...other}>{description}</div>

packages/components/src/schema/components/modal.ts

@@ -5,12 +5,10 @@ import type { KoliBriModalEventCallbacks } from '../types';
 
 type RequiredProps = PropLabel;
 type OptionalProps = {
-	activeElement: HTMLElement | null;
 	on: KoliBriModalEventCallbacks;
 	width: string;
 };
 type RequiredStates = {
-	activeElement: HTMLElement | null;
 	width: string;
 } & PropLabel;
 type OptionalStates = {

packages/components/src/schema/components/table.ts

@@ -5,19 +5,10 @@ import type { KoliBriTableDataType, KoliBriTableHeaderCell, Stringified, KoliBri
 import type { KoliBriPaginationProps } from './pagination';
 import type { PropPaginationPosition } from '../props/pagination-position';
 
-export type KoliBriTableSelectedHead = { key: string; label: string; sortDirection: KoliBriSortDirection };
-
-type KoliBriTableSort = <T>(data: T[]) => T[];
-
-export type KoliBriSortFunction = (data: KoliBriTableDataType[]) => KoliBriTableDataType[];
 export type KoliBriDataCompareFn = (a: KoliBriTableDataType, b: KoliBriTableDataType) => number;
 
 export type KoliBriTableHeaderCellWithLogic = KoliBriTableHeaderCell & {
 	compareFn?: KoliBriDataCompareFn;
-	/**
-	 * @deprecated use `compareFn` instead
-	 */
-	sort?: KoliBriTableSort;
 	sortDirection?: KoliBriSortDirection;
 };
 

packages/components/src/schema/components/toaster.ts

@@ -13,10 +13,6 @@ export type Toast = {
 	render?: ToastRenderFunction;
 	label: LabelPropType;
 	type: AlertType;
-	/**
-	 * @deprecated Use variant instead
-	 */
-	alertVariant?: AlertVariant;
 	variant?: AlertVariant;
 };
 
@@ -27,10 +23,6 @@ export type ToastState = {
 };
 
 export type ToasterOptions = {
-	/**
-	 * @deprecated Use defaultVariant instead
-	 */
-	defaultAlertVariant: AlertVariant;
 	defaultVariant: AlertVariant;
 };