Deprecate _minWidth property and update related validation logic

Refs: #7322
public-ui · Jan 30, 2025 · b09f2e5 · b09f2e5
1 parent dca74d4
commit b09f2e5
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/packages/components/src/components/table-stateless/component.tsx b/packages/components/src/components/table-stateless/component.tsx
@@ -87,6 +87,7 @@ export class KolTableStateless implements TableStatelessAPI {
 
 	/**
 	 * Defines the table min-width.
+	 * @deprecated This property is deprecated and will be removed in the next major release.
 	 */
 	@Prop() public _minWidth?: string;
 
@@ -126,9 +127,12 @@ export class KolTableStateless implements TableStatelessAPI {
 		});
 	}
 
+	/**
+	 * @deprecated This property is deprecated and will be removed in the next major release.
+	 */
 	@Watch('_minWidth')
 	public validateMinWidth(value?: string): void {
-		watchString(this, '_minWidth', value, {
+		watchString(this, '_deprecatedMinWidth', value, {
 			defaultValue: undefined,
 		});
 	}
@@ -768,7 +772,7 @@ export class KolTableStateless implements TableStatelessAPI {
 				<table
 					class="kol-table__table"
 					style={{
-						minWidth: this.state._minWidth,
+						minWidth: this.state._deprecatedMinWidth || this.state._minWidth,
 					}}
 				>
 					{/*

diff --git a/packages/components/src/schema/components/tableStateless.ts b/packages/components/src/schema/components/tableStateless.ts
@@ -7,6 +7,9 @@ import type { PropTableHeaderCells } from '../props/table-header-cells';
 type RequiredProps = PropLabel & PropTableData & PropTableHeaderCells;
 
 type OptionalProps = {
+	/**
+	 * @deprecated This property is deprecated and will be removed in the next major release.
+	 */
 	minWidth: string;
 } & PropTableCallbacks &
 	PropTableDataFoot &
@@ -18,6 +21,13 @@ type RequiredStates = {
 } & PropLabel;
 
 type OptionalStates = {
+	/**
+	 * @deprecated This property is deprecated and will be removed in the next major release.
+	 */
+	deprecatedMinWidth: string;
+	/**
+	 * Needed for internal use.
+	 */
 	minWidth: string;
 	dataFoot: KoliBriTableDataType[];
 	selection: KoliBriTableSelection;

diff --git a/packages/components/src/schema/props/table-header-cells.ts b/packages/components/src/schema/props/table-header-cells.ts
@@ -1,6 +1,6 @@
 import type { Generic } from 'adopted-style-sheets';
-import { emptyStringByArrayHandler, objectObjectHandler, parseJson, watchValidator } from '../utils';
 import type { KoliBriTableHeaderCell, Stringified } from '../types';
+import { emptyStringByArrayHandler, objectObjectHandler, parseJson, watchValidator } from '../utils';
 
 /* types */
 export type TableHeaderCells = {
@@ -23,11 +23,40 @@ export const validateTableHeaderCells = (component: Generic.Element.Component, v
 		objectObjectHandler(value, () => {
 			try {
 				value = parseJson<TableHeaderCells>(value);
-				// eslint-disable-next-line no-empty
 			} catch (e) {
-				// value keeps the original data
+				void e;
 			}
-			watchValidator(component, '_headerCells', (value): boolean => typeof value === 'object' && value !== null, new Set(['TableHeaderCellsPropType']), value);
+			watchValidator(
+				component,
+				'_headerCells',
+				(value): boolean =>
+					typeof value === 'object' &&
+					value !== null &&
+					(value.horizontal === undefined ||
+						(Array.isArray(value.horizontal) && value.horizontal.find((headerRow) => !Array.isArray(headerRow)) === undefined)) &&
+					(value.vertical === undefined || (Array.isArray(value.vertical) && value.vertical.find((headerCol) => !Array.isArray(headerCol)) === undefined)) &&
+					true,
+				new Set(['TableHeaderCellsPropType']),
+				value,
+				{
+					hooks: {
+						afterPatch: (value: unknown, state: Record<string, unknown>): void => {
+							const headerCells = value as TableHeaderCells;
+							const widths: string[] = [];
+							headerCells.horizontal?.forEach((headerRow) => {
+								headerRow.forEach((headerCell) => {
+									if (headerCell.width) {
+										widths.push(headerCell.width);
+									}
+								});
+							});
+							if (widths.length > 0) {
+								state._minWidth = `calc(${widths.join(' + ')})`;
+							}
+						},
+					},
+				},
+			);
 		});
 	});
 };
diff --git a/packages/samples/react/src/components/table/horizontal-scrollbar.tsx b/packages/samples/react/src/components/table/horizontal-scrollbar.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react';
+import { KolAlert, KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 
@@ -11,6 +11,9 @@ const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
+			/**
+			 * In version 3, the width of the column is required to implicitly calculate the minWidth.
+			 */
 			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '300px' },
 			{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },
 			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },
@@ -31,12 +34,18 @@ export const TableHorizontalScrollbar: FC = () => {
 				</p>
 			</SampleDescription>
 
+			<KolAlert _variant="card" _type="warning" _label="Deprecation of minWidth">
+				In version 3, the width of the column will be required for the implicit calculation of the minWidth. This behavior is also implemented in version 2, if
+				the _minWidth property is undefined.
+			</KolAlert>
+			<br />
 			<section className="w-full flex flex-col gap-4">
 				<KolHeading _label="Table with scrollbar" _level={2} />
 
 				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					// minWidth will be removed in the next major release
+					_minWidth={hasWidthRestriction ? '600px' : undefined}
 					_headers={HEADERS}
 					_data={DATA}
 					className="block"
@@ -47,7 +56,8 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					// minWidth will be removed in the next major release
+					_minWidth={hasWidthRestriction ? '600px' : undefined}
 					_headers={HEADERS}
 					_data={[]}
 					className="block"