@public-ui/sample-react 4.0.0-alpha.1 → 4.0.0-alpha.11

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

@@ -1,9 +1,24 @@
-import * as React from 'react';
-import { Formik, Field, type FieldProps } from 'formik';
-import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';
+import { KolForm, KolInputText } from '@public-ui/react-v19';
+import React, { useMemo, useRef, type BaseSyntheticEvent } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
 import { SampleDescription } from '../SampleDescription';
 
-import { NumericFormat, type NumberFormatValues } from 'react-number-format';
+type InputTextElementSelection = {
+	setSelectionStart?: (position: number) => Promise<void>;
+	selectionStart?: () => Promise<number | null>;
+};
+
+type KolInputTextEvents = {
+	onBlur?: (event: Event) => void;
+	onChange?: (event: Event, value: unknown) => void;
+	onFocus?: (event: Event) => void;
+	onInput?: (event: Event, value: unknown) => void;
+};
+type KolInputTextProps = Omit<React.ComponentProps<typeof KolInputText>, '_on' | '_value'> & {
+	_on?: KolInputTextEvents;
+	_value?: string;
+};
 
 const NON_ALPHANUM = /[^a-zA-Z0-9]/g;
 const EVERY_FOUR_CHARS = /(.{4})(?!$)/g;
@@ -20,7 +35,13 @@ 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 {
+		const setSelectionStart = (ref as InputTextElementSelection | null)?.setSelectionStart;
+		if (selectionStart && setSelectionStart) {
+			if (selectionStart % 5 === 0) selectionStart++;
+			void setSelectionStart(selectionStart);
+		}
 		return this.printFormat(value);
 	}
 }
@@ -29,20 +50,104 @@ type IbanExampleFormValues = {
 	iban: string;
 };
 
