@public-ui/sample-react 3.0.0-rc.0 → 3.0.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "3.0.0-rc.0",
+  "version": "3.0.0-rc.2",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -11,16 +11,16 @@
     "@leanup/stack": "1.3.54",
     "@leanup/stack-react": "1.3.54",
     "@leanup/stack-webpack": "1.3.54",
-    "@playwright/test": "1.49.0",
+    "@playwright/test": "1.49.1",
     "@stencil/core": "4.22.3",
-    "@types/node": "ts5.6",
+    "@types/node": "ts5.7",
     "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "8.17.0",
-    "@typescript-eslint/parser": "8.17.0",
+    "@types/react-dom": "18.3.5",
+    "@typescript-eslint/eslint-plugin": "8.18.0",
+    "@typescript-eslint/parser": "8.18.0",
     "@unocss/preset-uno": "0.58.9",
     "@unocss/webpack": "0.58.9",
-    "adopted-style-sheets": "1.1.6",
+    "adopted-style-sheets": "1.1.7",
     "ajv": "8.17.1",
     "chromedriver": "130.0.4",
     "cpy-cli": "5.0.0",
@@ -34,7 +34,7 @@
     "eslint-plugin-react": "7.37.2",
     "file-loader": "6.2.0",
     "formik": "2.4.6",
-    "knip": "5.39.2",
+    "knip": "5.40.0",
     "less-loader": "12.2.0",
     "mini-css-extract-plugin": "2.9.2",
     "nightwatch-axe-verbose": "2.3.1",
@@ -50,15 +50,15 @@
     "sass-loader": "16.0.4",
     "string-replace-loader": "3.1.0",
     "tslib": "2.8.1",
-    "typescript": "5.6.3",
-    "webpack": "5.97.0",
+    "typescript": "5.7.2",
+    "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.1.0",
+    "webpack-dev-server": "5.2.0",
     "world_countries_lists": "2.9.0",
-    "yup": "1.4.0",
-    "@public-ui/react": "3.0.0-rc.0",
-    "@public-ui/themes": "3.0.0-rc.0",
-    "@public-ui/components": "3.0.0-rc.0"
+    "yup": "1.5.0",
+    "@public-ui/components": "3.0.0-rc.2",
+    "@public-ui/themes": "3.0.0-rc.2",
+    "@public-ui/react": "3.0.0-rc.2"
   },
   "files": [
     ".eslintignore",

package/public/index.html

@@ -6,7 +6,6 @@
 		<meta name="description" content="Webapp demonstrating KolBri-components with React." />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
-		<link rel="stylesheet" href="assets/bundes/style.css" />
 		<link rel="stylesheet" href="assets/codicons/codicon.css" />
 		<link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
 		<link rel="stylesheet" href="assets/icofont/icofont.min.css" />

package/src/App.tsx

@@ -91,8 +91,6 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 const ROUTE_LIST = getRouteList(ROUTES);
 const ROUTE_TREE = getRouteTree(ROUTES);
 
-console.log('ROUTE_LIST', ROUTE_LIST);
-
 const componentList: Map<string, Option<string>> = new Map();
 ROUTE_LIST.forEach((route) => {
 	const routeSplit = route.split('/');

package/src/components/handout/basic.tsx

@@ -29,7 +29,7 @@ import {
 	KolNav,
 	KolProgress,
 	KolSelect,
-	KolTable,
+	KolTableStateful,
 	KolTabs,
 	KolTextarea,
 	KolVersion,
@@ -73,16 +73,14 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} />);
 				},
-				sort: (data) => {
-					return data.sort((first, second) => {
-						if ((first as TableDataType).monday < (second as TableDataType).monday) {
-							return -1;
-						}
-						if ((first as TableDataType).monday > (second as TableDataType).monday) {
-							return 1;
-						}
-						return 0;
-					});
+				compareFn: (first, second) => {
+					if ((first as TableDataType).monday < (second as TableDataType).monday) {
+						return -1;
+					}
+					if ((first as TableDataType).monday > (second as TableDataType).monday) {
+						return 1;
+					}
+					return 0;
 				},
 				sortDirection: 'ASC',
 				textAlign: 'right',
@@ -97,16 +95,14 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#060" _label={cell.label}></KolBadge>);
 				},
-				sort: (data) => {
-					return data.sort((first, second) => {
-						if ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {
-							return -1;
-						}
-						if ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {
-							return 1;
-						}
-						return 0;
-					});
+				compareFn: (first, second) => {
+					if ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {
+						return -1;
+					}
+					if ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {
+						return 1;
+					}
+					return 0;
 				},
 				sortDirection: 'DESC',
 			},
@@ -430,7 +426,6 @@ export const HandoutBasic: FC = () => {
 							/>
 						</div>
 						{/* <KolSkipNav></KolSkipNav> */}
-						{/* <KolLinkGroup _label=""></KolLinkGroup> */}
 						<div>
 							<KolBreadcrumb
 								_label="Breadcrumb aus Text-Links"
@@ -476,7 +471,7 @@ export const HandoutBasic: FC = () => {
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
 					<div slot="" className="grid gap-2 p-2">
-						<KolTable _label="Table" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTable>
+						<KolTableStateful _label="Table" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>

package/src/components/image/basic.tsx

@@ -9,6 +9,6 @@ export const ImageBasic: FC = () => (
 			<p>KolImage renders an image. The sample shows an image with alternative text.</p>
 		</SampleDescription>
 
-		<KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
+		<KolImage className="w-image" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
 	</>
 );

package/src/components/input-date/partials/minMax.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { KolInputDate } from '@public-ui/react';
 import type { Components } from '@public-ui/components';
 
-export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props) {
+export const InputDateMinMaxCases = (props: Components.KolInputDate) => {
 	const minDateIso = '2024-09-26';
 	const maxDateIso = '2024-09-27';
 
@@ -38,4 +38,4 @@ export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Componen
 			<KolInputDate {...props} _type="month" _label="Month with Date" _min={minDate} _max={maxDate} />
 		</div>
 	);
-});
+};

