From 0a555c53c736a1a0ed9e31d0d6e9403cb6385f1f Mon Sep 17 00:00:00 2001 From: Matt Pharoah Date: Tue, 7 Feb 2023 17:20:01 -0500 Subject: [PATCH] Export typescript types for events with details --- src/components/menu/menu.test.ts | 10 +++++----- src/components/tab-group/tab-group.test.ts | 13 +++++-------- src/events/events.ts | 7 +++++++ src/events/sl-hover.ts | 6 ++++++ src/events/sl-mutation.ts | 3 +++ src/events/sl-resize.ts | 3 +++ src/events/sl-select.ts | 5 +++++ src/events/sl-selection-change.ts | 5 +++++ src/events/sl-tab-hide.ts | 3 +++ src/events/sl-tab-show.ts | 3 +++ src/shoelace.ts | 3 +++ 11 files changed, 48 insertions(+), 13 deletions(-) create mode 100644 src/events/events.ts create mode 100644 src/events/sl-hover.ts create mode 100644 src/events/sl-mutation.ts create mode 100644 src/events/sl-resize.ts create mode 100644 src/events/sl-select.ts create mode 100644 src/events/sl-selection-change.ts create mode 100644 src/events/sl-tab-hide.ts create mode 100644 src/events/sl-tab-show.ts diff --git a/src/components/menu/menu.test.ts b/src/components/menu/menu.test.ts index 358bb1289..ea916fd42 100644 --- a/src/components/menu/menu.test.ts +++ b/src/components/menu/menu.test.ts @@ -4,7 +4,7 @@ import { html } from 'lit'; import { sendKeys } from '@web/test-runner-commands'; import sinon from 'sinon'; import type SlMenu from './menu'; -import type SlMenuItem from '../menu-item/menu-item'; +import type SlSelectEvent from '../../events/sl-select'; describe('', () => { it('emits sl-select with the correct event detail when clicking an item', async () => { @@ -17,8 +17,8 @@ describe('', () => { `); const item2 = menu.querySelectorAll('sl-menu-item')[1]; - const selectHandler = sinon.spy((event: CustomEvent) => { - const item = event.detail.item as SlMenuItem; // eslint-disable-line + const selectHandler = sinon.spy((event: SlSelectEvent) => { + const item = event.detail.item; if (item !== item2) { expect.fail('Incorrect event detail emitted with sl-select'); } @@ -40,8 +40,8 @@ describe('', () => { `); const [item1, item2] = menu.querySelectorAll('sl-menu-item'); - const selectHandler = sinon.spy((event: CustomEvent) => { - const item = event.detail.item as SlMenuItem; // eslint-disable-line + const selectHandler = sinon.spy((event: SlSelectEvent) => { + const item = event.detail.item; if (item !== item2) { expect.fail('Incorrect item selected'); } diff --git a/src/components/tab-group/tab-group.test.ts b/src/components/tab-group/tab-group.test.ts index aef6b1518..215928e8f 100644 --- a/src/components/tab-group/tab-group.test.ts +++ b/src/components/tab-group/tab-group.test.ts @@ -9,16 +9,13 @@ import type { HTMLTemplateResult } from 'lit'; import type SlTab from '../tab/tab'; import type SlTabGroup from './tab-group'; import type SlTabPanel from '../tab-panel/tab-panel'; +import type SlTabShowEvent from '../../events/sl-tab-show'; interface ClientRectangles { body?: DOMRect; navigation?: DOMRect; } -interface CustomEventPayload { - name: string; -} - const waitForScrollButtonsToBeRendered = async (tabGroup: SlTabGroup): Promise => { await waitUntil(() => { const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('sl-icon-button'); @@ -57,9 +54,9 @@ const expectOnlyOneTabPanelToBeActive = async (container: HTMLElement, dataTestI expect(activeTabPanels[0]).to.have.attribute('data-testid', dataTestIdOfActiveTab); }; -const expectPromiseToHaveName = async (showEventPromise: Promise, expectedName: string) => { +const expectPromiseToHaveName = async (showEventPromise: Promise, expectedName: string) => { const showEvent = await showEventPromise; - expect((showEvent.detail as CustomEventPayload).name).to.equal(expectedName); + expect(showEvent.detail.name).to.equal(expectedName); }; const waitForHeaderToBeActive = async (container: HTMLElement, headerTestId: string): Promise => { @@ -306,7 +303,7 @@ describe('', () => { const customHeader = queryByTestId(tabGroup, 'custom-header'); expect(customHeader).not.to.have.attribute('active'); - const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise; + const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise; await action(); expect(customHeader).to.have.attribute('active'); @@ -405,7 +402,7 @@ describe('', () => { const customHeader = queryByTestId(tabGroup, 'custom-header'); expect(customHeader).not.to.have.attribute('active'); - const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise; + const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise; await sendKeys({ press: 'ArrowRight' }); await aTimeout(0); expect(generalHeader).to.have.attribute('active'); diff --git a/src/events/events.ts b/src/events/events.ts new file mode 100644 index 000000000..a4b53b0c5 --- /dev/null +++ b/src/events/events.ts @@ -0,0 +1,7 @@ +export { default as SlHoverEvent } from './sl-hover'; +export { default as SlMutationEvent } from './sl-mutation'; +export { default as SlResizeEvent } from './sl-resize'; +export { default as SlSelectEvent } from './sl-select'; +export { default as SlSelectionChangeEvent } from './sl-selection-change'; +export { default as SlTabHideEvent } from './sl-tab-hide'; +export { default as SlTabShowEvent } from './sl-tab-show'; diff --git a/src/events/sl-hover.ts b/src/events/sl-hover.ts new file mode 100644 index 000000000..ad985add5 --- /dev/null +++ b/src/events/sl-hover.ts @@ -0,0 +1,6 @@ +type SlHoverEvent = CustomEvent<{ + phase: 'start' | 'move' | 'end'; + value: number; +}>; + +export default SlHoverEvent; diff --git a/src/events/sl-mutation.ts b/src/events/sl-mutation.ts new file mode 100644 index 000000000..4b4b80f50 --- /dev/null +++ b/src/events/sl-mutation.ts @@ -0,0 +1,3 @@ +type SlMutationEvent = CustomEvent<{ mutationList: MutationRecord[] }>; + +export default SlMutationEvent; diff --git a/src/events/sl-resize.ts b/src/events/sl-resize.ts new file mode 100644 index 000000000..5d2a2a234 --- /dev/null +++ b/src/events/sl-resize.ts @@ -0,0 +1,3 @@ +type SlResizeEvent = CustomEvent<{ entries: ResizeObserverEntry[] }>; + +export default SlResizeEvent; diff --git a/src/events/sl-select.ts b/src/events/sl-select.ts new file mode 100644 index 000000000..ead6b9b02 --- /dev/null +++ b/src/events/sl-select.ts @@ -0,0 +1,5 @@ +import type SlMenuItem from '../components/menu-item/menu-item'; + +type SlSelectEvent = CustomEvent<{ item: SlMenuItem }>; + +export default SlSelectEvent; diff --git a/src/events/sl-selection-change.ts b/src/events/sl-selection-change.ts new file mode 100644 index 000000000..0089bfeff --- /dev/null +++ b/src/events/sl-selection-change.ts @@ -0,0 +1,5 @@ +import type SlTreeItem from '../components/tree-item/tree-item'; + +type SlSelectionChangeEvent = CustomEvent<{ selection: SlTreeItem[] }>; + +export default SlSelectionChangeEvent; diff --git a/src/events/sl-tab-hide.ts b/src/events/sl-tab-hide.ts new file mode 100644 index 000000000..edc30fbce --- /dev/null +++ b/src/events/sl-tab-hide.ts @@ -0,0 +1,3 @@ +type SlTabHideEvent = CustomEvent<{ name: string }>; + +export default SlTabHideEvent; diff --git a/src/events/sl-tab-show.ts b/src/events/sl-tab-show.ts new file mode 100644 index 000000000..a5248e92d --- /dev/null +++ b/src/events/sl-tab-show.ts @@ -0,0 +1,3 @@ +type SlTabShowEvent = CustomEvent<{ name: string }>; + +export default SlTabShowEvent; diff --git a/src/shoelace.ts b/src/shoelace.ts index a325a42cb..6f3ee9699 100644 --- a/src/shoelace.ts +++ b/src/shoelace.ts @@ -60,3 +60,6 @@ export { default as SlOption } from './components/option/option'; export * from './utilities/animation'; export * from './utilities/base-path'; export * from './utilities/icon-library'; + +// Events +export * from './events/events';