my-react-lib-prashant 1.0.5 → 1.0.7

package/dist/my-react-lib-prashant.js

@@ -18693,17 +18693,16 @@ function ne(e) {
 		value: t,
 		placeholder: e.placeholder || "Enter text",
 		onChange: (t) => {
-			n(t.target.value), e.onChange && e.onChange(t.target.value);
-		},
-		style: {
-			padding: "8px",
-			width: "250px",
-			marginTop: "5px"
+			let r = t.target.value;
+			n(r), e.onChange && e.onChange(r), window.dispatchEvent(new CustomEvent("textbox-change", { detail: r }));
 		}
 	})] });
 }
 //#endregion
 //#region src/main.jsx
-var re = N(ne, y.default, b.default);
+var re = N(ne, y.default, b.default, { props: {
+	label: "string",
+	placeholder: "string"
+} });
 customElements.define("my-textbox", re);
 //#endregion

package/dist/my-react-lib-prashant.umd.cjs

@@ -168,4 +168,4 @@ Check the top-level render call using <`+n+`>.`)}return t}function Xe(e,t){if(!(
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,_,h,g.length>0?`{`+g.join(`: ..., `)+`: ...}`:`{}`,h),et[h+_]=!0)}return e===i?$e(f):Qe(f),f}function nt(e,t,n){return tt(e,t,n,!0)}function rt(e,t,n){return tt(e,t,n,!1)}var it=rt,at=nt;e.Fragment=i,e.jsx=it,e.jsxs=at})()})),te=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=P():t.exports=ee()}))();function ne(e){let[t,n]=(0,y.useState)(``);return(0,te.jsxs)(`div`,{children:[(0,te.jsxs)(`label`,{children:[e.label||`Textbox`,`:`]}),(0,te.jsx)(`input`,{type:`text`,value:t,placeholder:e.placeholder||`Enter text`,onChange:t=>{n(t.target.value),e.onChange&&e.onChange(t.target.value)},style:{padding:`8px`,width:`250px`,marginTop:`5px`}})]})}var re=N(ne,y.default,b.default);customElements.define(`my-textbox`,re)});
+  <%s key={someKey} {...props} />`,_,h,g.length>0?`{`+g.join(`: ..., `)+`: ...}`:`{}`,h),et[h+_]=!0)}return e===i?$e(f):Qe(f),f}function nt(e,t,n){return tt(e,t,n,!0)}function rt(e,t,n){return tt(e,t,n,!1)}var it=rt,at=nt;e.Fragment=i,e.jsx=it,e.jsxs=at})()})),te=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=P():t.exports=ee()}))();function ne(e){let[t,n]=(0,y.useState)(``);return(0,te.jsxs)(`div`,{children:[(0,te.jsxs)(`label`,{children:[e.label||`Textbox`,`:`]}),(0,te.jsx)(`input`,{type:`text`,value:t,placeholder:e.placeholder||`Enter text`,onChange:t=>{let r=t.target.value;n(r),e.onChange&&e.onChange(r),window.dispatchEvent(new CustomEvent(`textbox-change`,{detail:r}))}})]})}var re=N(ne,y.default,b.default,{props:{label:`string`,placeholder:`string`}});customElements.define(`my-textbox`,re)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-react-lib-prashant",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "main": "dist/my-react-lib-prashant.js",
   "module": "dist/my-react-lib-prashant.js",
   "type": "module",

package/src/components/TextBox.jsx

@@ -4,11 +4,18 @@ export default function TextBox(props) {
   const [value, setValue] = useState("");
 
   const handleChange = (e) => {
-    setValue(e.target.value);
+    const newValue = e.target.value;
+    setValue(newValue);
 
     if (props.onChange) {
-      props.onChange(e.target.value);
+      props.onChange(newValue);
     }
+
+    window.dispatchEvent(
+      new CustomEvent("textbox-change", {
+        detail: newValue
+      })
+    );
   };
 
   return (
@@ -19,11 +26,6 @@ export default function TextBox(props) {
         value={value}
         placeholder={props.placeholder || "Enter text"}
         onChange={handleChange}
-        style={{
-          padding: "8px",
-          width: "250px",
-          marginTop: "5px"
-        }}
       />
     </div>
   );

package/src/main.jsx

@@ -3,6 +3,11 @@ import ReactDOM from "react-dom/client";
 import reactToWebComponent from "react-to-webcomponent";
 import TextBox from "./components/TextBox";
 
-const WebTextBox = reactToWebComponent(TextBox, React, ReactDOM);
+const WebTextBox = reactToWebComponent(TextBox, React, ReactDOM, {
+  props: {
+    label: "string",
+    placeholder: "string"
+  }
+});
 
 customElements.define("my-textbox", WebTextBox);