package/src/components/input-date/partials/variants.tsx

@@ -17,7 +17,7 @@ export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.
 			</fieldset>
 			<fieldset>
 				<legend>Date (with min/max)</legend>
-				<InputDateMinMaxCases ref={ref} {...props} />
+				<InputDateMinMaxCases {...props} />
 			</fieldset>
 		</div>
 	);

package/src/components/input-date/show-hide-msg.tsx

@@ -37,7 +37,6 @@ export const InputDateShowHideMsg = () => {
 					Error-Message visible: {showMsg && isTouched && !hideMsg ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'}, isTouched: {isTouched ? 'Yes' : 'No'},
 					hideMsg: {hideMsg ? 'Yes' : 'No'})
 				</pre>
-				<KolInputDate _error={showMsg ? 'error message' : undefined} _hideError={hideMsg} _label="Date (_error)" _touched={isTouched} />
 				{msgTypes.map((type) => (
 					<KolInputDate
 						key={type}

package/src/components/input-text/partials/cases.tsx

@@ -21,6 +21,7 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 						icon: 'codicon codicon-arrow-right',
 						style: {
 							'font-size': '200%',
+							'margin-right': 'calc(-8rem / var(--kolibri-root-font-size, 16))',
 						},
 					},
 				}}
@@ -48,7 +49,6 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText {...props} _value="Value" _disabled _label="First name (text, disabled)" />
 			<KolInputText {...props} _value="Value" _label="With access key" _accessKey="c" />
 			<KolInputText {...props} _value="Value" _label="With short key" _shortKey="s" />
-			<KolInputText {...props} _value="Value" _label="With both key" _shortKey="d" _accessKey="e" />
 		</div>
 	);
 });

package/src/components/input-text/smart-button.tsx

@@ -21,13 +21,26 @@ export const InputTextSmartButton = () => {
 		},
 	};
 
+	const icons = {
+		left: {
+			icon: 'codicon codicon-arrow-left',
+		},
+		right: {
+			icon: 'codicon codicon-arrow-right',
+		},
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>This sample shows the smart button feature for KolInputText. It allows the usage of a button inside the bnput.</p>
 			</SampleDescription>
 
-			<KolInputText _label="With Smart Button" _type="text" _smartButton={smartButton}></KolInputText>
+			<div className="grid gap-4">
+				<KolInputText _label="With Smart Button" _type="text" _smartButton={smartButton}></KolInputText>
+				<KolInputText _label="With Smart Button (disabled)" _disabled _type="text" _smartButton={smartButton}></KolInputText>
+				<KolInputText _label="With Smart Button and Icons" _type="text" _smartButton={smartButton} _icons={icons}></KolInputText>
+			</div>
 		</>
 	);
 };

package/src/components/input-text/text-formatter.tsx

