unset last focused item; #1436

custom-elements-manifest.config.js

@@ -116,7 +116,6 @@ export default {
             if (classDoc?.events) {
               classDoc.events.forEach(event => {
                 event.reactName = `on${pascalCase(event.name)}`;
-                event.eventName = `${pascalCase(event.name)}Event`;
               });
             }
           }

docs/assets/scripts/search.js

@@ -284,7 +284,7 @@
         const a = document.createElement('a');
         const displayTitle = page.title ?? '';
         const displayDescription = page.description ?? '';
-        const displayUrl = page.url.replace(/^\//, '').replace(/\/$/, '');
+        const displayUrl = page.url.replace(/^\//, '');
         let icon = 'file-text';
 
         a.setAttribute('role', 'option');

docs/eleventy.config.cjs

@@ -171,10 +171,7 @@ module.exports = function (eleventyConfig) {
       this.field('c'); // content
 
       results.forEach((result, index) => {
-        const url = path
-          .join('/', path.relative(eleventyConfig.dir.output, result.outputPath))
-          .replace(/\\/g, '/') // convert backslashes to forward slashes
-          .replace(/\/index.html$/, '/'); // convert trailing /index.html to /
+        const url = path.join('/', path.relative(eleventyConfig.dir.output, result.outputPath)).replace(/\\/g, '/');
         const doc = new JSDOM(result.content, {
           // We must set a default URL so links are parsed with a hostname. Let's use a bogus TLD so we can easily
           // identify which ones are internal and which ones are external.

docs/pages/frameworks/react.md

@@ -83,25 +83,6 @@ function MyComponent() {
 export default MyComponent;
 ```
 
-You can also import the event type for use in your callbacks, shown below.
-
-```tsx
-import { useCallback, useState } from 'react';
-import { SlInput, SlInputEvent } from '@shoelace-style/shoelace/%NPMDIR%/react';
-import type SlInputElement from '@shoelace-style/shoelace/%NPMDIR%/components/input/input';
-
-function MyComponent() {
-  const [value, setValue] = useState('');
-  const onInput = useCallback((event: SlInputEvent) => {
-    setValue(event.detail);
-  }, []);
-
-  return <SlInput value={value} onSlInput={event => setValue((event.target as SlInputElement).value)} />;
-}
-
-export default MyComponent;
-```
-
 ## Testing with Jest
 
 Testing with web components can be challenging if your test environment runs in a Node environment (i.e. it doesn't run in a real browser). Fortunately, [Jest](https://jestjs.io/) has made a number of strides to support web components and provide additional browser APIs. However, it's still not a complete replication of a browser environment.

scripts/make-react.js

@@ -25,14 +25,7 @@ components.map(component => {
   const componentDir = path.join(reactDir, tagWithoutPrefix);
   const componentFile = path.join(componentDir, 'index.ts');
   const importPath = component.path;
-  const eventImports = (component.events || [])
-    .map(event => `import { ${event.eventName} } from '../../../src/events/events';`)
-    .join('\n');
-  const eventNameImport =
-    (component.events || []).length > 0 ? `import { type EventName  } from '@lit-labs/react';` : ``;
-  const events = (component.events || [])
-    .map(event => `${event.reactName}: '${event.name}' as EventName<${event.eventName}>`)
-    .join(',\n');
+  const events = (component.events || []).map(event => `${event.reactName}: '${event.name}'`).join(',\n');
 
   fs.mkdirSync(componentDir, { recursive: true });
 
@@ -42,9 +35,6 @@ components.map(component => {
       import { createComponent } from '@lit-labs/react';
       import Component from '../../${importPath}';
 
-      ${eventNameImport}
-      ${eventImports}
-
       export default createComponent({
         tagName: '${component.tagName}',
         elementClass: Component,

src/events/events.ts

@@ -28,7 +28,7 @@ export type { default as SlResizeEvent } from './sl-resize';
 export type { default as SlSelectEvent } from './sl-select';
 export type { default as SlSelectionChangeEvent } from './sl-selection-change';
 export type { default as SlShowEvent } from './sl-show';
-export type { default as SlSlideChangeEvent } from './sl-slide-change';
+export type { default as SlSlideChange } from './sl-slide-change';
 export type { default as SlStartEvent } from './sl-start';
 export type { default as SlTabHideEvent } from './sl-tab-hide';
 export type { default as SlTabShowEvent } from './sl-tab-show';

src/events/sl-slide-change.ts

@@ -1,11 +1,11 @@
 import type SlCarouselItem from '../components/carousel-item/carousel-item';
 
-type SlSlideChangeEvent = CustomEvent<{ index: number; slide: SlCarouselItem }>;
+type SlSlideChange = CustomEvent<{ index: number; slide: SlCarouselItem }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
-    'sl-slide-change': SlSlideChangeEvent;
+    'sl-slide-change': SlSlideChange;
   }
 }
 
-export default SlSlideChangeEvent;
+export default SlSlideChange;