@via-profit/ui-kit 0.4.0 → 0.6.0

package/esm/Tooltip/index.js

@@ -0,0 +1,190 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import Popper from '../Popper';
+import Container from './TooltipContainer';
+import Arrow from './TooltipArrow';
+import getElementRef from '../utils/getElementRef';
+/**
+ * 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, } = props;
+    const theme = useTheme();
+    const generatedId = `tooltip-${React.useId().replace(/:/g, '')}`;
+    const tooltipId = id || generatedId;
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Arrow: (overrides === null || overrides === void 0 ? void 0 : overrides.Arrow) || Arrow,
+    }), [overrides]);
+    const [anchorElement, setAnchorElement] = React.useState(null);
+    const [internalOpen, setInternalOpen] = React.useState(false);
+    const [actualPlacement, setActualPlacement] = React.useState(placement);
+    const timerRef = React.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.useRef(open);
+    openRef.current = open;
+    const onOpenChangeRef = React.useRef(onOpenChange);
+    onOpenChangeRef.current = onOpenChange;
+    const clearTimer = () => {
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    };
+    const setOpen = React.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.useEffect(() => clearTimer, []);
+    // A stable callback: a new one on every render would reset the anchor and render again, endlessly
+    const childRefRef = React.useRef(undefined);
+    const handleAnchorRef = React.useCallback((node) => {
+        setAnchorElement(node);
+        setRef(childRefRef.current, node);
+    }, []);
+    React.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.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.isValidElement(children)) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    const child = children;
+    const childProps = child.props;
+    childRefRef.current = getElementRef(child);
+    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.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.createElement(React.Fragment, null,
+        anchor,
+        React.createElement(Popper, { 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.createElement(overridesMap.Container, null,
+                title,
+                arrow && React.createElement(overridesMap.Arrow, { placement: actualPlacement })))));
+};
+export default Tooltip;

package/esm/Typography/Base.js

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+/**
+ * @deprecated - Use `Span` instead\
+ * Example: `import Span from '@via-profit/ui-kit/Typography/Span'`
+ */
+const Base = styled.span `
+  font-size: 1em;
+  font-weight: 300;
+  color: currentColor;
+`;
+export default Base;

