@via-profit/ui-kit 0.3.0 → 0.5.0

package/Toast/ToastCloseButton.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const StyledButton = styled_1.default.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75em;
+  height: 1.75em;
+  margin: -0.25em -0.5em -0.25em 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: inherit;
+  opacity: 0.55;
+  cursor: pointer;
+  transition:
+    opacity 150ms ease-out,
+    background-color 150ms ease-out;
+
+  &:hover {
+    opacity: 1;
+    background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
+  }
+
+  &:focus-visible {
+    opacity: 1;
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 0;
+  }
+
+  & svg {
+    width: 0.85em;
+    height: 0.85em;
+  }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
+`;
+const ToastCloseButton = (props, ref) => (react_1.default.createElement(StyledButton, Object.assign({ type: "button" }, props, { ref: ref }),
+    react_1.default.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": true },
+        react_1.default.createElement("path", { d: "m5 5 14 14M19 5 5 19", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round" }))));
+exports.default = react_1.default.forwardRef(ToastCloseButton);

package/Toast/ToastContainer.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { ToastCardProps } from './ToastCard';
+import { ToastIconProps } from './ToastIcon';
+import { ToastCloseButtonProps } from './ToastCloseButton';
+import { ToastActionProps } from './ToastAction';
+import { ToastPosition } from './store';
+export interface ToastContainerProps {
+    /**
+     * The container shows only the toasts with the same `containerId`.
+     * Needed only if there are several containers, e.g. with the different look
+     * Default: undefined
+     */
+    readonly containerId?: string;
+    /**
+     * Where the toasts appear if the toast has no own `position`
+     * Default: `top-right`
+     */
+    readonly position?: ToastPosition;
+    /**
+     * The time in ms before the toast closes, or `false` to keep the toasts until the user closes them
+     * Default: 5000
+     */
+    readonly autoClose?: number | false;
+    /**
+     * The maximum number of the toasts on the screen. The rest wait in the queue
+     * Default: undefined (no limit)
+     */
+    readonly limit?: number;
+    /**
+     * Default: true
+     */
+    readonly closeButton?: boolean;
+    /**
+     * The label of the close button for the screen readers
+     * Default: `Close`
+     */
+    readonly closeButtonLabel?: string;
+    /**
+     * Closes the toast on the click. The clicks on the buttons, links and fields inside the toast are not counted
+     * Default: true
+     */
+    readonly closeOnClick?: boolean;
+    /**
+     * Default: true
+     */
+    readonly pauseOnHover?: boolean;
+    /**
+     * Default: true
+     */
+    readonly pauseOnFocusLoss?: boolean;
+    /**
+     * The new toast appears above the previous ones
+     * Default: false
+     */
+    readonly newestOnTop?: boolean;
+    /**
+     * The key that moves the focus to the newest toast, e.g. to press its button without the mouse
+     * Default: `F8`
+     */
+    readonly hotkey?: string | null;
+    /**
+     * The label of the notifications area for the screen readers
+     * Default: `Notifications`
+     */
+    readonly label?: string;
+    /**
+     * Default: `theme.zIndex.modal + 2`, above the modal windows and the tooltips
+     */
+    readonly zIndex?: number;
+    readonly overrides?: ToastOverrides;
+}
+export interface ToastOverrides {
+    /**
+     * The card of the toast
+     */
+    readonly Toast?: React.ComponentType<ToastCardProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The icon of the type or the spinner
+     */
+    readonly Icon?: React.ComponentType<ToastIconProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly CloseButton?: React.ComponentType<ToastCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The button of `actions`
+     */
+    readonly Action?: React.ComponentType<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
+}
+declare const ToastContainer: React.FC<ToastContainerProps>;
+export default ToastContainer;

package/Toast/ToastContainer.js

@@ -0,0 +1,155 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const ToastCard_1 = __importDefault(require("./ToastCard"));
+const ToastIcon_1 = __importDefault(require("./ToastIcon"));
+const ToastCloseButton_1 = __importDefault(require("./ToastCloseButton"));
+const ToastAction_1 = __importDefault(require("./ToastAction"));
+const ToastItem_1 = __importDefault(require("./ToastItem"));
+const store_1 = require("./store");
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+const POSITIONS = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
+const Stack = styled_1.default.div `
+  position: fixed;
+  z-index: ${({ $zIndex }) => $zIndex};
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  box-sizing: border-box;
+  max-width: min(26em, calc(100vw - 2em));
+  pointer-events: none;
+  ${({ $position }) => {
+    const [vertical, horizontal] = $position.split('-');
+    return (0, react_2.css) `
+      ${vertical}: 1em;
+      align-items: ${horizontal === 'left'
+        ? 'flex-start'
+        : horizontal === 'right'
+            ? 'flex-end'
+            : 'center'};
+      ${horizontal === 'center'
+        ? (0, react_2.css) `
+            left: 50%;
+            transform: translateX(-50%);
+          `
+        : (0, react_2.css) `
+            ${horizontal}: 1em;
+          `}
+
+      /* The narrow screen: the toasts take the whole width */
+      @media (max-width: 480px) {
+        left: 0.5em;
+        right: 0.5em;
+        ${vertical}: 0.5em;
+        max-width: none;
+        transform: none;
+        align-items: stretch;
+        & > * {
+          width: auto;
+        }
+      }
+    `;
+}}
+`;
+const getPortal = () => {
+    const id = 'ui-kit-toasts';
+    const existing = document.getElementById(id);
+    if (existing) {
+        return existing;
+    }
+    const node = document.createElement('div');
+    node.id = id;
+    document.body.appendChild(node);
+    return node;
+};
+const useWindowFocused = () => {
+    const [isFocused, setIsFocused] = react_1.default.useState(true);
+    react_1.default.useEffect(() => {
+        const update = () => setIsFocused(document.hasFocus());
+        update();
+        window.addEventListener('focus', update);
+        window.addEventListener('blur', update);
+        return () => {
+            window.removeEventListener('focus', update);
+            window.removeEventListener('blur', update);
+        };
+    }, []);
+    return isFocused;
+};
+const ToastContainer = props => {
+    const { containerId, position = 'top-right', autoClose = 5000, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = (0, useThemeProps_1.default)('Toast', props);
+    const theme = (0, react_2.useTheme)();
+    const allToasts = react_1.default.useSyncExternalStore(store_1.toastStore.subscribe, store_1.toastStore.getSnapshot, store_1.toastStore.getServerSnapshot);
+    const toasts = react_1.default.useMemo(() => allToasts.filter(item => item.containerId === containerId), [allToasts, containerId]);
+    const isWindowFocused = useWindowFocused();
+    const [portal, setPortal] = react_1.default.useState(null);
+    const regionRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        setPortal(getPortal());
+    }, []);
+    const components = react_1.default.useMemo(() => ({
+        Toast: (overrides === null || overrides === void 0 ? void 0 : overrides.Toast) || ToastCard_1.default,
+        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || ToastIcon_1.default,
+        CloseButton: (overrides === null || overrides === void 0 ? void 0 : overrides.CloseButton) || ToastCloseButton_1.default,
+        Action: (overrides === null || overrides === void 0 ? void 0 : overrides.Action) || ToastAction_1.default,
+    }), [overrides]);
+    const defaults = react_1.default.useMemo(() => ({
+        autoClose,
+        closeButton,
+        closeOnClick,
+        pauseOnHover,
+        pauseOnFocusLoss,
+        closeButtonLabel,
+    }), [autoClose, closeButton, closeOnClick, pauseOnHover, pauseOnFocusLoss, closeButtonLabel]);
+    // The toasts over the limit wait: they appear when the shown ones close
+    const visible = typeof limit === 'number' ? toasts.slice(0, Math.max(limit, 0)) : toasts;
+    // A waiting toast closed before it was shown has no exit animation: it is removed at once
+    react_1.default.useEffect(() => {
+        toasts
+            .filter(item => item.isClosing && !visible.includes(item))
+            .forEach(item => store_1.toastStore.remove(item.toastId));
+    }, [toasts, visible]);
+    react_1.default.useEffect(() => {
+        if (!hotkey) {
+            return undefined;
+        }
+        const handleKeyDown = (event) => {
+            var _a;
+            if (event.key === hotkey) {
+                const cards = (_a = regionRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="status"], [role="alert"]');
+                const newest = cards === null || cards === void 0 ? void 0 : cards[cards.length - 1];
+                if (newest) {
+                    event.preventDefault();
+                    newest.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [hotkey]);
+    if (!portal) {
+        return null;
+    }
+    const byPosition = POSITIONS.map(stackPosition => {
+        const items = visible.filter(item => { var _a; return ((_a = item.position) !== null && _a !== void 0 ? _a : position) === stackPosition; });
+        return { stackPosition, items: newestOnTop ? [...items].reverse() : items };
+    }).filter(({ items }) => items.length > 0);
+    // The region is always in the DOM: the screen readers announce what is added to a live region they already know
+    return react_dom_1.default.createPortal(react_1.default.createElement("div", { role: "region", "aria-label": hotkey ? `${label} (${hotkey})` : label, "aria-live": "polite", ref: regionRef }, byPosition.map(({ stackPosition, items }) => (react_1.default.createElement(Stack, { key: stackPosition, "$position": stackPosition, "$zIndex": zIndex !== null && zIndex !== void 0 ? zIndex : theme.zIndex.modal + 2 }, items.map(item => (react_1.default.createElement(ToastItem_1.default, { key: item.toastId, toast: item, position: stackPosition, defaults: defaults, components: components, isWindowFocused: isWindowFocused }))))))), portal);
+};
+exports.default = ToastContainer;

package/Toast/ToastIcon.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ToastType } from './store';
+export type ToastIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly type: ToastType;
+    readonly isLoading: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly type: ToastType;
+    readonly isLoading: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Toast/ToastIcon.js

@@ -0,0 +1,71 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Spinner_1 = __importDefault(require("../LoadingIndicator/Spinner"));
+const StyledIcon = styled_1.default.span `
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1.25em;
+  height: 1.25em;
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const paths = {
+    info: (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        react_1.default.createElement("path", { d: "M12 11v6M12 7.5v.01", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }))),
+    success: (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        react_1.default.createElement("path", { d: "m7.5 12.5 3 3 6-6.5", fill: "none", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }))),
+    warning: (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("path", { d: "M10.3 3.6a2 2 0 0 1 3.4 0l8.2 14.2A2 2 0 0 1 20.2 21H3.8a2 2 0 0 1-1.7-3.2z", fill: "currentColor" }),
+        react_1.default.createElement("path", { d: "M12 9v4.5M12 17v.01", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }))),
+    error: (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        react_1.default.createElement("path", { d: "m8.5 8.5 7 7m0-7-7 7", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }))),
+};
+/**
+ * The icon of the toast type, or the spinner while the toast is loading.
+ * The `default` type has no icon
+ */
+const ToastIcon = (props, ref) => {
+    const { type, isLoading, children } = props, nativeProps = __rest(props, ["type", "isLoading", "children"]);
+    const theme = (0, react_2.useTheme)();
+    if (children) {
+        return (react_1.default.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref }), children));
+    }
+    if (isLoading) {
+        return (react_1.default.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref }),
+            react_1.default.createElement(Spinner_1.default, { size: "1.25em" })));
+    }
+    if (type === 'default') {
+        return null;
+    }
+    const colors = {
+        info: theme.color.accentPrimary.toString(),
+        success: theme.color.success.toString(),
+        warning: theme.color.warning.toString(),
+        error: theme.color.error.toString(),
+    };
+    return (react_1.default.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { style: Object.assign({ color: colors[type] }, nativeProps.style), ref: ref }),
+        react_1.default.createElement("svg", { viewBox: "0 0 24 24" }, paths[type])));
+};
+exports.default = react_1.default.forwardRef(ToastIcon);

