Skip to content

Commit 89f6169

Browse files
author
Katie George
committed
fix: PR comments and fixes
1 parent 2771424 commit 89f6169

File tree

6 files changed

+48
-30
lines changed

6 files changed

+48
-30
lines changed

‎pages/support-prompt-group/in-context.page.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import Header from "@cloudscape-design/components/header";
88
import PromptInput from "@cloudscape-design/components/prompt-input";
99
import SpaceBetween from "@cloudscape-design/components/space-between";
1010

11-
import { ChatBubble } from "../../lib/components";
12-
import { SupportPromptGroup } from "../../lib/components";
11+
import { ChatBubble, SupportPromptGroup } from "../../lib/components";
1312
import { TestBed } from "../app/test-bed";
1413
import { ChatBubbleAvatarGenAI, ChatBubbleAvatarUser } from "../chat-bubble/util-components";
1514
import { ScreenshotArea } from "../screenshot-area";

‎src/__tests__/__snapshots__/documenter.test.ts.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ exports[`definition for support-prompt-group matches the snapshot > support-prom
189189
"events": [
190190
{
191191
"cancelable": true,
192-
"description": "Called when the user clicks on a support prompt. The event detail object contains the id of the clicked item.",
192+
"description": "Called when the user clicks on a support prompt. The event detail object contains the ID of the clicked item.",
193193
"detailInlineType": {
194194
"name": "SupportPromptGroupProps.ItemClickDetail",
195195
"properties": [
@@ -232,7 +232,7 @@ exports[`definition for support-prompt-group matches the snapshot > support-prom
232232
],
233233
"functions": [
234234
{
235-
"description": "Focuses support prompt group item by id.",
235+
"description": "Focuses support prompt group item by ID.",
236236
"name": "focus",
237237
"parameters": [
238238
{
@@ -270,7 +270,7 @@ Use this to provide a unique accessible name for each support prompt group on th
270270
"description": "An array of objects representing support prompts.
271271
Each item has the following properties:
272272
- text: The text of the support prompt.
273-
- id: The id of the support prompt.",
273+
- id: The ID of the support prompt.",
274274
"name": "items",
275275
"optional": false,
276276
"type": "ReadonlyArray<SupportPromptGroupProps.Item>",

‎src/support-prompt-group/__tests__/support-prompt-group.test.tsx‎

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { cleanup, fireEvent, render } from "@testing-library/react";
44
import { afterEach, describe, expect, test, vi } from "vitest";
55

6-
import { KeyCode } from "@cloudscape-design/component-toolkit/internal";
6+
import * as ComponentToolkitInternal from "@cloudscape-design/component-toolkit/internal";
77

88
import SupportPromptGroup, { SupportPromptGroupProps } from "../../../lib/components/support-prompt-group";
99
import createWrapper from "../../../lib/components/test-utils/dom";
@@ -42,6 +42,10 @@ export function renderSupportPromptGroup(
4242
}
4343

4444
describe("Support prompt group", () => {
45+
afterEach(() => {
46+
cleanup();
47+
});
48+
4549
test("Renders null with no items", () => {
4650
const wrapper = renderSupportPromptGroup({
4751
items: [],
@@ -59,7 +63,7 @@ describe("Support prompt group", () => {
5963
test("Finds item by id", () => {
6064
const wrapper = renderSupportPromptGroup({});
6165

62-
expect(wrapper.findItemById("item-1")?.getElement()).toHaveTextContent("Item 1");
66+
expect(wrapper.findItemById("item-1")!.getElement()).toHaveTextContent("Item 1");
6367
});
6468

6569
test("fires onClick", () => {
@@ -92,16 +96,37 @@ describe("Support prompt group", () => {
9296
});
9397
});
9498

95-
describe("Keyboard navigation", () => {
96-
afterEach(() => {
97-
cleanup();
99+
describe("focus", () => {
100+
const ref: { current: SupportPromptGroupProps.Ref | null } = { current: null };
101+
102+
test("Focuses on element using ref", () => {
103+
const wrapper = renderSupportPromptGroup({}, ref);
104+
105+
ref.current!.focus("item-1");
106+
107+
expect(wrapper.findItemById("item-1")!.getElement()).toHaveFocus();
108+
});
109+
110+
test("Throws console warning when no ID is found", () => {
111+
renderSupportPromptGroup({}, ref);
112+
const warnOnce = vi.spyOn(ComponentToolkitInternal, "warnOnce");
113+
114+
ref.current!.focus("doesnt-exist");
115+
116+
expect(document.body).toHaveFocus();
117+
118+
expect(warnOnce).toHaveBeenCalledTimes(1);
119+
expect(warnOnce).toHaveBeenCalledWith("SupportPromptGroup", `No matching ID found to focus.`);
98120
});
121+
});
122+
describe("Keyboard navigation", () => {
99123
const ref: { current: SupportPromptGroupProps.Ref | null } = { current: null };
124+
const { KeyCode } = ComponentToolkitInternal;
100125

101126
test("Arrow keys move focus in vertical alignment", () => {
102127
const wrapper = renderSupportPromptGroup({}, ref);
103128

104-
ref.current?.focus("item-1");
129+
ref.current!.focus("item-1");
105130

106131
fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.right });
107132
expect(wrapper.findItemById("item-2")!.getElement()).toHaveFocus();
@@ -113,7 +138,7 @@ describe("Support prompt group", () => {
113138
test("Arrow keys move focus in horizontal alignment", () => {
114139
const wrapper = renderSupportPromptGroup({ alignment: "horizontal" }, ref);
115140

116-
ref.current?.focus("item-1");
141+
ref.current!.focus("item-1");
117142

118143
fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.down });
119144
expect(wrapper.findItemById("item-2")!.getElement()).toHaveFocus();
@@ -125,7 +150,7 @@ describe("Support prompt group", () => {
125150
test("Focus loops", () => {
126151
const wrapper = renderSupportPromptGroup({}, ref);
127152

128-
ref.current?.focus("item-1");
153+
ref.current!.focus("item-1");
129154

130155
fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.right });
131156
fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.right });
@@ -137,25 +162,15 @@ describe("Support prompt group", () => {
137162
test("Modifier keys don't move focus", () => {
138163
const wrapper = renderSupportPromptGroup({}, ref);
139164

140-
ref.current?.focus("item-1");
165+
ref.current!.focus("item-1");
141166

142167
fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.down, ctrlKey: true });
143168
expect(wrapper.findItemById("item-1")!.getElement()).toHaveFocus();
144169
});
145170

146171
test("Nonexistent target doesn't move focus", () => {
147172
const wrapper = renderSupportPromptGroup({}, ref);
148-
ref.current?.focus("doesnt-exist");
149-
150-
fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.down });
151-
expect(document.body).toHaveFocus();
152-
});
153-
154-
test("Null container ref doesn't move focus", () => {
155-
const wrapper = renderSupportPromptGroup({});
156-
const ref: { current: SupportPromptGroupProps.Ref | null } = { current: null };
157-
158-
ref.current?.focus("item-1");
173+
ref.current!.focus("doesnt-exist");
159174

160175
fireEvent.keyDown(wrapper.getElement(), { keyCode: KeyCode.down });
161176
expect(document.body).toHaveFocus();

‎src/support-prompt-group/focus-helpers.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function getNextFocusTarget(
1010
const buttons: HTMLButtonElement[] = Array.from(
1111
containerObjectRef?.current.querySelectorAll(`.${styles["support-prompt"]}`),
1212
);
13-
return buttons.find((button) => button.dataset.itemid === focusedIdRef?.current) ?? buttons[0] ?? null;
13+
return buttons.find((button) => button.dataset.itemid === focusedIdRef.current) ?? buttons[0] ?? null;
1414
}
1515
return null;
1616
}

‎src/support-prompt-group/interfaces.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ export interface SupportPromptGroupProps {
1313
* An array of objects representing support prompts.
1414
* Each item has the following properties:
1515
* - text: The text of the support prompt.
16-
* - id: The id of the support prompt.
16+
* - id: The ID of the support prompt.
1717
**/
1818
items: ReadonlyArray<SupportPromptGroupProps.Item>;
1919

2020
/**
21-
* Called when the user clicks on a support prompt. The event detail object contains the id of the clicked item.
21+
* Called when the user clicks on a support prompt. The event detail object contains the ID of the clicked item.
2222
*/
2323
onItemClick: CancelableEventHandler<SupportPromptGroupProps.ItemClickDetail>;
2424

@@ -43,7 +43,7 @@ export namespace SupportPromptGroupProps {
4343

4444
export interface Ref {
4545
/**
46-
* Focuses support prompt group item by id.
46+
* Focuses support prompt group item by ID.
4747
*/
4848
focus(itemId: string): void;
4949
}

‎src/support-prompt-group/internal.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
KeyCode,
1111
SingleTabStopNavigationAPI,
1212
SingleTabStopNavigationProvider,
13+
warnOnce,
1314
} from "@cloudscape-design/component-toolkit/internal";
1415

1516
import { getDataAttributes } from "../internal/base-component/get-data-attributes";
@@ -43,6 +44,9 @@ export const InternalSupportPromptGroup = forwardRef(
4344

4445
useImperativeHandle(ref, () => ({
4546
focus: (id) => {
47+
if (!itemsRef.current[id]) {
48+
warnOnce("SupportPromptGroup", "No matching ID found to focus.");
49+
}
4650
itemsRef.current[id]?.focus();
4751
},
4852
}));
@@ -86,7 +90,7 @@ export const InternalSupportPromptGroup = forwardRef(
8690
return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;
8791
};
8892

89-
if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {
93+
if (hasModifierKeys(event) || !specialKeys.includes(event.keyCode)) {
9094
return;
9195
}
9296
if (!containerObjectRef.current || !focusTarget) {

0 commit comments

Comments
 (0)