@via-profit/ui-kit 0.10.1 → 0.12.0

package/esm/Badge/BadgeStyled.js

@@ -1,163 +1,2 @@
-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 { useTheme, css } from '@emotion/react';
-import Color from '../Color';
-import BadgeBase from './BadgeBase';
-import { themeFocusRing, BORDER_WIDTH } from '../ThemeProvider/tokens';
-const parseColor = (color, fallback) => {
-    try {
-        return Color.fromString(color);
-    }
-    catch (err) {
-        console.error(`invalid color value «${color}»`);
-        return fallback;
-    }
-};
-const getStandardColors = (color, theme) => {
-    switch (true) {
-        case color === 'primary':
-            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
-        case color === 'secondary':
-            return {
-                $color: theme.color.accentSecondaryContrast,
-                $background: theme.color.accentSecondary,
-            };
-        case typeof color === 'undefined':
-        case color === 'default':
-            return { $background: theme.color.surface.darken(10), $color: theme.color.textPrimary };
-        default: {
-            const $background = parseColor(String(color), theme.color.surface);
-            return {
-                $background,
-                $color: $background.getContrast(theme.color.textPrimary) > 5
-                    ? theme.color.textPrimary
-                    : theme.color.surface,
-            };
-        }
-    }
-};
-const getOutlinedColors = (color, theme) => {
-    switch (true) {
-        case color === 'primary':
-            return { $color: theme.color.accentPrimary, $background: theme.color.accentPrimary };
-        case color === 'secondary':
-            return { $color: theme.color.accentSecondary, $background: theme.color.accentSecondary };
-        case typeof color === 'undefined':
-        case color === 'default':
-            return {
-                $color: Color.fromString(theme.color.textPrimary.toString()),
-                $background: theme.color.textPrimary.lighten(100),
-            };
-        default: {
-            const c = parseColor(String(color), theme.color.textPrimary);
-            return { $color: c, $background: c };
-        }
-    }
-};
-/**
- * The pale background of the color and the text of the same hue: dark on the light theme,
- * light on the dark one. `$background` is the color itself
- */
-const getSoftColors = (color, theme) => {
-    const base = color === 'primary'
-        ? theme.color.accentPrimary
-        : color === 'secondary'
-            ? theme.color.accentSecondary
-            : typeof color === 'undefined' || color === 'default'
-                ? theme.color.textPrimary
-                : parseColor(String(color), theme.color.textPrimary);
-    return {
-        $background: base,
-        $color: theme.isDark ? base.lighten(60) : base.darken(60),
-    };
-};
-/**
- * Both variants are one styled component: switching the variant (e.g. a toggling filter badge)
- * must not remount the element, otherwise the focused badge loses the focus
- */
-const StyledBadge = styled(BadgeBase) `
-  border-style: solid;
-  border-width: ${BORDER_WIDTH};
-  border-color: ${({ $background }) => $background.toString()};
-  --badge-dot-color: ${({ $variant, $background, $color }) => ($variant === 'standard' ? $color : $background).toString()};
-
-  ${({ $variant, $color, $background }) => $variant === 'soft' &&
-    css `
-      color: ${$color.toString()};
-      background-color: ${$background.alpha(0.18).toString()};
-      border-color: transparent;
-
-      &:focus-visible {
-        outline-style: solid;
-        outline-width: 0.14em;
-        outline-color: ${$background.alpha(0.6).toString()};
-      }
-    `}
-
-  ${({ $variant, $color, $background, theme }) => $variant === 'soft'
-    ? ''
-    : $variant === 'outlined'
-        ? css `
-            color: ${$color.darken(30).toString()};
-            background-color: transparent;
-
-            &:focus-visible {
-              outline-style: solid;
-              outline-width: 0.14em;
-              outline-color: ${$background.rgbString()};
-            }
-          `
-        : css `
-            color: ${$color.toString()};
-            background-color: ${$background.toString()};
-
-            &:focus-visible {
-              outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
-            ? theme.color.textPrimary.toString()
-            : theme.color.accentPrimary.toString()};
-            }
-          `}
-
-  ${({ $clickable, $variant, $background }) => $clickable &&
-    css `
-      cursor: pointer;
-
-      &:hover {
-        ${$variant === 'soft'
-        ? css `
-              background-color: ${$background.alpha(0.3).toString()};
-            `
-        : $variant === 'outlined'
-            ? css `
-                background-color: ${$background.darken(20).alpha(0.1).toString()};
-              `
-            : css `
-                background-color: ${$background.darken(30).toString()};
-                border-color: ${$background.darken(30).toString()};
-              `}
-      }
-    `}
-  ${({ theme }) => themeFocusRing(theme)}
-`;
-const BadgeStyled = (props, ref) => {
-    const { children, color, variant = 'standard', onClick } = props, restProps = __rest(props, ["children", "color", "variant", "onClick"]);
-    const theme = useTheme();
-    const { $background, $color } = React.useMemo(() => variant === 'soft'
-        ? getSoftColors(color, theme)
-        : variant === 'outlined'
-            ? getOutlinedColors(color, theme)
-            : getStandardColors(color, theme), [color, variant, theme]);
-    return (React.createElement(StyledBadge, Object.assign({ "$variant": variant, "$clickable": typeof onClick === 'function', "$color": $color, "$background": $background, color: color, variant: variant, onClick: onClick }, restProps, { ref: ref }), children));
-};
-export default React.forwardRef(BadgeStyled);
+// Preserve the old import path without adding a wrapper around Badge
+export { default } from './index';

