@public-ui/sample-react 4.0.0-alpha.3 → 4.0.0-alpha.5

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { Formik, Field, type FieldProps } from 'formik';
 import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';
+import { Field, Formik, type FieldProps } from 'formik';
+import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 import { NumericFormat, type NumberFormatValues } from 'react-number-format';
@@ -20,7 +20,11 @@ class IbanFormatter {
 	public parse(value: string): string {
 		return this.electronicFormat(value);
 	}
-	public format(value: string): string {
+	public format(value: string, ref?: HTMLKolInputTextElement | null, selectionStart?: number | null): string {
+		if (ref && selectionStart) {
+			if (selectionStart % 5 === 0) selectionStart++;
+			ref?.setSelectionStart(selectionStart);
+		}
 		return this.printFormat(value);
 	}
 }
@@ -37,6 +41,9 @@ export function InputTextFormatterDemo() {
 	const handleSubmit = async () => {};
 	const formatter = new IbanFormatter();
 
+	const textInput1 = React.useRef<HTMLKolInputTextElement>(null);
+	let textInput1SelectionStart: number | null | undefined;
+
 	const initialIbanExampleValues: IbanExampleFormValues = {
 		iban: 'DE89370400440532013000',
 	};
@@ -64,12 +71,13 @@ export function InputTextFormatterDemo() {
 										{({ field }: FieldProps<IbanExampleFormValues['iban']>) => (
 											<div className="block mt-2">
 												<KolInputText
+													ref={textInput1}
 													onBlur={() => {
 														void form.setFieldTouched('iban', true);
 													}}
 													id="field-iban"
 													_label="IBAN"
-													_value={formatter.format(field.value ?? '')}
+													_value={formatter.format(field.value ?? '', textInput1.current, textInput1SelectionStart)}
 													_msg={{
 														_type: 'error',
 														_description: form.errors.iban || '',
@@ -79,8 +87,10 @@ export function InputTextFormatterDemo() {
 													_on={{
 														onInput: (event, value: unknown) => {
 															if (event.target) {
+																textInput1.current?.selectionStart().then((start) => {
+																	textInput1SelectionStart = start;
+																});
 																const parsed_value = formatter.parse((value as string) ?? '');
-
 																void form.setFieldValue('iban', parsed_value, true);
 															}
 														},

package/src/components/link/aria-description.tsx

@@ -1,6 +1,6 @@
 import { KolLink } from '@public-ui/react-v19';
-import React from 'react';
 import type { FC } from 'react';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkAriaDescription: FC = () => (

package/src/components/link/link-react-router.tsx

@@ -1,7 +1,7 @@
+import { KolLink } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { KolLink } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkReactRouter: FC = () => {

package/src/components/link/routes.ts

@@ -1,12 +1,12 @@
 import { Routes } from '../../shares/types';
+import { LinkAccessKey } from './access-key';
+import { LinkAriaDescription } from './aria-description';
 import { LinkBasic } from './basic';
 import { LinkIcons } from './icons';
 import { LinkImage } from './image';
-import { LinkTarget } from './target';
-import { LinkAriaDescription } from './aria-description';
-import { LinkAccessKey } from './access-key';
-import { LinkShortKey } from './short-key';
 import { LinkReactRouter } from './link-react-router';
+import { LinkShortKey } from './short-key';
+import { LinkTarget } from './target';
 
 export const LINK_ROUTES: Routes = {
 	link: {

package/src/components/link-button/aria-description.tsx

@@ -1,6 +1,6 @@
 import { KolLinkButton } from '@public-ui/react-v19';
-import React from 'react';
 import type { FC } from 'react';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkButtonAriaDescription: FC = () => (

package/src/components/link-button/routes.ts

@@ -1,6 +1,6 @@
 import { Routes } from '../../shares/types';
-import { LinkButtonBasic } from './basic';
 import { LinkButtonAriaDescription } from './aria-description';
+import { LinkButtonBasic } from './basic';
 
 export const LINK_BUTTON_ROUTES: Routes = {
 	'link-button': {

package/src/components/nav/basic.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
-import { LINKS, LINKS_WITHOUT_SUBMENU, LINKS_SUB_ACTIVE } from './links';
+import { LINKS, LINKS_SUB_ACTIVE, LINKS_WITHOUT_SUBMENU } from './links';
 
 import type { FC } from 'react';
 export const NavBasic: FC = () => {

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

@@ -1,34 +1,47 @@
+import type { ToolbarItemsPropType } from '@public-ui/components';
+import { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React from 'react';
-import { SampleDescription } from '../SampleDescription';
-import { KolPopoverButton, KolToolbar, KolHeading } from '@public-ui/react-v19';
+import React, { useEffect } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const PopoverButtonBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
+	const buttonRef = React.useRef<HTMLKolPopoverButtonElement>(null);
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
 	};
 
-	const TOOLBAR_ITEMS = [
+	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
 		{
+			type: 'button',
 			_label: 'Edit',
 			_icons: 'codicon codicon-edit',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Delete',
 			_icons: 'codicon codicon-trash',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Duplicate',
 			_icons: 'codicon codicon-copy',
 			_on: dummyEventHandler,
 		},
 	];
 
+	useEffect(() => {
+		// Ensure the popover is closed on initial render
+		if (buttonRef.current) {
+			buttonRef.current.showPopover();
+			buttonRef.current.kolFocus();
+		}
+	}, []);
+
 	return (
 		<>
 			<SampleDescription>
@@ -37,19 +50,13 @@ export const PopoverButtonBasic: FC = () => {
 					right, bottom, left) using the <code>_popoverAlign</code> prop.
 				</p>
 			</SampleDescription>
-
 			<div className="flex flex-col gap-4">
-				<KolHeading _label="Vertical toolbar with action buttons" _level={2}></KolHeading>
-
-				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }}>
+				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }} ref={buttonRef}>
 					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
 				</KolPopoverButton>
-
-				<KolHeading _label="Info icon with help text" _level={2}></KolHeading>
-
 				<KolPopoverButton _label="Help" _icons="codicon codicon-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
 					<div className="w-sm p-2 border border-solid border-gray">
-						<KolHeading _label="Help Information" _level={3}></KolHeading>
+						<KolHeading _label="Help Information" _level={0}></KolHeading>
 						<p>
 							<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
 							Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.

package/src/components/select/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { SelectVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { SelectVariants } from './partials/variants';
 
 export const SelectBasic: FC = () => (
 	<>

package/src/components/single-select/basic.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { FC } from 'react';
+import React from 'react';
 import { FormWrap } from '../FormWrap';
 import { SampleDescription } from '../SampleDescription';
 import { SingleSelectVariants } from './partials/variants';

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

@@ -4,9 +4,8 @@ import { KolSingleSelect } from '@public-ui/react-v19';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Option, StencilUnknown } from '@public-ui/components';
+import type { Components, Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
-import type { Components } from '@public-ui/components';
 import { LONG_OPTIONS } from '../../../shares/longOptions';
 
 export const SingleSelectCases = (props: Components.KolSingleSelect) => {

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { SingleSelectCases } from './cases';
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SingleSelectCases } from './cases';
 
 export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (

package/src/components/skip-nav/basic.tsx

@@ -1,33 +1,42 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { KolSkipNav } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 
-export const SkipNavBasic: FC = () => (
-	<div className="grid gap-4">
-		<SampleDescription>
-			<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>
-			<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>
-		</SampleDescription>
+export const SkipNavBasic: FC = () => {
+	const skipNavRef = useRef<HTMLKolSkipNavElement>(null);
 
-		<KolSkipNav
-			_label="Hidden navigation"
-			_links={[
-				{
-					_label: 'To the top',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'To the form',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'To the end',
-					_href: '#/back-page',
-				},
-			]}
-		></KolSkipNav>
-	</div>
-);
+	useEffect(() => {
+		skipNavRef.current?.kolFocus();
+	}, []);
+
+	return (
+		<div className="grid gap-4">
+			<SampleDescription>
+				<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>
+				<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>
+			</SampleDescription>
+
+			<KolSkipNav
+				ref={skipNavRef}
+				_label="Hidden navigation"
+				_links={[
+					{
+						_label: 'To the top',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'To the form',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'To the end',
+						_href: '#/back-page',
+					},
+				]}
+			></KolSkipNav>
+		</div>
+	);
+};

package/src/components/spin/custom.tsx

@@ -1,5 +1,5 @@
-import './custom.css';
 import { SampleDescription } from '../SampleDescription';
+import './custom.css';
 
 import React from 'react';
 

package/src/components/spin/label.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
 import { KolSpin } from '@public-ui/react-v19';
 import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const SpinLabel: FC = () => {

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

@@ -1,8 +1,9 @@
 import React from 'react';
 
+import type { ToolbarItemsPropType } from '@public-ui/components';
 import { KolSplitButton, KolToolbar } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
@@ -11,18 +12,21 @@ export const SplitButtonBasic: FC = () => {
 	const dummyEventHandler = {
 		onClick: buttonWithTextClickEventHandler,
 	};
-	const TOOLBAR_ITEMS = [
+	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
 		{
+			type: 'button',
 			_label: 'Save',
 			_icons: 'codicon codicon-save',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Move',
 			_icons: 'codicon codicon-move',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Delete',
 			_icons: 'codicon codicon-trash',
 			_on: dummyEventHandler,

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

@@ -1,6 +1,6 @@
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableComplexHeaders: FC = () => (

package/src/components/table/direction-aware-sort.tsx

@@ -0,0 +1,65 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+type TemperatureRow = {
+	city: string;
+	temperature: number;
+};
+
+const COMFORTABLE_TEMPERATURE = 22;
+
+const TEMPERATURE_DATA: TemperatureRow[] = [
+	{ city: 'Reykjavík', temperature: 6 },
+	{ city: 'Berlin', temperature: 21 },
+	{ city: 'Palma de Mallorca', temperature: 29 },
+	{ city: 'Cairo', temperature: 35 },
+	{ city: 'Helsinki', temperature: 14 },
+];
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'City', key: 'city' },
+			{
+				label: 'Temperature (°C)',
+				key: 'temperature',
+				textAlign: 'right',
+				compareFn: (rowA, rowB, direction = 'ASC') => {
+					const temperatureA = (rowA as TemperatureRow).temperature;
+					const temperatureB = (rowB as TemperatureRow).temperature;
+					const differenceA = Math.abs(temperatureA - COMFORTABLE_TEMPERATURE);
+					const differenceB = Math.abs(temperatureB - COMFORTABLE_TEMPERATURE);
+
+					if (differenceA !== differenceB) {
+						return direction === 'DESC' ? differenceB - differenceA : differenceA - differenceB;
+					}
+
+					return direction === 'DESC' ? temperatureB - temperatureA : temperatureA - temperatureB;
+				},
+				render: (_element, _cell, row) => {
+					const difference = Math.abs((row as TemperatureRow).temperature - COMFORTABLE_TEMPERATURE);
+					return `${(row as TemperatureRow).temperature} °C (Δ ${difference} °C)`;
+				},
+			},
+		],
+	],
+};
+
+export const TableDirectionAwareSort: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates how <code>compareFn</code> receives the current <code>sortDirection</code>. Ascending sorts show cities that are closest to
+				22&nbsp;°C first, descending sorts highlight the most extreme temperatures.
+			</p>
+		</SampleDescription>
+
+		<section className="w-full">
+			<KolTableStateful _minWidth="100%" _label="Direction aware compare function" _data={TEMPERATURE_DATA} _headers={HEADERS} className="block" />
+		</section>
+	</>
+);

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

@@ -5,8 +5,8 @@ import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react
 
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
-import { DATA as tableData } from './test-data';
 import type { Data } from './test-data';
+import { DATA as tableData } from './test-data';
 
 import type { KoliBriTableHeaders } from '@public-ui/components';
 

package/src/components/table/interactive-child-elements.tsx

@@ -2,9 +2,9 @@ import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTable
 import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
-import { useToasterService } from '../../hooks/useToasterService';
 
 function KolButtonWrapper({ _on, ...other }: ButtonProps) {
 	const { dummyClickEventHandler } = useToasterService();

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

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
+import type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';
 import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';
-import type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
-import { SampleDescription } from '../SampleDescription';
 
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',

package/src/components/table/predefined-settings.tsx

@@ -1,7 +1,7 @@
-import { SampleDescription } from '../SampleDescription';
 import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ columnA: 'Column A', columnB: 'Column B', columnC: 'Column C' }];
 

package/src/components/table/routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '../../shares/types';
 import { TableColumnAlignment } from './column-alignment';
 import { TableComplexHeaders } from './complex-headers';
+import { TableDirectionAwareSort } from './direction-aware-sort';
 import { TableHorizontalScrollbar } from './horizontal-scrollbar';
 import { InteractiveChildElements } from './interactive-child-elements';
 import { MultiSortTable } from './multi-sort';
@@ -31,6 +32,7 @@ export const TABLE_ROUTES: Routes = {
 		'predefined-settings': PredefinedSettings,
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
+		'direction-aware-sort': TableDirectionAwareSort,
 		'stateful-with-selection': TableStatefulWithSelection,
 		'stateless-with-settings-menu': TableStatelessWithSettingsMenu,
 		'stateful-with-single-selection': TableStatefulWithSingleSelection,

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

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';
 import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
-import type { KoliBriTableHeaders } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
-import { SampleDescription } from '../SampleDescription';
 
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',
@@ -13,6 +13,15 @@ const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	year: 'numeric',
 });
 
+const compareByDate =
+	(sortDirection = 'ASC') =>
+	(data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+		const first = (data0 as Data).date.getTime();
+		const second = (data1 as Data).date.getTime();
+		const result = first - second;
+		return sortDirection === 'DESC' ? -result : result;
+	};
+
 const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 	horizontal: [
 		[
@@ -22,11 +31,7 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				compareFn: (data0, data1) => {
-					if ((data0 as Data).date < (data1 as Data).date) return -1;
-					else if ((data1 as Data).date < (data0 as Data).date) return 1;
-					else return 0;
-				},
+				compareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),
 			},
 		],
 	],
@@ -41,11 +46,7 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				compareFn: (data0, data1) => {
-					if ((data0 as Data).date < (data1 as Data).date) return -1;
-					else if ((data1 as Data).date < (data0 as Data).date) return 1;
-					else return 0;
-				},
+				compareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),
 			},
 		],
 	],

package/src/components/table/stateful-with-selection.tsx

@@ -1,11 +1,11 @@
-import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { KolEvent } from '@public-ui/components';
-import { getRoot } from '../../shares/react-roots';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },

package/src/components/table/stateful-with-single-selection.tsx

@@ -1,11 +1,11 @@
-import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { KolEvent } from '@public-ui/components';
-import { getRoot } from '../../shares/react-roots';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },

package/src/components/table/stateless-with-settings-menu.tsx

@@ -1,6 +1,6 @@
+import { KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateless } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 type Data = {

package/src/components/table/stateless.tsx

@@ -1,6 +1,6 @@
+import { KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateless } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];

package/src/components/table/sticky-header.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders } from '@public-ui/components';
+import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import { COMPLEX_DATA } from './test-complex-data';
 

package/src/components/table/with-footer.tsx

@@ -1,6 +1,6 @@
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableWithFooter: FC = () => (

package/src/components/table/with-pagination.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import { KolTableStateful } from '@public-ui/react-v19';
 
-import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';
+import { DATE_FORMATTER } from './formatter';
 import type { Data } from './test-data';
 import { DATA } from './test-data';