Update dependencies & fixed deprecation warnings

package.json

@@ -7,7 +7,7 @@
   "module": "lib/WiredElements.js",
   "types": "lib/WiredElements.d.ts",
   "scripts": {
-    "build": "rm -rf lib && tsc",
+    "build": "rimraf -rf lib && tsc",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -25,11 +25,12 @@
   },
   "homepage": "https://github.com/rough-stuff/react-wired-elements#readme",
   "dependencies": {
-    "@lit-labs/react": "^1.0.0-rc.1",
-    "react": "^17.0.2",
+    "@lit-labs/react": "^1.1.1",
+    "react": "^18.2.0",
     "wired-elements": "^3.0.0-rc.6"
   },
   "devDependencies": {
-    "@types/react": "^17.0.3"
+    "@types/react": "^18.0.31",
+    "rimraf": "^4.4.1"
   }
 }

src/WiredButton.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredButton as _WiredButton } from 'wired-elements/lib/wired-button.js';
 
-export const WiredButton = createComponent(React, 'wired-button', _WiredButton);
+export const WiredButton = createComponent({
+  react: React,
+  tagName: 'wired-button',
+  elementClass: _WiredButton
+});

src/WiredCalendar.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredCalendar as CE } from 'wired-elements/lib/wired-calendar.js';
 
-export const WiredCalendar = createComponent(React, 'wired-calendar', CE);
+export const WiredCalendar = createComponent({
+  react: React,
+  tagName: 'wired-calendar',
+  elementClass: CE
+});

src/WiredCard.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredCard as _WiredCard } from 'wired-elements/lib/wired-card.js';
 
-export const WiredCard = createComponent(React, 'wired-card', _WiredCard);
+export const WiredCard = createComponent({
+  tagName: 'wired-card',
+  elementClass: _WiredCard,
+  react: React,
+});

src/WiredCheckbox.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredCheckbox as _WiredCheckbox } from 'wired-elements/lib/wired-checkbox.js';
 
-export const WiredCheckbox = createComponent(React, 'wired-checkbox', _WiredCheckbox, {
-  onchange: 'change',
-  onChange: 'change'
+export const WiredCheckbox = createComponent({
+  react: React,
+  tagName: 'wired-checkbox',
+  elementClass: _WiredCheckbox,
+  events: {
+    onchange: 'change',
+    onChange: 'change'
+  }
 });

src/WiredCombo.ts

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredCombo as _WiredCombo } from 'wired-elements/lib/wired-combo.js';
 
-export const WiredCombo = createComponent(React, 'wired-combo', _WiredCombo, {
-  onselected: 'selected'
+export const WiredCombo = createComponent({
+  react: React,
+  tagName: 'wired-combo',
+  elementClass: _WiredCombo,
+  events: {
+    onselected: 'selected'
+  }
 });

src/WiredDialog.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredDialog as _WiredDialog } from 'wired-elements/lib/wired-dialog.js';
 
-export const WiredDialog = createComponent(React, 'wired-dialog', _WiredDialog);
+export const WiredDialog = createComponent({
+  react: React,
+  tagName: 'wired-dialog',
+  elementClass: _WiredDialog
+});

src/WiredDivider.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredDivider as _WiredDivider } from 'wired-elements/lib/wired-divider.js';
 
-export const WiredDivider = createComponent(React, 'wired-divider', _WiredDivider);
+export const WiredDivider = createComponent({
+  react: React,
+  tagName: 'wired-divider',
+  elementClass: _WiredDivider
+});

src/WiredElements.ts

@@ -21,4 +21,4 @@ export * from './WiredTab';
 export * from './WiredTabs';
 export * from './WiredTextarea';
 export * from './WiredToggle';
-export * from './WiredVideo';
+export * from './WiredVideo';

src/WiredFab.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredFab as _WiredFab } from 'wired-elements/lib/wired-fab.js';
 
-export const WiredFab = createComponent(React, 'wired-fab', _WiredFab);
+export const WiredFab = createComponent({
+  react: React,
+  tagName: 'wired-fab',
+  elementClass: _WiredFab
+});

src/WiredIconButton.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredIconButton as _WiredIconButton } from 'wired-elements/lib/wired-icon-button.js';
 
-export const WiredIconButton = createComponent(React, 'wired-icon-button', _WiredIconButton);
+export const WiredIconButton = createComponent({
+  react: React,
+  tagName: 'wired-icon-button',
+  elementClass: _WiredIconButton
+});

src/WiredImage.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredImage as _WiredImage } from 'wired-elements/lib/wired-image.js';
 
-export const WiredImage = createComponent(React, 'wired-image', _WiredImage);
+export const WiredImage = createComponent({
+  react: React,
+  tagName: 'wired-image',
+  elementClass: _WiredImage
+});

src/WiredInput.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredInput as _WiredInput } from 'wired-elements/lib/wired-input.js';
 
-export const WiredInput = createComponent(React, 'wired-input', _WiredInput, {
-  onChange: 'input',
-  onchange: 'input'
-});
+export const WiredInput = createComponent({
+  react: React,
+  tagName: 'wired-input',
+  elementClass: _WiredInput,
+  events: {
+    onChange: 'input',
+    onchange: 'input'
+  }
+});

