@justeattakeaway/pie-spinner 0.2.0 → 0.2.2-next.0

package/README.md

@@ -41,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 { PieSpinner } from '@justeattakeaway/pie-spinner';
 
-// 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-spinner';
+```
+
+#### 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 { PieSpinner } from '@justeattakeaway/pie-spinner/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,38 +1,38 @@
-import { unsafeCSS as f, LitElement as u, html as v, nothing as m } from "lit";
+import { unsafeCSS as f, LitElement as h, html as v, nothing as u } from "lit";
 import { property as c } from "lit/decorators.js";
-const b = (r, e, o) => function(s, i) {
+const b = (n, e, o) => function(s, i) {
   const t = `#${i}`;
   Object.defineProperty(s, i, {
     get() {
       return this[t];
     },
     set(l) {
-      const h = this[t];
       e.includes(l) ? this[t] = l : (console.error(
-        `<${r}> Invalid value "${l}" provided for property "${i}".`,
+        `<${n}> Invalid value "${l}" provided for property "${i}".`,
         `Must be one of: ${e.join(" | ")}.`,
         `Falling back to default value: "${o}"`
-      ), this[t] = o), this.requestUpdate(i, h);
-    }
+      ), this[t] = o);
+    },
+    configurable: !0
   });
 };
-function z(r, e) {
-  customElements.get(r) ? console.warn(`PIE Web Component: "${r}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(r, e);
+function m(n, e) {
+  customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
 }
 const y = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner[variant=secondary]{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.c-spinner[variant=inverse]{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner[size=xs]{--spinner-size: 16px}.c-spinner[size=s]{--spinner-size: 20px}.c-spinner[size=l]{--spinner-size: 32px}.c-spinner[size=xl]{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}
-`, x = ["xs", "s", "m", "l", "xl"], g = ["brand", "secondary", "inverse"];
-var P = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, p = (r, e, o, n) => {
-  for (var s = n > 1 ? void 0 : n ? $(e, o) : e, i = r.length - 1, t; i >= 0; i--)
-    (t = r[i]) && (s = (n ? t(e, o, s) : t(s)) || s);
-  return n && s && P(e, o, s), s;
+`, z = ["xs", "s", "m", "l", "xl"], x = ["brand", "secondary", "inverse"];
+var g = Object.defineProperty, P = Object.getOwnPropertyDescriptor, p = (n, e, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? P(e, o) : e, i = n.length - 1, t; i >= 0; i--)
+    (t = n[i]) && (s = (r ? t(e, o, s) : t(s)) || s);
+  return r && s && g(e, o, s), s;
 };
 const d = "pie-spinner";
-class a extends u {
+class a extends h {
   constructor() {
     super(...arguments), this.size = "m", this.variant = "brand";
   }
   render() {
-    const { variant: e, size: o, aria: n } = this;
+    const { variant: e, size: o, aria: r } = this;
     return v`
             <div 
                 data-test-id="pie-spinner"
@@ -41,7 +41,7 @@ class a extends u {
                 aria-live="polite"
                 size="${o}"
                 variant="${e}">
-                   ${n != null && n.label ? v`<span class="c-spinner-label">${n.label}</span>` : m}
+                   ${r != null && r.label ? v`<span class="c-spinner-label">${r.label}</span>` : u}
                 </div>`;
   }
 }
@@ -51,15 +51,15 @@ p([
 ], a.prototype, "aria", 2);
 p([
   c(),
-  b(d, x, "m")
+  b(d, z, "m")
 ], a.prototype, "size", 2);
 p([
   c(),
-  b(d, g, "brand")
+  b(d, x, "brand")
 ], a.prototype, "variant", 2);
-z(d, a);
+m(d, a);
 export {
   a as PieSpinner,
-  x as sizes,
-  g as variants
+  z as sizes,
+  x 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 type AriaProps = {

package/dist/react.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "0.2.0",
+  "version": "0.2.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"