package/esm/Typography/Blockquote.js

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+const Blockquote = styled.blockquote `
+  font-size: 1em;
+  font-weight: 400;
+  font-style: italic;
+  position: relative;
+  border-left: 4px solid ${({ theme }) => theme.color.textSecondary.lighten(20).toString()};
+  color: currentColor;
+  margin: 0;
+  padding: 1em 0 1em 2em;
+  & > p:first-of-type {
+    margin-top: 0;
+  }
+  & > p:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+export default Blockquote;

package/esm/Typography/Del.js

@@ -0,0 +1,22 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Styled = styled.del `
+  font-size: 1em;
+  color: currentColor;
+`;
+const Del = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(Del);

package/esm/Typography/Em.js

@@ -0,0 +1,22 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Styled = styled.em `
+  font-size: 1em;
+  color: currentColor;
+`;
+const Em = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(Em);

package/esm/Typography/H1.js

@@ -0,0 +1,23 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Styled = styled.h1 `
+  font-size: 2em;
+  font-weight: 700;
+  color: currentColor;
+`;
+const H1 = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(H1);

package/esm/Typography/H2.js

@@ -0,0 +1,23 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Styled = styled.h2 `
+  font-size: 1.5em;
+  font-weight: 500;
+  color: currentColor;
+`;
+const H2 = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(H2);

package/esm/Typography/H3.js

@@ -0,0 +1,23 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Styled = styled.h3 `
+  font-size: 1.25em;
+  font-weight: 500;
+  color: currentColor;
+`;
+const H3 = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(H3);

package/esm/Typography/H4.js

@@ -0,0 +1,23 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Styled = styled.h4 `
+  font-size: 1.1em;
+  font-weight: 500;
+  color: currentColor;
+`;
+const H4 = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(H4);

package/esm/Typography/H5.js

@@ -0,0 +1,23 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Styled = styled.h5 `
+  font-size: 1em;
+  font-weight: 500;
+  color: currentColor;
+`;
+const H5 = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(H5);

package/esm/Typography/H6.js

@@ -0,0 +1,23 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Styled = styled.h6 `
+  font-size: 0.9em;
+  font-weight: 500;
+  color: currentColor;
+`;
+const H6 = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(H6);

package/esm/Typography/List.js

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+export const Ul = styled.ul `
+  color: currentColor;
+  font-size: 1em;
+  margin: 0.8em 0;
+  padding-left: 1.2em;
+`;
+export const Ol = styled.ol `
+  color: currentColor;
+  font-size: 1em;
+  margin: 0.8em 0;
+  padding-left: 1.2em;
+`;
+export const Li = styled.li `
+  color: currentColor;
+  font-size: 1em;
+  margin: 0.2em 0;
+  &::marker {
+    font-size: 0.9em;
+    font-weight: 600;
+    color: ${({ theme }) => theme.isDark
+    ? theme.color.accentPrimary.lighten(20).toString()
+    : theme.color.accentPrimary.darken(20).toString()};
+  }
+`;
+export default Ul;

package/esm/Typography/Paragraph.js

@@ -0,0 +1,24 @@
+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;
+};
+import * as React from 'react';
+import styled from '@emotion/styled';
+const StyledParagraph = styled.p `
+  font-size: 1em;
+  font-weight: 300;
+  margin: ${({ $noMargin }) => ($noMargin ? 0 : '0 0 0.8em 0')};
+  color: currentColor;
+`;
+const Paragraph = (props, ref) => {
+    const { noMargin, children } = props, restProps = __rest(props, ["noMargin", "children"]);
+    return (React.createElement(StyledParagraph, Object.assign({}, restProps, { "$noMargin": noMargin, ref: ref }), children));
+};
+export default React.forwardRef(Paragraph);

package/esm/Typography/SectionDescription.js

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+import Paragraph from './Paragraph';
+const SectionDescription = styled(Paragraph) `
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  padding: 0 20%;
+  margin-top: 2.4em;
+  margin-bottom: 1em;
+`;
+export default SectionDescription;

package/esm/Typography/SectionTitle.js

@@ -0,0 +1,44 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import H2 from './H2';
+const Title = styled(H2) `
+  justify-content: center;
+  display: flex;
+  text-align: center;
+`;
+const Inner = styled.span `
+  position: relative;
+
+  /* The accent line under the title */
+  &::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -0.5em;
+    height: 0.12em;
+    width: 2.5em;
+    border-radius: 0.06em;
+    transform: translate(-50%, 0);
+    background-color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  }
+`;
+/**
+ * The centered H2 with the accent line under the text
+ */
+const SectionTitle = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Title, Object.assign({}, nativeProps, { ref: ref }),
+        React.createElement(Inner, null, children)));
+};
+export default React.forwardRef(SectionTitle);

package/esm/Typography/Span.js

@@ -0,0 +1,22 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Styled = styled.span `
+  font-size: 1em;
+  color: currentColor;
+`;
+const Span = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(Span);

package/esm/Typography/Strong.js

@@ -0,0 +1,22 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Styled = styled.strong `
+  font-size: 1em;
+  color: currentColor;
+`;
+const Strong = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(Strong);

package/esm/Typography/U.js

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+const U = styled.u `
+  font-size: 1em;
+`;
+export default U;

package/esm/Typography/index.js

@@ -0,0 +1,20 @@
+import Paragraph from './Paragraph';
+export * from './Paragraph';
+export { default as H1 } from './H1';
+export { default as H2 } from './H2';
+export { default as H3 } from './H3';
+export { default as H4 } from './H4';
+export { default as H5 } from './H5';
+export { default as H6 } from './H6';
+export { default as Span } from './Span';
+export { default as Strong } from './Strong';
+export { default as Em } from './Em';
+export { default as Del } from './Del';
+export { default as U } from './U';
+export { default as Blockquote } from './Blockquote';
+export { Ul, Ol, Li } from './List';
+export { default as SectionTitle } from './SectionTitle';
+export { default as SectionDescription } from './SectionDescription';
+export { Paragraph };
+// The default export is kept for compatibility
+export default Paragraph;

package/esm/index.js

@@ -0,0 +1 @@
+export * from './ThemeProvider';