@ably/ui 13.3.0 → 14.0.0-dev.3f64b93

package/src/core/{react-renderer.js → react-renderer.tsx}

@@ -1,9 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
-const renderComponent = (Component, props, node) =>
-  // eslint-disable-next-line react/no-render-return-value
-  ReactDOM.render(<Component {...props} />, node);
+const renderComponent = (Component, props, node) => {
+  const root = createRoot(node);
+  root.render(<Component {...props} />);
+};
 
 export { renderComponent };
 
@@ -11,15 +12,16 @@ export default function reactRenderer(components) {
   const reactComponents = document.querySelectorAll("[data-react]");
 
   Array.from(reactComponents).forEach((node) => {
-    const className = node.getAttribute("data-react");
+    const className = node.getAttribute("data-react") ?? "";
     const Constructor = components[className];
 
     if (!Constructor) return;
 
     const propsJson = node.getAttribute("data-react-props");
-    const props = propsJson && JSON.parse(propsJson || {});
+    const props = propsJson && JSON.parse(propsJson || "");
 
-    ReactDOM.render(<Constructor {...props} />, node);
+    const root = createRoot(node);
+    root.render(<Constructor {...props} />);
 
     node.removeAttribute("data-react");
     node.removeAttribute("data-react-props");

package/src/core/styles/buttons.css

@@ -1,124 +1,122 @@
-@layer components {
-  .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply hover:text-white hover:bg-active-orange;
-    @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-alt {
-    transition: background-position 0.2s;
-    background: linear-gradient(
-      61.2deg,
-      var(--color-active-orange) 5%,
-      #fe5215 19%,
-      #fc4a13 27%,
-      #f73c10 33%,
-      #f1280a 39%,
-      #e90f04 44%,
-      var(--color-red-orange) 50%
-    );
-    background-size: 200% 100%;
-    background-position: 0% 0%;
-
-    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply focus:outline-gui-focus;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-alt:hover,
-  .ui-btn-alt:focus {
-    background-position: 100% 0%;
-  }
-
-  .ui-btn-alt:disabled {
-    background: linear-gradient(var(--gradient-transparent));
-    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
-  }
-
-  .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply hover:text-white hover:bg-active-orange;
-    @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
-    @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
-    @apply active:border-red-orange active:bg-white;
-    @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
-    @apply hover:text-white hover:border-active-orange;
-    @apply active:border-red-orange;
-    @apply focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-icon {
-    @apply w-24 h-24 mr-16;
-  }
-
-  .ui-btn-icon-small {
-    @apply w-20 h-20 mr-12;
-  }
-
-  .ui-btn-icon-xsmall {
-    @apply w-16 h-16 mr-8;
-  }
-
-  .ui-chip {
-    @apply text-btn3 p-chip rounded text-cool-black;
-    @apply hover:bg-mid-grey;
-    @apply active:bg-red-orange active:text-white;
-    @apply focus:bg-red-orange focus:text-white focus:outline-none;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-  }
-
-  .ui-chip[data-selected] {
-    @apply bg-active-orange text-white;
-  }
-
-  .ui-chip[data-selected]:hover {
-    @apply bg-mid-grey text-cool-black;
-  }
-
-  .ui-chip[data-selected]:focus {
-    @apply bg-red-orange text-white;
-  }
-
-  .ui-chip-alt {
-    @apply text-btn3 p-chip rounded text-white;
-    @apply hover:bg-gui-hover;
-    @apply active:bg-gui-active active:text-white;
-    @apply focus:bg-gui-active focus:text-white focus:outline-none;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-  }
-
-  .ui-chip-alt[data-selected] {
-    @apply bg-dark-grey text-white;
-  }
-  .ui-chip-alt[data-selected]:hover {
-    @apply bg-gui-hover text-white;
-  }
-
-  .ui-chip-alt[data-selected]:focus {
-    @apply bg-gui-active text-white;
-  }
+.ui-btn {
+  @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
+  @apply hover:text-white hover:bg-active-orange;
+  @apply active:text-white active:bg-red-orange;
+  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+  @apply transition-colors;
+  @apply inline-flex items-center justify-center;
+}
+
+.ui-btn-alt {
+  transition: background-position 0.2s;
+  background: linear-gradient(
+    61.2deg,
+    var(--color-active-orange) 5%,
+    #fe5215 19%,
+    #fc4a13 27%,
+    #f73c10 33%,
+    #f1280a 39%,
+    #e90f04 44%,
+    var(--color-red-orange) 50%
+  );
+  background-size: 200% 100%;
+  background-position: 0% 0%;
+
+  @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+  @apply focus:outline-gui-focus;
+  @apply inline-flex items-center justify-center;
+}
+
+.ui-btn-alt:hover,
+.ui-btn-alt:focus {
+  background-position: 100% 0%;
+}
+
+.ui-btn-alt:disabled {
+  background: linear-gradient(var(--gradient-transparent));
+  @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
+}
+
+.ui-btn-invert {
+  @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+  @apply hover:text-white hover:bg-active-orange;
+  @apply active:text-white active:bg-red-orange;
+  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+  @apply transition-colors;
+  @apply inline-flex items-center justify-center;
+}
+
+.ui-btn-secondary {
+  @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
+  @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
+  @apply active:border-red-orange active:bg-white;
+  @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
+  @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
+  @apply transition-colors;
+  @apply inline-flex items-center justify-center;
+}
+
+.ui-btn-secondary-invert {
+  @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
+  @apply hover:text-white hover:border-active-orange;
+  @apply active:border-red-orange;
+  @apply focus:outline-gui-focus;
+  @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
+  @apply transition-colors;
+  @apply inline-flex items-center justify-center;
+}
+
+.ui-btn-icon {
+  @apply w-24 h-24 mr-16;
+}
+
+.ui-btn-icon-small {
+  @apply w-20 h-20 mr-12;
+}
+
+.ui-btn-icon-xsmall {
+  @apply w-16 h-16 mr-8;
+}
+
+.ui-chip {
+  @apply text-btn3 p-chip rounded text-cool-black;
+  @apply hover:bg-mid-grey;
+  @apply active:bg-red-orange active:text-white;
+  @apply focus:bg-red-orange focus:text-white focus:outline-none;
+  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+  @apply transition-colors;
+}
+
+.ui-chip[data-selected] {
+  @apply bg-active-orange text-white;
+}
+
+.ui-chip[data-selected]:hover {
+  @apply bg-mid-grey text-cool-black;
+}
+
+.ui-chip[data-selected]:focus {
+  @apply bg-red-orange text-white;
+}
+
+.ui-chip-alt {
+  @apply text-btn3 p-chip rounded text-white;
+  @apply hover:bg-gui-hover;
+  @apply active:bg-gui-active active:text-white;
+  @apply focus:bg-gui-active focus:text-white focus:outline-none;
+  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+  @apply transition-colors;
+}
+
+.ui-chip-alt[data-selected] {
+  @apply bg-dark-grey text-white;
+}
+.ui-chip-alt[data-selected]:hover {
+  @apply bg-gui-hover text-white;
+}
+
+.ui-chip-alt[data-selected]:focus {
+  @apply bg-gui-active text-white;
 }

package/src/core/styles/forms.css

@@ -1,64 +1,62 @@
-@layer components {
-  .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-sans font-medium;
-  }
+.ui-checkbox-p1 {
+  @apply flex items-start mb-16 font-sans font-medium;
+}
 
-  .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans font-medium;
-  }
+.ui-checkbox-p2 {
+  @apply flex items-start mb-12 font-sans font-medium;
+}
 
-  .ui-checkbox-input {
-    @apply opacity-0 absolute h-20 w-20;
-  }
+.ui-checkbox-input {
+  @apply opacity-0 absolute h-20 w-20;
+}
 
-  .ui-checkbox-styled {
-    @apply w-20 h-20 mr-16;
-    @apply bg-white flex flex-shrink-0 justify-center items-center;
-    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
-  }
+.ui-checkbox-styled {
+  @apply w-20 h-20 mr-16;
+  @apply bg-white flex flex-shrink-0 justify-center items-center;
+  @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+}
 
-  .ui-checkbox-styled-tick {
-    @apply hidden text-white;
-  }
+.ui-checkbox-styled-tick {
+  @apply hidden text-white;
+}
 
-  .ui-checkbox-label-p1 {
-    @apply select-none;
-    @apply text-p1 font-medium text-cool-black;
-  }
+.ui-checkbox-label-p1 {
+  @apply select-none;
+  @apply text-p1 font-medium text-cool-black;
+}
 
-  .ui-checkbox-label-p2 {
-    @apply select-none;
-    @apply text-p2 font-medium text-cool-black;
-  }
+.ui-checkbox-label-p2 {
+  @apply select-none;
+  @apply text-p2 font-medium text-cool-black;
+}
 
-  .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-gui-unavailable border;
-  }
+.ui-checkbox-input:disabled + .ui-checkbox-styled {
+  @apply bg-gui-unavailable border;
+}
 
-  .ui-checkbox-input:focus + .ui-checkbox-styled {
-    border-width: 0.125rem;
-    @apply border-gui-focus;
-  }
+.ui-checkbox-input:focus + .ui-checkbox-styled {
+  border-width: 0.125rem;
+  @apply border-gui-focus;
+}
 
-  .ui-checkbox-input:checked + .ui-checkbox-styled {
-    @apply bg-active-orange border-dark-grey border;
-  }
+.ui-checkbox-input:checked + .ui-checkbox-styled {
+  @apply bg-active-orange border-dark-grey border;
+}
 
-  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
-    @apply block;
-  }
+.ui-checkbox-input:checked + .ui-checkbox-styled svg {
+  @apply block;
+}
 
-  .ui-textarea {
-    @apply font-sans font-medium text-cool-black text-p1;
-    @apply p-input mb-16;
-    @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
-    @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-  }
+.ui-textarea {
+  @apply font-sans font-medium text-cool-black text-p1;
+  @apply p-input mb-16;
+  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
+  @apply hover:bg-white hover:shadow-input hover:border-transparent;
+  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+}
 
-  .ui-textarea::placeholder {
-    /* CSS vars don't work in ::placeholder in Webkit :( */
-    /* color: var(--text-dark-grey); */
-    color: #76767c;
-  }
+.ui-textarea::placeholder {
+  /* CSS vars don't work in ::placeholder in Webkit :( */
+  /* color: var(--text-dark-grey); */
+  color: #76767c;
 }

package/src/core/styles/layout.css

@@ -1,21 +1,19 @@
-@layer components {
-  .ui-standard-container {
-    @apply w-full max-w-screen-xl mx-auto px-24 sm:px-32 md:px-40 lg:px-64;
-  }
+.ui-standard-container {
+  @apply w-full max-w-screen-xl mx-auto px-24 sm:px-32 md:px-40 lg:px-64;
+}
 
-  .ui-grid-gap {
-    @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
-  }
+.ui-grid-gap {
+  @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
+}
 
-  .ui-grid-gap-x {
-    @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32;
-  }
+.ui-grid-gap-x {
+  @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32;
+}
 
-  .ui-grid-px {
-    @apply px-24 sm:px-32 md:px-40 lg:px-64;
-  }
+.ui-grid-px {
+  @apply px-24 sm:px-32 md:px-40 lg:px-64;
+}
 
-  .ui-grid-mx {
-    @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64;
-  }
+.ui-grid-mx {
+  @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64;
 }