React wrappers remove ref

packages/react-wrappers/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 1.1.1
+
+- Removed duplicate `ref` prop in wrapper
+
 ## 1.1.0
 
 - Changed attribute binding to add attributes before rendering

packages/react-wrappers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "custom-element-react-wrappers",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A tool for generating react-compatible wrappers for custom elements",
   "main": "index.js",
   "module": "index.js",

packages/react-wrappers/src/global.ts

@@ -40,27 +40,38 @@ export const baseProperties: MappedAttribute[] = [
   {
     name: "key",
     propName: "key",
-    description: "Used to help React identify which items have changed, are added, or are removed within a list.",
+    description:
+      "Used to help React identify which items have changed, are added, or are removed within a list.",
     type: {
       text: "number | string",
     },
   },
-    {
+  {
     name: "children",
     propName: "children",
     description: "Content between the opening and closing component tags.",
     type: {
       text: "any",
     },
   },
-    {
+  {
     name: "ref",
     propName: "ref",
-    description: "A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component.",
+    description:
+      "A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component.",
     type: {
       text: "any",
     },
   },
+  {
+    name: "tabindex",
+    propName: "tabIndex",
+    description:
+      "Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation.",
+    type: {
+      text: "string",
+    },
+  },
 ];
 
 export const baseEvents: GlobalEvent[] = [

packages/react-wrappers/src/wrapper-generator.ts

@@ -381,6 +381,7 @@ function getReactComponentTemplate(
         { 
           ${useEffect ? "ref," : ""} 
           ${attributes
+            .filter((x) => x.name !== "ref")
             .map((attr) => {
               return (attr.originalName || attr?.name) === attr?.propName
                 ? attr?.name