@public-ui/sample-react 4.0.0-beta.0 → 4.0.0-ee1678914efc9a51fdc688bac71b570e768a8032.0

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

@@ -1,5 +1,4 @@
 import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';
-import { KolEvent } from '@public-ui/components';
 import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
@@ -8,6 +7,10 @@ import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 
 type SelectionValue = string | number;
+type KolTableStatelessElement = {
+	addEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;
+	removeEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;
+};
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -39,7 +42,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
 
-	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
+	const handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<SelectionValue[]>) => {
 		console.log('Selection change via event', selection);
 	};
 	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {
@@ -48,17 +51,19 @@ export const TableStatelessWithSingleSelection: FC = () => {
 	};
 
 	useEffect(() => {
-		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
+		const tableElement = kolTableStatelessRef.current as unknown as KolTableStatelessElement | null;
+		const selectionChangeEvent = 'kolSelectionChange';
+		tableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 
 		return () => {
-			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
+			tableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatelessRef]);
 
 	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
+		const data = (cell as { data?: Data }).data;
+		const id = data?.id;
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);
 	};
 
 	return (
@@ -70,7 +75,6 @@ export const TableStatelessWithSingleSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateless
 					_label="Table with selection checkboxes"
-					_minWidth="auto"
 					_headerCells={{
 						horizontal: [
 							[

package/src/components/table/stateless.tsx

@@ -14,7 +14,6 @@ export const TableStateless: FC = () => (
 		<section className="w-full">
 			<KolTableStateless
 				_label="Table for demonstration purposes"
-				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[

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

@@ -9,13 +9,13 @@ import { COMPLEX_DATA } from './test-complex-data';
 const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'ID', key: 'id', textAlign: 'right' },
-			{ label: 'Common name', key: 'common_name', textAlign: 'left' },
-			{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left' },
-			{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left' },
-			{ label: 'Habitat', key: 'habitat', textAlign: 'left' },
-			{ label: 'Diet', key: 'diet', textAlign: 'left' },
-			{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left' },
+			{ label: 'ID', key: 'id', textAlign: 'right', width: 160 },
+			{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160 },
+			{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160 },
+			{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160 },
+			{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160 },
+			{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160 },
+			{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160 },
 		],
 	],
 };
@@ -30,6 +30,6 @@ export const TableStickyHeader: FC = () => (
 		</SampleDescription>
 
 		<KolHeading _level={2} _label="Sticky headers" />
-		<KolTableStateful _label="Animal species overview" _minWidth="1200px" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+		<KolTableStateful _label="Animal species overview" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
 	</>
 );

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

@@ -12,33 +12,38 @@ export const TableWithFooter: FC = () => (
 		<KolTableStateful
 			className="w-full"
 			_label="Business hours"
-			_minWidth="auto"
 			_headers={{
 				horizontal: [
 					[
 						{
 							label: 'District',
 							key: 'asp',
+							width: 160,
 						},
 						{
 							label: 'Monday',
 							key: 'monday',
+							width: 160,
 						},
 						{
 							label: 'Tuesday',
 							key: 'tuesday',
+							width: 160,
 						},
 						{
 							label: 'Wednesday',
 							key: 'wednesday',
+							width: 160,
 						},
 						{
 							label: 'Thursday',
 							key: 'thursday',
+							width: 160,
 						},
 						{
 							label: 'Friday',
 							key: 'friday',
+							width: 160,
 						},
 					],
 				],

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

@@ -13,8 +13,8 @@ import type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-u
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'Order', key: 'order' },
-			{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
+			{ label: 'Order', key: 'order', width: 160 },
+			{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
 		],
 	],
 };
@@ -26,7 +26,7 @@ export const TableWithPagination: FC = () => (
 			<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>
 		</SampleDescription>
 		<div className="w-full">
-			<KolTableStateful _label="Table description" _minWidth="auto" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
+			<KolTableStateful _label="Table description" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
 		</div>
 	</>
 );

package/src/components/toast/basic.tsx

@@ -10,6 +10,9 @@ import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
+/**
+ * @deprecated For more information, please refer to the documentation.
+ */
 export const ToastBasic: FC = () => {
 	const [searchParams] = useSearchParams();
 	const defaultType = searchParams.get('type') as AlertTypePropType;
@@ -77,7 +80,7 @@ export const ToastBasic: FC = () => {
 		<>
 			<KolAlert _label="Component is DEPRECATED" _type="error" _variant="card" className="header-alert">
 				For more information, please refer&nbsp;
-				<KolLink _href="https://public-ui.github.io/docs/components/toaster" _target="_blank" _label="to the documentation"></KolLink>.
+				<KolLink _href="https://public-ui.github.io/en/docs/components/toaster" _target="_blank" _label="to the documentation" />.
 			</KolAlert>
 
 			<SampleDescription>

package/src/components/toast/configurator.tsx

@@ -19,6 +19,9 @@ const isAlertType = (value: unknown): value is AlertTypePropType => {
 	return typeof value === 'string' && toastTypes.includes(value as AlertTypePropType);
 };
 
+/**
+ * @deprecated For more information, please refer to the documentation.
+ */
 export const ToastConfigurator: FC = () => {
 	const [searchParams] = useSearchParams();
 	const queryType = searchParams.get('type');
@@ -68,7 +71,7 @@ export const ToastConfigurator: FC = () => {
 		<>
 			<KolAlert _label="Component is DEPRECATED" _type="error" _variant="card" className="header-alert">
 				For more information, please refer&nbsp;
-				<KolLink _href="https://public-ui.github.io/docs/components/toaster" _target="_blank" _label="to the documentation"></KolLink>.
+				<KolLink _href="https://public-ui.github.io/en/docs/components/toaster" _target="_blank" _label="to the documentation"></KolLink>.
 			</KolAlert>
 			<SampleDescription>
 				<p>

package/src/scenarios/button-shortkey-table.tsx

@@ -30,11 +30,11 @@ const RowActions: FC<{ label: string }> = ({ label }) => {
 	const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
 		switch (event.code) {
 			case 'KeyE':
-				void editButtonRef.current?.kolFocus();
+				void editButtonRef.current?.focus();
 				handleEditClick();
 				return;
 			case 'KeyD':
-				void deleteButtonRef.current?.kolFocus();
+				void deleteButtonRef.current?.focus();
 				handleDeleteClick();
 				return;
 		}
@@ -81,14 +81,19 @@ export const ButtonShortkeyTable: FC = () => {
 					label: 'Label',
 					key: 'label',
 					textAlign: 'left',
+					width: 200,
 				},
 				{
 					label: 'Actions',
 					key: 'actions',
 					textAlign: 'left',
-
+					width: 150,
 					render: (el, cell) => {
-						getRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);
+						const data = cell.data as Data | undefined;
+						if (!data?.label) {
+							return;
+						}
+						getRoot(createReactRenderElement(el)).render(<RowActions label={data.label} />);
 					},
 				},
 			],
@@ -115,7 +120,6 @@ export const ButtonShortkeyTable: FC = () => {
 						_label={`Interactive table with shortkey buttons in each row`}
 						_data={DATA}
 						_headers={HEADERS}
-						_minWidth="400px"
 						_pagination={{
 							_page: 1,
 						}}

package/src/scenarios/focus-elements.tsx

@@ -158,7 +158,7 @@ export const FocusElements: FC = () => {
 	useLayoutEffect(() => {
 		setTimeout(() => {
 			// Timeout not strictly necessary but prevents a layout glitch in snapshots with Playwright.
-			void ref.current?.kolFocus();
+			void ref.current?.focus();
 		}, 500);
 	}, [ref]);
 

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -32,26 +32,16 @@ const TABS: TabButtonProps[] = [
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ key: 'name', label: 'Name', textAlign: 'left', width: '400px' },
-			{ key: 'species', label: 'Species', textAlign: 'left', width: '400px' },
-			{ key: 'habitat', label: 'Habitat', textAlign: 'left', width: '400px' },
-			{ key: 'diet', label: 'Diet', textAlign: 'left', width: '400px' },
-			{ key: 'lifespan', label: 'lifespan', textAlign: 'right', width: '400px' },
+			{ key: 'name', label: 'Name', textAlign: 'left' },
+			{ key: 'species', label: 'Species', textAlign: 'left' },
+			{ key: 'habitat', label: 'Habitat', textAlign: 'left' },
+			{ key: 'diet', label: 'Diet', textAlign: 'left' },
+			{ key: 'lifespan', label: 'lifespan', textAlign: 'right' },
 		],
 	],
 };
 
 function TableHorizontalScrollbarAdvanced() {
-	const [tableWith] = React.useState(() => {
-		const columnDefinitions = HEADERS.horizontal![0];
-		let width = 0;
-
-		for (const def of columnDefinitions as { width: string }[]) {
-			width += parseFloat(def.width?.replace('px', '') || '0');
-		}
-		return `${width}px`;
-	});
-
 	return (
 		<>
 			<SampleDescription>
@@ -70,7 +60,6 @@ function TableHorizontalScrollbarAdvanced() {
 						<div style={{ overflow: 'hidden' }}>
 							<KolTableStateful
 								_label="Table for demonstration purposes with horizontal scrollbar"
-								_minWidth={tableWith}
 								_headers={HEADERS}
 								_data={DATA}
 								_pagination={{ _page: 1 }}

package/src/shares/routes.ts

@@ -9,6 +9,7 @@ import { BUTTON_ROUTES } from '../components/button/routes';
 import { CARD_ROUTES } from '../components/card/routes';
 import { COMBOBOX_ROUTES } from '../components/combobox/routes';
 import { DETAILS_ROUTES } from '../components/details/routes';
+import { DIALOG_ROUTES } from '../components/dialog/routes';
 import { DRAWER_ROUTES } from '../components/drawer/routes';
 import { FORM_ROUTES } from '../components/form/routes';
 import { HANDOUT_ROUTES } from '../components/handout/routes';
@@ -62,6 +63,7 @@ export const ROUTES: Routes = {
 	...CARD_ROUTES,
 	...COMBOBOX_ROUTES,
 	...DETAILS_ROUTES,
+	...DIALOG_ROUTES,
 	...DRAWER_ROUTES,
 	...FORM_ROUTES,
 	...HEADING_ROUTES,
@@ -87,7 +89,6 @@ export const ROUTES: Routes = {
 	...PROGRESS_ROUTES,
 	...QUOTE_ROUTES,
 	...SELECT_ROUTES,
-	...SELECT_ROUTES,
 	...SKIP_NAV_ROUTES,
 	...SPIN_ROUTES,
 	...SINGLE_SELECT_ROUTES,

package/dist/assets/controller-DPZyCKru-CYw2yBXd.js

@@ -1,2 +0,0 @@
-import{n,w as s}from"./index-DDaun4pg.js";import{v as r}from"./auto-complete-h9OoHuC5-DwvEQ5Sq.js";import{a as h,v as l,b as d}from"./max-length-behavior-N5Lbz6E--D-GKzhk3.js";import{v as p}from"./placeholder-DrgXYoah-YaV48hp7.js";import{v as c}from"./read-only-Bp291veM-CxOiu37N.js";import{v as m}from"./required-7L0ytoMT-Cr7y-YPq.js";import{a as v}from"./controller-icon-CxUC2kIO-B30x_tAU.js";const u=(a,t,e={})=>{n(a,"_pattern",t,e)},o=["default","visibility-toggle"],_=(a,t)=>{s(a,"_variant",e=>typeof e=="string"&&o.includes(e),new Set(o),t)};class V extends v{constructor(t,e,i){super(t,e,i),this.afterSyncCharCounter=()=>{typeof this.component._value=="string"&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=t}validateAutoComplete(t){r(this.component,t)}validateHasCounter(t){h(this.component,t)}validateMaxLengthBehavior(t){l(this.component,t)}validateVariant(t){_(this.component,t)}validateMaxLength(t){d(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePattern(t){u(this.component,t)}validatePlaceholder(t){p(this.component,t)}validateReadOnly(t){c(this.component,t)}validateRequired(t){m(this.component,t)}validateValue(t){n(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}export{V as I};
-//# sourceMappingURL=controller-DPZyCKru-CYw2yBXd.js.map

package/dist/assets/custom-class-Dg0c6ST7-CXkmqQxK.js

@@ -1,2 +0,0 @@
-import{n as t}from"./index-DDaun4pg.js";const o=(a,s)=>{t(a,"_customClass",s,{defaultValue:void 0})};export{o as v};
-//# sourceMappingURL=custom-class-Dg0c6ST7-CXkmqQxK.js.map

package/dist/assets/disabled-u5a_azlj-gg9juBlZ.js

@@ -1,2 +0,0 @@
-import{m as o,C as s}from"./index-DDaun4pg.js";const d=(a,t)=>{o(a,"_disabled",t,{hooks:{afterPatch:e=>{e===!0&&s()}}})};export{d as v};
-//# sourceMappingURL=disabled-u5a_azlj-gg9juBlZ.js.map

package/dist/assets/has-closer-DENzUWH2-It8eNixk.js

@@ -1,2 +0,0 @@
-import{m as s}from"./index-DDaun4pg.js";const r=(a,o)=>{s(a,"_hasCloser",o)};export{r as v};
-//# sourceMappingURL=has-closer-DENzUWH2-It8eNixk.js.map

package/dist/assets/has-closer-DENzUWH2-It8eNixk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"has-closer-DENzUWH2-It8eNixk.js","sources":["../../../../components/dist/esm/has-closer-DENzUWH2.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { d as watchBoolean } from './common-L1K0yh1S.js';\n\nconst validateHasCloser = (component, value) => {\n    watchBoolean(component, '_hasCloser', value);\n};\n\nexport { validateHasCloser as v };\n//# sourceMappingURL=has-closer-DENzUWH2.js.map\n\n//# sourceMappingURL=has-closer-DENzUWH2.js.map"],"names":["validateHasCloser","component","value","watchBoolean"],"mappings":"wCAKK,MAACA,EAAoB,CAACC,EAAWC,IAAU,CAC5CC,EAAaF,EAAW,aAAcC,CAAK,CAC/C"}

package/dist/assets/hide-label-DjBQJOAP-1NZ7Zm1U.js

@@ -1,2 +0,0 @@
-import{m as t}from"./index-DDaun4pg.js";const l=(a,e,o={})=>{t(a,"_hideLabel",e,o)};export{l as v};
-//# sourceMappingURL=hide-label-DjBQJOAP-1NZ7Zm1U.js.map

package/dist/assets/href-LHUCJ_IZ-D6afrRTu.js

@@ -1,2 +0,0 @@
-import{n as e}from"./index-DDaun4pg.js";const f=(r,t,a={})=>{e(r,"_href",t,a)};export{f as v};
-//# sourceMappingURL=href-LHUCJ_IZ-D6afrRTu.js.map

package/dist/assets/href-LHUCJ_IZ-D6afrRTu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"href-LHUCJ_IZ-D6afrRTu.js","sources":["../../../../components/dist/esm/href-LHUCJ_IZ.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { e as watchString } from './common-L1K0yh1S.js';\n\nconst validateHref = (component, value, options = {}) => {\n    watchString(component, '_href', value, options);\n};\n\nexport { validateHref as v };\n//# sourceMappingURL=href-LHUCJ_IZ.js.map\n\n//# sourceMappingURL=href-LHUCJ_IZ.js.map"],"names":["validateHref","component","value","options","watchString"],"mappings":"wCAKK,MAACA,EAAe,CAACC,EAAWC,EAAOC,EAAU,CAAA,IAAO,CACrDC,EAAYH,EAAW,QAASC,EAAOC,CAAO,CAClD"}

package/dist/assets/i18n-BgOmSzBT-Bm1C7fXF.js

@@ -1,2 +0,0 @@
-import{Y as e,Z as i,M as s}from"./index-DDaun4pg.js";let r=(t,n)=>{var a;return((a=e())!==null&&a!==void 0?a:i("de")).translate(t,n)};s()&&(r=t=>t);export{r as t};
-//# sourceMappingURL=i18n-BgOmSzBT-Bm1C7fXF.js.map

package/dist/assets/image-source-DqpWx57w-CSNDjEmL.js

@@ -1,2 +0,0 @@
-import{n as o}from"./index-DDaun4pg.js";const e=(a,r,t)=>{o(a,"_src",r,t)};export{e as v};
-//# sourceMappingURL=image-source-DqpWx57w-CSNDjEmL.js.map

package/dist/assets/image-source-DqpWx57w-CSNDjEmL.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-source-DqpWx57w-CSNDjEmL.js","sources":["../../../../components/dist/esm/image-source-DqpWx57w.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { e as watchString } from './common-L1K0yh1S.js';\n\nconst validateImageSource = (component, value, options) => {\n    watchString(component, '_src', value, options);\n};\n\nexport { validateImageSource as v };\n//# sourceMappingURL=image-source-DqpWx57w.js.map\n\n//# sourceMappingURL=image-source-DqpWx57w.js.map"],"names":["validateImageSource","component","value","options","watchString"],"mappings":"wCAKK,MAACA,EAAsB,CAACC,EAAWC,EAAOC,IAAY,CACvDC,EAAYH,EAAW,OAAQC,EAAOC,CAAO,CACjD"}