@@ -111,8 +111,7 @@ export function InputTextFormatterDemo() {
 										{({ field }: FieldProps<CurrencyExampleFormValues['currency']>) => (
 											<div className="block mt-2">
 												<NumericFormat
-													customInput={({ type, value, onBlur, onChange, onFocus, ...other }: any) => {
-														console.log('OTHER: ', other);
+													customInput={({ type, value, onBlur, onChange, onFocus }: any) => {
 														return <KolInputText _label="Currency" _type={type} _value={value} _on={{ onBlur, onChange, onFocus }} />;
 													}}
 													displayType="input"

package/src/components/link/access-key.tsx

@@ -7,9 +7,7 @@ import { SampleDescription } from '../SampleDescription';
 export const LinkAccessKey: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>
-			</p>
+			<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">

package/src/components/nav/basic.tsx

@@ -31,11 +31,17 @@ export const NavBasic: FC = () => {
 				</section>
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Navigation without submenu" />
-					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+					<KolNav
+						class="block w-fit"
+						_label="Navigation without submenu"
+						_links={LINKS_WITHOUT_SUBMENU}
+						_hasCompactButton
+						_hasIconsWhenExpanded={hasIconsWhenExpanded}
+					/>
 				</section>
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Navigation with submenu" />
-					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+					<KolNav class="block w-fit" _label="Navigation with submenu" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
 				</section>
 			</section>
 		</>

package/src/components/nav/horizontal.tsx

@@ -13,11 +13,11 @@ export const NavHorizontal: FC = () => (
 		<section className="grid gap-8">
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Navigation without submenu" />
-				<KolNav _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _orientation="horizontal" />
+				<KolNav _label="Navigation without submenu" _links={LINKS_WITHOUT_SUBMENU} _orientation="horizontal" />
 			</section>
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Navigation with submenu" />
-				<KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />
+				<KolNav _label="Navigation with submenu" _links={LINKS} _orientation="horizontal" />
 			</section>
 		</section>
 	</>

package/src/components/pagination/basic.tsx

@@ -25,7 +25,7 @@ export const PaginationBasic: FC = () => (
 				_siblingCount={0}
 				_boundaryCount={2}
 				_hasButtons={false}
-				_label="Test pagination 4"
+				_label="Test pagination 5"
 				_on={{}}
 				_pageSizeOptions={[10, 100]}
 			/>

package/src/components/select/partials/cases.tsx

@@ -4,7 +4,7 @@ import { KolSelect } from '@public-ui/react';
 
 import { ERROR_MSG } from '../../../shares/constants';
 
-import type { Components, SelectOption } from '@public-ui/components';
+import type { Components, Optgroup, SelectOption, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
@@ -27,6 +27,19 @@ const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	},
 ];
 
+type GroupedOptionsType = Record<string, Optgroup<StencilUnknown>>;
+
+const groupedOptions: GroupedOptionsType = COUNTRY_OPTIONS.reduce((acc, option) => {
+	const firstLetter = (option.label as string).charAt(0).toUpperCase();
+	if (!acc[firstLetter]) {
+		acc[firstLetter] = { label: firstLetter, options: [] };
+	}
+	acc[firstLetter].options.push({ label: option.label, value: option.label });
+	return acc;
+}, {} as GroupedOptionsType);
+
+const groupedOptionsArray = Object.values(groupedOptions);
+
 export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -59,6 +72,8 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With access key" _accessKey="c" />
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With short key" _shortKey="s" />
+			<KolSelect {...props} _options={groupedOptionsArray} _label="With grouped by first letter" _value={['Albanien']} />
+			<KolSelect {...props} _options={groupedOptionsArray} _label="With grouped by first letter (multiple)" _multiple _value={['Albanien']} />
 		</div>
 	);
 });

package/src/components/single-select/partials/cases.tsx

@@ -1,13 +1,14 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { KolSingleSelect } from '@public-ui/react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components, Option, StencilUnknown } from '@public-ui/components';
+import type { Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
+import type { Components } from '@public-ui/components';
 
-export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Components.KolSingleSelect>(function SingleSelectCases(props) {
+export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 	return (
 		<div className="grid gap-4">
 			<KolSingleSelect
@@ -38,4 +39,4 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
 		</div>
 	);
-});
+};

package/src/components/single-select/partials/variants.tsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { SingleSelectCases } from './cases';
-
 import type { Components } from '@public-ui/components';
-export const SingleSelectVariants = forwardRef<HTMLKolSingleSelectElement, Components.KolSingleSelect>(function SingleSelectVariant(props, ref) {
+
+export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">
 			<fieldset>
@@ -12,8 +12,8 @@ export const SingleSelectVariants = forwardRef<HTMLKolSingleSelectElement, Compo
 			</fieldset>
 			<fieldset>
 				<legend>Text (hideLabel)</legend>
-				<SingleSelectCases ref={ref} {...props} _hideLabel />
+				<SingleSelectCases {...props} _hideLabel />
 			</fieldset>
 		</div>
 	);
-});
+};

package/src/components/split-button/basic.tsx

@@ -27,10 +27,10 @@ export const SplitButtonBasic: FC = () => {
 
 			<div className="flex gap-4">
 				<KolSplitButton _label="Only the arrow opens" _on={{ onClick: handleButtonClick }}>
-					Dropdown-Inhalt
+					Dropdown contents
 				</KolSplitButton>
 				<KolSplitButton _label="Button without visible label" _hideLabel _icons="codicon codicon-git-pull-request">
-					Dropdown-Inhalt
+					Dropdown contents
 				</KolSplitButton>
 			</div>
 		</>

package/src/components/table/column-alignment.tsx

@@ -1,22 +1,22 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTable } from '@public-ui/react';
+import { KolHeading, KolTableStateful } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];
-const genericNonSorter = <T,>(data: T): T => data;
+const genericNonSorter = () => 0;
 
 export const TableColumnAlignment: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable with columns headers and data in different text alignments.</p>
+			<p>This sample shows KolTableStateful with columns headers and data in different text alignments.</p>
 		</SampleDescription>
 
 		<section className="w-full flex flex-col">
 			<KolHeading _label="Simple table" _level={3}></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with different text align properties"
 				_headers={{
 					horizontal: [
@@ -33,14 +33,14 @@ export const TableColumnAlignment: FC = () => (
 			/>
 
 			<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with sortable columns"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
-							{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
-							{ label: 'right', key: 'right', textAlign: 'right', sort: genericNonSorter },
+							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter },
+							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter },
+							{ label: 'right', key: 'right', textAlign: 'right', compareFn: genericNonSorter },
 						],
 					],
 				}}
