Export typescript types for events with details

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('<sl-menu>', () => {
   it('emits sl-select with the correct event detail when clicking an item', async () => {
@@ -17,8 +17,8 @@ describe('<sl-menu>', () => {
       </sl-menu>
     `);
     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('<sl-menu>', () => {
       </sl-menu>
     `);
     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');
       }

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<void> => {
   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<CustomEvent>, expectedName: string) => {
+const expectPromiseToHaveName = async (showEventPromise: Promise<SlTabShowEvent>, 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<SlTab> => {
@@ -306,7 +303,7 @@ describe('<sl-tab-group>', () => {
       const customHeader = queryByTestId<SlTab>(tabGroup, 'custom-header');
       expect(customHeader).not.to.have.attribute('active');
 
-      const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise<CustomEvent>;
+      const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise<SlTabShowEvent>;
       await action();
 
       expect(customHeader).to.have.attribute('active');
@@ -405,7 +402,7 @@ describe('<sl-tab-group>', () => {
       const customHeader = queryByTestId<SlTab>(tabGroup, 'custom-header');
       expect(customHeader).not.to.have.attribute('active');
 
-      const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise<CustomEvent>;
+      const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise<SlTabShowEvent>;
       await sendKeys({ press: 'ArrowRight' });
       await aTimeout(0);
       expect(generalHeader).to.have.attribute('active');

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';

src/events/sl-hover.ts

@@ -0,0 +1,6 @@
+type SlHoverEvent = CustomEvent<{
+  phase: 'start' | 'move' | 'end';
+  value: number;
+}>;
+
+export default SlHoverEvent;

src/events/sl-mutation.ts

@@ -0,0 +1,3 @@
+type SlMutationEvent = CustomEvent<{ mutationList: MutationRecord[] }>;
+
+export default SlMutationEvent;

src/events/sl-resize.ts

@@ -0,0 +1,3 @@
+type SlResizeEvent = CustomEvent<{ entries: ResizeObserverEntry[] }>;
+
+export default SlResizeEvent;

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;

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;

src/events/sl-tab-hide.ts

@@ -0,0 +1,3 @@
+type SlTabHideEvent = CustomEvent<{ name: string }>;
+
+export default SlTabHideEvent;

src/events/sl-tab-show.ts

@@ -0,0 +1,3 @@
+type SlTabShowEvent = CustomEvent<{ name: string }>;
+
+export default SlTabShowEvent;

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';