-type CurrencyExampleFormValues = {
-	currency: number;
-};
+function FormattedKolInputText({
+	formatter,
+	selectionStartRef,
+	_on,
+	_value,
+	...props
+}: KolInputTextProps & {
+	formatter: IbanFormatter;
+	selectionStartRef: React.MutableRefObject<number | null>;
+}) {
+	const inputRef = useRef<HTMLKolInputTextElement | null>(null);
+	const normalizedOn = _on && typeof _on === 'object' ? (_on as KolInputTextEvents) : undefined;
+	const sanitizedSelectionRef = selectionStartRef as React.MutableRefObject<number | null>;
+
+	const element = inputRef.current;
+	const selectionStart = sanitizedSelectionRef.current;
+	const sanitizedFormatter: IbanFormatter = formatter;
+
+	return (
+		<KolInputText
+			{...props}
+			ref={inputRef}
+			_value={sanitizedFormatter.format(_value ?? '', element, selectionStart)}
+			_on={{
+				...normalizedOn,
+				onInput: (event: Event, value: unknown) => {
+					const selectionStartGetter = (inputRef.current as InputTextElementSelection | null)?.selectionStart;
+					selectionStartGetter?.().then((start) => {
+						sanitizedSelectionRef.current = start ?? null;
+					});
+					const parsedValue = sanitizedFormatter.parse(typeof value === 'string' ? value : '');
+					normalizedOn?.onInput?.(event, parsedValue);
+				},
+			}}
+		/>
+	);
+}
+
+function KolFormattedIbanController(props: any) {
+	const { name, control, rules, defaultValue, shouldUnregister, disabled, formatter, selectionStartRef, ...componentProps } = props;
+	return (
+		<Controller
+			name={name}
+			control={control}
+			rules={rules}
+			defaultValue={defaultValue}
+			shouldUnregister={shouldUnregister}
+			disabled={disabled}
+			render={({ field, fieldState }) => {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+				const userHandlers = componentProps._on as KolInputTextEvents | undefined;
+				return (
+					<FormattedKolInputText
+						{...(componentProps as any)}
+						formatter={formatter}
+						selectionStartRef={selectionStartRef}
+						_value={field.value}
+						_touched={fieldState.isTouched}
+						_msg={
+							fieldState.error
+								? {
+										_type: 'error' as const,
+										_description: fieldState.error.message || String(fieldState.error),
+									}
+								: undefined
+						}
+						_on={{
+							onInput: (event: Event, value: unknown) => {
+								field.onChange(value);
+								userHandlers?.onInput?.(event, value);
+							},
+							onBlur: () => field.onBlur(),
+						}}
+					/>
+				);
+			}}
+		/>
+	);
+}
 
 export function InputTextFormatterDemo() {
-	const handleSubmit = async () => {};
-	const formatter = new IbanFormatter();
+	const formatter = useMemo(() => new IbanFormatter(), []);
+
+	const textInput1SelectionStart = useRef<number | null>(null);
 
 	const initialIbanExampleValues: IbanExampleFormValues = {
 		iban: 'DE89370400440532013000',
 	};
 
-	const initialCurrencyExampleValues: CurrencyExampleFormValues = {
-		currency: 1000000,
+	const ibanForm = useForm<IbanExampleFormValues>({
+		defaultValues: initialIbanExampleValues,
+		mode: 'onTouched',
+	});
+
+	const ibanValues = ibanForm.watch();
+
+	const handleIbanSubmit = (event: Event) => {
+		void ibanForm.handleSubmit(async () => {})(event as unknown as BaseSyntheticEvent);
 	};
 
 	return (
@@ -53,90 +158,22 @@ export function InputTextFormatterDemo() {
 					vice versa the formatting is removed again (machine format)
 				</p>
 			</SampleDescription>
-			<section className="w-full flex flex-col">
-				<Formik<IbanExampleFormValues> initialValues={initialIbanExampleValues} onSubmit={handleSubmit}>
-					{(form) => (
-						<>
-							<div className="p-2">
-								<KolHeading _label="Formatted Form Field" _level={2} />
-								<KolForm>
-									<Field name="iban">
-										{({ field }: FieldProps<IbanExampleFormValues['iban']>) => (
-											<div className="block mt-2">
-												<KolInputText
-													onBlur={() => {
-														void form.setFieldTouched('iban', true);
-													}}
-													id="field-iban"
-													_label="IBAN"
-													_value={formatter.format(field.value ?? '')}
-													_msg={{
-														_type: 'error',
-														_description: form.errors.iban || '',
-													}}
-													_touched={form.touched.iban}
-													_required
-													_on={{
-														onInput: (event, value: unknown) => {
-															if (event.target) {
-																const parsed_value = formatter.parse((value as string) ?? '');
-
-																void form.setFieldValue('iban', parsed_value, true);
-															}
-														},
-													}}
-												/>
-											</div>
-										)}
-									</Field>
-								</KolForm>
-							</div>
-							<div className="p-2">
-								<KolHeading _label="Model" _level={2} />
-								<pre className="text-base">{JSON.stringify(form.values, null, 2)}</pre>
-							</div>
-						</>
-					)}
-				</Formik>
-			</section>
-
-			<section className="w-full flex flex-col">
-				<Formik<CurrencyExampleFormValues> initialValues={initialCurrencyExampleValues} onSubmit={handleSubmit}>
-					{(form) => (
-						<>
-							<div className="p-2">
-								<KolHeading _label="Formatted Form Field (with react-number-format)" _level={2} />
-								<KolForm>
-									<Field name="currency">
-										{({ field }: FieldProps<CurrencyExampleFormValues['currency']>) => (
-											<div className="block mt-2">
-												<NumericFormat
-													customInput={({ type, value, onBlur, onChange, onFocus }: any) => {
-														return <KolInputText _label="Currency" _type={type} _value={value} _on={{ onBlur, onChange, onFocus }} />;
-													}}
-													displayType="input"
-													value={typeof field.value === 'number' ? field.value.toFixed(2) : undefined}
-													onBlur={() => {
-														void form.setFieldTouched('currency', true);
-													}}
-													onValueChange={(value: NumberFormatValues) => {
-														void form.setFieldValue('currency', value.floatValue, true);
-													}}
-													suffix={'€'}
-													thousandSeparator={true}
-												/>
-											</div>
-										)}
-									</Field>
-								</KolForm>
-							</div>
-							<div className="p-2">
-								<KolHeading _label="Model" _level={2} />
-								<pre className="text-base">{JSON.stringify(form.values, null, 2)}</pre>
-							</div>
-						</>
-					)}
-				</Formik>
+			<section className="w-full">
+				<div>
+					<KolForm _on={{ onSubmit: handleIbanSubmit }}>
+						<KolFormattedIbanController
+							control={ibanForm.control as any}
+							name="iban"
+							id="field-iban"
+							formatter={formatter}
+							selectionStartRef={textInput1SelectionStart}
+							rules={{ required: 'Please enter an IBAN.' }}
+							_label="IBAN"
+							_required
+						/>
+					</KolForm>
+					<pre className="text-base mt-2">{JSON.stringify(ibanValues, null, 2)}</pre>
+				</div>
 			</section>
 		</>
 	);

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

@@ -14,7 +14,7 @@ export const LinkAccessKey: FC = () => (
 			<KolLink _href="#/back-page" _label="With S access key" _accessKey="S" />
 			<KolLink _href="#/back-page" _label="Very small s" _accessKey="s" />
 			<KolLink _href="#/back-page" _label="Access key does not appear in label" _accessKey="s" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="access key without label" _accessKey="s" />
+			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _label="access key without label" _accessKey="s" />
 		</div>
 	</>
 );

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/basic.tsx

@@ -1,25 +1,23 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink, KolHeading } from '@public-ui/react-v19';
+import { KolLink } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkBasic: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				KolLink renders a link. This sample shows disabled links, links with hidden label and links with different CSS <code>display</code>-properties.
+				KolLink renders a link. This sample shows disabled links, links with hidden label, the boolean _inline property and links with different CSS{' '}
+				<code>display</code>-properties.
 			</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolHeading _level={2} _label="Links with variant 'standalone'" />
-			<KolLink _href="#/back-page" _label="Simple Link" _variant="standalone" />
-			<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" _variant="standalone" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" _variant="standalone" />
-			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" _variant="standalone" />
-
-			<KolHeading _level={2} _label="Links with variant 'inline'" />
+			<KolLink _href="#/back-page" _inline={false} _label="Simple Link" />
+			<KolLink _disabled _href="#/back-page" _inline={false} _label="Simple Link (disabled)" />
+			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _inline={false} _label="Icon Link" />
+			<KolLink _disabled _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _inline={false} _label="Icon Link (disabled)" />
 			<p>
 				In this paragraph, a link is inserted that contains no additional attributes. <KolLink _href="#/back-page" _label="Simple Link" /> It is rendered by
 				default as a <strong>inline element</strong>.

package/src/components/link/icons.tsx

@@ -12,43 +12,43 @@ export const LinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _icons="codicon codicon-home" _label="I am a link with an icon on the left" _href="#/back-page" />
+			<KolLink _icons="fa-solid fa-house" _label="I am a link with an icon on the left" _href="#/back-page" />
 			<KolLink
 				_icons={{
-					right: 'codicon codicon-home',
+					right: 'fa-solid fa-house',
 				}}
 				_label="I am a link with an icon on the right"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
 				}}
 				_label="I am a link with an icon at the top"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'codicon codicon-home',