@@ -50,13 +50,13 @@ export const TableColumnAlignment: FC = () => (
 			/>
 
 			<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with some but not all columns sortable"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
-							{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter },
+							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter },
 							{ label: 'right', key: 'right', textAlign: 'right' },
 						],
 					],
@@ -67,7 +67,7 @@ export const TableColumnAlignment: FC = () => (
 			/>
 
 			<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with vertical heading"
 				_headers={{
 					horizontal: [

package/src/components/table/complex-headers.tsx

@@ -1,16 +1,16 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableComplexHeaders: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable using vertical and horizontal headers, applying colspan and rowspan.</p>
+			<p>This sample shows KolTableStateful using vertical and horizontal headers, applying colspan and rowspan.</p>
 		</SampleDescription>
 
 		<section className="w-full flex flex-col">
-			<KolTable
+			<KolTableStateful
 				_label="Business hours"
 				_data={[
 					{

package/src/components/table/horizontal-scrollbar.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 
@@ -26,15 +26,15 @@ export const TableHorizontalScrollbar: FC = () => {
 		<>
 			<SampleDescription>
 				<p>
-					This sample shows KolTable 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.
+					This sample shows KolTableStateful 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.
 				</p>
 			</SampleDescription>
 
 			<section className="w-full flex flex-col gap-4">
 				<KolHeading _label="Table with scrollbar" _level={2} />
 
-				<KolTable
+				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar."
 					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
 					_headers={HEADERS}
@@ -45,7 +45,7 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolHeading _label="Empty Table with scrollbar" _level={3} />
 
-				<KolTable
+				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
 					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
 					_headers={HEADERS}
@@ -70,7 +70,13 @@ export const TableHorizontalScrollbar: FC = () => {
 					<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" />
+				<KolTableStateful
+					_label="Table for demonstration purposes without horizontal scrollbar"
+					_minWidth="600px"
+					_headers={HEADERS}
+					_data={DATA}
+					className="block"
+				/>
 			</section>
 		</>
 	);

package/src/components/table/multi-sort.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react';
 import type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
@@ -74,7 +74,7 @@ export const MultiSortTable: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolTable with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>
+				<p>This sample shows KolTableStateful with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>
 			</SampleDescription>
 
 			<section className="w-full grid gap-4">
@@ -86,7 +86,7 @@ export const MultiSortTable: FC = () => {
 						_variant="switch"
 						_on={{ onChange: (_, value) => setAllowMultiSortVertical(Boolean(value)) }}
 					></KolInputCheckbox>
-					<KolTable
+					<KolTableStateful
 						_label="Sort Table with Order and Date"
 						_data={DATA.slice(0, 10)}
 						_headers={HEADERS_VERTICAL}
@@ -102,7 +102,7 @@ export const MultiSortTable: FC = () => {
 						_variant="switch"
 						_on={{ onChange: (_, value) => setAllowMultiSortHorizontal(Boolean(value)) }}
 					></KolInputCheckbox>
-					<KolTable
+					<KolTableStateful
 						_label="Sort Table with Order and Date"
 						_data={DATA}
 						_headers={HEADERS_HORIZONTAL}