@via-profit/ui-kit 0.3.0 → 0.5.0

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;

package/Tooltip/TooltipArrow.js

@@ -0,0 +1,62 @@
+"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 SIZE = 0.45;
+const StyledArrow = styled_1.default.span `
+  position: absolute;
+  width: ${SIZE * 2}em;
+  height: ${SIZE * 2}em;
+  background-color: inherit;
+  transform: rotate(45deg);
+  pointer-events: none;
+  ${({ $side, $align }) => {
+    const vertical = $side === 'top' || $side === 'bottom';
+    const across = vertical ? 'left' : 'top';
+    const alongStart = $align === 'start' ? '0.9em' : $align === 'end' ? 'calc(100% - 0.9em)' : '50%';
+    return (0, react_2.css) `
+      ${$side === 'top' ? 'bottom' : $side === 'bottom' ? 'top' : $side === 'left' ? 'right' : 'left'}: -${SIZE}em;
+      ${across}: ${alongStart};
+      margin-${across}: -${SIZE}em;
+    `;
+}}
+`;
+/**
+ * Splits the placement like `top-start` into the side and the alignment
+ */
+const parsePlacement = (placement) => {
+    const [side, modifier] = placement.replace(/^auto-?/, '').split('-');
+    switch (modifier) {
+        case 'start':
+        case 'left':
+        case 'top':
+            return { side: side || 'top', align: 'start' };
+        case 'end':
+        case 'right':
+        case 'bottom':
+            return { side: side || 'top', align: 'end' };
+        default:
+            return { side: side || 'top', align: 'center' };
+    }
+};
+const TooltipArrow = (props, ref) => {
+    const { placement } = props, nativeProps = __rest(props, ["placement"]);
+    const { side, align } = parsePlacement(placement);
+    return react_1.default.createElement(StyledArrow, Object.assign({ "aria-hidden": true }, nativeProps, { "$side": side, "$align": align, ref: ref }));
+};
+exports.default = react_1.default.forwardRef(TooltipArrow);

package/Tooltip/TooltipContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type TooltipContainerProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<TooltipContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Tooltip/TooltipContainer.js

