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

package/src/scenarios/appointment-form/PersonalInformationForm.tsx

@@ -1,11 +1,16 @@
-import { Field, useFormikContext } from 'formik';
+import { KolInputEmailController, KolInputTextController, KolSelectController } from '@public-ui/react-hook-form-adapter';
 import React, { useEffect, useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 
-import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react-v19';
+import { KolButton, KolForm, KolHeading } from '@public-ui/react-v19';
 
-import type { FieldProps } from 'formik';
-import type { FormValues } from './AppointmentForm';
-import { createErrorList, focusErrorList } from './formUtils';
+import type { FormFieldName, FormValues } from './AppointmentForm';
+import { createErrorList, focusErrorList, touchFields } from './formUtils';
+
+type Props = {
+	fieldsToValidate: FormFieldName[];
+	onComplete: () => void;
+};
 
 const SALUTATION_OPTIONS = [
 	{
@@ -26,168 +31,129 @@ const SALUTATION_OPTIONS = [
 	},
 ];
 
-export function PersonalInformationForm() {
-	const form = useFormikContext<FormValues>();
+export function PersonalInformationForm({ fieldsToValidate, onComplete }: Props) {
+	const {
+		clearErrors,
+		control,
+		formState: { errors },
+		getValues,
+		setValue,
+		trigger,
+		watch,
+	} = useFormContext<FormValues>();
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
-	const errorList = createErrorList(form.errors);
-	const formikRef = useRef(null);
+	const errorList = createErrorList<FormValues>(errors, fieldsToValidate);
+	const formRef = useRef<HTMLKolFormElement>(null);
+	const salutation = watch('salutation');
 
 	useEffect(() => {
-		focusErrorList(formikRef);
+		focusErrorList(formRef);
 	}, [sectionSubmitted]);
+
+	const fieldsForValidation = salutation === 'Company' ? fieldsToValidate : fieldsToValidate.filter((field) => field !== 'company');
+
+	const handleSubmit = async () => {
+		setSectionSubmitted(true);
+		touchFields<FormValues>(fieldsForValidation, getValues, setValue);
+		const isValid = await trigger(fieldsForValidation, { shouldFocus: true });
+		if (isValid) {
+			onComplete();
+		} else {
+			focusErrorList(formRef);
+		}
+	};
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Enter your contact details"></KolHeading>
 			<KolForm
-				ref={formikRef}
+				ref={formRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
-						void form.submitForm();
-						setSectionSubmitted(true);
-						focusErrorList(formikRef);
+						void handleSubmit();
 					},
 				}}
 			>
-				<Field name="salutation">
-					{({ field }: FieldProps<FormValues['salutation']>) => (
-						<KolSelect
-							onBlur={() => {
-								void form.setFieldTouched('salutation', true);
-							}}
-							id="field-salutation"
-							_label="Salutation"
-							_value={field.value}
-							_msg={{
-								_type: 'error',
-								_description: form.errors.salutation || '',
-							}}
-							_touched={form.touched.salutation}
-							_options={[{ label: 'Please select…', value: '' }, ...SALUTATION_OPTIONS]}
+				<KolSelectController
+					control={control}
+					name="salutation"
+					id="field-salutation"
+					_label="Salutation"
+					_options={[{ label: 'Please select…', value: '' }, ...SALUTATION_OPTIONS]}
+					_required
+					_on={{
+						onChange: () => {
+							setSectionSubmitted(false);
+							clearErrors(fieldsToValidate);
+						},
+					}}
+				/>
+
+				{salutation === 'Company' && (
+					<div className="block mt-2">
+						<KolInputTextController
+							control={control}
+							name="company"
+							id="field-company"
+							_label="Company"
 							_required
 							_on={{
-								onChange: (event, values: unknown) => {
-									if (event.target) {
-										const [value] = values as [FormValues['salutation']];
-										void form.setFieldValue('salutation', value, true);
-									}
+								onChange: () => {
+									setSectionSubmitted(false);
+									clearErrors(fieldsToValidate);
 								},
 							}}
 						/>
-					)}
-				</Field>
-
-				{form.values.salutation === 'Company' && (
-					<Field name="company">
-						{({ field }: FieldProps<FormValues['company']>) => (
-							<div className="block mt-2">
-								<KolInputText
-									onBlur={() => {
-										void form.setFieldTouched('company', true);
-									}}
-									id="field-company"
-									_label="Company"
-									_value={field.value}
-									_msg={{
-										_type: 'error',
-										_description: form.errors.company || '',
-									}}
-									_touched={form.touched.company}
-									_required
-									_on={{
-										onChange: (event, value: unknown) => {
-											if (event.target) {
-												void form.setFieldValue('company', value, true);
-											}
-										},
-									}}
-								/>
-							</div>
-						)}
-					</Field>
+					</div>
 				)}
 
-				<Field name="name">
-					{({ field }: FieldProps<FormValues['name']>) => (
-						<div className="block mt-2">
-							<KolInputText
-								onBlur={() => {
-									void form.setFieldTouched('name', true);
-								}}
-								id="field-name"
-								_label="First name and surname"
-								_value={field.value}
-								_msg={{
-									_type: 'error',
-									_description: form.errors.name || '',
-								}}
-								_touched={form.touched.name}
-								_required
-								_on={{
-									onChange: (event, value: unknown) => {
-										if (event.target) {
-											void form.setFieldValue('name', value, true);
-										}
-									},
-								}}
-							/>
-						</div>
-					)}
-				</Field>
+				<div className="block mt-2">
+					<KolInputTextController
+						control={control}
+						name="name"
+						id="field-name"
+						_label="First name and surname"
+						_required
+						_on={{
+							onChange: () => {
+								setSectionSubmitted(false);
+								clearErrors(fieldsToValidate);
+							},
+						}}
+					/>
+				</div>
 
-				<Field name="email">
-					{({ field }: FieldProps<FormValues['email']>) => (
-						<div className="block mt-2">
-							<KolInputEmail
-								onBlur={() => {
-									void form.setFieldTouched('email', true);
-								}}
-								id="field-email"
-								_label="E-Mail"
-								_value={field.value}
-								_msg={{
-									_type: 'error',
-									_description: form.errors.email || '',
-								}}
-								_touched={form.touched.email}
-								_required
-								_on={{
-									onChange: (event, value: unknown) => {
-										if (event.target) {
-											void form.setFieldValue('email', value, true);
-										}
-									},
-								}}
-							/>
-						</div>
-					)}
-				</Field>
+				<div className="block mt-2">
+					<KolInputEmailController
+						control={control}
+						name="email"
+						id="field-email"
+						_label="E-Mail"
+						_required
+						_on={{
+							onChange: () => {
+								setSectionSubmitted(false);
+								clearErrors(fieldsToValidate);
+							},
+						}}
+					/>
+				</div>
 
-				<Field name="phone">
-					{({ field }: FieldProps<FormValues['phone']>) => (
-						<div className="block mt-2">
-							<KolInputText
-								id="field-phone"
-								_type="tel"
-								_label="Telephone number"
-								_value={field.value}
-								_msg={{
-									_type: 'error',
-									_description: form.errors.phone || '',
-								}}
-								_touched={form.touched.phone}
-								_on={{
-									onChange: (event, value: unknown) => {
-										if (event.target) {
-											void form.setFieldTouched('phone', true);
-											void form.setFieldValue('phone', value, true);
-										}
-									},
-								}}
-							/>
-						</div>
-					)}
-				</Field>
+				<div className="block mt-2">
+					<KolInputTextController
+						control={control}
+						name="phone"
+						id="field-phone"
+						_type="tel"
+						_label="Telephone number"
+						_on={{
+							onChange: () => {
+								setSectionSubmitted(false);
+								clearErrors(fieldsToValidate);
+							},
+						}}
+					/>
+				</div>
 
 				<KolButton _label="Next" _type="submit" className="mt-2" />
 			</KolForm>

package/src/scenarios/appointment-form/Summary.tsx

@@ -1,5 +1,5 @@
-import { useFormikContext } from 'formik';
 import React from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
 
 import { KolHeading } from '@public-ui/react-v19';
 
@@ -9,7 +9,8 @@ const ValueFallback = () => <i>Nicht angegeben</i>;
 const ValueWithFallback = ({ value }: { value: string }) => (value ? value : <ValueFallback />);
 
 export function Summary() {
-	const { values } = useFormikContext<FormValues>();
+	const { control } = useFormContext<FormValues>();
+	const values = useWatch({ control });
 
 	return (
 		<>
@@ -18,38 +19,38 @@ export function Summary() {
 			<dl>
 				<dt>District</dt>
 				<dd>
-					<ValueWithFallback value={values.district} />
+					<ValueWithFallback value={values?.district ?? ''} />
 				</dd>
 				<dt>Appointment</dt>
-				<dd>{values.date && values.time ? `${values.date} ${values.time} Uhr` : <ValueFallback />}</dd>
+				<dd>{values?.date && values?.time ? `${values.date} ${values.time} Uhr` : <ValueFallback />}</dd>
 
-				{values.salutation === 'Company' ? (
+				{values?.salutation === 'Company' ? (
 					<>
 						<dt>Company</dt>
 						<dd>
-							<ValueWithFallback value={values.company} />
+							<ValueWithFallback value={values?.company ?? ''} />
 						</dd>
 					</>
 				) : (
 					<>
 						<dt>Salutation</dt>
 						<dd>
-							<ValueWithFallback value={values.salutation} />
+							<ValueWithFallback value={values?.salutation ?? ''} />
 						</dd>
 					</>
 				)}
 
 				<dt>Name</dt>
 				<dd>
-					<ValueWithFallback value={values.name} />
+					<ValueWithFallback value={values?.name ?? ''} />
 				</dd>
 				<dt>E-Mail</dt>
 				<dd>
-					<ValueWithFallback value={values.email} />
+					<ValueWithFallback value={values?.email ?? ''} />
 				</dd>
 				<dt>Phone number</dt>
 				<dd>
-					<ValueWithFallback value={values.phone} />
+					<ValueWithFallback value={values?.phone ?? ''} />
 				</dd>
 			</dl>
 		</>

package/src/scenarios/appointment-form/formUtils.ts

@@ -1,12 +1,31 @@
 import type { ErrorListPropType } from '@public-ui/components';
+import type { FieldErrors, Path, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
 
-export function createErrorList(formikErrors: Record<string, string>): ErrorListPropType[] {
-	return Object.keys(formikErrors).map((fieldName) => ({
-		message: formikErrors[fieldName],
-		selector: `#field-${fieldName}`,
-	}));
+export function createErrorList<TFieldValues extends Record<string, unknown>>(
+	errors: FieldErrors<TFieldValues>,
+	fields?: Array<Path<TFieldValues>>,
+): ErrorListPropType[] {
+	const entries: Array<[Path<TFieldValues>, FieldErrors<TFieldValues>[Path<TFieldValues>]]> | Array<[string, FieldErrors<TFieldValues>[string]]> =
+		fields?.map((field) => [field, errors[field]]) ?? (Object.entries(errors) as Array<[string, FieldErrors<TFieldValues>[string]]>);
+
+	return entries
+		.map(([fieldName, error]) => ({
+			message: typeof error === 'object' && error ? String('message' in error ? error.message : '') : '',
+			selector: `#field-${String(fieldName)}`,
+		}))
+		.filter(({ message }) => Boolean(message));
+}
+
+export function focusErrorList(formRef: React.RefObject<HTMLKolFormElement | null>) {
+	formRef.current?.focusErrorList().catch(console.warn);
 }
 
-export function focusErrorList(formikRef: React.RefObject<HTMLKolFormElement | null>) {
-	formikRef.current?.focusErrorList().catch(console.warn);
+export function touchFields<TFieldValues extends Record<string, unknown>>(
+	fields: Array<Path<TFieldValues>>,
+	getValues: UseFormGetValues<TFieldValues>,
+	setValue: UseFormSetValue<TFieldValues>,
+): void {
+	fields.forEach((name) => {
+		setValue(name, getValues(name), { shouldTouch: true });
+	});
 }

package/src/scenarios/sample-form-with-validation.tsx

@@ -1,29 +1,25 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import {
+	KolComboboxController,
+	KolInputCheckboxController,
+	KolInputColorController,
+	KolInputDateController,
+	KolInputEmailController,
+	KolInputNumberController,
+	KolInputPasswordController,
+	KolInputRadioController,
+	KolInputRangeController,
+	KolInputTextController,
+	KolSelectController,
+	KolSingleSelectController,
+	KolTextareaController,
+} from '@public-ui/react-hook-form-adapter';
+import { KolAlert, KolButton, KolHeading, KolLink } from '@public-ui/react-v19';
 import React from 'react';
 import type { FieldError } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import {
-	KolAlert,
-	KolButton,
-	KolCombobox,
-	KolHeading,
-	KolInputCheckbox,
-	KolInputColor,
-	KolInputDate,
-	KolInputEmail,
-	KolInputNumber,
-	KolInputPassword,
-	KolInputRadio,
-	KolInputRange,
-	KolInputText,
-	KolLink,
-	KolSelect,
-	KolSingleSelect,
-	KolTextarea,
-} from '@public-ui/react-v19';
-
 import { SampleDescription } from '../components/SampleDescription';
 import { useToasterService } from '../hooks/useToasterService';
 import { COUNTRY_SUGGESTIONS } from '../shares/country';
@@ -59,11 +55,9 @@ export const SampleFormWithValidation: React.FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
 	const {
 		handleSubmit,
-		formState: { errors, touchedFields },
+		formState: { errors },
 		reset,
-		setValue,
-		trigger,
-		watch,
+		control,
 	} = useForm({
 		mode: 'onBlur',
 		reValidateMode: 'onChange',
@@ -74,35 +68,6 @@ export const SampleFormWithValidation: React.FC = () => {
 		},
 	});
 
-	const err = (key: keyof z.infer<typeof formSchema>) => {
-		const fieldError = errors[key];
-
-		if (!fieldError || typeof fieldError !== 'object' || !('message' in fieldError)) {
-			return undefined;
-		}
-
-		return {
-			_description: fieldError.message as string,
-			_type: 'error' as const,
-		};
-	};
-
-	const isTouched = (key: keyof z.infer<typeof formSchema>) => {
-		return !!touchedFields[key];
-	};
-
-	const bind = <K extends keyof z.infer<typeof formSchema>>(key: K) => ({
-		id: `field-${key as string}`,
-		_name: key,
-		_value: watch(key) as z.infer<typeof formSchema>[K],
-		_touched: isTouched(key),
-		_msg: err(key),
-		_on: {
-			onInput: (_: Event, v: unknown) => setValue(key, v as any, { shouldTouch: true, shouldValidate: true }),
-			onBlur: () => trigger(key),
-		},
-	});
-
 	const onReset = () => {
 		reset(undefined, {
 			keepErrors: false,
@@ -147,40 +112,43 @@ export const SampleFormWithValidation: React.FC = () => {
 			)}
 
 			<form onSubmit={handleSubmit(dummyClickEventHandler)} noValidate className="grid gap-4 mt-6">
-				<KolInputDate _label="Date" {...bind('date')} />
-				<KolInputText _label="Text (≥ 10 chars)" {...bind('text')} />
-				<KolInputEmail _label="Email" {...bind('email')} />
-				<KolInputPassword _label="Password" {...bind('password')} />
-				<KolInputRange _label="Range (≥ 30)" _min={0} _max={100} {...bind('range')} />
-				<KolInputNumber _label="Number (1 – 10)" {...bind('number')} />
-				<KolInputCheckbox _label="Accept terms" {...bind('checkbox')} />
-				<KolInputRadio
+				<KolInputDateController control={control as any} name="date" _label="Date" />
+				<KolInputTextController control={control as any} name="text" _label="Text (≥ 10 chars)" />
+				<KolInputEmailController control={control as any} name="email" _label="Email" />
+				<KolInputPasswordController control={control as any} name="password" _label="Password" />
+				<KolInputRangeController control={control as any} name="range" _label="Range (≥ 30)" _min={0} _max={100} />
+				<KolInputNumberController control={control as any} name="number" _label="Number (1 – 10)" />
+				<KolInputCheckboxController control={control as any} name="checkbox" _label="Accept terms" />
+				<KolInputRadioController
+					control={control as any}
+					name="radio"
 					_label="Gender"
 					_options={[
 						{ label: 'Female', value: 'f' },
 						{ label: 'Male', value: 'm' },
 					]}
-					{...bind('radio')}
 				/>
-				<KolInputColor _label="Favorite Color" {...bind('color')} />
-				<KolSelect
+				<KolInputColorController control={control as any} name="color" _label="Favorite Color" />
+				<KolSelectController
+					control={control as any}
+					name="select"
 					_label="Select"
 					_options={[
 						{ label: 'Option A', value: 'A' },
 						{ label: 'Option B', value: 'B' },
 					]}
-					{...bind('select')}
 				/>
-				<KolSingleSelect
+				<KolSingleSelectController
+					control={control as any}
+					name="singleSelect"
 					_label="Single Select"
 					_options={[
 						{ label: 'Option A', value: 'A' },
 						{ label: 'Option B', value: 'B' },
 					]}
-					{...bind('singleSelect')}
 				/>
-				<KolCombobox _label="Country" _suggestions={COUNTRY_SUGGESTIONS} {...bind('combobox')} />
-				<KolTextarea _label="Message" _rows={4} {...bind('textarea')} />
+				<KolComboboxController control={control as any} name="combobox" _label="Country" _suggestions={COUNTRY_SUGGESTIONS} />
+				<KolTextareaController control={control as any} name="textarea" _label="Message" _rows={4} />
 
 				<div className="flex gap-4 mt-4">
 					<KolButton _label="Submit" _type="submit" _variant="primary" />

package/src/style.scss

@@ -63,24 +63,18 @@ hr {
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
-		height: 100%;
-		min-height: 100vh;
+		height: 100vh;
 		grid-template-columns: rem(360) calc(100% - rem(360));
 	}
 
 	.app-sidebar {
-		position: relative;
-		z-index: 1;
+		background-color: white;
+		max-height: calc(100vh - 32px);
 		border-right: 1px solid gray;
 
 		& .scrollable-container-wrapper {
 			display: flex;
-			position: fixed;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			width: rem(330);
-			margin: rem(16);
+			max-height: calc(100vh - 32px);
 			flex-direction: column;
 
 			& .scrollable-container {
@@ -89,6 +83,11 @@ hr {
 			}
 		}
 	}
+
+	main {
+		max-height: calc(100vh);
+		overflow: auto;
+	}
 }
 
 @media print {

package/dist/assets/Alert-Bjkk9lQv-ARqglia_.js

@@ -1,4 +0,0 @@
-import{_ as p}from"./tslib.es6-CxX45GIN-BAJoBDh7.js";import{O as v,h as a,P as f,e as C,Q as L,i as k,R as E,F as S}from"./index-CQ_Buelw.js";import{c as y}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{t as n}from"./i18n-C5ifExT3-Biq4UyHg.js";import{K as T}from"./Heading-Bgh5mGuN-NZ2eqsFZ.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const O=n("kol-error"),B=n("kol-info"),M=n("kol-warning"),I=n("kol-success"),K=n("kol-message"),s=({ariaLabel:e,icon:o})=>a(S,null,a("span",{class:"visually-hidden"},e),a(k,{class:E,_label:"",_icons:o})),R=({type:e,label:o})=>{switch(e){case"error":return a(s,{ariaLabel:O,icon:"codicon codicon-error",label:o});case"info":return a(s,{ariaLabel:B,icon:"codicon codicon-info",label:o});case"warning":return a(s,{ariaLabel:M,icon:"codicon codicon-warning",label:o});case"success":return a(s,{ariaLabel:I,icon:"codicon codicon-pass",label:o});default:return a(s,{ariaLabel:K,icon:"codicon codicon-comment",label:o})}},N=n("kol-close-alert"),w=()=>{if(typeof navigator>"u"||typeof navigator.vibrate!="function")return;const e=navigator.userActivation;if((e?.isActive||e?.hasBeenActive)&&matchMedia("(any-pointer: coarse)").matches)try{navigator.vibrate([100,75,100,75,100])}catch{}},D=(e,o)=>{const{class:l={},alert:c=!1,hasCloser:d=!1,label:t,level:u=0,type:_="default",variant:r="msg",onAlertTimeout:i,onCloserClick:m}=e,b=p(e,["class","alert","hasCloser","label","level","type","variant","onAlertTimeout","onCloserClick"]);c&&(w(),setTimeout(()=>{i?.()},1e4));const g=v("kol-alert",{hasCloser:!!d,[`type-${_}`]:!0,[`variant-${r}`]:!0}),h=v("kol-alert","heading",{[`h${u}`]:!0}),A=Object.assign({class:y(l,g)},b);return a("div",Object.assign({role:c?"alert":void 0},A,{"data-testid":"alert"}),a("div",{class:"kol-alert__container"},a(R,{label:t,type:_}),a("div",{class:"kol-alert__container-content"},t&&a(T,{class:h,level:u,id:"heading"},t),r==="msg"&&a("span",{class:f,"aria-describedby":t?"heading":void 0},o)),d&&a(C,{class:L,"data-testid":"alert-close-button",_ariaDescription:t?.trim()||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:N,_on:{onClick:m},_tooltipAlign:"left"})),r==="card"&&a("div",{class:f,"aria-describedby":t?"heading":void 0},o))};export{D as K};
-//# sourceMappingURL=Alert-Bjkk9lQv-ARqglia_.js.map

package/dist/assets/Collapsible-IuDix1Q--Clfk9PjU.js

@@ -1,4 +0,0 @@
-import{_ as m}from"./tslib.es6-CxX45GIN-BAJoBDh7.js";import{h as s,e as f}from"./index-CQ_Buelw.js";import{c as a}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{K as g}from"./Heading-Bgh5mGuN-NZ2eqsFZ.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const K=(d,r)=>{const{id:n,class:t,label:p,level:v=1,disabled:c,open:e,onClick:_,HeadingProps:i={},HeadingButtonProps:l={},ContentProps:o={}}=d,b=m(d,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),u=e?"remove":"add";return s("div",Object.assign({id:n,class:a("collapsible",{"collapsible--disabled":c===!0,"collapsible--open":e===!0},t)},b),s(g,{ref:i?.ref,level:v,class:a("collapsible__heading",i?.class)},s(f,{class:a("collapsible__heading-button",l?.class),ref:l?.ref,slot:"expert",_ariaControls:`${n}-control`,_ariaExpanded:e,_disabled:c,_icons:l?._icons||`codicon codicon-${u}`,_label:p,_on:{onClick:_}})),s("div",{class:a("collapsible__wrapper",o?.wrapperClass)},s("div",{class:a("collapsible__wrapper-animation",o?.animationClass)},s("div",{"aria-hidden":e===!1?"true":void 0,class:a("collapsible__content",o?.class),id:`${n}-control`},r))))};export{K};
-//# sourceMappingURL=Collapsible-IuDix1Q--Clfk9PjU.js.map

package/dist/assets/CustomSuggestionsToggle-DZmSWiAa-BTwKHo2H.js

@@ -1,4 +0,0 @@
-import{h as t,i as b}from"./index-CQ_Buelw.js";import{c as f}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{t as w}from"./i18n-C5ifExT3-Biq4UyHg.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const F=({index:o,ref:s,selected:e,onClick:i,onMouseOver:c,onFocus:g,onKeyDown:a,option:p,searchTerm:d})=>{const m=(l,n)=>{if(!n?.trim())return l;const u=new RegExp(`(${n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return l.split(u).map((r,k)=>u.test(r)?t("mark",{key:k},r):r)};return t("li",{id:`option-${o}`,key:`-${o}`,ref:s,"data-index":o,tabIndex:-1,role:"option","aria-selected":e?"true":void 0,onClick:i,onMouseOver:c,onFocus:g,class:"kol-custom-suggestions-option",onKeyDown:a},m(String(p),d||""))},h=({blockSuggestionMouseOver:o,onKeyDown:s,style:e},i)=>t("ul",{role:"listbox",style:e,class:f("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":o}),onKeyDown:s},i),C=w("kol-dropdown"),v=({onClick:o,disabled:s})=>t("button",{tabindex:"-1",class:"kol-custom-suggestions-toggle",onClick:o,disabled:s},t(b,{_icons:"codicon codicon-triangle-down",_label:C}));export{v as C,h as a,F as b};
-//# sourceMappingURL=CustomSuggestionsToggle-DZmSWiAa-BTwKHo2H.js.map

package/dist/assets/CustomSuggestionsToggle-DZmSWiAa-BTwKHo2H.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomSuggestionsToggle-DZmSWiAa-BTwKHo2H.js","sources":["../../../../components/dist/esm/CustomSuggestionsToggle-DZmSWiAa.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { h } from './index-CUFOfqc5.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport { e as KolIconTag } from './component-names-CkE54Ym7.js';\nimport { t as translate } from './i18n-C5ifExT3.js';\n\nconst CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm }) => {\n    const highlightSearchTerm = (text, searchTerm) => {\n        if (!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.trim()))\n            return text;\n        const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')})`, 'gi');\n        const parts = text.split(regex);\n        return parts.map((part, partIndex) => (regex.test(part) ? h(\"mark\", { key: partIndex }, part) : part));\n    };\n    return (h(\"li\", { id: `option-${index}`, key: `-${index}`, ref: ref, \"data-index\": index, tabIndex: -1, role: \"option\", \"aria-selected\": selected ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: \"kol-custom-suggestions-option\", onKeyDown: onKeyDown }, highlightSearchTerm(String(option), searchTerm || '')));\n};\n\nconst CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {\n    return (h(\"ul\", { role: \"listbox\", style: style, class: clsx('kol-custom-suggestions-options-group', {\n            'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,\n        }), onKeyDown: onKeyDown }, children));\n};\n\nconst translateDropdown = translate('kol-dropdown');\nconst CustomSuggestionsToggleFc = ({ onClick, disabled }) => {\n    return (h(\"button\", { tabindex: \"-1\", class: \"kol-custom-suggestions-toggle\", onClick: onClick, disabled: disabled }, h(KolIconTag, { _icons: \"codicon codicon-triangle-down\", _label: translateDropdown })));\n};\n\nexport { CustomSuggestionsToggleFc as C, CustomSuggestionsOptionsGroupFc as a, CustomSuggestionsOptionFc as b };\n//# sourceMappingURL=CustomSuggestionsToggle-DZmSWiAa.js.map\n\n//# sourceMappingURL=CustomSuggestionsToggle-DZmSWiAa.js.map"],"names":["CustomSuggestionsOptionFc","index","ref","selected","onClick","onMouseOver","onFocus","onKeyDown","option","searchTerm","highlightSearchTerm","text","regex","part","partIndex","h","CustomSuggestionsOptionsGroupFc","blockSuggestionMouseOver","style","children","clsx","translateDropdown","translate","CustomSuggestionsToggleFc","disabled","KolIconTag"],"mappings":"+IAAA;AAAA;AAAA,GAQK,MAACA,EAA4B,CAAC,CAAE,MAAAC,EAAO,IAAAC,EAAK,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,QAAAC,EAAS,UAAAC,EAAW,OAAAC,EAAQ,WAAAC,CAAU,IAAO,CAC1H,MAAMC,EAAsB,CAACC,EAAMF,IAAe,CAC9C,GAAI,CAA0DA,GAAW,OACrE,OAAOE,EACX,MAAMC,EAAQ,IAAI,OAAO,IAAIH,EAAW,QAAQ,sBAAuB,MAAM,CAAC,IAAK,IAAI,EAEvF,OADcE,EAAK,MAAMC,CAAK,EACjB,IAAI,CAACC,EAAMC,IAAeF,EAAM,KAAKC,CAAI,EAAIE,EAAE,OAAQ,CAAE,IAAKD,CAAS,EAAID,CAAI,EAAIA,CAAK,CACzG,EACA,OAAQE,EAAE,KAAM,CAAE,GAAI,UAAUd,CAAK,GAAI,IAAK,IAAIA,CAAK,GAAI,IAAKC,EAAK,aAAcD,EAAO,SAAU,GAAI,KAAM,SAAU,gBAAiBE,EAAW,OAAS,OAAW,QAASC,EAAS,YAAaC,EAAa,QAASC,EAAS,MAAO,gCAAiC,UAAWC,CAAS,EAAIG,EAAoB,OAAOF,CAAM,EAAGC,GAAc,EAAE,CAAC,CAC/V,EAEMO,EAAkC,CAAC,CAAE,yBAAAC,EAA0B,UAAAV,EAAW,MAAAW,CAAK,EAAIC,IAC7EJ,EAAE,KAAM,CAAE,KAAM,UAAW,MAAOG,EAAO,MAAOE,EAAK,uCAAwC,CAC7F,sDAAuDH,CACnE,CAAS,EAAG,UAAWV,CAAS,EAAIY,CAAQ,EAGtCE,EAAoBC,EAAU,cAAc,EAC5CC,EAA4B,CAAC,CAAE,QAAAnB,EAAS,SAAAoB,KAClCT,EAAE,SAAU,CAAE,SAAU,KAAM,MAAO,gCAAiC,QAASX,EAAS,SAAUoB,CAAQ,EAAIT,EAAEU,EAAY,CAAE,OAAQ,gCAAiC,OAAQJ,CAAiB,CAAE,CAAC"}

package/dist/assets/FieldControlStateWrapper-DW4yI_q9-Bonm2OcB.js

@@ -1,4 +0,0 @@
-import{_ as b}from"./tslib.es6-CxX45GIN-BAJoBDh7.js";import{h as e,F as S}from"./index-CQ_Buelw.js";import{c}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{b as q,s as w}from"./reuse-CX4AQDkS-Cyh-fyjG.js";import{c as I,a as E,K as M,b as $}from"./FormFieldStateWrapper-C48vTgbZ-sskh_yfO.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const W=(o,l)=>{var{class:n}=o,i=b(o,["class"]);return e("div",Object.assign({class:c("kol-field-control__input",n)},i),l)},z=(o,l)=>{const{class:n,id:i,disabled:m,label:t,hideLabel:a,labelAlign:d,renderNoTooltip:_,hint:y,renderNoHint:C,tooltipAlign:F,accessKey:p,shortKey:f,msg:s,touched:h,required:K,readonly:k,fieldControlInputProps:T,fieldControlLabelProps:r,fieldControlTooltipProps:v,fieldControlHintProps:O}=o,B=b(o,["class","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","tooltipAlign","accessKey","shortKey","msg","touched","required","readonly","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps"]),P=!C,x=!_,L=I(s,h),g=w(t),N=x&&!g&&a,j=q(p,f),A=typeof s=="string"?"error":s?._type,u=[e(S,null,e(W,Object.assign({},T),l),N&&e(E,Object.assign({},v||{},{id:i,label:t,align:F,badgeText:j}))),e(M,Object.assign({},r||{},{id:i,baseClassName:"kol-field-control",class:c(r?.class,{"kol-field-control__label--visually-hidden":!!a}),hasExpertSlot:g,label:t,accessKey:p,shortKey:f}))];d==="left"&&u.reverse();const H={"kol-field-control--disabled":!!m,"kol-field-control--required":!!K,"kol-field-control--touched":!!h,"kol-field-control--hide-label":!!a,"kol-field-control--read-only":!!k,[`kol-field-control--${A||"error"}`]:!!L,[`kol-field-control--label-align-${d}`]:!!d};return e("div",Object.assign({class:c("kol-field-control",H,n)},B),u,P&&e($,Object.assign({},O||{},{baseClassName:"kol-field-control",id:i,hint:y})))};function D(o){const l={id:o._id,disabled:o._disabled,msg:o._msg,hint:o._hint,label:o._label,hideLabel:o._hideLabel,touched:o._touched};return"_required"in o&&(l.required=o._required),"_readOnly"in o&&(l.readonly=o._readOnly),"_labelAlign"in o&&(l.labelAlign=o._labelAlign),"_accessKey"in o&&(l.accessKey=o._accessKey),"_shortKey"in o&&(l.shortKey=o._shortKey),l}const V=(o,l)=>{var{state:n}=o,i=b(o,["state"]);return e(z,Object.assign({},D(n),i),l)};export{V as F};
-//# sourceMappingURL=FieldControlStateWrapper-DW4yI_q9-Bonm2OcB.js.map