@via-profit/ui-kit 0.4.0 → 0.5.0

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/esm/Accordion/AccordionActions.js

@@ -0,0 +1,26 @@
+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 StyledActions = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem 0')};
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+`;
+const AccordionActions = (props, ref) => {
+    const { children, noPadding } = props, nativeProps = __rest(props, ["children", "noPadding"]);
+    return (React.createElement(StyledActions, Object.assign({}, nativeProps, { "$noPadding": Boolean(noPadding), ref: ref }), children));
+};
+export default React.forwardRef(AccordionActions);

package/esm/Accordion/AccordionContainer.js

@@ -0,0 +1,57 @@
+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 StyledAccordionContainer = styled.div `
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  box-sizing: border-box;
+  flex-direction: column;
+  background: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  font-size: 1em;
+  position: relative;
+  margin-top: 1px;
+  box-shadow:
+    ${({ theme }) => theme.isDark
+    ? theme.color.backgroundSecondary.lighten(80).alpha(0.2).toString()
+    : theme.color.backgroundSecondary.lighten(50).alpha(0.2).toString()}
+      0px 2px 1px -1px,
+    ${({ theme }) => theme.isDark
+    ? theme.color.backgroundSecondary.lighten(80).alpha(0.14).toString()
+    : theme.color.backgroundSecondary.lighten(50).alpha(0.14).toString()}
+      0px 1px 1px 0px,
+    ${({ theme }) => theme.isDark
+    ? theme.color.backgroundSecondary.lighten(80).alpha(0.12).toString()
+    : theme.color.backgroundSecondary.lighten(50).alpha(0.12).toString()}
+      0px 1px 3px 0px;
+  ${({ theme }) => theme.elevation.surface && `box-shadow: ${theme.elevation.surface};`}
+
+  /*
+   * Adjacent accordions form a group: the inner corners are square.
+   * Data attributes, not class names: emotion labels are absent in the published package
+   */
+  &:has(+ [data-accordion]) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [data-accordion] + & {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+`;
+const AccordionContainer = (props, ref) => {
+    const { inline, children } = props, nativeProps = __rest(props, ["inline", "children"]);
+    return (React.createElement(StyledAccordionContainer, Object.assign({ "data-accordion": "", "$inline": inline }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(AccordionContainer);

package/esm/Accordion/AccordionContent.js

@@ -0,0 +1,39 @@
+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';
+/**
+ * Animates the height with grid rows 0fr -> 1fr: no fixed max-height, so the tall content is not cut.
+ * `visibility: hidden` of the collapsed content removes it from the tab order and the accessibility tree
+ */
+const StyledAccordionContent = styled.div `
+  display: grid;
+  grid-template-rows: ${({ $isOpen }) => ($isOpen ? '1fr' : '0fr')};
+  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
+  transition:
+    grid-template-rows 0.3s ease-out,
+    visibility 0s linear ${({ $isOpen }) => ($isOpen ? '0s' : '0.3s')};
+`;
+const Clip = styled.div `
+  min-height: 0;
+  overflow: hidden;
+`;
+const Wrapper = styled.div `
+  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem')};
+`;
+const AccordionContent = (props, ref) => {
+    const { children, noPadding, isOpen } = props, nativeProps = __rest(props, ["children", "noPadding", "isOpen"]);
+    return (React.createElement(StyledAccordionContent, Object.assign({ role: "region" }, nativeProps, { "$isOpen": isOpen, ref: ref }),
+        React.createElement(Clip, null,
+            React.createElement(Wrapper, { "$noPadding": Boolean(noPadding) }, children))));
+};
+export default React.forwardRef(AccordionContent);

package/esm/Accordion/AccordionHeader.js

@@ -0,0 +1,67 @@
+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 Chevron from './Chevron';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const StyledHeader = styled.div `
+  font-size: 1.3rem;
+  font-weight: 600;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+`;
+/**
+ * The whole header is the button: it is clickable, focusable and announced as expanded/collapsed
+ */
+const HeaderButton = styled.button `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+  margin: 0;
+  padding: 1rem;
+  border: 0;
+  border-radius: inherit;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 0.1em solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: -0.1em;
+  }
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const HeaderCell = styled.span `
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+`;
+const StyledChevron = styled(Chevron, { shouldForwardProp: p => p[0] !== '$' }) `
+  flex-shrink: 0;
+  color: ${({ theme }) => theme.color.accentSecondary.toString()};
+  transform: ${({ $isOpen }) => (!$isOpen ? 'rotate(180deg)' : 'rotate(0)')};
+  transition: transform 0.3s ease-out;
+`;
+const AccordionHeader = (props, ref) => {
+    const { children, isOpen, onOpen, headerID, contentID } = props, nativeProps = __rest(props, ["children", "isOpen", "onOpen", "headerID", "contentID"]);
+    return (React.createElement(StyledHeader, Object.assign({}, nativeProps, { ref: ref }),
+        React.createElement(HeaderButton, { type: "button", id: headerID, "aria-expanded": isOpen, "aria-controls": contentID, onClick: () => onOpen() },
+            React.createElement(HeaderCell, null, children),
+            React.createElement(StyledChevron, { "$isOpen": isOpen }))));
+};
+export default React.forwardRef(AccordionHeader);

package/esm/Accordion/Chevron.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const Path = styled.path `
+  fill: currentColor;
+`;
+const Chevron = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true }, props, { ref: ref }),
+    React.createElement(Path, { d: "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" })));
+export default React.forwardRef(Chevron);

package/esm/Accordion/index.js

@@ -0,0 +1,53 @@
+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 Container from './AccordionContainer';
+import Header from './AccordionHeader';
+import Content from './AccordionContent';
+import Actions from './AccordionActions';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+const Accordion = (props, ref) => {
+    const _a = useThemeProps('Accordion', props), { children, header, actions, isOpen, onOpen, overrides, noPadding, defaultOpened } = _a, nativeProps = __rest(_a, ["children", "header", "actions", "isOpen", "onOpen", "overrides", "noPadding", "defaultOpened"]);
+    const hasActions = typeof actions !== 'undefined' && actions !== null;
+    const hasHeader = typeof header !== 'undefined' && header !== null;
+    const [internalOpened, setInternalOpened] = React.useState(Boolean(defaultOpened));
+    const isControlled = typeof isOpen !== 'undefined';
+    const opened = isControlled ? Boolean(isOpen) : internalOpened;
+    const id = React.useId().replace(/:/g, '');
+    const headerID = `accordion-${id}-header`;
+    const contentID = `accordion-${id}-content`;
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+        Actions: (overrides === null || overrides === void 0 ? void 0 : overrides.Actions) || Actions,
+    }), [overrides]);
+    // Warn once, not on every render
+    React.useEffect(() => {
+        if (!hasHeader) {
+            console.warn('[@via-profit/ui-kit] Accordion component. The accordion without the «header» can not be opened by the user');
+        }
+    }, [hasHeader]);
+    // In the uncontrolled mode the own state is updated even when onOpen is passed
+    const handleToggle = () => {
+        if (!isControlled) {
+            setInternalOpened(!opened);
+        }
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen(!opened);
+    };
+    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }),
+        hasHeader && (React.createElement(overridesMap.Header, { isOpen: opened, onOpen: handleToggle, headerID: headerID, contentID: contentID }, header)),
+        React.createElement(overridesMap.Content, { id: contentID, "aria-labelledby": hasHeader ? headerID : undefined, noPadding: noPadding, isOpen: opened },
+            children,
+            hasActions && React.createElement(overridesMap.Actions, { noPadding: noPadding }, actions))));
+};
+export default React.forwardRef(Accordion);