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

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, SetStateAction } from 'react';
+import { ReactNode, SetStateAction, HTMLAttributes } from 'react';
 
 interface CopyToClipboardButtonProps {
     value: string;
@@ -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;
@@ -174,7 +174,25 @@ declare const DEFAULT_TIMEOUT_MS_BY_TYPE: {
 };
 type Toaster = ReturnType<typeof buildToaster>;
 
-interface ToastContainerProps {
+type Placement = 'top-right';
+interface ToastContainerInnerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    toasts: Toast[];
+    /**
+     * The z-index of the toast container.
+     *
+     * @see {@link DEFAULT_TOAST_CONTAINER_Z_INDEX}
+     *
+     * @default 1000
+     */
+    zIndex?: number;
+    deleteToastById: (id: string) => void;
+    /**
+     * @default "top-right"
+     */
+    placement?: Placement;
+}
+
+interface ToastContainerProps extends Omit<ToastContainerInnerProps, 'toasts' | 'deleteToastById'> {
     toaster: Toaster;
 }
 declare function ToastContainer({ toaster }: ToastContainerProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, SetStateAction } from 'react';
+import { ReactNode, SetStateAction, HTMLAttributes } from 'react';
 
 interface CopyToClipboardButtonProps {
     value: string;
@@ -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;
@@ -174,7 +174,25 @@ declare const DEFAULT_TIMEOUT_MS_BY_TYPE: {
 };
 type Toaster = ReturnType<typeof buildToaster>;
 
-interface ToastContainerProps {
+type Placement = 'top-right';
+interface ToastContainerInnerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    toasts: Toast[];
+    /**
+     * The z-index of the toast container.
+     *
+     * @see {@link DEFAULT_TOAST_CONTAINER_Z_INDEX}
+     *
+     * @default 1000
+     */
+    zIndex?: number;
+    deleteToastById: (id: string) => void;
+    /**
+     * @default "top-right"
+     */
+    placement?: Placement;
+}
+
+interface ToastContainerProps extends Omit<ToastContainerInnerProps, 'toasts' | 'deleteToastById'> {
     toaster: Toaster;
 }
 declare function ToastContainer({ toaster }: ToastContainerProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -428,7 +440,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 +509,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 +518,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 +537,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 +574,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) {
@@ -615,27 +653,54 @@ var StyledPaper = (0, import_styled_components4.default)(import_eds_core_react3.
 
 // src/toast/ToastContainerInner.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function ToastContainerInner({
-  deleteToastById,
-  toasts,
-  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))
-    }
-  );
+var DEFAULT_TOAST_CONTAINER_Z_INDEX = 1e3;
+function ToastContainerInner(_a) {
+  var _b = _a, {
+    deleteToastById,
+    toasts,
+    placement = "top-right",
+    zIndex = DEFAULT_TOAST_CONTAINER_Z_INDEX
+  } = _b, containerProps = __objRest(_b, [
+    "deleteToastById",
+    "toasts",
+    "placement",
+    "zIndex"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Container, __spreadProps(__spreadValues({ $placement: placement, $zIndex: zIndex }, containerProps), { 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;
+  z-index: ${({ $zIndex }) => $zIndex};
+
+  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

@@ -17,6 +17,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -384,7 +396,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 +465,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 +474,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 +493,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 +530,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) {
@@ -571,27 +609,54 @@ var StyledPaper = styled4(Paper)`
 
 // src/toast/ToastContainerInner.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-function ToastContainerInner({
-  deleteToastById,
-  toasts,
-  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))
-    }
-  );
+var DEFAULT_TOAST_CONTAINER_Z_INDEX = 1e3;
+function ToastContainerInner(_a) {
+  var _b = _a, {
+    deleteToastById,
+    toasts,
+    placement = "top-right",
+    zIndex = DEFAULT_TOAST_CONTAINER_Z_INDEX
+  } = _b, containerProps = __objRest(_b, [
+    "deleteToastById",
+    "toasts",
+    "placement",
+    "zIndex"
+  ]);
+  return /* @__PURE__ */ jsx7(Container, __spreadProps(__spreadValues({ $placement: placement, $zIndex: zIndex }, containerProps), { children: toasts.map((toast) => /* @__PURE__ */ jsx7(ToastItem, { toast, onDelete: deleteToastById }, toast.id)) }));
 }
-function getClassNameByPlacement(placement) {
-  switch (placement) {
+var Container = styled5.div`
+  position: fixed;
+  z-index: ${({ $zIndex }) => $zIndex};
+
+  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.3",
   "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;
-  }
-}