@@ -0,0 +1,52 @@
+"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 appear = (0, react_2.keyframes) `
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const StyledContainer = styled_1.default.div `
+  position: relative;
+  box-sizing: border-box;
+  max-width: 20em;
+  padding: 0.4em 0.65em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  font-size: 0.8em;
+  line-height: 1.4;
+  overflow-wrap: break-word;
+  /* Inverted colors: dark on the light theme, light on the dark one */
+  background-color: ${({ theme }) => theme.color.textPrimary.toString()};
+  color: ${({ theme }) => theme.color.surface.toString()};
+  animation: ${appear} 120ms ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+const TooltipContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(TooltipContainer);

package/Tooltip/index.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import { AnchorPos } from '../Popper';
+import { TooltipContainerProps } from './TooltipContainer';
+import { TooltipArrowProps } from './TooltipArrow';
+export type TooltipProps = {
+    /**
+     * The text of the tooltip. If it is empty, the tooltip is not shown and the child is rendered as is
+     */
+    readonly title: React.ReactNode;
+    /**
+     * The element the tooltip is attached to. It must be a single element that accepts `ref`
+     * and the pointer and focus handlers: a DOM element or a component that passes them to the DOM element
+     */
+    readonly children: React.ReactElement;
+    /**
+     * The preferred placement. If there is no room, the tooltip moves to the opposite side
+     * Default: `top`
+     */
+    readonly placement?: AnchorPos;
+    /**
+     * Shows the arrow pointing to the element
+     * Default: false
+     */
+    readonly arrow?: boolean;
+    /**
+     * The delay before showing the tooltip when the pointer enters the element, in ms.
+     * The tooltip appears without the delay on the keyboard focus
+     * Default: 400
+     */
+    readonly enterDelay?: number;
+    /**
+     * The delay before hiding the tooltip when the pointer leaves the element, in ms.
+     * During this time the pointer can be moved onto the tooltip, e.g. to select the text
+     * Default: 100
+     */
+    readonly leaveDelay?: number;
+    /**
+     * The state of the controlled tooltip. Pass it together with `onOpenChange`
+     * Default: undefined
+     */
+    readonly isOpen?: boolean;
+    /**
+     * Called when the tooltip wants to be shown or hidden
+     */
+    readonly onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * `false`: the tooltip names the element — a string `title` becomes its `aria-label`. Use it for the icon buttons.\
+     * `true`: the tooltip describes the element that already has a name — the element gets `aria-describedby`
+     * Default: false
+     */
+    readonly describeChild?: boolean;
+    /**
+     * Default: 8
+     */
+    readonly offset?: number;
+    /**
+     * Default: `theme.zIndex.modal + 1`, so the tooltip is shown above the modal windows too
+     */
+    readonly zIndex?: number;
+    /**
+     * The id of the tooltip element
+     * Default: generated
+     */
+    readonly id?: string;
+    readonly overrides?: TooltipOverrides;
+};
+export interface TooltipOverrides {
+    /**
+     * The bubble with the text
+     */
+    readonly Container?: React.ComponentType<TooltipContainerProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The arrow. Rendered only with `arrow`
+     */
+    readonly Arrow?: React.ComponentType<TooltipArrowProps & React.RefAttributes<HTMLSpanElement>>;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

package/Tooltip/index.js

@@ -0,0 +1,196 @@
+"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_2 = require("@emotion/react");
+const Popper_1 = __importDefault(require("../Popper"));
+const TooltipContainer_1 = __importDefault(require("./TooltipContainer"));
+const TooltipArrow_1 = __importDefault(require("./TooltipArrow"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+/**
+ * Pointer types that have the hover. A tap on the touch screen fires `pointerenter` too,
+ * the tooltip would flash on every tap
+ */
+const isHoverPointer = (event) => event.pointerType !== 'touch';
+/**
+ * The tooltip opens on the keyboard focus only, not on the focus after a click
+ */
+const isFocusVisible = (element) => {
+    try {
+        return element.matches(':focus-visible');
+    }
+    catch (err) {
+        // Old browsers without :focus-visible
+        return true;
+    }
+};
+/**
+ * Shared by all the tooltips: when the pointer moves from one element to the next,
+ * the next tooltip appears without the delay, as in the toolbars of the desktop apps
+ */
+const SKIP_DELAY_WINDOW = 500;
+let openTooltipsCount = 0;
+let lastTooltipClosedAt = 0;
+const shouldSkipDelay = () => openTooltipsCount > 0 || Date.now() - lastTooltipClosedAt < SKIP_DELAY_WINDOW;
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+};
+const isEmptyTitle = (title) => title === null || typeof title === 'undefined' || title === false || title === '';
+const Tooltip = props => {
+    var _a;
+    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, offset = 8, zIndex, id, overrides, } = (0, useThemeProps_1.default)('Tooltip', props);
+    const theme = (0, react_2.useTheme)();
+    const generatedId = `tooltip-${react_1.default.useId().replace(/:/g, '')}`;
+    const tooltipId = id || generatedId;
+    const overridesMap = react_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || TooltipContainer_1.default,
+        Arrow: (overrides === null || overrides === void 0 ? void 0 : overrides.Arrow) || TooltipArrow_1.default,
+    }), [overrides]);
+    const [anchorElement, setAnchorElement] = react_1.default.useState(null);
+    const [internalOpen, setInternalOpen] = react_1.default.useState(false);
+    const [actualPlacement, setActualPlacement] = react_1.default.useState(placement);
+    const timerRef = react_1.default.useRef(null);
+    const isControlled = typeof isOpen !== 'undefined';
+    const isEmpty = isEmptyTitle(title);
+    const open = !isEmpty && (isControlled ? Boolean(isOpen) : internalOpen);
+    // The handlers below are called from the timers: they read the latest values from the ref
+    const openRef = react_1.default.useRef(open);
+    openRef.current = open;
+    const onOpenChangeRef = react_1.default.useRef(onOpenChange);
+    onOpenChangeRef.current = onOpenChange;
+    const clearTimer = () => {
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    };
+    const setOpen = react_1.default.useCallback((next) => {
+        var _a;
+        if (openRef.current === next) {
+            return;
+        }
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        (_a = onOpenChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenChangeRef, next);
+    }, [isControlled]);
+    const show = (delay) => {
+        clearTimer();
+        if (delay > 0) {
+            timerRef.current = setTimeout(() => setOpen(true), delay);
+        }
+        else {
+            setOpen(true);
+        }
+    };
+    const hide = (delay) => {
+        clearTimer();
+        if (delay > 0) {
+            timerRef.current = setTimeout(() => setOpen(false), delay);
+        }
+        else {
+            setOpen(false);
+        }
+    };
+    react_1.default.useEffect(() => clearTimer, []);
+    // A stable callback: a new one on every render would reset the anchor and render again, endlessly
+    const childRefRef = react_1.default.useRef(undefined);
+    const handleAnchorRef = react_1.default.useCallback((node) => {
+        setAnchorElement(node);
+        setRef(childRefRef.current, node);
+    }, []);
+    react_1.default.useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        openTooltipsCount += 1;
+        return () => {
+            openTooltipsCount -= 1;
+            lastTooltipClosedAt = Date.now();
+        };
+    }, [open]);
+    // Escape hides the tooltip wherever the focus is (WCAG 1.4.13: the tooltip must be dismissable)
+    react_1.default.useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                clearTimer();
+                setOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [open, setOpen]);
+    if (!react_1.default.isValidElement(children)) {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+    const child = children;
+    const childProps = child.props;
+    // React 18 keeps the ref of the element outside of props
+    childRefRef.current = child.ref;
+    if (isEmpty) {
+        return child;
+    }
+    const ariaProps = describeChild
+        ? {
+            'aria-describedby': open
+                ? [childProps['aria-describedby'], tooltipId].filter(Boolean).join(' ')
+                : childProps['aria-describedby'],
+        }
+        : {
+            // The visible text of the element or its own label wins over the tooltip
+            'aria-label': (_a = childProps['aria-label']) !== null && _a !== void 0 ? _a : (typeof title === 'string' ? title : undefined),
+        };
+    const anchor = react_1.default.cloneElement(child, Object.assign(Object.assign({}, ariaProps), { ref: handleAnchorRef, onPointerEnter: (event) => {
+            var _a;
+            (_a = childProps.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(childProps, event);
+            if (isHoverPointer(event)) {
+                show(openRef.current || shouldSkipDelay() ? 0 : enterDelay);
+            }
+        }, onPointerLeave: (event) => {
+            var _a;
+            (_a = childProps.onPointerLeave) === null || _a === void 0 ? void 0 : _a.call(childProps, event);
+            if (isHoverPointer(event)) {
+                hide(leaveDelay);
+            }
+        }, onFocus: (event) => {
+            var _a;
+            (_a = childProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(childProps, event);
+            if (isFocusVisible(event.currentTarget)) {
+                show(0);
+            }
+        }, onBlur: (event) => {
+            var _a;
+            (_a = childProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(childProps, event);
+            hide(0);
+        }, onPointerDown: (event) => {
+            var _a;
+            (_a = childProps.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(childProps, event);
+            // A click is an action, the tooltip should not cover its result
+            hide(0);
+        } }));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        anchor,
+        react_1.default.createElement(Popper_1.default, { isOpen: open, anchorElement: anchorElement, anchorPos: placement, autoFlip: true, offset: offset, viewportMargin: 8, zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : theme.zIndex.modal + 1, onAnchorPosChanged: setActualPlacement, id: tooltipId, role: "tooltip", 
+            // The pointer can move from the element onto the tooltip without hiding it
+            onPointerEnter: clearTimer, onPointerLeave: event => {
+                if (isHoverPointer(event)) {
+                    hide(leaveDelay);
+                }
+            } },
+            react_1.default.createElement(overridesMap.Container, null,
+                title,
+                arrow && react_1.default.createElement(overridesMap.Arrow, { placement: actualPlacement })))));
+};
+exports.default = Tooltip;

package/Typography/Base.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /**
  * @deprecated - Use `Span` instead\
- * Example: `import Span from '@via-profit/ui-kit/Span'`
+ * Example: `import Span from '@via-profit/ui-kit/Typography/Span'`
  */
 declare const Base: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/Typography/Base.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 /**
  * @deprecated - Use `Span` instead\
- * Example: `import Span from '@via-profit/ui-kit/Span'`
+ * Example: `import Span from '@via-profit/ui-kit/Typography/Span'`
  */
 const Base = styled_1.default.span `
   font-size: 1em;

package/Typography/Blockquote.js

@@ -16,7 +16,7 @@ const Blockquote = styled_1.default.blockquote `
   & > p:first-of-type {
     margin-top: 0;
   }
-  & > p:last-child {
+  & > p:last-of-type {
     margin-bottom: 0;
   }
 `;

package/Typography/Del.js

@@ -20,8 +20,8 @@ const Styled = styled_1.default.del `
   font-size: 1em;
   color: currentColor;
 `;
-const Em = (props, ref) => {
+const Del = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);
     return (react_1.default.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
 };
-exports.default = react_1.default.forwardRef(Em);
+exports.default = react_1.default.forwardRef(Del);