@equinor/cpl-error-snackbar-react 0.1.1 → 0.1.2

package/dist/index.d.mts

@@ -159,7 +159,7 @@ interface Toast {
 interface BuildToasterOptions {
     timeoutOverrides?: Partial<Record<ToastType, ToastTimeout>>;
 }
-declare function buildToaster(options: BuildToasterOptions): {
+declare function buildToaster(options?: BuildToasterOptions): {
     useState: () => readonly [Toast[], (data: SetStateAction<Toast[]>) => void];
     create: (toast: Omit<Toast, "id" | "timeout">) => `${string}-${string}-${string}-${string}-${string}`;
     update: (id: string, toast: Partial<Omit<Toast, "id" | "timeout">>) => void;

package/dist/index.d.ts

@@ -159,7 +159,7 @@ interface Toast {
 interface BuildToasterOptions {
     timeoutOverrides?: Partial<Record<ToastType, ToastTimeout>>;
 }
-declare function buildToaster(options: BuildToasterOptions): {
+declare function buildToaster(options?: BuildToasterOptions): {
     useState: () => readonly [Toast[], (data: SetStateAction<Toast[]>) => void];
     create: (toast: Omit<Toast, "id" | "timeout">) => `${string}-${string}-${string}-${string}-${string}`;
     update: (id: string, toast: Partial<Omit<Toast, "id" | "timeout">>) => void;

package/dist/index.js

@@ -428,7 +428,7 @@ function itemIsDefined(e) {
 
 // src/toast/createToaster.ts
 var import_react3 = require("react");
-function buildToaster(options) {
+function buildToaster(options = {}) {
   const { timeoutOverrides = {} } = options;
   const KEY = "toasts";
   const state = { [KEY]: [] };
@@ -497,8 +497,8 @@ var DEFAULT_TIMEOUT_MS_BY_TYPE = {
   danger: "persistent"
 };
 
-// src/toast/ToastContainerInner.module.css
-var ToastContainerInner_default = {};
+// src/toast/ToastContainerInner.tsx
+var import_styled_components5 = __toESM(require("styled-components"));
 
 // src/toast/ToastItem.tsx
 var import_eds_core_react3 = require("@equinor/eds-core-react");
@@ -506,11 +506,6 @@ var import_eds_icons3 = require("@equinor/eds-icons");
 var import_eds_tokens2 = require("@equinor/eds-tokens");
 var import_react4 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
-
-// src/toast/ToastItem.module.css
-var ToastItem_default = {};
-
-// src/toast/ToastItem.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function ToastItem({ toast, onDelete }) {
   const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
@@ -530,7 +525,6 @@ function ToastItem({ toast, onDelete }) {
     {
       elevation: "raised",
       $toastType: toast.type,
-      className: `${ToastItem_default.toast} ${ToastItem_default.slideIn}`,
       onMouseOver: () => setIsHovered(true),
       onMouseOut: () => setIsHovered(false),
       children: [
@@ -568,7 +562,39 @@ var StyledPaper = (0, import_styled_components4.default)(import_eds_core_react3.
   }
 
   border: 0;
-  padding: 12px 16px;
+
+  transition: 50ms ease-out;
+
+  border-radius: 4px;
+
+  padding: 4px 8px 4px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+
+  border: 2px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+
+  @keyframes toast-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(20%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes toast-out-collapse {
+    from {
+      height: auto;
+    }
+    to {
+      max-height: 0;
+    }
+  }
+
+  animation: toast-in-right 150ms ease-out;
 
   ${({ $toastType }) => {
   switch ($toastType) {
@@ -621,21 +647,40 @@ function ToastContainerInner({
   placement = "top-right",
   toastContainerClassName = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      className: `${ToastContainerInner_default.wrapper} ${getClassNameByPlacement(placement)} ${toastContainerClassName}`,
-      children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastItem, { toast, onDelete: deleteToastById }, toast.id))
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Container, { $placement: placement, className: toastContainerClassName, children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastItem, { toast, onDelete: deleteToastById }, toast.id)) });
 }
-function getClassNameByPlacement(placement) {
-  switch (placement) {
+var Container = import_styled_components5.default.div`
+  position: fixed;
+
+  padding: 16px;
+  margin: -16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  max-height: min(600px, 70dvh);
+  width: 24rem;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* Hide when no toasts */
+  &:empty {
+    display: none;
+  }
+
+  ${({ $placement }) => {
+  switch ($placement) {
     case "top-right": {
-      return ToastContainerInner_default["top-right"];
+      return import_styled_components5.css`
+          top: 16px;
+          right: 16px;
+        `;
     }
   }
-}
+}}
+`;
 
 // src/toast/ToastContainer.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -384,7 +384,7 @@ function itemIsDefined(e) {
 
 // src/toast/createToaster.ts
 import { useEffect as useEffect2, useState as useReactState } from "react";
-function buildToaster(options) {
+function buildToaster(options = {}) {
   const { timeoutOverrides = {} } = options;
   const KEY = "toasts";
   const state = { [KEY]: [] };
@@ -453,8 +453,8 @@ var DEFAULT_TIMEOUT_MS_BY_TYPE = {
   danger: "persistent"
 };
 
-// src/toast/ToastContainerInner.module.css
-var ToastContainerInner_default = {};
+// src/toast/ToastContainerInner.tsx
+import styled5, { css as css2 } from "styled-components";
 
 // src/toast/ToastItem.tsx
 import { Button as Button3, Icon as Icon3, Paper, Typography as Typography2 } from "@equinor/eds-core-react";
@@ -462,11 +462,6 @@ import { check as check2, clear, error_filled as error_filled2, info_circle, war
 import { tokens as tokens2 } from "@equinor/eds-tokens";
 import { useEffect as useEffect3, useState as useState3 } from "react";
 import styled4, { css } from "styled-components";
-
-// src/toast/ToastItem.module.css
-var ToastItem_default = {};
-
-// src/toast/ToastItem.tsx
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function ToastItem({ toast, onDelete }) {
   const [isHovered, setIsHovered] = useState3(false);
@@ -486,7 +481,6 @@ function ToastItem({ toast, onDelete }) {
     {
       elevation: "raised",
       $toastType: toast.type,
-      className: `${ToastItem_default.toast} ${ToastItem_default.slideIn}`,
       onMouseOver: () => setIsHovered(true),
       onMouseOut: () => setIsHovered(false),
       children: [
@@ -524,7 +518,39 @@ var StyledPaper = styled4(Paper)`
   }
 
   border: 0;
-  padding: 12px 16px;
+
+  transition: 50ms ease-out;
+
+  border-radius: 4px;
+
+  padding: 4px 8px 4px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+
+  border: 2px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+
+  @keyframes toast-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(20%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes toast-out-collapse {
+    from {
+      height: auto;
+    }
+    to {
+      max-height: 0;
+    }
+  }
+
+  animation: toast-in-right 150ms ease-out;
 
   ${({ $toastType }) => {
   switch ($toastType) {
@@ -577,21 +603,40 @@ function ToastContainerInner({
   placement = "top-right",
   toastContainerClassName = ""
 }) {
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: `${ToastContainerInner_default.wrapper} ${getClassNameByPlacement(placement)} ${toastContainerClassName}`,
-      children: toasts.map((toast) => /* @__PURE__ */ jsx7(ToastItem, { toast, onDelete: deleteToastById }, toast.id))
-    }
-  );
+  return /* @__PURE__ */ jsx7(Container, { $placement: placement, className: toastContainerClassName, children: toasts.map((toast) => /* @__PURE__ */ jsx7(ToastItem, { toast, onDelete: deleteToastById }, toast.id)) });
 }
-function getClassNameByPlacement(placement) {
-  switch (placement) {
+var Container = styled5.div`
+  position: fixed;
+
+  padding: 16px;
+  margin: -16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  max-height: min(600px, 70dvh);
+  width: 24rem;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* Hide when no toasts */
+  &:empty {
+    display: none;
+  }
+
+  ${({ $placement }) => {
+  switch ($placement) {
     case "top-right": {
-      return ToastContainerInner_default["top-right"];
+      return css2`
+          top: 16px;
+          right: 16px;
+        `;
     }
   }
-}
+}}
+`;
 
 // src/toast/ToastContainer.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/cpl-error-snackbar-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/dist/index.css

@@ -1,52 +0,0 @@
-/* src/toast/ToastContainerInner.module.css */
-.wrapper {
-  position: fixed;
-  padding: 16px;
-  margin: -16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-height: min(600px, 70dvh);
-  width: 24rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-  &:empty {
-    display: none;
-  }
-}
-.top-right {
-  top: 16px;
-  right: 16px;
-}
-
-/* src/toast/ToastItem.module.css */
-.slideIn {
-  animation: toast-in-right 150ms ease-out;
-}
-.toast {
-  transition: 50ms ease-out;
-  border-radius: 4px;
-  padding: 4px 8px 4px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: stretch;
-  border: 2px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
-}
-@keyframes toast-in-right {
-  from {
-    opacity: 0;
-    transform: translateX(20%);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes toast-out-collapse {
-  from {
-    height: auto;
-  }
-  to {
-    max-height: 0;
-  }
-}