Add delegatesFocus property to components with tabindex (#6921)

public-ui · Oct 25, 2024 · ebf3939 · ebf3939
2 parents e26deaa + b0a56b8
commit ebf3939
Show file tree

Hide file tree

Showing 21 changed files with 320 additions and 20 deletions.
diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
@@ -24,7 +24,9 @@ import { KolButtonWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 	private buttonWcRef?: HTMLKolButtonWcElement;

diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
@@ -24,7 +24,9 @@ import { KolButtonWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolButton implements ButtonProps, FocusableElement {
 	private buttonWcRef?: HTMLKolButtonWcElement;

diff --git a/packages/components/src/components/combobox/shadow.tsx b/packages/components/src/components/combobox/shadow.tsx
@@ -35,7 +35,9 @@ import clsx from 'clsx';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolCombobox implements ComboboxAPI {
 	@Element() private readonly host?: HTMLKolComboboxElement;

diff --git a/packages/components/src/components/input-checkbox/shadow.tsx b/packages/components/src/components/input-checkbox/shadow.tsx
@@ -37,7 +37,9 @@ import type { FocusableElement } from '../../schema/interfaces/FocusableElement'
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputCheckboxElement;

diff --git a/packages/components/src/components/input-color/shadow.tsx b/packages/components/src/components/input-color/shadow.tsx
@@ -34,7 +34,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputColor implements InputColorAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputColorElement;

diff --git a/packages/components/src/components/input-date/shadow.tsx b/packages/components/src/components/input-date/shadow.tsx
@@ -36,7 +36,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputDate implements InputDateAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputDateElement;

diff --git a/packages/components/src/components/input-email/shadow.tsx b/packages/components/src/components/input-email/shadow.tsx
@@ -36,7 +36,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputEmailElement;

diff --git a/packages/components/src/components/input-file/shadow.tsx b/packages/components/src/components/input-file/shadow.tsx
@@ -32,7 +32,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputFile implements InputFileAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputFileElement;

diff --git a/packages/components/src/components/input-number/shadow.tsx b/packages/components/src/components/input-number/shadow.tsx
@@ -36,7 +36,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputNumber implements InputNumberAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputNumberElement;

diff --git a/packages/components/src/components/input-password/shadow.tsx b/packages/components/src/components/input-password/shadow.tsx
@@ -36,7 +36,9 @@ import type { PasswordVariantPropType } from '../../schema/props/variant/passwor
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputPasswordElement;

diff --git a/packages/components/src/components/input-radio/shadow.tsx b/packages/components/src/components/input-radio/shadow.tsx
@@ -36,7 +36,9 @@ import { KolFormFieldMsgFc } from '../../functional-components';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputRadio implements InputRadioAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputRadioElement;

diff --git a/packages/components/src/components/input-range/shadow.tsx b/packages/components/src/components/input-range/shadow.tsx
@@ -35,7 +35,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputRange implements InputRangeAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputRangeElement;

diff --git a/packages/components/src/components/input-text/shadow.tsx b/packages/components/src/components/input-text/shadow.tsx
@@ -37,7 +37,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputText implements InputTextAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputTextElement;

diff --git a/packages/components/src/components/link-button/shadow.tsx b/packages/components/src/components/link-button/shadow.tsx
@@ -24,7 +24,9 @@ import { KolLinkWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolLinkButton implements LinkButtonProps, FocusableElement {
 	private linkWcRef?: HTMLKolLinkWcElement;

diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
@@ -23,7 +23,9 @@ import { KolLinkWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolLink implements LinkProps, FocusableElement {
 	private linkWcRef?: HTMLKolLinkWcElement;

diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx
@@ -35,7 +35,9 @@ import clsx from 'clsx';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolSingleSelect implements SingleSelectAPI {
 	@Element() private readonly host?: HTMLKolSingleSelectElement;

diff --git a/packages/components/src/components/split-button/shadow.tsx b/packages/components/src/components/split-button/shadow.tsx
@@ -28,7 +28,9 @@ import { KolButtonWcTag, KolPopoverWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 	private readonly clickButtonHandler = {

diff --git a/packages/components/src/components/textarea/shadow.tsx b/packages/components/src/components/textarea/shadow.tsx
@@ -48,7 +48,9 @@ const increaseTextareaHeight = (el: HTMLTextAreaElement): number => {
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolTextarea implements TextareaAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolTextareaElement;

diff --git a/packages/samples/react/src/hooks/useToasterService.ts b/packages/samples/react/src/hooks/useToasterService.ts
@@ -3,9 +3,9 @@ import { ToasterService } from '@public-ui/components';
 export function useToasterService() {
 	const toaster = ToasterService.getInstance(document);
 
-	const message = () => {
+	const message = (message?: string) => {
 		void toaster.enqueue({
-			description: 'Hello',
+			description: message || 'Hello',
 			label: `Hello`,
 			type: 'info',
 		});
@@ -15,7 +15,13 @@ export function useToasterService() {
 		message();
 	};
 
+	const buttonWithTextClickEventHandler = (e: Event) => {
+		const text = (e.currentTarget as { textContent?: string }).textContent;
+		message(text);
+	};
+
 	return {
 		dummyClickEventHandler,
+		buttonWithTextClickEventHandler,
 	};
 }