Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: use native keydown event for parent/child navigation instead of custom event #9244

Draft
wants to merge 1 commit into
base: dev
Choose a base branch
from
Draft

refactor: use native keydown event for parent/child navigation instead of custom event #9244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 2 additions & 18 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ import { DatePickerMessages } from "./components/date-picker/assets/date-picker/
import { DateLocaleData } from "./components/date-picker/utils";
import { HoverRange } from "./utils/date";
import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
import { FilterMessages } from "./components/filter/assets/filter/t9n";
import { FlowItemLikeElement } from "./components/flow/interfaces";
import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
Expand All @@ -60,7 +59,6 @@ import { SelectionAppearance } from "./components/list/resources";
import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
import { MenuMessages } from "./components/menu/assets/menu/t9n";
import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
import { MeterLabelType } from "./components/meter/interfaces";
import { ModalMessages } from "./components/modal/assets/modal/t9n";
import { NoticeMessages } from "./components/notice/assets/notice/t9n";
Expand All @@ -76,7 +74,7 @@ import { DisplayMode } from "./components/sheet/interfaces";
import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
import { DragDetail } from "./utils/sortableComponent";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperLayout } from "./components/stepper/interfaces";
import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
Expand Down Expand Up @@ -126,7 +124,6 @@ export { DatePickerMessages } from "./components/date-picker/assets/date-picker/
export { DateLocaleData } from "./components/date-picker/utils";
export { HoverRange } from "./utils/date";
export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
export { FilterMessages } from "./components/filter/assets/filter/t9n";
export { FlowItemLikeElement } from "./components/flow/interfaces";
export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
Expand All @@ -150,7 +147,6 @@ export { SelectionAppearance } from "./components/list/resources";
export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
export { MenuMessages } from "./components/menu/assets/menu/t9n";
export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
export { MeterLabelType } from "./components/meter/interfaces";
export { ModalMessages } from "./components/modal/assets/modal/t9n";
export { NoticeMessages } from "./components/notice/assets/notice/t9n";
Expand All @@ -166,7 +162,7 @@ export { DisplayMode } from "./components/sheet/interfaces";
export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
export { DragDetail } from "./utils/sortableComponent";
export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperLayout } from "./components/stepper/interfaces";
export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
Expand Down Expand Up @@ -6126,7 +6122,6 @@ declare global {
};
interface HTMLCalciteCardElementEventMap {
"calciteCardSelect": void;
"calciteInternalCardKeyEvent": KeyboardEvent;
}
interface HTMLCalciteCardElement extends Components.CalciteCard, HTMLStencilElement {
addEventListener<K extends keyof HTMLCalciteCardElementEventMap>(type: K, listener: (this: HTMLCalciteCardElement, ev: CalciteCardCustomEvent<HTMLCalciteCardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
Expand Down Expand Up @@ -6208,7 +6203,6 @@ declare global {
interface HTMLCalciteChipElementEventMap {
"calciteChipClose": void;
"calciteChipSelect": void;
"calciteInternalChipKeyEvent": KeyboardEvent;
"calciteInternalChipSelect": void;
"calciteInternalSyncSelectedChips": void;
}
Expand Down Expand Up @@ -6444,7 +6438,6 @@ declare global {
interface HTMLCalciteDropdownItemElementEventMap {
"calciteDropdownItemSelect": void;
"calciteInternalDropdownItemSelect": RequestedItem2;
"calciteInternalDropdownItemKeyEvent": ItemKeyboardEvent;
"calciteInternalDropdownCloseRequest": void;
}
interface HTMLCalciteDropdownItemElement extends Components.CalciteDropdownItem, HTMLStencilElement {
Expand Down Expand Up @@ -6799,7 +6792,6 @@ declare global {
new (): HTMLCalciteMenuElement;
};
interface HTMLCalciteMenuItemElementEventMap {
"calciteInternalMenuItemKeyEvent": MenuItemCustomEvent;
"calciteMenuItemSelect": void;
}
interface HTMLCalciteMenuItemElement extends Components.CalciteMenuItem, HTMLStencilElement {
Expand Down Expand Up @@ -7287,7 +7279,6 @@ declare global {
new (): HTMLCalciteStepperElement;
};
interface HTMLCalciteStepperItemElementEventMap {
"calciteInternalStepperItemKeyEvent": StepperItemKeyEventDetail;
"calciteInternalStepperItemSelect": StepperItemEventDetail;
"calciteInternalUserRequestedStepperItemSelect": StepperItemChangeEventDetail;
"calciteInternalStepperItemRegister": StepperItemEventDetail;
Expand Down Expand Up @@ -7458,7 +7449,6 @@ declare global {
new (): HTMLCalciteTextAreaElement;
};
interface HTMLCalciteTileElementEventMap {
"calciteInternalTileKeyEvent": KeyboardEvent;
"calciteTileSelect": void;
}
interface HTMLCalciteTileElement extends Components.CalciteTile, HTMLStencilElement {
Expand Down Expand Up @@ -8417,7 +8407,6 @@ declare namespace LocalJSX {
* Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected.
*/
"onCalciteCardSelect"?: (event: CalciteCardCustomEvent<void>) => void;
"onCalciteInternalCardKeyEvent"?: (event: CalciteCardCustomEvent<KeyboardEvent>) => void;
/**
* When `true`, the component is selectable.
* @deprecated use `selectionMode` property on a parent `calcite-card-group` instead.
Expand Down Expand Up @@ -8657,7 +8646,6 @@ declare namespace LocalJSX {
* Fires when the selected state of the component changes.
*/
"onCalciteChipSelect"?: (event: CalciteChipCustomEvent<void>) => void;
"onCalciteInternalChipKeyEvent"?: (event: CalciteChipCustomEvent<KeyboardEvent>) => void;
"onCalciteInternalChipSelect"?: (event: CalciteChipCustomEvent<void>) => void;
"onCalciteInternalSyncSelectedChips"?: (event: CalciteChipCustomEvent<void>) => void;
"parentChipGroup"?: HTMLCalciteChipGroupElement;
Expand Down Expand Up @@ -9411,7 +9399,6 @@ declare namespace LocalJSX {
*/
"onCalciteDropdownItemSelect"?: (event: CalciteDropdownItemCustomEvent<void>) => void;
"onCalciteInternalDropdownCloseRequest"?: (event: CalciteDropdownItemCustomEvent<void>) => void;
"onCalciteInternalDropdownItemKeyEvent"?: (event: CalciteDropdownItemCustomEvent<ItemKeyboardEvent>) => void;
"onCalciteInternalDropdownItemSelect"?: (event: CalciteDropdownItemCustomEvent<RequestedItem2>) => void;
/**
* Specifies the relationship to the linked document defined in `href`.
Expand Down Expand Up @@ -10955,7 +10942,6 @@ declare namespace LocalJSX {
* Made into a prop for testing purposes only.
*/
"messages"?: MenuItemMessages;
"onCalciteInternalMenuItemKeyEvent"?: (event: CalciteMenuItemCustomEvent<MenuItemCustomEvent>) => void;
/**
* Emits when the component is selected.
*/
Expand Down Expand Up @@ -12490,7 +12476,6 @@ declare namespace LocalJSX {
*/
"numbered"?: boolean;
"numberingSystem"?: NumberingSystem;
"onCalciteInternalStepperItemKeyEvent"?: (event: CalciteStepperItemCustomEvent<StepperItemKeyEventDetail>) => void;
"onCalciteInternalStepperItemRegister"?: (event: CalciteStepperItemCustomEvent<StepperItemEventDetail>) => void;
"onCalciteInternalStepperItemSelect"?: (event: CalciteStepperItemCustomEvent<StepperItemEventDetail>) => void;
"onCalciteInternalUserRequestedStepperItemSelect"?: (event: CalciteStepperItemCustomEvent<StepperItemChangeEventDetail>) => void;
Expand Down Expand Up @@ -13038,7 +13023,6 @@ declare namespace LocalJSX {
* Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column.
*/
"layout"?: Exclude<Layout, "grid">;
"onCalciteInternalTileKeyEvent"?: (event: CalciteTileCustomEvent<KeyboardEvent>) => void;
/**
* Fires when the selected state of the component changes.
*/
Expand Down
35 changes: 20 additions & 15 deletions packages/calcite-components/src/components/card-group/card-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,24 +125,29 @@ export class CardGroup implements InteractiveComponent, LoadableComponent {
//
//--------------------------------------------------------------------------

@Listen("calciteInternalCardKeyEvent")
calciteInternalCardKeyEventListener(event: KeyboardEvent): void {
@Listen("keydown")
keyDownEventListener(event: KeyboardEvent): void {
if (event.composedPath().includes(this.el)) {
const interactiveItems = this.items.filter((el) => !el.disabled);
switch (event.detail["key"]) {
case "ArrowRight":
focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, "next");
break;
case "ArrowLeft":
focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, "previous");
break;
case "Home":
focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, "first");
break;
case "End":
focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, "last");
break;

const key = event.key;
const toDirection =
key === "ArrowRight"
? "next"
: key === "ArrowLeft"
? "previous"
: key === "Home"
? "first"
: key === "End"
? "last"
: null;

if (!toDirection) {
return;
}

event.preventDefault();
focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, toDirection);
}
}

Expand Down
15 changes: 0 additions & 15 deletions packages/calcite-components/src/components/card/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,11 +124,6 @@ export class Card
/** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */
@Event({ cancelable: false }) calciteCardSelect: EventEmitter<void>;

/**
* @internal
*/
@Event({ cancelable: false }) calciteInternalCardKeyEvent: EventEmitter<KeyboardEvent>;

//--------------------------------------------------------------------------
//
// Public Methods
Expand Down Expand Up @@ -211,16 +206,6 @@ export class Card
if (isActivationKey(event.key) && this.selectionMode !== "none") {
this.calciteCardSelect.emit();
event.preventDefault();
} else {
switch (event.key) {
case "ArrowRight":
case "ArrowLeft":
case "Home":
case "End":
this.calciteInternalCardKeyEvent.emit(event);
event.preventDefault();
break;
}
}
}
};
Expand Down
36 changes: 20 additions & 16 deletions packages/calcite-components/src/components/chip-group/chip-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,26 +125,30 @@ export class ChipGroup implements InteractiveComponent {
//
//--------------------------------------------------------------------------

@Listen("calciteInternalChipKeyEvent")
calciteInternalChipKeyEventListener(event: CustomEvent): void {
@Listen("keydown")
keyDownEventListener(event: KeyboardEvent): void {
if (event.composedPath().includes(this.el)) {
const interactiveItems = this.items?.filter((el) => !el.disabled);
switch (event.detail.key) {
case "ArrowRight":
focusElementInGroup(interactiveItems, event.detail.target, "next");
break;
case "ArrowLeft":
focusElementInGroup(interactiveItems, event.detail.target, "previous");
break;
case "Home":
focusElementInGroup(interactiveItems, event.detail.target, "first");
break;
case "End":
focusElementInGroup(interactiveItems, event.detail.target, "last");
break;

const key = event.key;
const toDirection =
key === "ArrowRight"
? "next"
: key === "ArrowLeft"
? "previous"
: key === "Home"
? "first"
: key === "End"
? "last"
: null;

if (!toDirection) {
return;
}

event.preventDefault();
focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, toDirection);
}
event.stopPropagation();
}

@Listen("calciteChipClose")
Expand Down
12 changes: 0 additions & 12 deletions packages/calcite-components/src/components/chip/chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,11 +183,6 @@ export class Chip
*/
@Event({ cancelable: false }) calciteChipSelect: EventEmitter<void>;

/**
* @internal
*/
@Event({ cancelable: false }) calciteInternalChipKeyEvent: EventEmitter<KeyboardEvent>;

/**
* @internal
*/
Expand Down Expand Up @@ -249,13 +244,6 @@ export class Chip
this.handleEmittingEvent();
event.preventDefault();
break;
case "ArrowRight":
case "ArrowLeft":
case "Home":
case "End":
this.calciteInternalChipKeyEvent.emit(event);
event.preventDefault();
break;
}
}
}
Expand Down
15 changes: 0 additions & 15 deletions packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
VNode,
} from "@stencil/core";
import { toAriaBoolean } from "../../utils/dom";
import { ItemKeyboardEvent } from "../dropdown/interfaces";
import { RequestedItem } from "../dropdown-group/interfaces";
import { FlipContext, Scale, SelectionMode } from "../interfaces";
import {
Expand Down Expand Up @@ -90,10 +89,6 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
*/
@Event({ cancelable: false }) calciteInternalDropdownItemSelect: EventEmitter<RequestedItem>;

/** @internal */
@Event({ cancelable: false })
calciteInternalDropdownItemKeyEvent: EventEmitter<ItemKeyboardEvent>;

/** @internal */
@Event({ cancelable: false }) calciteInternalDropdownCloseRequest: EventEmitter<void>;
//--------------------------------------------------------------------------
Expand Down Expand Up @@ -269,16 +264,6 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
this.calciteInternalDropdownCloseRequest.emit();
event.preventDefault();
break;
case "Tab":
this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });
break;
case "ArrowUp":
case "ArrowDown":
case "Home":
case "End":
event.preventDefault();
this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });
break;
}
}

Expand Down
Loading
Loading