krl-alfred 2.17.30 → 2.17.31

package/dist/components/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ToastProps } from "./props";
 import { toast } from "./core/state";
-declare const Toaster: ({ size, show, children, onSecondaryAction, hasLoading, }: ToastProps) => React.ReactPortal;
+declare const Toaster: ({ size, show, children, onSecondaryAction, hasLoading, showCloseIcon, onClose, }: ToastProps) => React.ReactPortal;
 export { toast, Toaster };

package/dist/components/Toast/Toast.js

@@ -26,10 +26,10 @@ var state_1 = require("./core/state");
 Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return state_1.toast; } });
 var Loader_1 = __importDefault(require("../Loader"));
 var Toaster = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? props_1.ToastDefault.size : _b, _c = _a.show, show = _c === void 0 ? props_1.ToastDefault.show : _c, _d = _a.children, children = _d === void 0 ? props_1.ToastDefault.children : _d, _e = _a.onSecondaryAction, onSecondaryAction = _e === void 0 ? props_1.ToastDefault.onSecondaryAction : _e, _f = _a.hasLoading, hasLoading = _f === void 0 ? props_1.ToastDefault.hasLoading : _f;
-    var _g = (0, react_1.useState)(show), isShowToast = _g[0], setIsShowToast = _g[1];
-    var _h = (0, react_1.useState)({}), toastProps = _h[0], setToastProps = _h[1];
-    var _j = (0, react_1.useState)("24px"), iconSize = _j[0], setIconSize = _j[1];
+    var _b = _a.size, size = _b === void 0 ? props_1.ToastDefault.size : _b, _c = _a.show, show = _c === void 0 ? props_1.ToastDefault.show : _c, _d = _a.children, children = _d === void 0 ? props_1.ToastDefault.children : _d, _e = _a.onSecondaryAction, onSecondaryAction = _e === void 0 ? props_1.ToastDefault.onSecondaryAction : _e, _f = _a.hasLoading, hasLoading = _f === void 0 ? props_1.ToastDefault.hasLoading : _f, _g = _a.showCloseIcon, showCloseIcon = _g === void 0 ? props_1.ToastDefault.showCloseIcon : _g, _h = _a.onClose, onClose = _h === void 0 ? props_1.ToastDefault.onClose : _h;
+    var _j = (0, react_1.useState)(show), isShowToast = _j[0], setIsShowToast = _j[1];
+    var _k = (0, react_1.useState)({}), toastProps = _k[0], setToastProps = _k[1];
+    var _l = (0, react_1.useState)("24px"), iconSize = _l[0], setIconSize = _l[1];
     (0, react_1.useEffect)(function () {
         return state_1.ToastState.subscribe(function (toast) {
             setToastProps(__assign(__assign({}, props_1.ToastDefault), toast));
@@ -73,8 +73,16 @@ var Toaster = function (_a) {
                 setIconSize("24px");
         }
     }, [toastProps, size]);
+    var handleClose = function () {
+        if (toastProps.onClose) {
+            toastProps.onClose();
+        }
+        else {
+            setIsShowToast(false);
+        }
+    };
     return (isShowToast &&
-        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Toast_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsx)(Toast_styled_1.ToastStyled, __assign({ "$size": toastProps.size, "$alignment": toastProps.alignment, "$variant": toastProps.variant }, { children: toastProps.hasLoading ? ((0, jsx_runtime_1.jsxs)("div", { children: [(toastProps.icon) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: toastProps.icon, width: iconSize, height: iconSize }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "loaderWrapper" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "1.5rem", height: "1.5rem" }) }))] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(toastProps.icon) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: toastProps.icon, width: iconSize, height: iconSize }) }))), (toastProps.title) && ((0, jsx_runtime_1.jsx)("h5", { className: "title", dangerouslySetInnerHTML: { __html: toastProps.title } })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: toastProps.children || children })), (toastProps.showPrimaryButton || toastProps.showSecondaryButton) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(toastProps.showSecondaryButton) && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: function (e) {
+        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Toast_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsx)(Toast_styled_1.ToastStyled, __assign({ "$size": toastProps.size, "$alignment": toastProps.alignment, "$variant": toastProps.variant }, { children: toastProps.hasLoading ? ((0, jsx_runtime_1.jsxs)("div", { children: [(toastProps.icon) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: toastProps.icon, width: iconSize, height: iconSize }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "loaderWrapper" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "1.5rem", height: "1.5rem" }) }))] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [toastProps.showCloseIcon && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "toastrHeader" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClose, className: "closeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) })) }))), (toastProps.icon) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: toastProps.icon, width: iconSize, height: iconSize }) }))), (toastProps.title) && ((0, jsx_runtime_1.jsx)("h5", { className: "title", dangerouslySetInnerHTML: { __html: toastProps.title } })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: toastProps.children || children })), (toastProps.showPrimaryButton || toastProps.showSecondaryButton) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(toastProps.showSecondaryButton) && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: function (e) {
                                         toastProps.onSecondaryAction(e);
                                         onSecondaryAction(e);
                                         setIsShowToast(false);

package/dist/components/Toast/Toast.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayStyled = exports.ToastStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ToastStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-width: calc(100vw - 2rem);\n  padding: 2rem;\n  display: flex;\n  align-items: center;\n  ", ";\n  width: ", ";\n  min-height: ", ";\n  > div{\n    width: 100%;\n  }\n  \n  .icon{\n    width: ", ";\n\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    text-align: center;\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    margin:\n        ", ";\n    svg{\n\n      width: ", ";\n\n      height: ", ";\n      color: #fff;\n    }\n  }\n  .loaderWrapper{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .title {\n    margin: 2rem 0 0 0;\n    padding: 0;\n    font:var(--title-extra-bold-16-19);\n  }\n  \n  .content {\n    margin: 1rem 0 0 0;\n    font:var(--body-regular-14-17);\n    &:is(:empty){\n      display: none;\n    }\n  }\n  .bottom{\n    margin: 2rem 0 0 0;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    column-gap: 1rem;\n    button{\n      white-space: nowrap;\n    }\n  }\n"], ["\n  background: white;\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-width: calc(100vw - 2rem);\n  padding: 2rem;\n  display: flex;\n  align-items: center;\n  ", ";\n  width: ", ";\n  min-height: ", ";\n  > div{\n    width: 100%;\n  }\n  \n  .icon{\n    width: ", ";\n\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    text-align: center;\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    margin:\n        ", ";\n    svg{\n\n      width: ", ";\n\n      height: ", ";\n      color: #fff;\n    }\n  }\n  .loaderWrapper{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .title {\n    margin: 2rem 0 0 0;\n    padding: 0;\n    font:var(--title-extra-bold-16-19);\n  }\n  \n  .content {\n    margin: 1rem 0 0 0;\n    font:var(--body-regular-14-17);\n    &:is(:empty){\n      display: none;\n    }\n  }\n  .bottom{\n    margin: 2rem 0 0 0;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    column-gap: 1rem;\n    button{\n      white-space: nowrap;\n    }\n  }\n"])), function (props) {
+exports.ToastStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-width: calc(100vw - 2rem);\n  padding: 2rem;\n  display: flex;\n  align-items: center;\n  position: relative;\n  ", ";\n  width: ", ";\n  min-height: ", ";\n  > div{\n    width: 100%;\n  }\n  \n  .icon{\n    width: ", ";\n\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    text-align: center;\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    margin:\n        ", ";\n    svg{\n\n      width: ", ";\n\n      height: ", ";\n      color: #fff;\n    }\n  }\n  .loaderWrapper{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .title {\n    margin: 2rem 0 0 0;\n    padding: 0;\n    font:var(--title-extra-bold-16-19);\n  }\n  \n  .content {\n    margin: 1rem 0 0 0;\n    font:var(--body-regular-14-17);\n    &:is(:empty){\n      display: none;\n    }\n  }\n  .bottom{\n    margin: 2rem 0 0 0;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    column-gap: 1rem;\n    button{\n      white-space: nowrap;\n    }\n  }\n\n  .toastrHeader{\n    align-items: center;\n    justify-content: flex-end;\n    width: 100%;\n    padding: 0 0 24px 0;\n    display: flex;\n    \n    .closeIcon {\n      width: 32px;\n      height: 32px;\n      border-radius: 0.5rem;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1;\n      &:hover {\n        box-shadow: 0 6px 30px var(--box-shadow-color);\n      }\n    }\n  }\n"], ["\n  background: white;\n  border-radius: 0.5rem;\n  box-sizing: border-box;\n  max-width: calc(100vw - 2rem);\n  padding: 2rem;\n  display: flex;\n  align-items: center;\n  position: relative;\n  ", ";\n  width: ", ";\n  min-height: ", ";\n  > div{\n    width: 100%;\n  }\n  \n  .icon{\n    width: ", ";\n\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    text-align: center;\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    margin:\n        ", ";\n    svg{\n\n      width: ", ";\n\n      height: ", ";\n      color: #fff;\n    }\n  }\n  .loaderWrapper{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .title {\n    margin: 2rem 0 0 0;\n    padding: 0;\n    font:var(--title-extra-bold-16-19);\n  }\n  \n  .content {\n    margin: 1rem 0 0 0;\n    font:var(--body-regular-14-17);\n    &:is(:empty){\n      display: none;\n    }\n  }\n  .bottom{\n    margin: 2rem 0 0 0;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    column-gap: 1rem;\n    button{\n      white-space: nowrap;\n    }\n  }\n\n  .toastrHeader{\n    align-items: center;\n    justify-content: flex-end;\n    width: 100%;\n    padding: 0 0 24px 0;\n    display: flex;\n    \n    .closeIcon {\n      width: 32px;\n      height: 32px;\n      border-radius: 0.5rem;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1;\n      &:hover {\n        box-shadow: 0 6px 30px var(--box-shadow-color);\n      }\n    }\n  }\n"])), function (props) {
     switch (props.$alignment) {
         case 'left':
             return "\n          justify-content: flex-start;\n          text-align: start;\n        ";

package/dist/components/Toast/core/state.d.ts

@@ -1,10 +1,10 @@
-import { ToastDefault } from "../props";
+import { Toast } from "../props";
 declare class Observer {
-    subscribers: Array<(toast: keyof typeof ToastDefault) => void>;
+    subscribers: Array<(toast: Toast) => void>;
     constructor();
-    subscribe: (subscriber: (toast: keyof typeof ToastDefault) => void) => () => void;
-    publish: (data: keyof typeof ToastDefault) => void;
-    addToast: (data: keyof typeof ToastDefault) => void;
+    subscribe: (subscriber: (toast: Toast) => void) => () => void;
+    publish: (data: Toast) => void;
+    addToast: (data: Toast) => void;
 }
 export declare const ToastState: Observer;
 export declare const toast: any;

package/dist/components/Toast/props.d.ts

@@ -7,12 +7,14 @@ export declare const variant: string[];
 type VARIANT = typeof variant[number];
 export declare const iconNames: string[];
 type ICON = typeof iconNames[any];
-interface Toast {
+export interface Toast {
     size?: SIZES;
     alignment?: ALIGNMENT;
     variant?: VARIANT;
     show?: boolean;
     hasClosing?: boolean;
+    showCloseIcon?: boolean;
+    onClose?(): void;
     title?: string;
     children?: React.ReactNode;
     setShow?(b: boolean): void;

package/dist/components/Toast/props.js

@@ -12,6 +12,8 @@ exports.ToastDefault = {
     variant: null,
     show: null,
     hasClosing: true,
+    showCloseIcon: false,
+    onClose: null,
     title: null,
     children: null,
     setShow: null,

package/dist/components/Toast/stories/Toast.stories.d.ts

@@ -42,5 +42,6 @@ export declare const Default: {
         showSecondaryButton: boolean;
         secondaryButtonText: string;
         hasLoading: boolean;
+        showCloseIcon: boolean;
     };
 };

package/dist/components/Toast/stories/Toast.stories.js

@@ -23,6 +23,7 @@ var Button_1 = __importDefault(require("../../Button"));
 exports.default = {
     title: 'Components/Toast',
     component: function (props) {
+        console.log(props);
         var handleShowToast = function () { return (0, Toast_1.toast)(props); };
         return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Toast_1.Toaster, {}), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: handleShowToast }, { children: "Show Toast" }))] }));
     },
@@ -50,5 +51,6 @@ exports.Default = {
         showSecondaryButton: false,
         secondaryButtonText: 'Secondary',
         hasLoading: false,
+        showCloseIcon: true,
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.17.30",
+  "version": "2.17.31",
   "files": [
     "dist"
   ],