package/Toast/ToastItem.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ToastCardProps } from './ToastCard';
+import { ToastIconProps } from './ToastIcon';
+import { ToastCloseButtonProps } from './ToastCloseButton';
+import { ToastActionProps } from './ToastAction';
+import { ToastPosition, ToastState } from './store';
+export interface ToastItemComponents {
+    readonly Toast: React.ComponentType<ToastCardProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Icon: React.ComponentType<ToastIconProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly CloseButton: React.ComponentType<ToastCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly Action: React.ComponentType<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
+}
+export interface ToastDefaults {
+    readonly autoClose: number | false;
+    readonly closeButton: boolean;
+    readonly closeOnClick: boolean;
+    readonly pauseOnHover: boolean;
+    readonly pauseOnFocusLoss: boolean;
+    readonly closeButtonLabel: string;
+}
+interface ToastItemProps {
+    readonly toast: ToastState;
+    readonly position: ToastPosition;
+    readonly defaults: ToastDefaults;
+    readonly components: ToastItemComponents;
+    readonly isWindowFocused: boolean;
+}
+declare const ToastItem: React.FC<ToastItemProps>;
+export default ToastItem;

package/Toast/ToastItem.js

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const ToastCard_1 = require("./ToastCard");
+const store_1 = require("./store");
+const Body = styled_1.default.div `
+  flex: 1;
+  min-width: 0;
+  /* Centers the one-line text against the icon and the close button */
+  padding: 0.1em 0;
+`;
+const Description = styled_1.default.div `
+  margin-top: 0.15em;
+  font-size: 0.93em;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+const Actions = styled_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.6em;
+`;
+/**
+ * The clicks on these elements are actions, not the click on the toast
+ */
+const INTERACTIVE = 'a, button, input, select, textarea, label, summary, [role="button"], [contenteditable="true"]';
+const ToastItem = props => {
+    var _a, _b, _c, _d, _e;
+    const { toast, position, defaults, components, isWindowFocused } = props;
+    const { toastId, content, type = 'default', isLoading = false, description, actions, icon, onClick, onOpen, isClosing, version, } = toast;
+    // The loading toast waits for `toast.update`: it can not be closed by the timer or by the click
+    const autoClose = isLoading ? false : ((_a = toast.autoClose) !== null && _a !== void 0 ? _a : defaults.autoClose);
+    const closeButton = isLoading ? false : ((_b = toast.closeButton) !== null && _b !== void 0 ? _b : defaults.closeButton);
+    const closeOnClick = isLoading ? false : ((_c = toast.closeOnClick) !== null && _c !== void 0 ? _c : defaults.closeOnClick);
+    const pauseOnHover = (_d = toast.pauseOnHover) !== null && _d !== void 0 ? _d : defaults.pauseOnHover;
+    const pauseOnFocusLoss = (_e = toast.pauseOnFocusLoss) !== null && _e !== void 0 ? _e : defaults.pauseOnFocusLoss;
+    const [isHovered, setIsHovered] = react_1.default.useState(false);
+    const [hasFocus, setHasFocus] = react_1.default.useState(false);
+    const isPaused = (pauseOnHover && isHovered) || hasFocus || (pauseOnFocusLoss && !isWindowFocused);
+    const closeToast = react_1.default.useCallback(() => store_1.toast.dismiss(toastId), [toastId]);
+    react_1.default.useEffect(() => {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        // Once, when the toast appears
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // The time left. It starts again on every update of the toast
+    const remainingRef = react_1.default.useRef(0);
+    react_1.default.useEffect(() => {
+        remainingRef.current = typeof autoClose === 'number' ? autoClose : 0;
+    }, [autoClose, version]);
+    react_1.default.useEffect(() => {
+        if (autoClose === false || isPaused || isClosing) {
+            return undefined;
+        }
+        const startedAt = Date.now();
+        const timer = setTimeout(closeToast, Math.max(remainingRef.current, 0));
+        return () => {
+            clearTimeout(timer);
+            remainingRef.current -= Date.now() - startedAt;
+        };
+    }, [autoClose, isPaused, isClosing, version, closeToast]);
+    // The toast is removed after the exit animation. A timer, not `animationend`:
+    // with the reduced motion there is no animation and no event
+    react_1.default.useEffect(() => {
+        if (!isClosing) {
+            return undefined;
+        }
+        const timer = setTimeout(() => store_1.toastStore.remove(toastId), ToastCard_1.TOAST_ANIMATION_MS);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [isClosing, toastId]);
+    const handleClick = event => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        const target = event.target;
+        if (closeOnClick && !event.defaultPrevented && !target.closest(INTERACTIVE)) {
+            closeToast();
+        }
+    };
+    const handleKeyDown = event => {
+        if (event.key === 'Escape' && !isLoading) {
+            event.stopPropagation();
+            closeToast();
+        }
+    };
+    const handleBlur = event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+            setHasFocus(false);
+        }
+    };
+    const renderedContent = typeof content === 'function' ? content({ closeToast, toastProps: toast }) : content;
+    return (react_1.default.createElement(components.Toast, { type: type, position: position, isClosing: isClosing, 
+        // Errors interrupt the screen reader, the rest is read when it is free
+        role: type === 'error' ? 'alert' : 'status', tabIndex: 0, onClick: handleClick, onKeyDown: handleKeyDown, onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onFocus: () => setHasFocus(true), onBlur: handleBlur },
+        icon !== false && (react_1.default.createElement(components.Icon, { type: type, isLoading: isLoading }, icon)),
+        react_1.default.createElement(Body, null,
+            renderedContent,
+            description != null && react_1.default.createElement(Description, null, description),
+            actions && actions.length > 0 && (react_1.default.createElement(Actions, null, actions.map((action, index) => (react_1.default.createElement(components.Action
+            // The actions are a static list of the toast
+            // eslint-disable-next-line react/no-array-index-key
+            , { 
+                // The actions are a static list of the toast
+                // eslint-disable-next-line react/no-array-index-key
+                key: index, onClick: event => {
+                    var _a;
+                    (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, event, closeToast);
+                    if (action.closeOnClick !== false) {
+                        closeToast();
+                    }
+                } }, action.label)))))),
+        typeof closeButton === 'function'
+            ? closeButton({ closeToast })
+            : closeButton && (react_1.default.createElement(components.CloseButton, { "aria-label": defaults.closeButtonLabel, onClick: closeToast }))));
+};
+exports.default = ToastItem;

package/Toast/index.d.ts

@@ -0,0 +1,6 @@
+import ToastContainer from './ToastContainer';
+export { toast } from './store';
+export type { ToastId, ToastType, ToastPosition, ToastOptions, ToastUpdateOptions, ToastContent, ToastContentProps, ToastAction as ToastActionItem, ToastState, } from './store';
+export { ToastContainer };
+export type { ToastContainerProps, ToastOverrides } from './ToastContainer';
+export default ToastContainer;

package/Toast/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastContainer = exports.toast = void 0;
+const ToastContainer_1 = __importDefault(require("./ToastContainer"));
+exports.ToastContainer = ToastContainer_1.default;
+var store_1 = require("./store");
+Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return store_1.toast; } });
+exports.default = ToastContainer_1.default;