@via-profit/ui-kit 0.4.0 → 0.6.0

package/Toast/ToastContainer.js

@@ -0,0 +1,154 @@
+"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 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, } = 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;

package/Toast/store.d.ts

@@ -0,0 +1,155 @@
+import React from 'react';
+export type ToastId = string | number;
+export type ToastType = 'default' | 'info' | 'success' | 'warning' | 'error';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastContentProps {
+    /**
+     * Closes this toast
+     */
+    readonly closeToast: () => void;
+    readonly toastProps: ToastState;
+}
+/**
+ * A text or an element, or a function that receives `closeToast`, as in react-toastify
+ */
+export type ToastContent = React.ReactNode | ((props: ToastContentProps) => React.ReactNode);
+export interface ToastAction {
+    readonly label: React.ReactNode;
+    /**
+     * Called on the click. `closeToast` closes the toast before the end of the timer
+     */
+    readonly onClick?: (event: React.MouseEvent<HTMLButtonElement>, closeToast: () => void) => void;
+    /**
+     * Closes the toast after the click
+     * Default: true
+     */
+    readonly closeOnClick?: boolean;
+}
+export interface ToastOptions {
+    /**
+     * The id of the toast. A toast with the id that is already shown is not added again
+     * Default: generated
+     */
+    readonly toastId?: ToastId;
+    readonly type?: ToastType;
+    /**
+     * The `containerId` of the `ToastContainer` that shows the toast, if there are several containers
+     * Default: the container without `containerId`
+     */
+    readonly containerId?: string;
+    /**
+     * Shows the spinner instead of the icon. The loading toast does not close by the timer,
+     * has no close button and does not close by the click: finish it with `toast.update`
+     * Default: false
+     */
+    readonly isLoading?: boolean;
+    /**
+     * The time in ms before the toast closes, or `false` to keep it until the user closes it
+     * Default: `autoClose` of the `ToastContainer`
+     */
+    readonly autoClose?: number | false;
+    /**
+     * Default: `position` of the `ToastContainer`
+     */
+    readonly position?: ToastPosition;
+    /**
+     * The second line under the main text
+     */
+    readonly description?: React.ReactNode;
+    /**
+     * The buttons of the toast, e.g. «Undo»
+     */
+    readonly actions?: readonly ToastAction[];
+    /**
+     * `false` hides the close button, a function renders your own button
+     * Default: true
+     */
+    readonly closeButton?: boolean | ((props: {
+        readonly closeToast: () => void;
+    }) => React.ReactNode);
+    /**
+     * 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;
+    /**
+     * Called on the click on the toast
+     */
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Called when the toast is closed
+     */
+    readonly onClose?: () => void;
+    /**
+     * Called when the toast is shown
+     */
+    readonly onOpen?: () => void;
+    /**
+     * Your icon instead of the icon of the type, or `false` without the icon
+     */
+    readonly icon?: React.ReactNode | false;
+    /**
+     * The timer stops while the pointer is over the toast
+     * Default: true
+     */
+    readonly pauseOnHover?: boolean;
+    /**
+     * The timer stops while the browser window is not active
+     * Default: true
+     */
+    readonly pauseOnFocusLoss?: boolean;
+}
+export interface ToastUpdateOptions extends Omit<ToastOptions, 'toastId'> {
+    /**
+     * The new content of the toast
+     */
+    readonly render?: ToastContent;
+}
+export interface ToastState extends Omit<ToastOptions, 'toastId'> {
+    readonly toastId: ToastId;
+    readonly content: ToastContent;
+    /**
+     * Grows on every update: the timer of the updated toast starts again
+     */
+    readonly version: number;
+    /**
+     * The toast is closing: the exit animation is played, then the toast is removed
+     */
+    readonly isClosing: boolean;
+}
+type Listener = () => void;
+export declare const toastStore: {
+    subscribe(listener: Listener): () => void;
+    getSnapshot: () => readonly ToastState[];
+    getServerSnapshot: () => readonly ToastState[];
+    /**
+     * Removes the toast after its exit animation
+     */
+    remove(toastId: ToastId): void;
+};
+type ToastFunction = {
+    (content: ToastContent, options?: ToastOptions): ToastId;
+    info: (content: ToastContent, options?: ToastOptions) => ToastId;
+    success: (content: ToastContent, options?: ToastOptions) => ToastId;
+    warning: (content: ToastContent, options?: ToastOptions) => ToastId;
+    /**
+     * The alias of `toast.warning`, as in react-toastify
+     */
+    warn: (content: ToastContent, options?: ToastOptions) => ToastId;
+    error: (content: ToastContent, options?: ToastOptions) => ToastId;
+    /**
+     * The toast with the spinner. Finish it with `toast.update(id, { render, type, isLoading: false })`
+     */
+    loading: (content: ToastContent, options?: ToastOptions) => ToastId;
+    /**
+     * Changes the content and the options of the shown toast. The timer starts again
+     */
+    update: (toastId: ToastId, options: ToastUpdateOptions) => void;
+    /**
+     * Closes the toast, or all the toasts without the id
+     */
+    dismiss: (toastId?: ToastId) => void;
+    isActive: (toastId: ToastId) => boolean;
+};
+export declare const toast: ToastFunction;
+export {};

