@justeattakeaway/pie-form-label 0.7.0 → 0.8.1

package/README.md

@@ -13,10 +13,9 @@
 1. [Introduction](#pie-form-label)
 2. [Installation](#installation)
 3. [Importing the component](#importing-the-component)
-4. [Local Development](#local-development)
-5. [Peer Dependencies](#peer-dependencies)
-6. [Props](#props)
-7. [Contributing](#contributing)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
 
 ## pie-form-label
 
@@ -42,14 +41,28 @@ For full information on using PIE components as part of an application, check ou
 
 ### Importing the component
 
+#### JavaScript
 ```js
-// default
+// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
 import { PieFormLabel } from '@justeattakeaway/pie-form-label';
 
-// react
+// If you don't need to reference the imported object, you can simply
+// import the module which registers the component as a custom element.
+import '@justeattakeaway/pie-form-label';
+```
+
+#### React
+```js
+// React
+// For React, you will need to import our React-specific component build
+// which wraps the web component using @lit-labs/react
 import { PieFormLabel } from '@justeattakeaway/pie-form-label/dist/react';
 ```
 
+> [!NOTE]
+> When using the React version of the component, please make sure to also
+> include React as a [peer dependency](#peer-dependencies) in your project.
+
 
 ## Peer Dependencies
 

package/dist/react.js

@@ -1,5 +1,5 @@
-import * as L from "react";
-import { PieFormLabel as E } from "./index.js";
+import * as w from "react";
+import { PieFormLabel as L } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 /**
@@ -7,59 +7,60 @@ import "lit/decorators.js";
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const g = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), F = (m, a, d, p, h) => {
-  const o = h == null ? void 0 : h[a];
-  o === void 0 || d === p ? d == null && a in HTMLElement.prototype ? m.removeAttribute(a) : m[a] = d : ((s, t, u) => {
-    let n = w.get(s);
-    n === void 0 && w.set(s, n = /* @__PURE__ */ new Map());
-    let l = n.get(t);
-    u !== void 0 ? l === void 0 ? (n.set(t, l = { handleEvent: u }), s.addEventListener(t, l)) : l.handleEvent = u : l !== void 0 && (n.delete(t), s.removeEventListener(t, l));
-  })(m, o, d);
+const g = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), b = /* @__PURE__ */ new WeakMap(), E = (t, o, c, d, p) => {
+  const n = p == null ? void 0 : p[o];
+  n === void 0 || c === d ? c == null && o in HTMLElement.prototype ? t.removeAttribute(o) : t[o] = c : ((r, i, h) => {
+    let a = b.get(r);
+    a === void 0 && b.set(r, a = /* @__PURE__ */ new Map());
+    let l = a.get(i);
+    h !== void 0 ? l === void 0 ? (a.set(i, l = { handleEvent: h }), r.addEventListener(i, l)) : l.handleEvent = h : l !== void 0 && (a.delete(i), r.removeEventListener(i, l));
+  })(t, n, c);
+}, F = (t, o) => {
+  typeof t == "function" ? t(o) : t.current = o;
 };
-function M(m = window.React, a, d, p, h) {
-  let o, s, t;
-  if (a === void 0) {
-    const r = m;
-    ({ tagName: s, elementClass: t, events: p, displayName: h } = r), o = r.react;
+function M(t = window.React, o, c, d, p) {
+  let n, r, i;
+  if (o === void 0) {
+    const m = t;
+    ({ tagName: r, elementClass: i, events: d, displayName: p } = m), n = m.react;
   } else
-    o = m, t = d, s = a;
-  const u = o.Component, n = o.createElement, l = new Set(Object.keys(p ?? {}));
-  class f extends u {
+    n = t, i = c, r = o;
+  const h = n.Component, a = n.createElement, l = new Set(Object.keys(d ?? {}));
+  class f extends h {
     constructor() {
       super(...arguments), this.o = null;
     }
     t(e) {
       if (this.o !== null)
-        for (const v in this.i)
-          F(this.o, v, this.props[v], e ? e[v] : void 0, p);
+        for (const u in this.i)
+          E(this.o, u, this.props[u], e ? e[u] : void 0, d);
     }
     componentDidMount() {
-      this.t();
+      var e;
+      this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
     }
     componentDidUpdate(e) {
       this.t(e);
     }
     render() {
-      const { _$Gl: e, ...v } = this.props;
-      this.h !== e && (this.u = (i) => {
-        e !== null && ((c, b) => {
-          typeof c == "function" ? c(b) : c.current = b;
-        })(e, i), this.o = i, this.h = e;
+      const { _$Gl: e, ...u } = this.props;
+      this.h !== e && (this.u = (s) => {
+        e !== null && F(e, s), this.o = s, this.h = e;
       }), this.i = {};
-      const y = { ref: this.u };
-      for (const [i, c] of Object.entries(v))
-        g.has(i) ? y[i === "className" ? "class" : i] = c : l.has(i) || i in t.prototype ? this.i[i] = c : y[i] = c;
-      return n(s, y);
+      const v = { ref: this.u };
+      for (const [s, y] of Object.entries(u))
+        g.has(s) ? v[s === "className" ? "class" : s] = y : l.has(s) || s in i.prototype ? this.i[s] = y : v[s] = y;
+      return v.suppressHydrationWarning = !0, a(r, v);
     }
   }
-  f.displayName = h ?? t.name;
-  const N = o.forwardRef((r, e) => n(f, { ...r, _$Gl: e }, r == null ? void 0 : r.children));
+  f.displayName = p ?? i.name;
+  const N = n.forwardRef((m, e) => a(f, { ...m, _$Gl: e }, m == null ? void 0 : m.children));
   return N.displayName = f.displayName, N;
 }
 const $ = M({
   displayName: "PieFormLabel",
-  elementClass: E,
-  react: L,
+  elementClass: L,
+  react: w,
   tagName: "pie-form-label",
   events: {}
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-form-label",
   "description": "PIE Design System Form Label built using Web Components",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",