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

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;
@@ -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;
@@ -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 });
@@ -147,7 +159,7 @@ function ErrorSnackbar({
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(MainColumn, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(HeaderWrapper, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Typography, { variant: "h6", children: error.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HeaderTypography, { variant: "h6", children: error.title }),
           error.detail && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BodyTypography, { children: error.detail })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -162,7 +174,7 @@ function ErrorSnackbar({
         )
       ] }),
       error.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Typography, { variant: "h6", children: "Error details:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HeaderTypography, { variant: "h6", children: "Error details:" }),
         error.error.message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BodyTypography, { children: error.error.message }),
         error.error.possibleAction && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BodyTypography, { children: error.error.possibleAction }),
         ((_a = error.error.accessRequirements) == null ? void 0 : _a.length) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledList, { style: { color: "inherit" }, children: error.error.accessRequirements.map((accessRequirement) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BodyTypography, { children: [
@@ -206,9 +218,13 @@ var HeaderWrapper = import_styled_components2.default.div`
   display: flex;
   justify-content: space-between;
 `;
+var HeaderTypography = (0, import_styled_components2.default)(import_eds_core_react2.Typography)`
+  color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
+`;
 var BodyTypography = (0, import_styled_components2.default)(import_eds_core_react2.Typography)`
   font-size: 0.857rem; // 14px
   word-break: break-word;
+  color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
 `;
 var MetadataWrapper = import_styled_components2.default.div`
   display: flex;
@@ -217,6 +233,7 @@ var MetadataWrapper = import_styled_components2.default.div`
 `;
 var MetadataTypography = (0, import_styled_components2.default)(import_eds_core_react2.Typography)`
   font-size: 0.625rem; // 10px
+  color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
 `;
 var CloseButton = (0, import_styled_components2.default)(import_eds_core_react2.Button)`
   margin: -0.5rem;
@@ -641,16 +658,24 @@ 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)(Container, { $placement: placement, className: 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)) }));
 }
 var Container = import_styled_components5.default.div`
   position: fixed;
+  z-index: ${({ $zIndex }) => $zIndex};
 
   padding: 16px;
   margin: -16px;

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) => {
@@ -103,7 +115,7 @@ function ErrorSnackbar({
     /* @__PURE__ */ jsxs2(MainColumn, { children: [
       /* @__PURE__ */ jsxs2(HeaderWrapper, { children: [
         /* @__PURE__ */ jsxs2("div", { children: [
-          /* @__PURE__ */ jsx2(Typography, { variant: "h6", children: error.title }),
+          /* @__PURE__ */ jsx2(HeaderTypography, { variant: "h6", children: error.title }),
           error.detail && /* @__PURE__ */ jsx2(BodyTypography, { children: error.detail })
         ] }),
         /* @__PURE__ */ jsx2(
@@ -118,7 +130,7 @@ function ErrorSnackbar({
         )
       ] }),
       error.error && /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx2(Typography, { variant: "h6", children: "Error details:" }),
+        /* @__PURE__ */ jsx2(HeaderTypography, { variant: "h6", children: "Error details:" }),
         error.error.message && /* @__PURE__ */ jsx2(BodyTypography, { children: error.error.message }),
         error.error.possibleAction && /* @__PURE__ */ jsx2(BodyTypography, { children: error.error.possibleAction }),
         ((_a = error.error.accessRequirements) == null ? void 0 : _a.length) && /* @__PURE__ */ jsx2(StyledList, { style: { color: "inherit" }, children: error.error.accessRequirements.map((accessRequirement) => /* @__PURE__ */ jsx2(StyledList.Item, { children: /* @__PURE__ */ jsxs2(BodyTypography, { children: [
@@ -162,9 +174,13 @@ var HeaderWrapper = styled2.div`
   display: flex;
   justify-content: space-between;
 `;
+var HeaderTypography = styled2(Typography)`
+  color: ${tokens.colors.text.static_icons__default.rgba};
+`;
 var BodyTypography = styled2(Typography)`
   font-size: 0.857rem; // 14px
   word-break: break-word;
+  color: ${tokens.colors.text.static_icons__default.rgba};
 `;
 var MetadataWrapper = styled2.div`
   display: flex;
@@ -173,6 +189,7 @@ var MetadataWrapper = styled2.div`
 `;
 var MetadataTypography = styled2(Typography)`
   font-size: 0.625rem; // 10px
+  color: ${tokens.colors.text.static_icons__default.rgba};
 `;
 var CloseButton = styled2(Button2)`
   margin: -0.5rem;
@@ -597,16 +614,24 @@ 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(Container, { $placement: placement, className: 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)) }));
 }
 var Container = styled5.div`
   position: fixed;
+  z-index: ${({ $zIndex }) => $zIndex};
 
   padding: 16px;
   margin: -16px;

package/package.json

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