@justeattakeaway/pie-divider 0.9.0 → 0.9.2-next.0

package/README.md

@@ -42,14 +42,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 { PieDivider } from '@justeattakeaway/pie-divider';
 
-// 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-divider';
+```
+
+#### 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 { PieDivider } from '@justeattakeaway/pie-divider/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/index.js

@@ -1,60 +1,60 @@
-import { unsafeCSS as u, LitElement as f, html as g } from "lit";
+import { unsafeCSS as h, LitElement as u, html as f } from "lit";
 import { property as c } from "lit/decorators.js";
-const l = (i, e, r) => function(t, o) {
+const l = (i, e, t) => function(r, o) {
   const n = `#${o}`;
-  Object.defineProperty(t, o, {
+  Object.defineProperty(r, o, {
     get() {
       return this[n];
     },
     set(s) {
-      const p = this[n];
       e.includes(s) ? this[n] = s : (console.error(
         `<${i}> Invalid value "${s}" provided for property "${o}".`,
         `Must be one of: ${e.join(" | ")}.`,
-        `Falling back to default value: "${r}"`
-      ), this[n] = r), this.requestUpdate(o, p);
-    }
+        `Falling back to default value: "${t}"`
+      ), this[n] = t);
+    },
+    configurable: !0
   });
 };
-function m(i, e) {
+function g(i, e) {
   customElements.get(i) ? console.warn(`PIE Web Component: "${i}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(i, e);
 }
-const b = `.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider[variant=inverse]{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider[orientation=vertical]{--divider-width: 1px;--divider-height: 100%}
-`, P = ["default", "inverse"], y = ["horizontal", "vertical"];
-var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, h = (i, e, r, d) => {
-  for (var t = d > 1 ? void 0 : d ? w(e, r) : e, o = i.length - 1, n; o >= 0; o--)
-    (n = i[o]) && (t = (d ? n(e, r, t) : n(t)) || t);
-  return d && t && $(e, r, t), t;
+const m = `.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider[variant=inverse]{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider[orientation=vertical]{--divider-width: 1px;--divider-height: 100%}
+`, b = ["default", "inverse"], y = ["horizontal", "vertical"];
+var P = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, p = (i, e, t, d) => {
+  for (var r = d > 1 ? void 0 : d ? $(e, t) : e, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (r = (d ? n(e, t, r) : n(r)) || r);
+  return d && r && P(e, t, r), r;
 };
 const v = "pie-divider";
-class a extends f {
+class a extends u {
   constructor() {
     super(...arguments), this.variant = "default", this.orientation = "horizontal";
   }
   render() {
-    const { variant: e, orientation: r } = this;
-    return g`
+    const { variant: e, orientation: t } = this;
+    return f`
             <hr
                 data-test-id="pie-divider"
                 aria-hidden="true"
                 class="c-divider"
                 variant=${e}
-                orientation=${r}
+                orientation=${t}
             />`;
   }
 }
-a.styles = u(b);
-h([
+a.styles = h(m);
+p([
   c({ type: String }),
-  l(v, P, "default")
+  l(v, b, "default")
 ], a.prototype, "variant", 2);
-h([
+p([
   c({ type: String }),
   l(v, y, "horizontal")
 ], a.prototype, "orientation", 2);
-m(v, a);
+g(v, a);
 export {
   a as PieDivider,
   y as orientations,
-  P as variants
+  b as variants
 };

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
-import type { ReactWebComponent } from '@lit-labs/react';
+import type { ReactWebComponent } from '@lit/react';
 import type { TemplateResult } from 'lit-html';
 
 export declare interface DividerProps {

package/dist/react.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-divider",
   "description": "PIE Design System Divider built using Web Components",
-  "version": "0.9.0",
+  "version": "0.9.2-next.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,10 +28,10 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.4.0"
+    "@justeattakeaway/pie-components-config": "0.6.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.11.0"
+    "@justeattakeaway/pie-webc-core": "0.12.0-next.0"
   },
   "volta": {
     "extends": "../../../package.json"