package/esm/Badge/index.js

@@ -1,5 +1,19 @@
+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 BadgeStyled from './BadgeStyled';
-// One component for both variants, so changing the variant does not remount the badge
-const Badge = (props, ref) => (React.createElement(BadgeStyled, Object.assign({}, props, { ref: ref })));
+import BadgeBase from './BadgeBase';
+// One component for all variants, so changing the variant does not remount the badge
+const Badge = (_a, ref) => {
+    var { variant = 'standard' } = _a, props = __rest(_a, ["variant"]);
+    return React.createElement(BadgeBase, Object.assign({}, props, { variant: variant, ref: ref }));
+};
 export default React.forwardRef(Badge);

package/esm/Popper/Popper.js

@@ -61,19 +61,24 @@ const Popper = (props, ref) => {
         }
     }, [actualPlacement]);
     const childrenMemo = React.useMemo(() => children, [children]);
-    const renderNode = React.useCallback(() => (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, pointerEvents: isVisible ? 'auto' : 'none' }), (positionStrategy === 'fixed' && {
-            position: 'fixed',
-        })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
-            popperRef.current = el;
-            if (ref) {
-                if (typeof ref === 'function') {
-                    ref(el);
+    const renderNode = React.useCallback(() => {
+        var _a, _b;
+        return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, 
+                // A hidden popper never intercepts the pointer; a visible one lets the caller opt out
+                pointerEvents: !isVisible ? 'none' : ((_b = (_a = nativeProps.style) === null || _a === void 0 ? void 0 : _a.pointerEvents) !== null && _b !== void 0 ? _b : 'auto') }), (positionStrategy === 'fixed' && {
+                position: 'fixed',
+            })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
+                popperRef.current = el;
+                if (ref) {
+                    if (typeof ref === 'function') {
+                        ref(el);
+                    }
+                    if (typeof ref === 'object') {
+                        ref.current = el;
+                    }
                 }
-                if (typeof ref === 'object') {
-                    ref.current = el;
-                }
-            }
-        } }), childrenMemo)), [
+            } }), childrenMemo));
+    }, [
         overridesMap,
         nativeProps,
         style,

package/esm/ThemeProvider/tokens.js

@@ -46,7 +46,7 @@ export const CONTROL_LINE_HEIGHT = '1.2em';
  */
 export const BORDER_WIDTH = '0.0625em';
 /**
- * The border of the buttons. The standard and the plain buttons have no border:
+ * The border of the buttons. The standard, plain and soft buttons have no border:
  * their padding is larger by this width, so all the variants have the same size
  */
 export const CONTROL_BORDER = BORDER_WIDTH;

package/esm/Toast/ToastContainer.js

@@ -7,7 +7,7 @@ import Icon from './ToastIcon';
 import CloseButton from './ToastCloseButton';
 import Action from './ToastAction';
 import ToastItem from './ToastItem';
-import { toastStore } from './store';
+import { toastStore, TOAST_DEFAULT_AUTO_CLOSE, } from './store';
 const POSITIONS = [
     'top-left',
     'top-center',
@@ -84,7 +84,7 @@ const useWindowFocused = () => {
     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 { containerId, position = 'top-right', autoClose = TOAST_DEFAULT_AUTO_CLOSE, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = props;
     const theme = useTheme();
     const allToasts = React.useSyncExternalStore(toastStore.subscribe, toastStore.getSnapshot, toastStore.getServerSnapshot);
     const toasts = React.useMemo(() => allToasts.filter(item => item.containerId === containerId), [allToasts, containerId]);

package/esm/Toast/ToastItem.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { TOAST_ANIMATION_MS } from './ToastCard';
-import { toast as toastApi, toastStore } from './store';
+import { toast as toastApi, toastStore, TOAST_DEFAULT_AUTO_CLOSE, } from './store';
 const Body = styled.div `
   flex: 1;
   min-width: 0;
@@ -23,12 +23,22 @@ const Actions = styled.div `
  * 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"]';
+/**
+ * The `autoClose` of the toast type: the own value of the type, then `default`, then 5000
+ */
+const getAutoClose = (autoClose, type) => {
+    var _a, _b;
+    if (typeof autoClose === 'number' || autoClose === false) {
+        return autoClose;
+    }
+    return (_b = (_a = autoClose[type]) !== null && _a !== void 0 ? _a : autoClose.default) !== null && _b !== void 0 ? _b : TOAST_DEFAULT_AUTO_CLOSE;
+};
 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 autoClose = isLoading ? false : ((_a = toast.autoClose) !== null && _a !== void 0 ? _a : getAutoClose(defaults.autoClose, type));
     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;

package/esm/Toast/store.js

@@ -9,6 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+/**
+ * The time to close the toast when `autoClose` does not set one
+ */
+export const TOAST_DEFAULT_AUTO_CLOSE = 5000;
 let toasts = [];
 const listeners = new Set();
 let idCounter = 0;

package/esm/Tooltip/index.js

@@ -40,7 +40,7 @@ const setRef = (ref, 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 { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, interactive = false, offset = 8, zIndex, id, overrides, } = props;
     const theme = useTheme();
     const generatedId = `tooltip-${React.useId().replace(/:/g, '')}`;
     const tooltipId = id || generatedId;
@@ -177,12 +177,15 @@ const Tooltip = props => {
     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);
+            // Without `interactive` the tooltip must not intercept the pointer: otherwise it
+            // blocks the elements under it and sticks under the cursor that moves across it
+            style: interactive ? undefined : { pointerEvents: 'none' }, onPointerEnter: interactive ? clearTimer : undefined, onPointerLeave: interactive
+                ? event => {
+                    if (isHoverPointer(event)) {
+                        hide(leaveDelay);
+                    }
                 }
-            } },
+                : undefined },
             React.createElement(overridesMap.Container, null,
                 title,
                 arrow && React.createElement(overridesMap.Arrow, { placement: actualPlacement })))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -150,6 +150,11 @@
       "import": "./esm/Badge/BadgeDeleteButton.js",
       "require": "./Badge/BadgeDeleteButton.js"
     },
+    "./Badge/BadgeDeleteIcon": {
+      "types": "./Badge/BadgeDeleteIcon.d.ts",
+      "import": "./esm/Badge/BadgeDeleteIcon.js",
+      "require": "./Badge/BadgeDeleteIcon.js"
+    },
     "./Badge/BadgeDot": {
       "types": "./Badge/BadgeDot.d.ts",
       "import": "./esm/Badge/BadgeDot.js",