src/WiredItem.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredItem as _WiredItem } from 'wired-elements/lib/wired-item.js';
 
-export const WiredItem = createComponent(React, 'wired-item', _WiredItem);
+export const WiredItem = createComponent({
+  react: React,
+  tagName: 'wired-item',
+  elementClass: _WiredItem
+});

src/WiredLink.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredLink as _WiredLink } from 'wired-elements/lib/wired-link.js';
 
-export const WiredLink = createComponent(React, 'wired-link', _WiredLink);
+export const WiredLink = createComponent({
+  react: React,
+  tagName: 'wired-link',
+  elementClass: _WiredLink
+});

src/WiredListbox.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredListbox as CE } from 'wired-elements/lib/wired-listbox.js';
 
-export const WiredListbox = createComponent(React, 'wired-listbox', CE, {
-  onselected: 'selected'
-});
+export const WiredListbox = createComponent({
+  react: React,
+  tagName: 'wired-listbox',
+  elementClass: CE,
+  events: {onselected: 'selected'}
+});

src/WiredProgress.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredProgress as CE } from 'wired-elements/lib/wired-progress.js';
 
-export const WiredProgress = createComponent(React, 'wired-progress', CE);
+export const WiredProgress = createComponent({
+  react: React,
+  tagName: 'wired-progress',
+  elementClass: CE
+});

src/WiredRadio.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredRadio as CE } from 'wired-elements/lib/wired-radio.js';
 
-export const WiredRadio = createComponent(React, 'wired-radio', CE, {
-  onchange: 'change',
-  onChange: 'change'
-});
+export const WiredRadio = createComponent({
+  react: React,
+  tagName: 'wired-radio',
+  elementClass: CE,
+  events: {
+    onchange: 'change',
+    onChange: 'change'
+  }
+});

src/WiredRadioGroup.ts

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredRadioGroup as CE } from 'wired-elements/lib/wired-radio-group.js';
 
-export const WiredRadioGroup = createComponent(React, 'wired-radio-group', CE, {
-  onselected: 'selected'
-});
+export const WiredRadioGroup = createComponent({
+  react: React,
+  tagName: 'wired-radio-group',
+  elementClass: CE,
+  events: {
+    onselected: 'selected'
+  }
+});

src/WiredSearchInput.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredSearchInput as CE } from 'wired-elements/lib/wired-search-input.js';
 
-export const WiredSearchInput = createComponent(React, 'wired-search-input', CE, {
-  onChange: 'input',
-  onchange: 'input'
-});
+export const WiredSearchInput = createComponent({
+  react: React,
+  tagName: 'wired-search-input',
+  elementClass: CE,
+  events: {
+    onChange: 'input',
+    onchange: 'input'
+  }
+});

src/WiredSlider.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredSlider as CE } from 'wired-elements/lib/wired-slider.js';
 
-export const WiredSlider = createComponent(React, 'wired-slider', CE, {
-  onchange: 'change',
-  onChange: 'change'
-});
+export const WiredSlider = createComponent({
+  react: React,
+  tagName: 'wired-slider',
+  elementClass: CE,
+  events: {
+    onchange: 'change',
+    onChange: 'change'
+  }
+});

src/WiredSpinner.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredSpinner as CE } from 'wired-elements/lib/wired-spinner.js';
 
-export const WiredSpinner = createComponent(React, 'wired-spinner', CE);
+export const WiredSpinner = createComponent({
+  react: React,
+  tagName: 'wired-spinner',
+  elementClass: CE
+});

src/WiredTab.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredTab as CE } from 'wired-elements/lib/wired-tab.js';
 
-export const WiredTab = createComponent(React, 'wired-tab', CE);
+export const WiredTab = createComponent({
+  react: React,
+  tagName: 'wired-tab',
+  elementClass: CE
+});

src/WiredTabs.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredTabs as CE } from 'wired-elements/lib/wired-tabs.js';
 
-export const WiredTabs = createComponent(React, 'wired-tabs', CE);
+export const WiredTabs = createComponent({
+  react: React,
+  tagName: 'wired-tabs',
+  elementClass: CE
+});

src/WiredTextarea.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredTextarea as CE } from 'wired-elements/lib/wired-textarea.js';
 
-export const WiredTextarea = createComponent(React, 'wired-textarea', CE, {
-  onChange: 'input',
-  onchange: 'input'
-});
+export const WiredTextarea = createComponent({
+  react: React,
+  tagName: 'wired-textarea',
+  elementClass: CE,
+  events: {
+    onChange: 'input',
+    onchange: 'input'
+  }
+});

src/WiredToggle.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredToggle as CE } from 'wired-elements/lib/wired-toggle.js';
 
-export const WiredToggle = createComponent(React, 'wired-toggle', CE, {
-  onchange: 'change',
-  onChange: 'change'
-});
+export const WiredToggle = createComponent({
+  react: React,
+  tagName: 'wired-toggle',
+  elementClass: CE,
+  events: {
+    onchange: 'change',
+    onChange: 'change'
+  }
+});

src/WiredVideo.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { WiredVideo as CE } from 'wired-elements/lib/wired-video.js';
 
-export const WiredVideo = createComponent(React, 'wired-video', CE);
+export const WiredVideo = createComponent({
+  react: React,
+  tagName: 'wired-video',
+  elementClass: CE
+});