package/Toast/store.js

@@ -0,0 +1,75 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = exports.toastStore = void 0;
+let toasts = [];
+const listeners = new Set();
+let idCounter = 0;
+const emit = () => {
+    listeners.forEach(listener => listener());
+};
+const setToasts = (next) => {
+    toasts = next;
+    emit();
+};
+exports.toastStore = {
+    subscribe(listener) {
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+        };
+    },
+    getSnapshot: () => toasts,
+    getServerSnapshot: () => [],
+    /**
+     * Removes the toast after its exit animation
+     */
+    remove(toastId) {
+        var _a;
+        const removed = toasts.find(item => item.toastId === toastId);
+        setToasts(toasts.filter(item => item.toastId !== toastId));
+        (_a = removed === null || removed === void 0 ? void 0 : removed.onClose) === null || _a === void 0 ? void 0 : _a.call(removed);
+    },
+};
+const isActive = (toastId) => toasts.some(item => item.toastId === toastId && !item.isClosing);
+const show = (content, options = {}) => {
+    const { toastId = `toast-${(idCounter += 1)}` } = options, rest = __rest(options, ["toastId"]);
+    // As in react-toastify: the toast with the same id is not duplicated
+    if (isActive(toastId)) {
+        return toastId;
+    }
+    setToasts([
+        ...toasts.filter(item => item.toastId !== toastId),
+        Object.assign(Object.assign({}, rest), { toastId, content, version: 0, isClosing: false }),
+    ]);
+    return toastId;
+};
+const withType = (type) => (content, options) => show(content, Object.assign(Object.assign({}, options), { type }));
+exports.toast = Object.assign((content, options) => show(content, options), {
+    info: withType('info'),
+    success: withType('success'),
+    warning: withType('warning'),
+    warn: withType('warning'),
+    error: withType('error'),
+    loading: (content, options) => show(content, Object.assign(Object.assign({}, options), { isLoading: true })),
+    update: (toastId, options) => {
+        const { render } = options, rest = __rest(options, ["render"]);
+        setToasts(toasts.map(item => item.toastId === toastId
+            ? Object.assign(Object.assign(Object.assign({}, item), rest), { content: typeof render !== 'undefined' ? render : item.content, version: item.version + 1 }) : item));
+    },
+    dismiss: (toastId) => {
+        setToasts(toasts.map(item => typeof toastId === 'undefined' || item.toastId === toastId
+            ? Object.assign(Object.assign({}, item), { isClosing: true }) : item));
+    },
+    isActive,
+});

package/Tooltip/TooltipArrow.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { AnchorPos } from '../Popper';
+export type TooltipArrowProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The actual placement of the tooltip: the arrow is drawn on the side facing the anchor
+     */
+    readonly placement: AnchorPos;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The actual placement of the tooltip: the arrow is drawn on the side facing the anchor
+     */
+    readonly placement: AnchorPos;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;