+					bottom: 'fa-solid fa-house',
 				}}
 				_label="I am a link with icon below"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'codicon codicon-home',
-					right: 'codicon codicon-home',
-					bottom: 'codicon codicon-home',
-					left: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
+					right: 'fa-solid fa-house',
+					bottom: 'fa-solid fa-house',
+					left: 'fa-solid fa-house',
 				}}
 				_label="I am a link with all icons"
 				_href="#/back-page"
 			/>
 
-			<KolLink _icons="codicon codicon-home" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
+			<KolLink _icons="fa-solid fa-house" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
 			<KolLink
 				_icons={{
-					right: 'codicon codicon-home',
+					right: 'fa-solid fa-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external linkwith an icon on the right"
@@ -56,7 +56,7 @@ export const LinkIcons: FC = () => (
 			/>
 			<KolLink
 				_icons={{
-					top: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external link with an icon at the top"
@@ -64,7 +64,7 @@ export const LinkIcons: FC = () => (
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'codicon codicon-home',
+					bottom: 'fa-solid fa-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external link with icon below"
@@ -75,10 +75,10 @@ export const LinkIcons: FC = () => (
 				_label="I am a external link with all icons"
 				_target="_blank"
 				_icons={{
-					top: 'codicon codicon-home',
-					right: 'codicon codicon-home',
-					bottom: 'codicon codicon-home',
-					left: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
+					right: 'fa-solid fa-house',
+					bottom: 'fa-solid fa-house',
+					left: 'fa-solid fa-house',
 				}}
 			/>
 		</div>

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 = () => {
@@ -24,7 +24,7 @@ export const LinkReactRouter: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-4">
-				<KolLink _href="/back-page" _label="Go to overview" _variant="standalone" _on={on} />
+				<KolLink _href="/back-page" _inline={false} _label="Go to overview" _on={on} />
 			</div>
 		</>
 	);

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/short-key.tsx

@@ -16,7 +16,7 @@ export const LinkShortKey: FC = () => (
 			<KolLink _href="#/back-page" _label="With S short key" _shortKey="S" />
 			<KolLink _href="#/back-page" _label="Very small s" _shortKey="s" />
 			<KolLink _href="#/back-page" _label="Short key does not appear in label" _shortKey="s" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="short key without label" _shortKey="s" />
+			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _label="short key without label" _shortKey="s" />
 		</div>
 	</>
 );

package/src/components/link/target.tsx

@@ -25,13 +25,13 @@ export const LinkTarget: FC = () => (
 					<KolLink _href="#/back-page" _label="Link with target (_blank)" _target="_blank" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link without target" />
+					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link without target" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link with target (_self)" _target="_self" />
+					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_self)" _target="_self" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link with target (_blank)" _target="_blank" />
+					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_blank)" _target="_blank" />
 				</li>
 			</ul>
 		</div>

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/nav/links.ts

@@ -3,7 +3,7 @@ import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
 export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -18,11 +18,11 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: '3 Navigation point',
 		_href: '#/back-page',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_children: [
 			{
 				_label: '3.1 Navigation point',
-				_icons: 'codicon codicon-home',
+				_icons: 'fa-solid fa-house',
 				_href: '#/back-page',
 			},
 			{
@@ -83,7 +83,7 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	},
 	{
 		_label: '6 No own page, with icon',
-		_icons: 'codicon codicon-squirrel',
+		_icons: 'kolicon-kolibri',
 		_children: [
 			{
 				_label: '6.1 Nested link',
@@ -96,7 +96,7 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -111,7 +111,7 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: '3 Navigation point',
 		_href: '#/back-page',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 	},
 	{
 		_label: '4 Navigation point with children and onClick',
@@ -125,14 +125,14 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	},
 	{
 		_label: '6 No own page, with icon',
-		_icons: 'codicon codicon-squirrel',
+		_icons: 'kolicon-kolibri',
 	},
 ];
 
 export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -147,11 +147,11 @@ export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: '3 Navigation point',
 		_href: '#/back-page',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_children: [
 			{
 				_label: '3.1 Navigation point',
-				_icons: 'codicon codicon-home',
+				_icons: 'fa-solid fa-house',
 				_href: '#/back-page',
 			},
 			{

package/src/components/pagination/basic.tsx

@@ -20,7 +20,7 @@ export const PaginationBasic: FC = () => (
 			<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test pagination 3" _on={{}} />
 			<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test pagination 4" _on={{}} />
 			<KolPagination
-				_max={4}
+				_max={400}
 				_page={6}
 				_siblingCount={0}
 				_boundaryCount={2}

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',
+			_icons: 'fa-solid fa-pen',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Delete',
-			_icons: 'codicon codicon-trash',
+			_icons: 'fa-solid fa-trash',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Duplicate',
-			_icons: 'codicon codicon-copy',
+			_icons: 'fa-solid fa-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: 'kolicon-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>
+				<KolPopoverButton _label="Help" _icons="kolicon-alert-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.