@dt-dds/react-toast 1.0.0-beta.100

package/dist/index.js

@@ -0,0 +1,401 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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 __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../box/dist/index.js
+var require_dist = __commonJS({
+  "../box/dist/index.js"(exports2, module2) {
+    "use strict";
+    var __create2 = Object.create;
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __getProtoOf2 = Object.getPrototypeOf;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from === "object" || typeof from === "function") {
+        for (let key of __getOwnPropNames2(from))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
+      // If the importer is in node compatibility mode or this is not an ESM
+      // file that has been converted to a CommonJS file using a Babel-
+      // compatible transform (i.e. "__esModule" has not been set), then set
+      // "default" to the CommonJS "module.exports" for node compatibility.
+      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target,
+      mod
+    ));
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var index_exports2 = {};
+    __export2(index_exports2, {
+      Box: () => Box2
+    });
+    module2.exports = __toCommonJS2(index_exports2);
+    var import_styled2 = __toESM2(require("@emotion/styled"));
+    var BoxStyled = import_styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+    var import_jsx_runtime3 = require("react/jsx-runtime");
+    var Box2 = ({
+      dataTestId,
+      children,
+      element = "div",
+      style
+    }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BoxStyled, { as: element, "data-testid": dataTestId, style, children });
+    };
+  }
+});
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  Toast: () => Toast_default,
+  ToastPosition: () => ToastPosition,
+  ToastType: () => ToastType,
+  Toaster: () => Toaster_default,
+  dismissToast: () => dismissToast,
+  emitToast: () => emitToast
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Toast.tsx
+var import_react_box = __toESM(require_dist());
+var import_react_icon = require("@dt-dds/react-icon");
+var import_react_typography = require("@dt-dds/react-typography");
+var import_react2 = require("@emotion/react");
+
+// src/constants/enums.ts
+var ToastPosition = /* @__PURE__ */ ((ToastPosition2) => {
+  ToastPosition2["TopLeft"] = "top-left";
+  ToastPosition2["TopCenter"] = "top-center";
+  ToastPosition2["TopRight"] = "top-right";
+  ToastPosition2["BottomLeft"] = "bottom-left";
+  ToastPosition2["BottomCenter"] = "bottom-center";
+  ToastPosition2["BottomRight"] = "bottom-right";
+  return ToastPosition2;
+})(ToastPosition || {});
+var ToastType = /* @__PURE__ */ ((ToastType2) => {
+  ToastType2["Success"] = "success";
+  ToastType2["Error"] = "error";
+  ToastType2["Info"] = "informative";
+  ToastType2["Warning"] = "warning";
+  return ToastType2;
+})(ToastType || {});
+
+// src/Toast.styled.ts
+var import_react = require("@emotion/react");
+var import_styled = __toESM(require("@emotion/styled"));
+var fadeIn = import_react.keyframes`
+  from { opacity: 0; }
+  to   { opacity: 1; }
+`;
+var ToastStyled = import_styled.default.div`
+  display: flex;
+  flex-direction: column;
+  width: 360px;
+  animation: ${fadeIn} 0.75s ease-in;
+  transition: all 0.75s ease-in-out;
+  overflow: hidden;
+  ${({ theme, isVisible, type }) => `
+    border: 1px solid ${theme.palette[type].default};
+    border-left: 6px solid ${theme.palette[type].default};
+    background-color: ${theme.palette[type].light};
+    opacity: ${isVisible ? 1 : 0};
+    border-radius: ${theme.shape.toast};
+    padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_50} ${theme.spacing.spacing_50} ${theme.spacing.spacing_30};
+  `}
+`;
+var ToastMessageStyled = import_styled.default.div`
+  ${({ theme, type }) => `
+    ${theme.fontStyles.bodyMdRegular};
+    color: ${theme.palette[type].dark};
+    overflow: hidden;
+    word-break: break-word;
+    hyphens: auto;
+    display: -webkit-box;
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    margin-inline: calc(24px + ${theme.spacing.spacing_30})
+  `}
+`;
+var ToastButtonCloseStyled = import_styled.default.button`
+  ${({ theme, toastType }) => `
+    color: ${theme.palette[toastType].dark};
+    border: 0;
+    cursor: pointer;
+    background: transparent;
+    align-self: flex-start;
+    margin-left: auto;
+    font-size: 0;
+    line-height: 0;
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.primary.default};
+      outline-offset: 1px;
+    }
+
+    &:hover {
+      background-color: ${theme.palette[toastType].medium};
+    }
+    
+  `}
+`;
+var ActionsContainer = import_styled.default.div`
+  ${({ theme, type }) => `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: ${theme.spacing.spacing_20};
+    margin-top: ${theme.spacing.spacing_30};
+
+    button {
+      color: ${theme.palette[type].dark};
+      
+      &:hover {
+        background-color: ${theme.palette[type].medium};
+        color: ${theme.palette[type].dark};
+      }
+    }
+`}
+`;
+
+// src/Toast.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToastIcons = {
+  ["success" /* Success */]: "check_circle",
+  ["error" /* Error */]: "error",
+  ["informative" /* Info */]: "info",
+  ["warning" /* Warning */]: "warning"
+};
+var Toast = ({
+  id,
+  dataTestId,
+  title,
+  message,
+  onClose,
+  type,
+  isVisible = true,
+  dismissible = true,
+  children
+}) => {
+  const dataTest = dataTestId != null ? dataTestId : `toast-${id}`;
+  const theme = (0, import_react2.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    ToastStyled,
+    {
+      "data-testid": dataTest,
+      isVisible,
+      type,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_react_box.Box,
+          {
+            style: {
+              alignSelf: "start",
+              flexDirection: "row",
+              width: "100%",
+              gap: theme.spacing.spacing_30
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: ToastIcons[type], color: theme.palette[type].dark }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_react_typography.Typography,
+                {
+                  color: `${type}.dark`,
+                  element: "span",
+                  fontStyles: "bodyLgBold",
+                  children: title
+                }
+              ),
+              dismissible ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ToastButtonCloseStyled,
+                {
+                  "data-testId": "close-button",
+                  onClick: onClose,
+                  toastType: type,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "close", color: theme.palette[type].dark })
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastMessageStyled, { type, children: message }),
+        Boolean(children) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContainer, { type, children }) : null
+      ]
+    },
+    id
+  );
+};
+var Toast_default = Toast;
+
+// src/Toaster.tsx
+var import_react_button = require("@dt-dds/react-button");
+var import_react_core = require("@dt-dds/react-core");
+var import_react3 = require("@emotion/react");
+var import_react4 = __toESM(require("react"));
+var import_react_hot_toast = require("react-hot-toast");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TOAST_DEFAULT_DURATION = 4e3;
+var TOAST_ERROR_DURATION = Infinity;
+var smallPosition = "bottom-center" /* BottomCenter */;
+var defaultPosition = "bottom-right" /* BottomRight */;
+var dismissToast = (id) => {
+  import_react_hot_toast.toast.dismiss(id);
+};
+var processChildren = (children) => {
+  return import_react4.default.Children.map(children, (child) => {
+    if (!import_react4.default.isValidElement(child)) {
+      return child;
+    }
+    if (child.type === import_react_button.Button) {
+      return import_react4.default.cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
+        size: "small",
+        variant: "text"
+      }));
+    }
+    if (child.props.children) {
+      return import_react4.default.cloneElement(
+        child,
+        __spreadValues({}, child.props),
+        processChildren(child.props.children)
+      );
+    }
+    return child;
+  });
+};
+var emitToast = (_a) => {
+  var _b = _a, {
+    type,
+    title,
+    message,
+    children,
+    dismissible
+  } = _b, props = __objRest(_b, [
+    "type",
+    "title",
+    "message",
+    "children",
+    "dismissible"
+  ]);
+  const duration = type === "error" /* Error */ ? TOAST_ERROR_DURATION : TOAST_DEFAULT_DURATION;
+  import_react_hot_toast.toast.custom(
+    (t) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Toast_default,
+        {
+          dismissible,
+          id: t.id,
+          isVisible: t.visible,
+          message,
+          onClose: () => import_react_hot_toast.toast.dismiss(t.id),
+          title,
+          type,
+          children: processChildren(children)
+        }
+      );
+    },
+    __spreadValues({
+      duration
+    }, props)
+  );
+};
+var Toaster = (_a) => {
+  var _b = _a, { gutter = 8 } = _b, props = __objRest(_b, ["gutter"]);
+  const theme = (0, import_react3.useTheme)();
+  const small = (0, import_react_core.useMedia)(`(max-width: ${theme.breakpoints.mq2}px)`);
+  const position = small ? smallPosition : defaultPosition;
+  const margin = small ? 8 : 16;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_hot_toast.Toaster,
+    __spreadProps(__spreadValues({
+      gutter,
+      position
+    }, props), {
+      containerStyle: __spreadProps(__spreadValues({
+        bottom: 16,
+        right: margin,
+        top: margin,
+        left: margin
+      }, props.containerStyle), {
+        zIndex: import_react_core.TOAST_Z_INDEX
+      })
+    })
+  );
+};
+var Toaster_default = Toaster;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toast,
+  ToastPosition,
+  ToastType,
+  Toaster,
+  dismissToast,
+  emitToast
+});